fix storybook runtime errors

packages/mantine-react-table/src/column.utils.ts

@@ -12,9 +12,11 @@ import {
   type BoxProps,
   type CssVariable,
   type CssVariables,
+  type MantineStyleProp,
   type MantineTheme,
 } from '@mantine/core';
 import {
+  type MantineShade,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -299,7 +301,7 @@ export const getCommonCellStyles = <TData extends Record<string, any> = {}>({
   table: MRT_TableInstance<TData>;
   tableCellProps: BoxProps;
   theme: MantineTheme;
-}): { __vars: CssVariables; className: string; style: CSSStyleDeclaration } => {
+}): { __vars: CssVariables; className: string; style: MantineStyleProp } => {
   const __vars: Record<CssVariable, string | undefined> = {};
   const headerId = `--${header ? 'header' : 'col'}-${parseCSSVarId(
     header?.id ?? column.id,
@@ -390,6 +392,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<any>,
   props: any,

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);
   }

packages/mantine-react-table/src/footer/MRT_TableFooter.tsx

@@ -24,7 +24,7 @@ export const MRT_TableFooter = <TData extends Record<string, any> = {}>({
   } = table;
   const { isFullScreen } = getState();
 
-  const { className, ...tableFooterProps } =
+  const tableFooterProps =
     mantineTableFooterProps instanceof Function
       ? mantineTableFooterProps({ table })
       : mantineTableFooterProps;
@@ -41,7 +41,6 @@ export const MRT_TableFooter = <TData extends Record<string, any> = {}>({
         layoutMode === 'grid'
           ? classes.MRT_TableFooterGrid
           : classes.MRT_TableFooterTableRowGroup,
-        className,
       )}
       style={(theme) => ({
         ...(tableFooterProps?.style instanceof Function

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 = <TData extends Record<string, any> = {}>({
   footer,
   table,
 }: Props<TData>) => {
+  const theme = useMantineTheme();
   const {
     options: { layoutMode, mantineTableFooterCellProps },
   } = table;
@@ -51,7 +52,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any> = {}>({
       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}

packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx

@@ -39,7 +39,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
   )
     return null;
 
-  const { className, ...tableRowProps } =
+  const tableRowProps =
     mantineTableFooterRowProps instanceof Function
       ? mantineTableFooterRowProps({ footerGroup, table })
       : mantineTableFooterRowProps;
@@ -52,7 +52,6 @@ export const MRT_TableFooterRow = <TData extends Record<string, any> = {}>({
         layoutMode === 'grid'
           ? classes.MRT_TableFooterRowGrid
           : classes.MRT_TableFooterRowTableRow,
-        className,
       )}
       {...tableRowProps}
       style={(theme) => ({

packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx

@@ -94,7 +94,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
         borderRight: draggingBorder,
         borderTop: draggingBorder,
       }
-    : undefined;
+    : {};
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
@@ -127,7 +127,6 @@ export const MRT_TableHeadCell = <TData extends Record<string, any> = {}>({
     <Box
       component="th"
       align={columnDefType === 'group' ? 'center' : 'left'}
-      data-selected={row?.getIsSelected() ?? 'false'}
       data-ispinned={column?.getIsPinned() ?? 'false'}
       data-cansort={column.getCanSort()}
       data-isresizing={column.getIsResizing()}

packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx

@@ -30,7 +30,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any> = {}>({
   } = table;
   const { isFullScreen } = getState();
 
-  const { className, ...tableRowProps } =
+  const tableRowProps =
     mantineTableHeadRowProps instanceof Function
       ? mantineTableHeadRowProps({ headerGroup, table })
       : mantineTableHeadRowProps;
@@ -44,7 +44,6 @@ export const MRT_TableHeadRow = <TData extends Record<string, any> = {}>({
       className={clsx(
         classes.MRT_TableHeadRow,
         stickyHeader && classes.MRT_TableHeadRowSticky,
-        className,
       )}
       __vars={{
         '--display': layoutMode === 'grid' ? 'flex' : 'table-row',