Skip to content

Commit 23103c5

Browse files
HendrikPetertjeHendrikPetertje
authored
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
1 parent 5844212 commit 23103c5

16 files changed

+84
-84
lines changed

‎src/DataTable/Cell.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { media } from './media';
33
import { TableColumnBase } from './types';
44

55
export const CellBase = styled.div<{
6-
headCell?: boolean;
7-
noPadding?: boolean;
6+
$headCell?: boolean;
7+
$noPadding?: boolean;
88
}>`
99
position: relative;
1010
display: flex;
1111
align-items: center;
1212
box-sizing: border-box;
1313
line-height: normal;
14-
${({ theme, headCell }) => theme[headCell ? 'headCells' : 'cells'].style};
15-
${({ noPadding }) => noPadding && 'padding: 0'};
14+
${({ theme, $headCell }) => theme[$headCell ? 'headCells' : 'cells'].style};
15+
${({ $noPadding }) => $noPadding && 'padding: 0'};
1616
`;
1717

1818
export type CellProps = Pick<

‎src/DataTable/ContextMenu.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const ContextActions = styled.div`
2222
`;
2323

2424
const ContextMenuStyle = styled.div<{
25-
rtl?: boolean;
26-
visible: boolean;
25+
$rtl?: boolean;
26+
$visible: boolean;
2727
}>`
2828
position: absolute;
2929
top: 0;
@@ -35,9 +35,9 @@ const ContextMenuStyle = styled.div<{
3535
align-items: center;
3636
justify-content: space-between;
3737
display: flex;
38-
${({ rtl }) => rtl && 'direction: rtl'};
38+
${({ $rtl }) => $rtl && 'direction: rtl'};
3939
${({ theme }) => theme.contextMenu.style};
40-
${({ theme, visible }) => visible && theme.contextMenu.activeStyle};
40+
${({ theme, $visible }) => $visible && theme.contextMenu.activeStyle};
4141
`;
4242

4343
const generateDefaultContextTitle = (contextMessage: ContextMessage, selectedCount: number, rtl: boolean) => {
@@ -75,14 +75,14 @@ function ContextMenu({
7575

7676
if (contextComponent) {
7777
return (
78-
<ContextMenuStyle visible={visible}>
78+
<ContextMenuStyle $visible={visible}>
7979
{React.cloneElement(contextComponent as React.ReactElement, { selectedCount })}
8080
</ContextMenuStyle>
8181
);
8282
}
8383

8484
return (
85-
<ContextMenuStyle visible={visible} rtl={isRTL}>
85+
<ContextMenuStyle $visible={visible} $rtl={isRTL}>
8686
<Title>{generateDefaultContextTitle(contextMessage, selectedCount, isRTL)}</Title>
8787
<ContextActions>{contextActions}</ContextActions>
8888
</ContextMenuStyle>

‎src/DataTable/DataTable.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -359,9 +359,9 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
359359
)}
360360

361361
<ResponsiveWrapper
362-
responsive={responsive}
363-
fixedHeader={fixedHeader}
364-
fixedHeaderScrollHeight={fixedHeaderScrollHeight}
362+
$responsive={responsive}
363+
$fixedHeader={fixedHeader}
364+
$fixedHeaderScrollHeight={fixedHeaderScrollHeight}
365365
className={className}
366366
{...wrapperProps}
367367
>
@@ -370,8 +370,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
370370

371371
<Table disabled={disabled} className="rdt_Table" role="table">
372372
{showTableHead() && (
373-
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
374-
<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
373+
<Head className="rdt_TableHead" role="rowgroup" $fixedHeader={fixedHeader}>
374+
<HeadRow className="rdt_TableHeadRow" role="row" $dense={dense}>
375375
{selectableRows &&
376376
(showSelectAll ? (
377377
<CellBase style={{ flex: '0 0 48px' }} />

‎src/DataTable/ExpanderRow.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import styled, { CSSObject } from 'styled-components';
33
import { ComponentProps, ExpandableRowsComponent } from './types';
44

55
const ExpanderRowStyle = styled.div<{
6-
extendedRowStyle: CSSObject;
6+
$extendedRowStyle: CSSObject;
77
}>`
88
width: 100%;
99
box-sizing: border-box;
1010
${({ theme }) => theme.expanderRow.style};
11-
${({ extendedRowStyle }) => extendedRowStyle};
11+
${({ $extendedRowStyle }) => $extendedRowStyle};
1212
`;
1313

1414
type ExpanderRowProps<T> = {
@@ -31,7 +31,7 @@ function ExpanderRow<T>({
3131
const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' ');
3232

3333
return (
34-
<ExpanderRowStyle className={classNames} extendedRowStyle={extendedRowStyle}>
34+
<ExpanderRowStyle className={classNames} $extendedRowStyle={extendedRowStyle}>
3535
<ExpanderComponent data={data} {...expanderComponentProps} />
3636
</ExpanderRowStyle>
3737
);

‎src/DataTable/Pagination.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@ const PaginationWrapper = styled.nav`
3030
`;
3131

3232
const Button = styled.button<{
33-
isRTL: boolean;
33+
$isRTL: boolean;
3434
}>`
3535
position: relative;
3636
display: block;
3737
user-select: none;
3838
border: none;
3939
${({ theme }) => theme.pagination.pageButtonsStyle};
40-
${({ isRTL }) => isRTL && 'transform: scale(-1, -1)'};
40+
${({ $isRTL }) => $isRTL && 'transform: scale(-1, -1)'};
4141
`;
4242

4343
const PageList = styled.div`
@@ -157,7 +157,7 @@ function Pagination({
157157
aria-disabled={disabledLesser}
158158
onClick={handleFirst}
159159
disabled={disabledLesser}
160-
isRTL={isRTL}
160+
$isRTL={isRTL}
161161
>
162162
{paginationIconFirstPage}
163163
</Button>
@@ -169,7 +169,7 @@ function Pagination({
169169
aria-disabled={disabledLesser}
170170
onClick={handlePrevious}
171171
disabled={disabledLesser}
172-
isRTL={isRTL}
172+
$isRTL={isRTL}
173173
>
174174
{paginationIconPrevious}
175175
</Button>
@@ -183,7 +183,7 @@ function Pagination({
183183
aria-disabled={disabledGreater}
184184
onClick={handleNext}
185185
disabled={disabledGreater}
186-
isRTL={isRTL}
186+
$isRTL={isRTL}
187187
>
188188
{paginationIconNext}
189189
</Button>
@@ -195,7 +195,7 @@ function Pagination({
195195
aria-disabled={disabledGreater}
196196
onClick={handleLast}
197197
disabled={disabledGreater}
198-
isRTL={isRTL}
198+
$isRTL={isRTL}
199199
>
200200
{paginationIconLastPage}
201201
</Button>

‎src/DataTable/ResponsiveWrapper.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,27 @@ import styled, { css } from 'styled-components';
77
*/
88

99
const ResponsiveWrapper = styled.div<{
10-
responsive: boolean;
11-
fixedHeader?: boolean;
12-
fixedHeaderScrollHeight?: string;
10+
$responsive: boolean;
11+
$fixedHeader?: boolean;
12+
$fixedHeaderScrollHeight?: string;
1313
}>`
1414
position: relative;
1515
width: 100%;
1616
border-radius: inherit;
17-
${({ responsive, fixedHeader }) =>
18-
responsive &&
17+
${({ $responsive, $fixedHeader }) =>
18+
$responsive &&
1919
css`
2020
overflow-x: auto;
2121
2222
// hidden prevents vertical scrolling in firefox when fixedHeader is disabled
23-
overflow-y: ${fixedHeader ? 'auto' : 'hidden'};
23+
overflow-y: ${$fixedHeader ? 'auto' : 'hidden'};
2424
min-height: 0;
2525
`};
2626
27-
${({ fixedHeader = false, fixedHeaderScrollHeight = '100vh' }) =>
28-
fixedHeader &&
27+
${({ $fixedHeader = false, $fixedHeaderScrollHeight = '100vh' }) =>
28+
$fixedHeader &&
2929
css`
30-
max-height: ${fixedHeaderScrollHeight};
30+
max-height: ${$fixedHeaderScrollHeight};
3131
-webkit-overflow-scrolling: touch;
3232
`};
3333

‎src/DataTable/TableCell.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,27 @@ import { getProperty, getConditionalStyle } from './util';
55
import { TableColumn } from './types';
66

77
interface CellStyleProps {
8-
renderAsCell: boolean | undefined;
9-
wrapCell: boolean | undefined;
10-
allowOverflow: boolean | undefined;
11-
cellStyle: CSSObject | undefined;
12-
isDragging: boolean;
8+
$renderAsCell: boolean | undefined;
9+
$wrapCell: boolean | undefined;
10+
$allowOverflow: boolean | undefined;
11+
$cellStyle: CSSObject | undefined;
12+
$isDragging: boolean;
1313
}
1414

1515
const overflowCSS = css<CellStyleProps>`
1616
div:first-child {
17-
white-space: ${({ wrapCell }) => (wrapCell ? 'normal' : 'nowrap')};
18-
overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
17+
white-space: ${({ $wrapCell }) => ($wrapCell ? 'normal' : 'nowrap')};
18+
overflow: ${({ $allowOverflow }) => ($allowOverflow ? 'visible' : 'hidden')};
1919
text-overflow: ellipsis;
2020
}
2121
`;
2222

2323
const CellStyle = styled(CellExtended).attrs(props => ({
2424
style: props.style,
2525
}))<CellStyleProps>`
26-
${({ renderAsCell }) => !renderAsCell && overflowCSS};
27-
${({ theme, isDragging }) => isDragging && theme.cells.draggingStyle};
28-
${({ cellStyle }) => cellStyle};
26+
${({ $renderAsCell }) => !$renderAsCell && overflowCSS};
27+
${({ theme, $isDragging }) => $isDragging && theme.cells.draggingStyle};
28+
${({ $cellStyle }) => $cellStyle};
2929
`;
3030

3131
interface CellProps<T> {
@@ -64,9 +64,9 @@ function Cell<T>({
6464
role="cell"
6565
className={classNames}
6666
data-tag={dataTag}
67-
cellStyle={column.style}
68-
renderAsCell={!!column.cell}
69-
allowOverflow={column.allowOverflow}
67+
$cellStyle={column.style}
68+
$renderAsCell={!!column.cell}
69+
$allowOverflow={column.allowOverflow}
7070
button={column.button}
7171
center={column.center}
7272
compact={column.compact}
@@ -76,9 +76,9 @@ function Cell<T>({
7676
minWidth={column.minWidth}
7777
right={column.right}
7878
width={column.width}
79-
wrapCell={column.wrap}
79+
$wrapCell={column.wrap}
8080
style={style}
81-
isDragging={isDragging}
81+
$isDragging={isDragging}
8282
onDragStart={onDragStart}
8383
onDragOver={onDragOver}
8484
onDragEnd={onDragEnd}

‎src/DataTable/TableCellCheckbox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ function TableCellCheckbox<T>({
5252
};
5353

5454
return (
55-
<TableCellCheckboxStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} className="rdt_TableCell" noPadding>
55+
<TableCellCheckboxStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} className="rdt_TableCell" $noPadding>
5656
<Checkbox
5757
name={name}
5858
component={selectableRowsComponent}

‎src/DataTable/TableCellExpander.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function CellExpander<T>({
2929
disabled = false,
3030
}: CellExpanderProps<T>): JSX.Element {
3131
return (
32-
<CellExpanderStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} noPadding>
32+
<CellExpanderStyle onClick={(e: React.MouseEvent) => e.stopPropagation()} $noPadding>
3333
<ExpanderButton
3434
id={id}
3535
row={row}

‎src/DataTable/TableCol.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { equalizeId } from './util';
66
import { TableColumn, SortAction, SortOrder } from './types';
77

88
interface ColumnStyleProps extends CellProps {
9-
isDragging?: boolean;
9+
$isDragging?: boolean;
1010
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
1111
onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
1212
onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
@@ -16,7 +16,7 @@ interface ColumnStyleProps extends CellProps {
1616

1717
const ColumnStyled = styled(CellExtended)<ColumnStyleProps>`
1818
${({ button }) => button && 'text-align: center'};
19-
${({ theme, isDragging }) => isDragging && theme.headCells.draggingStyle};
19+
${({ theme, $isDragging }) => $isDragging && theme.headCells.draggingStyle};
2020
`;
2121

2222
interface ColumnSortableProps {
@@ -186,7 +186,7 @@ function TableCol<T>({
186186
<ColumnStyled
187187
data-column-id={column.id}
188188
className="rdt_TableCol"
189-
headCell
189+
$headCell
190190
allowOverflow={column.allowOverflow}
191191
button={column.button}
192192
compact={column.compact}
@@ -198,7 +198,7 @@ function TableCol<T>({
198198
center={column.center}
199199
width={column.width}
200200
draggable={column.reorder}
201-
isDragging={equalizeId(column.id, draggingColumnId)}
201+
$isDragging={equalizeId(column.id, draggingColumnId)}
202202
onDragStart={onDragStart}
203203
onDragOver={onDragOver}
204204
onDragEnd={onDragEnd}

0 commit comments

Comments
 (0)