fix: storybook runtime errors

KevinVandy · Sep 27, 2023 · 0048026 · 0048026
1 parent bd54261
commit 0048026
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 11 deletions.
diff --git 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 = <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,

diff --git 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 = <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

diff --git 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 = <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}

diff --git 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 = <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) => ({

diff --git 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 = <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()}

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadRow.tsx b/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',