diff --git a/src/DataTable/Cell.ts b/src/DataTable/Cell.ts index 5bb125ca..8e665dc3 100644 --- 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 index 968dcb23..bc6fda08 100644 --- 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 ( - + {React.cloneElement(contextComponent as React.ReactElement, { selectedCount })} ); } return ( - + {generateDefaultContextTitle(contextMessage, selectedCount, isRTL)} {contextActions} diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx index 4572a0f9..8488bd6d 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -359,9 +359,9 @@ function DataTable(props: TableProps): JSX.Element { )} @@ -370,8 +370,8 @@ function DataTable(props: TableProps): JSX.Element { {showTableHead() && ( - - + + {selectableRows && (showSelectAll ? ( diff --git a/src/DataTable/ExpanderRow.tsx b/src/DataTable/ExpanderRow.tsx index 3a7ac577..8aa6c770 100644 --- 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 = { @@ -31,7 +31,7 @@ function ExpanderRow({ const classNames = ['rdt_ExpanderRow', ...classNamesSplit].join(' '); return ( - + ); diff --git a/src/DataTable/Pagination.tsx b/src/DataTable/Pagination.tsx index 3e5ef11d..9e07b687 100644 --- 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} @@ -169,7 +169,7 @@ function Pagination({ aria-disabled={disabledLesser} onClick={handlePrevious} disabled={disabledLesser} - isRTL={isRTL} + $isRTL={isRTL} > {paginationIconPrevious} @@ -183,7 +183,7 @@ function Pagination({ aria-disabled={disabledGreater} onClick={handleNext} disabled={disabledGreater} - isRTL={isRTL} + $isRTL={isRTL} > {paginationIconNext} @@ -195,7 +195,7 @@ function Pagination({ aria-disabled={disabledGreater} onClick={handleLast} disabled={disabledGreater} - isRTL={isRTL} + $isRTL={isRTL} > {paginationIconLastPage} diff --git a/src/DataTable/ResponsiveWrapper.tsx b/src/DataTable/ResponsiveWrapper.tsx index fa830c45..c55bb5a7 100644 --- 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 index d6c48c8f..b12fe6d4 100644 --- a/src/DataTable/TableCell.tsx +++ b/src/DataTable/TableCell.tsx @@ -5,17 +5,17 @@ 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` 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; } `; @@ -23,9 +23,9 @@ const overflowCSS = css` const CellStyle = styled(CellExtended).attrs(props => ({ style: props.style, }))` - ${({ renderAsCell }) => !renderAsCell && overflowCSS}; - ${({ theme, isDragging }) => isDragging && theme.cells.draggingStyle}; - ${({ cellStyle }) => cellStyle}; + ${({ $renderAsCell }) => !$renderAsCell && overflowCSS}; + ${({ theme, $isDragging }) => $isDragging && theme.cells.draggingStyle}; + ${({ $cellStyle }) => $cellStyle}; `; interface CellProps { @@ -64,9 +64,9 @@ function Cell({ 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({ 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 index ea18c044..74f4337b 100644 --- a/src/DataTable/TableCellCheckbox.tsx +++ b/src/DataTable/TableCellCheckbox.tsx @@ -52,7 +52,7 @@ function TableCellCheckbox({ }; return ( - e.stopPropagation()} className="rdt_TableCell" noPadding> + e.stopPropagation()} className="rdt_TableCell" $noPadding> ({ disabled = false, }: CellExpanderProps): JSX.Element { return ( - e.stopPropagation()} noPadding> + e.stopPropagation()} $noPadding> ) => void; onDragOver: (e: React.DragEvent) => void; onDragEnd: (e: React.DragEvent) => void; @@ -16,7 +16,7 @@ interface ColumnStyleProps extends CellProps { const ColumnStyled = styled(CellExtended)` ${({ 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({ ({ 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 index d99164a5..8939e669 100644 --- a/src/DataTable/TableColCheckbox.tsx +++ b/src/DataTable/TableColCheckbox.tsx @@ -55,7 +55,7 @@ function ColumnCheckbox({ }; return ( - + ` 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 index 999ce468..bda23888 100644 --- 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; diff --git a/src/DataTable/TableRow.tsx b/src/DataTable/TableRow.tsx index 08d186ab..c0838246 100644 --- a/src/DataTable/TableRow.tsx +++ b/src/DataTable/TableRow.tsx @@ -9,10 +9,10 @@ import { STOP_PROP_TAG } from './constants'; import { TableRow, SingleRowAction, TableProps } from './types'; const highlightCSS = css<{ - highlightOnHover?: boolean; + $highlightOnHover?: boolean; }>` &:hover { - ${({ highlightOnHover, theme }) => highlightOnHover && theme.rows.highlightOnHoverStyle}; + ${({ $highlightOnHover, theme }) => $highlightOnHover && theme.rows.highlightOnHoverStyle}; } `; @@ -25,11 +25,11 @@ const pointerCSS = css` const TableRowStyle = styled.div.attrs(props => ({ style: props.style, }))<{ - dense?: boolean; - highlightOnHover?: boolean; - pointerOnHover?: boolean; - selected?: boolean; - striped?: boolean; + $dense?: boolean; + $highlightOnHover?: boolean; + $pointerOnHover?: boolean; + $selected?: boolean; + $striped?: boolean; }>` display: flex; align-items: stretch; @@ -37,11 +37,11 @@ const TableRowStyle = styled.div.attrs(props => ({ width: 100%; box-sizing: border-box; ${({ theme }) => theme.rows.style}; - ${({ dense, theme }) => dense && theme.rows.denseStyle}; - ${({ striped, theme }) => striped && theme.rows.stripedStyle}; - ${({ highlightOnHover }) => highlightOnHover && highlightCSS}; - ${({ pointerOnHover }) => pointerOnHover && pointerCSS}; - ${({ selected, theme }) => selected && theme.rows.selectedHighlightStyle}; + ${({ $dense, theme }) => $dense && theme.rows.denseStyle}; + ${({ $striped, theme }) => $striped && theme.rows.stripedStyle}; + ${({ $highlightOnHover }) => $highlightOnHover && highlightCSS}; + ${({ $pointerOnHover }) => $pointerOnHover && pointerCSS}; + ${({ $selected, theme }) => $selected && theme.rows.selectedHighlightStyle}; `; type DProps = Pick< @@ -198,16 +198,16 @@ function Row({ {selectableRows && ( diff --git a/src/DataTable/TableSubheader.tsx b/src/DataTable/TableSubheader.tsx index 4905ce4b..4c4e3abb 100644 --- a/src/DataTable/TableSubheader.tsx +++ b/src/DataTable/TableSubheader.tsx @@ -11,7 +11,7 @@ type AlignItems = 'center' | 'left' | 'right'; const SubheaderWrapper = styled.header<{ align: AlignItems; - wrapContent: boolean; + $wrapContent: boolean; }>` position: relative; display: flex; @@ -21,7 +21,7 @@ const SubheaderWrapper = styled.header<{ padding: 4px 16px 4px 24px; width: 100%; justify-content: ${({ align }) => alignMap[align]}; - flex-wrap: ${({ wrapContent }) => (wrapContent ? 'wrap' : 'nowrap')}; + flex-wrap: ${({ $wrapContent }) => ($wrapContent ? 'wrap' : 'nowrap')}; ${({ theme }) => theme.subHeader.style} `; @@ -32,7 +32,7 @@ type SubheaderProps = { }; const Subheader = ({ align = 'right', wrapContent = true, ...rest }: SubheaderProps): JSX.Element => ( - + ); export default Subheader; diff --git a/src/icons/NativeSortIcon.tsx b/src/icons/NativeSortIcon.tsx index 1f5ba416..c499b473 100644 --- a/src/icons/NativeSortIcon.tsx +++ b/src/icons/NativeSortIcon.tsx @@ -3,15 +3,15 @@ import styled from 'styled-components'; import { SortOrder } from '../DataTable/types'; const Icon = styled.span<{ - sortActive: boolean; - sortDirection: SortOrder; + $sortActive: boolean; + $sortDirection: SortOrder; }>` padding: 2px; color: inherit; flex-grow: 0; flex-shrink: 0; - ${({ sortActive }) => (sortActive ? 'opacity: 1' : 'opacity: 0')}; - ${({ sortDirection }) => sortDirection === 'desc' && 'transform: rotate(180deg)'}; + ${({ $sortActive }) => ($sortActive ? 'opacity: 1' : 'opacity: 0')}; + ${({ $sortDirection }) => $sortDirection === 'desc' && 'transform: rotate(180deg)'}; `; interface NativeSortIconProps { @@ -20,7 +20,7 @@ interface NativeSortIconProps { } const NativeSortIcon: React.FC = ({ sortActive, sortDirection }) => ( - + ▲ );