add new mrtTheme option and standardized internal colors

KevinVandy · Oct 20, 2023 · 3b5cad3 · 3b5cad3
1 parent 6a86bcd
commit 3b5cad3
Show file tree

Hide file tree

Showing 25 changed files with 363 additions and 191 deletions.
diff --git a/apps/material-react-table-docs/pages/docs/guides/full-screen-toggle.mdx b/apps/material-react-table-docs/pages/docs/guides/full-screen-toggle.mdx
@@ -62,7 +62,7 @@ Under the hood in Material React Table V2, when the table is full screen, these
   right: 0,
   top: 0,
   width: '100vw',
-  zIndex: 9999,
+  zIndex: 999,
 }
 ```
 

diff --git a/packages/material-react-table/.storybook/preview.tsx b/packages/material-react-table/.storybook/preview.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useEffect } from 'react';
 import { Preview } from '@storybook/react';
 import { useDarkMode } from 'storybook-dark-mode';

diff --git a/packages/material-react-table/build-locales.mjs b/packages/material-react-table/build-locales.mjs
@@ -1,9 +1,10 @@
 import typescript from '@rollup/plugin-typescript';
-import { rollup } from 'rollup';
 import fs from 'fs';
+import { rollup } from 'rollup';
 
 const supportedLocales = [
   'ar',
+  'az',
   'bg',
   'cs',
   'da',
@@ -47,6 +48,7 @@ async function build(locale) {
         declaration: false,
         declarationDir: undefined,
         rootDir: './src',
+        sourceMap: false,
       }),
     ],
   });
@@ -70,26 +72,29 @@ async function build(locale) {
   `;
 
   await fs.writeFile(`./locales/${locale}/index.d.ts`, typeFile, (err) => {
+    // eslint-disable-next-line
     if (err) console.log(err);
   });
 
   await fs.writeFile(`./locales/${locale}/index.esm.d.ts`, typeFile, (err) => {
+    // eslint-disable-next-line
     if (err) console.log(err);
   });
 
   await fs.writeFile(
     `./locales/${locale}/package.json`,
     JSON.stringify(
       {
-        sideEffects: false,
-        module: './index.esm.js',
         main: './index.js',
+        module: './index.esm.js',
+        sideEffects: false,
         types: './index.d.ts',
       },
       null,
       2,
     ),
     (err) => {
+      // eslint-disable-next-line
       if (err) console.log(err);
     },
   );

diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
@@ -14,12 +14,12 @@ import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
-  getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
@@ -97,6 +97,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     table,
   });
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -119,13 +121,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
     const borderStyle =
       columnSizingInfo.isResizingColumn === column.id
-        ? `2px solid ${theme.palette.primary.main} !important`
+        ? `2px solid ${draggingBorderColor} !important`
         : isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.text.secondary} !important`
+        ? `1px dashed ${theme.palette.grey[500]} !important`
         : isHoveredColumn ||
           isHoveredRow ||
           columnSizingInfo.isResizingColumn === column.id
-        ? `2px dashed ${theme.palette.primary.main} !important`
+        ? `2px dashed ${draggingBorderColor} !important`
         : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
@@ -218,7 +220,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         '&:hover': {
           outline:
             ['cell', 'table'].includes(editDisplayMode ?? '') && isEditable
-              ? `1px solid ${theme.palette.text.secondary}`
+              ? `1px solid ${theme.palette.grey[500]}`
               : undefined,
           outlineOffset: '-1px',
           textOverflow: 'clip',
@@ -258,7 +260,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,

diff --git a/packages/material-react-table/src/body/MRT_TableBodyCellValue.tsx b/packages/material-react-table/src/body/MRT_TableBodyCellValue.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
-import { darken, lighten } from '@mui/material/styles';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
@@ -83,12 +83,12 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
                 match
                   ? {
                       backgroundColor: (theme) =>
-                        theme.palette.mode === 'dark'
-                          ? darken(theme.palette.warning.dark, 0.25)
-                          : lighten(theme.palette.warning.light, 0.5),
+                        getMRTTheme(table, theme).matchHighlightColor,
                       borderRadius: '2px',
                       color: (theme) =>
-                        theme.palette.mode === 'dark' ? 'white' : 'black',
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.common.white
+                          : theme.palette.common.black,
                       padding: '2px 1px',
                     }
                   : undefined
@@ -112,5 +112,5 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
     });
   }
 
-  return <>{renderedCellValue}</>;
+  return renderedCellValue;
 };
diff --git a/packages/material-react-table/src/body/MRT_TableBodyRow.tsx b/packages/material-react-table/src/body/MRT_TableBodyRow.tsx
@@ -11,6 +11,7 @@ import {
 import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Cell,
   type MRT_Row,
@@ -118,6 +119,12 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
+  const {
+    baseBackgroundColor,
+    pinnedRowBackgroundColor,
+    selectedRowBackgroundColor,
+  } = getMRTTheme(table, theme)
+
   return (
     <>
       <TableRow
@@ -142,16 +149,13 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             backgroundColor:
               tableRowProps?.hover !== false
                 ? row.getIsSelected()
-                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
                   : theme.palette.mode === 'dark'
-                  ? `${lighten(theme.palette.background.default, 0.12)}`
-                  : `${darken(theme.palette.background.default, 0.05)}`
+                  ? `${lighten(baseBackgroundColor, 0.05)}`
+                  : `${darken(baseBackgroundColor, 0.05)}`
                 : undefined,
           },
-          backgroundColor: `${lighten(
-            theme.palette.background.default,
-            0.05,
-          )} !important`,
+          backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isPinned
               ? `${
@@ -173,9 +177,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             : undefined,
           td: {
             backgroundColor: row.getIsSelected()
-              ? alpha(theme.palette.primary.main, 0.2)
+              ? selectedRowBackgroundColor
               : isPinned
-              ? alpha(theme.palette.primary.main, 0.1)
+              ? pinnedRowBackgroundColor
               : undefined,
           },
           top: virtualRow

diff --git a/packages/material-react-table/src/body/MRT_TableDetailPanel.tsx b/packages/material-react-table/src/body/MRT_TableDetailPanel.tsx
@@ -3,8 +3,8 @@ import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import { lighten } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -78,7 +78,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         {...tableCellProps}
         sx={(theme) => ({
           backgroundColor: virtualRow
-            ? lighten(theme.palette.background.default, 0.05)
+            ? getMRTTheme(table, theme).baseBackgroundColor
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,

diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts
@@ -1,14 +1,11 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
   type Renderable,
   type Row,
 } from '@tanstack/react-table';
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { alpha, lighten } from '@mui/material/styles';
-import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
@@ -23,7 +20,6 @@ import {
   type MRT_FilterOption,
   type MRT_GroupColumnDef,
   type MRT_GroupingState,
-  type MRT_Header,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -288,126 +284,11 @@ export const getCanRankRows = <TData extends MRT_RowData>(
   );
 };
 
-export const getCommonCellStyles = <TData extends MRT_RowData>({
-  column,
-  header,
-  table,
-  tableCellProps,
-  theme,
-}: {
-  column: MRT_Column<TData>;
-  header?: MRT_Header<TData>;
-  table: MRT_TableInstance<TData>;
-  tableCellProps: TableCellProps;
-  theme: Theme;
-}) => {
-  const {
-    options: { layoutMode },
-  } = table;
-  const widthStyles: CSSProperties = {
-    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px)`,
-  };
-
-  if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
-  } else if (layoutMode === 'grid-no-grow') {
-    widthStyles.flex = '0 0 auto';
-  }
-
-  return {
-    backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-        : 'inherit',
-    backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : getIsFirstRightPinnedColumn(column)
-      ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : undefined,
-    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }px`
-        : undefined,
-    opacity:
-      table.getState().draggingColumn?.id === column.id ||
-      table.getState().hoveredColumn?.id === column.id
-        ? 0.5
-        : 1,
-    position:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? 'sticky'
-        : undefined,
-    right:
-      column.getIsPinned() === 'right'
-        ? `${getTotalRight(table, column)}px`
-        : undefined,
-    transition: table.options.enableColumnVirtualization
-      ? 'none'
-      : `padding 150ms ease-in-out`,
-    ...widthStyles,
-    // ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
-    // ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
-  };
-};
-
-export const MRT_DefaultColumn = {
-  filterVariant: 'text',
-  maxSize: 1000,
-  minSize: 40,
-  size: 180,
-} as const;
-
-export const MRT_DefaultDisplayColumn = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as const;
-
 export const parseFromValuesOrFunc = <T, U>(
   fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
-export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
-
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,

diff --git a/packages/material-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/material-react-table/src/footer/MRT_TableFooterCell.tsx
@@ -1,5 +1,6 @@
 import TableCell, { type TableCellProps } from '@mui/material/TableCell';
-import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonMRTCellStyles } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -50,7 +51,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
             : '1.5rem',
         verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,