From bc24209ae219ed3f3fa0c406993d9a1062e75ad8 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Wed, 27 Sep 2023 17:11:55 +0100 Subject: [PATCH 1/3] fix comment style on columns.util --- packages/mantine-react-table/src/columns.utils.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mantine-react-table/src/columns.utils.module.css b/packages/mantine-react-table/src/columns.utils.module.css index e0ee6d3f0..b3e91a1dc 100644 --- a/packages/mantine-react-table/src/columns.utils.module.css +++ b/packages/mantine-react-table/src/columns.utils.module.css @@ -3,7 +3,7 @@ --width: calc(var(--header-id) * 1px); --bg-color: color-mix(in srgb, var(--mantine-color-dark-7) .2%, var(--mantine-color-black)); background-color: inherit; - // Not very sure about these attribute gymnastics... + /* Not very sure about these attribute gymnastics... */ [data-selected="true"] { background-color: rgba(var(--mantine-primary-color-filled), 0.1); } From bd54261b8a38fe52af3b61f4d419ac5631ac6213 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Wed, 27 Sep 2023 17:44:30 +0100 Subject: [PATCH 2/3] fix: re-add getprimarycolor and getprimaryshade utilities --- packages/mantine-react-table/src/column.utils.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts index c9954024c..cb2a464db 100644 --- a/packages/mantine-react-table/src/column.utils.ts +++ b/packages/mantine-react-table/src/column.utils.ts @@ -15,6 +15,7 @@ import { type MantineTheme, } from '@mantine/core'; import { + type MantineShade, type MRT_Column, type MRT_ColumnDef, type MRT_ColumnOrderState, @@ -390,6 +391,17 @@ export const MRT_DefaultDisplayColumn = { export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_'); +export const getPrimaryShade = (theme: MantineTheme): number => + (theme.colorScheme === 'dark' + ? // @ts-ignore + theme.primaryShade?.dark ?? theme.primaryShade + : // @ts-ignore + theme.primaryShade?.light ?? theme.primaryShade) ?? 7; + +export const getPrimaryColor = ( + theme: MantineTheme, + shade?: MantineShade, +): string => theme.colors[theme.primaryColor][shade ?? getPrimaryShade(theme)]; export const flexRender = _flexRender as ( Comp: Renderable, props: any, From 0048026bcd631e7700db84c39df6e27c65a687ad Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Wed, 27 Sep 2023 18:52:32 +0100 Subject: [PATCH 3/3] fix: storybook runtime errors --- packages/mantine-react-table/src/column.utils.ts | 3 ++- packages/mantine-react-table/src/footer/MRT_TableFooter.tsx | 3 +-- .../mantine-react-table/src/footer/MRT_TableFooterCell.tsx | 5 +++-- .../mantine-react-table/src/footer/MRT_TableFooterRow.tsx | 3 +-- packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx | 3 +-- packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx | 3 +-- 6 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts index cb2a464db..e516aabf8 100644 --- a/packages/mantine-react-table/src/column.utils.ts +++ b/packages/mantine-react-table/src/column.utils.ts @@ -12,6 +12,7 @@ import { type BoxProps, type CssVariable, type CssVariables, + type MantineStyleProp, type MantineTheme, } from '@mantine/core'; import { @@ -300,7 +301,7 @@ export const getCommonCellStyles = = {}>({ table: MRT_TableInstance; tableCellProps: BoxProps; theme: MantineTheme; -}): { __vars: CssVariables; className: string; style: CSSStyleDeclaration } => { +}): { __vars: CssVariables; className: string; style: MantineStyleProp } => { const __vars: Record = {}; const headerId = `--${header ? 'header' : 'col'}-${parseCSSVarId( header?.id ?? column.id, diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx index 5d47ea22e..92493cebb 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx @@ -24,7 +24,7 @@ export const MRT_TableFooter = = {}>({ } = table; const { isFullScreen } = getState(); - const { className, ...tableFooterProps } = + const tableFooterProps = mantineTableFooterProps instanceof Function ? mantineTableFooterProps({ table }) : mantineTableFooterProps; @@ -41,7 +41,6 @@ export const MRT_TableFooter = = {}>({ layoutMode === 'grid' ? classes.MRT_TableFooterGrid : classes.MRT_TableFooterTableRowGroup, - className, )} style={(theme) => ({ ...(tableFooterProps?.style instanceof Function diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx index 3d28456de..ad43ccba2 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx @@ -1,4 +1,4 @@ -import { Box } from '@mantine/core'; +import { Box, useMantineTheme } from '@mantine/core'; import clsx from 'clsx'; import { getCommonCellStyles } from '../column.utils'; import { type MRT_Header, type MRT_TableInstance } from '../types'; @@ -13,6 +13,7 @@ export const MRT_TableFooterCell = = {}>({ footer, table, }: Props) => { + const theme = useMantineTheme(); const { options: { layoutMode, mantineTableFooterCellProps }, } = table; @@ -51,7 +52,7 @@ export const MRT_TableFooterCell = = {}>({ component="th" align={columnDefType === 'group' ? 'center' : 'left'} colSpan={footer.colSpan} - data-selected={row?.getIsSelected() ?? 'false'} + data-selected={'false'} data-ispinned={column?.getIsPinned() ?? 'false'} data-columndef={columnDefType} {...tableCellProps} diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx index 39ad6dbd1..0ab41046d 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx @@ -39,7 +39,7 @@ export const MRT_TableFooterRow = = {}>({ ) return null; - const { className, ...tableRowProps } = + const tableRowProps = mantineTableFooterRowProps instanceof Function ? mantineTableFooterRowProps({ footerGroup, table }) : mantineTableFooterRowProps; @@ -52,7 +52,6 @@ export const MRT_TableFooterRow = = {}>({ layoutMode === 'grid' ? classes.MRT_TableFooterRowGrid : classes.MRT_TableFooterRowTableRow, - className, )} {...tableRowProps} style={(theme) => ({ diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx index 00d4e2e5c..c3a3fe43f 100644 --- a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx +++ b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx @@ -94,7 +94,7 @@ export const MRT_TableHeadCell = = {}>({ borderRight: draggingBorder, borderTop: draggingBorder, } - : undefined; + : {}; const handleDragEnter = (_e: DragEvent) => { if (enableGrouping && hoveredColumn?.id === 'drop-zone') { @@ -127,7 +127,6 @@ export const MRT_TableHeadCell = = {}>({ = {}>({ } = table; const { isFullScreen } = getState(); - const { className, ...tableRowProps } = + const tableRowProps = mantineTableHeadRowProps instanceof Function ? mantineTableHeadRowProps({ headerGroup, table }) : mantineTableHeadRowProps; @@ -44,7 +44,6 @@ export const MRT_TableHeadRow = = {}>({ className={clsx( classes.MRT_TableHeadRow, stickyHeader && classes.MRT_TableHeadRowSticky, - className, )} __vars={{ '--display': layoutMode === 'grid' ? 'flex' : 'table-row',