Fix unrecognized prop errors in React (#1154)

React does not like receiving object props that don't match any HTML spec. Styled components is dealing with this problem by prefixing all non-standard properties one might want to send in with dollar signs as `$transientProps` You can read more about it here: https://styled-components.com/docs/api#transient-props
jbetancur · Aug 24, 2023 · 23103c5 · 23103c5
1 parent 5844212
commit 23103c5
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 84 deletions.
diff --git a/src/DataTable/Cell.ts b/src/DataTable/Cell.ts
@@ -3,16 +3,16 @@ import { media } from './media';
 import { TableColumnBase } from './types';
 
 export const CellBase = styled.div<{
-	headCell?: boolean;
-	noPadding?: boolean;
+	$headCell?: boolean;
+	$noPadding?: boolean;
 }>`
 	position: relative;
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
 	line-height: normal;
-	${({ theme, headCell }) => theme[headCell ? 'headCells' : 'cells'].style};
-	${({ noPadding }) => noPadding && 'padding: 0'};
+	${({ theme, $headCell }) => theme[$headCell ? 'headCells' : 'cells'].style};
+	${({ $noPadding }) => $noPadding && 'padding: 0'};
 `;
 
 export type CellProps = Pick<

diff --git a/src/DataTable/ContextMenu.tsx b/src/DataTable/ContextMenu.tsx
@@ -22,8 +22,8 @@ const ContextActions = styled.div`
 `;
 
 const ContextMenuStyle = styled.div<{
-	rtl?: boolean;
-	visible: boolean;
+	$rtl?: boolean;
+	$visible: boolean;
 }>`
 	position: absolute;
 	top: 0;
@@ -35,9 +35,9 @@ const ContextMenuStyle = styled.div<{
 	align-items: center;
 	justify-content: space-between;
 	display: flex;
-	${({ rtl }) => rtl && 'direction: rtl'};
+	${({ $rtl }) => $rtl && 'direction: rtl'};
 	${({ theme }) => theme.contextMenu.style};
-	${({ theme, visible }) => visible && theme.contextMenu.activeStyle};
+	${({ theme, $visible }) => $visible && theme.contextMenu.activeStyle};
 `;
 
 const generateDefaultContextTitle = (contextMessage: ContextMessage, selectedCount: number, rtl: boolean) => {
@@ -75,14 +75,14 @@ function ContextMenu({
 
 	if (contextComponent) {
 		return (
-			<ContextMenuStyle visible={visible}>
+			<ContextMenuStyle $visible={visible}>
 				{React.cloneElement(contextComponent as React.ReactElement, { selectedCount })}
 			</ContextMenuStyle>
 		);
 	}
 
 	return (
-		<ContextMenuStyle visible={visible} rtl={isRTL}>
+		<ContextMenuStyle $visible={visible} $rtl={isRTL}>
 			<Title>{generateDefaultContextTitle(contextMessage, selectedCount, isRTL)}</Title>
 			<ContextActions>{contextActions}</ContextActions>
 		</ContextMenuStyle>

diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
@@ -359,9 +359,9 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 			)}
 
 			<ResponsiveWrapper
-				responsive={responsive}
-				fixedHeader={fixedHeader}
-				fixedHeaderScrollHeight={fixedHeaderScrollHeight}
+				$responsive={responsive}
+				$fixedHeader={fixedHeader}
+				$fixedHeaderScrollHeight={fixedHeaderScrollHeight}
 				className={className}
 				{...wrapperProps}
 			>
@@ -370,8 +370,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 
 					<Table disabled={disabled} className="rdt_Table" role="table">
 						{showTableHead() && (
-							<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
-								<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
+							<Head className="rdt_TableHead" role="rowgroup" $fixedHeader={fixedHeader}>
+								<HeadRow className="rdt_TableHeadRow" role="row" $dense={dense}>
 									{selectableRows &&
 										(showSelectAll ? (
 											<CellBase style={{ flex: '0 0 48px' }} />

diff --git a/src/DataTable/ExpanderRow.tsx b/src/DataTable/ExpanderRow.tsx
@@ -3,12 +3,12 @@ import styled, { CSSObject } from 'styled-components';
 import { ComponentProps, ExpandableRowsComponent } from './types';
 
 const ExpanderRowStyle = styled.div<{
-	extendedRowStyle: CSSObject;
+	$extendedRowStyle: CSSObject;
 }>`
 	width: 100%;
 	box-sizing: border-box;
 	${({ theme }) => theme.expanderRow.style};
-	${({ extendedRowStyle }) => extendedRowStyle};
+	${({ $extendedRowStyle }) => $extendedRowStyle};
 `;
 
 type ExpanderRowProps<T> = {
@@ -31,7 +31,7 @@ function ExpanderRow<T>({
 	const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');
 
 	return (
-		<ExpanderRowStyle className={classNames} extendedRowStyle={extendedRowStyle}>
+		<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle}>
 			<ExpanderComponent data={data} {...expanderComponentProps} />
 		</ExpanderRowStyle>
 	);

diff --git a/src/DataTable/Pagination.tsx b/src/DataTable/Pagination.tsx
@@ -30,14 +30,14 @@ const PaginationWrapper = styled.nav`
 `;
 
 const Button = styled.button<{
-	isRTL: boolean;
+	$isRTL: boolean;
 }>`
 	position: relative;
 	display: block;
 	user-select: none;
 	border: none;
 	${({ theme }) => theme.pagination.pageButtonsStyle};
-	${({ isRTL }) => isRTL && 'transform: scale(-1, -1)'};
+	${({ $isRTL }) => $isRTL && 'transform: scale(-1, -1)'};
 `;
 
 const PageList = styled.div`
@@ -157,7 +157,7 @@ function Pagination({
 					aria-disabled={disabledLesser}
 					onClick={handleFirst}
 					disabled={disabledLesser}
-					isRTL={isRTL}
+					$isRTL={isRTL}
 				>
 					{paginationIconFirstPage}
 				</Button>
@@ -169,7 +169,7 @@ function Pagination({
 					aria-disabled={disabledLesser}
 					onClick={handlePrevious}
 					disabled={disabledLesser}
-					isRTL={isRTL}
+					$isRTL={isRTL}
 				>
 					{paginationIconPrevious}
 				</Button>
@@ -183,7 +183,7 @@ function Pagination({
 					aria-disabled={disabledGreater}
 					onClick={handleNext}
 					disabled={disabledGreater}
-					isRTL={isRTL}
+					$isRTL={isRTL}
 				>
 					{paginationIconNext}
 				</Button>
@@ -195,7 +195,7 @@ function Pagination({
 					aria-disabled={disabledGreater}
 					onClick={handleLast}
 					disabled={disabledGreater}
-					isRTL={isRTL}
+					$isRTL={isRTL}
 				>
 					{paginationIconLastPage}
 				</Button>

diff --git a/src/DataTable/ResponsiveWrapper.tsx b/src/DataTable/ResponsiveWrapper.tsx
@@ -7,27 +7,27 @@ import styled, { css } from 'styled-components';
 */
 
 const ResponsiveWrapper = styled.div<{
-	responsive: boolean;
-	fixedHeader?: boolean;
-	fixedHeaderScrollHeight?: string;
+	$responsive: boolean;
+	$fixedHeader?: boolean;
+	$fixedHeaderScrollHeight?: string;
 }>`
 	position: relative;
 	width: 100%;
 	border-radius: inherit;
-	${({ responsive, fixedHeader }) =>
-		responsive &&
+	${({ $responsive, $fixedHeader }) =>
+		$responsive &&
 		css`
 			overflow-x: auto;
 
 			// hidden prevents vertical scrolling in firefox when fixedHeader is disabled
-			overflow-y: ${fixedHeader ? 'auto' : 'hidden'};
+			overflow-y: ${$fixedHeader ? 'auto' : 'hidden'};
 			min-height: 0;
 		`};
 
-	${({ fixedHeader = false, fixedHeaderScrollHeight = '100vh' }) =>
-		fixedHeader &&
+	${({ $fixedHeader = false, $fixedHeaderScrollHeight = '100vh' }) =>
+		$fixedHeader &&
 		css`
-			max-height: ${fixedHeaderScrollHeight};
+			max-height: ${$fixedHeaderScrollHeight};
 			-webkit-overflow-scrolling: touch;
 		`};
 

diff --git a/src/DataTable/TableCell.tsx b/src/DataTable/TableCell.tsx
@@ -5,27 +5,27 @@ import { getProperty, getConditionalStyle } from './util';
 import { TableColumn } from './types';
 
 interface CellStyleProps {
-	renderAsCell: boolean | undefined;
-	wrapCell: boolean | undefined;
-	allowOverflow: boolean | undefined;
-	cellStyle: CSSObject | undefined;
-	isDragging: boolean;
+	$renderAsCell: boolean | undefined;
+	$wrapCell: boolean | undefined;
+	$allowOverflow: boolean | undefined;
+	$cellStyle: CSSObject | undefined;
+	$isDragging: boolean;
 }
 
 const overflowCSS = css<CellStyleProps>`
 	div:first-child {
-		white-space: ${({ wrapCell }) => (wrapCell ? 'normal' : 'nowrap')};
-		overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
+		white-space: ${({ $wrapCell }) => ($wrapCell ? 'normal' : 'nowrap')};
+		overflow: ${({ $allowOverflow }) => ($allowOverflow ? 'visible' : 'hidden')};
 		text-overflow: ellipsis;
 	}
 `;
 
 const CellStyle = styled(CellExtended).attrs(props => ({
 	style: props.style,
 }))<CellStyleProps>`
-	${({ renderAsCell }) => !renderAsCell && overflowCSS};
-	${({ theme, isDragging }) => isDragging && theme.cells.draggingStyle};
-	${({ cellStyle }) => cellStyle};
+	${({ $renderAsCell }) => !$renderAsCell && overflowCSS};
+	${({ theme, $isDragging }) => $isDragging && theme.cells.draggingStyle};
+	${({ $cellStyle }) => $cellStyle};
 `;
 
 interface CellProps<T> {
@@ -64,9 +64,9 @@ function Cell<T>({
 			role="cell"
 			className={classNames}
 			data-tag={dataTag}
-			cellStyle={column.style}
-			renderAsCell={!!column.cell}
-			allowOverflow={column.allowOverflow}
+			$cellStyle={column.style}
+			$renderAsCell={!!column.cell}
+			$allowOverflow={column.allowOverflow}
 			button={column.button}
 			center={column.center}
 			compact={column.compact}
@@ -76,9 +76,9 @@ function Cell<T>({
 			minWidth={column.minWidth}
 			right={column.right}
 			width={column.width}
-			wrapCell={column.wrap}
+			$wrapCell={column.wrap}
 			style={style}
-			isDragging={isDragging}
+			$isDragging={isDragging}
 			onDragStart={onDragStart}
 			onDragOver={onDragOver}
 			onDragEnd={onDragEnd}

diff --git a/src/DataTable/TableCellCheckbox.tsx b/src/DataTable/TableCellCheckbox.tsx
@@ -52,7 +52,7 @@ function TableCellCheckbox<T>({
 	};
 
 	return (
-		<TableCellCheckboxStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} className="rdt_TableCell" noPadding>
+		<TableCellCheckboxStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} className="rdt_TableCell" $noPadding>
 			<Checkbox
 				name={name}
 				component={selectableRowsComponent}

diff --git a/src/DataTable/TableCellExpander.tsx b/src/DataTable/TableCellExpander.tsx
@@ -29,7 +29,7 @@ function CellExpander<T>({
 	disabled = false,
 }: CellExpanderProps<T>): JSX.Element {
 	return (
-		<CellExpanderStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} noPadding>
+		<CellExpanderStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} $noPadding>
 			<ExpanderButton
 				id={id}
 				row={row}

diff --git a/src/DataTable/TableCol.tsx b/src/DataTable/TableCol.tsx
@@ -6,7 +6,7 @@ import { equalizeId } from './util';
 import { TableColumn, SortAction, SortOrder } from './types';
 
 interface ColumnStyleProps extends CellProps {
-	isDragging?: boolean;
+	$isDragging?: boolean;
 	onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
 	onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
 	onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
@@ -16,7 +16,7 @@ interface ColumnStyleProps extends CellProps {
 
 const ColumnStyled = styled(CellExtended)<ColumnStyleProps>`
 	${({ button }) => button && 'text-align: center'};
-	${({ theme, isDragging }) => isDragging && theme.headCells.draggingStyle};
+	${({ theme, $isDragging }) => $isDragging && theme.headCells.draggingStyle};
 `;
 
 interface ColumnSortableProps {
@@ -186,7 +186,7 @@ function TableCol<T>({
 		<ColumnStyled
 			data-column-id={column.id}
 			className="rdt_TableCol"
-			headCell
+			$headCell
 			allowOverflow={column.allowOverflow}
 			button={column.button}
 			compact={column.compact}
@@ -198,7 +198,7 @@ function TableCol<T>({
 			center={column.center}
 			width={column.width}
 			draggable={column.reorder}
-			isDragging={equalizeId(column.id, draggingColumnId)}
+			$isDragging={equalizeId(column.id, draggingColumnId)}
 			onDragStart={onDragStart}
 			onDragOver={onDragOver}
 			onDragEnd={onDragEnd}

diff --git a/src/DataTable/TableColCheckbox.tsx b/src/DataTable/TableColCheckbox.tsx
@@ -55,7 +55,7 @@ function ColumnCheckbox<T>({
 	};
 
 	return (
-		<ColumnStyle className="rdt_TableCol" headCell={headCell} noPadding>
+		<ColumnStyle className="rdt_TableCol" $headCell={headCell} $noPadding>
 			<Checkbox
 				name="select-all-rows"
 				component={selectableRowsComponent}

diff --git a/src/DataTable/TableHead.tsx b/src/DataTable/TableHead.tsx
@@ -8,11 +8,11 @@ const fixedCSS = css`
 `;
 
 const Head = styled.div<{
-	fixedHeader?: boolean;
+	$fixedHeader?: boolean;
 }>`
 	display: flex;
 	width: 100%;
-	${({ fixedHeader }) => fixedHeader && fixedCSS};
+	${({ $fixedHeader }) => $fixedHeader && fixedCSS};
 	${({ theme }) => theme.head.style};
 `;
 

diff --git a/src/DataTable/TableHeadRow.tsx b/src/DataTable/TableHeadRow.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 const HeadRow = styled.div<{
-	dense?: boolean;
+	$dense?: boolean;
 	disabled?: boolean;
 }>`
 	display: flex;
 	align-items: stretch;
 	width: 100%;
 	${({ theme }) => theme.headRow.style};
-	${({ dense, theme }) => dense && theme.headRow.denseStyle};
+	${({ $dense, theme }) => $dense && theme.headRow.denseStyle};
 `;
 
 export default HeadRow;