From 3b5cad3ffd9a424ac17be1d88f8a78f56bb65c4b Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Thu, 19 Oct 2023 23:34:01 -0500 Subject: [PATCH] add new mrtTheme option and standardized internal colors --- .../pages/docs/guides/full-screen-toggle.mdx | 2 +- .../.storybook/preview.tsx | 1 + .../material-react-table/build-locales.mjs | 11 +- .../src/body/MRT_TableBodyCell.tsx | 14 +- .../src/body/MRT_TableBodyCellValue.tsx | 12 +- .../src/body/MRT_TableBodyRow.tsx | 22 +-- .../src/body/MRT_TableDetailPanel.tsx | 4 +- .../material-react-table/src/column.utils.ts | 121 +------------- .../src/footer/MRT_TableFooterCell.tsx | 5 +- .../src/footer/MRT_TableFooterRow.tsx | 4 +- .../src/head/MRT_TableHeadCell.tsx | 12 +- .../src/head/MRT_TableHeadRow.tsx | 5 +- .../src/hooks/useMRT_TableOptions.ts | 23 ++- packages/material-react-table/src/index.ts | 1 + .../src/inputs/MRT_GlobalFilterTextField.tsx | 15 +- .../material-react-table/src/locales/az.ts | 94 +++++++++++ .../menus/MRT_ShowHideColumnsMenuItems.tsx | 5 +- .../material-react-table/src/style.utils.ts | 149 ++++++++++++++++++ .../src/table/MRT_Table.tsx | 2 +- .../src/table/MRT_TableLoadingOverlay.tsx | 5 +- .../src/table/MRT_TablePaper.tsx | 2 +- .../src/toolbar/MRT_BottomToolbar.tsx | 10 +- .../src/toolbar/MRT_TopToolbar.tsx | 20 +-- packages/material-react-table/src/types.ts | 8 + .../src/useMaterialReactTable.ts | 7 +- 25 files changed, 363 insertions(+), 191 deletions(-) create mode 100644 packages/material-react-table/src/locales/az.ts create mode 100644 packages/material-react-table/src/style.utils.ts 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 index 844b89afc..d985f055a 100644 --- 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 index 65448832f..65dea2485 100644 --- 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 index 14246bbdb..dec391dba 100644 --- 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,10 +72,12 @@ 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); }); @@ -81,15 +85,16 @@ async function build(locale) { `./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 index fd2215d2f..dbb13ff4b 100644 --- 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 = ({ 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 = ({ 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 = ({ '&: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 = ({ 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 index 37fd61077..847842468 100644 --- 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 = ({ 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 = ({ }); } - 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 index 6df1cc496..6007b740c 100644 --- 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 = ({ const rowRef = useRef(null); + const { + baseBackgroundColor, + pinnedRowBackgroundColor, + selectedRowBackgroundColor, + } = getMRTTheme(table, theme) + return ( <> ({ 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 = ({ : 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 index c6986107b..aaf9b3ba4 100644 --- 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 = ({ {...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 index 1270f822c..7126fa81a 100644 --- a/packages/material-react-table/src/column.utils.ts +++ b/packages/material-react-table/src/column.utils.ts @@ -1,4 +1,4 @@ -import { type CSSProperties, type ReactNode } from 'react'; +import { type ReactNode } from 'react'; import { createRow as _createRow, flexRender as _flexRender, @@ -6,9 +6,6 @@ import { 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 = ( ); }; -export const getCommonCellStyles = ({ - column, - header, - table, - tableCellProps, - theme, -}: { - column: MRT_Column; - header?: MRT_Header; - table: MRT_TableInstance; - 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 = ( 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, props: any, diff --git a/packages/material-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/material-react-table/src/footer/MRT_TableFooterCell.tsx index 8f27cc4cc..14af0c6f2 100644 --- 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 = ({ : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1, - ...getCommonCellStyles({ + ...getCommonMRTCellStyles({ column, table, tableCellProps, diff --git a/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx index 8a4d3f6a3..a4621c853 100644 --- a/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx +++ b/packages/material-react-table/src/footer/MRT_TableFooterRow.tsx @@ -1,8 +1,8 @@ import { type VirtualItem } from '@tanstack/react-virtual'; import TableRow, { type TableRowProps } from '@mui/material/TableRow'; -import { lighten } from '@mui/material/styles'; import { MRT_TableFooterCell } from './MRT_TableFooterCell'; import { parseFromValuesOrFunc } from '../column.utils'; +import { getMRTTheme } from '../style.utils'; import { type MRT_Header, type MRT_HeaderGroup, @@ -53,7 +53,7 @@ export const MRT_TableFooterRow = ({ ({ - backgroundColor: lighten(theme.palette.background.default, 0.05), + backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: layoutMode?.startsWith('grid') ? 'flex' : undefined, width: '100%', ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any), diff --git a/packages/material-react-table/src/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/head/MRT_TableHeadCell.tsx index d4a362173..9648d0a61 100644 --- a/packages/material-react-table/src/head/MRT_TableHeadCell.tsx +++ b/packages/material-react-table/src/head/MRT_TableHeadCell.tsx @@ -9,8 +9,8 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel'; import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle'; import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle'; import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel'; -import { getCommonCellStyles } from '../column.utils'; import { parseFromValuesOrFunc } from '../column.utils'; +import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils'; import { type MRT_Header, type MRT_RowData, @@ -64,6 +64,8 @@ export const MRT_TableHeadCell = ({ ...rest, }; + const { draggingBorderColor } = getMRTTheme(table, theme); + const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false; @@ -89,11 +91,11 @@ export const MRT_TableHeadCell = ({ const borderStyle = columnSizingInfo.isResizingColumn === column.id && !header.subHeaders.length - ? `2px solid ${theme.palette.primary.main} !important` + ? `2px solid ${draggingBorderColor} !important` : draggingColumn?.id === column.id - ? `1px dashed ${theme.palette.text.secondary}` + ? `1px dashed ${theme.palette.grey[500]}` : hoveredColumn?.id === column.id - ? `2px dashed ${theme.palette.primary.main}` + ? `2px dashed ${draggingBorderColor}` : undefined; if (columnSizingInfo.isResizingColumn === column.id) { @@ -178,7 +180,7 @@ export const MRT_TableHeadCell = ({ : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1, - ...getCommonCellStyles({ + ...getCommonMRTCellStyles({ column, header, table, diff --git a/packages/material-react-table/src/head/MRT_TableHeadRow.tsx b/packages/material-react-table/src/head/MRT_TableHeadRow.tsx index 7282a269f..b2b1e7af1 100644 --- a/packages/material-react-table/src/head/MRT_TableHeadRow.tsx +++ b/packages/material-react-table/src/head/MRT_TableHeadRow.tsx @@ -1,8 +1,9 @@ import { type VirtualItem } from '@tanstack/react-virtual'; +import { alpha } from '@mui/material'; import TableRow, { type TableRowProps } from '@mui/material/TableRow'; -import { alpha, lighten } from '@mui/material/styles'; import { MRT_TableHeadCell } from './MRT_TableHeadCell'; import { parseFromValuesOrFunc } from '../column.utils'; +import { getMRTTheme } from '../style.utils'; import { type MRT_Header, type MRT_HeaderGroup, @@ -42,7 +43,7 @@ export const MRT_TableHeadRow = ({ ({ - backgroundColor: lighten(theme.palette.background.default, 0.05), + backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode?.startsWith('grid') ? 'flex' : undefined, top: 0, diff --git a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts index f6e3dba1c..06b66f066 100644 --- a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts +++ b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts @@ -1,6 +1,5 @@ import { useMemo } from 'react'; import { MRT_AggregationFns } from '../aggregationFns'; -import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils'; import { MRT_FilterFns } from '../filterFns'; import { MRT_Default_Icons } from '../icons'; import { MRT_Localization_EN } from '../locales/en'; @@ -11,6 +10,28 @@ import { type MRT_TableOptions, } from '../types'; +const MRT_DefaultColumn = { + filterVariant: 'text', + maxSize: 1000, + minSize: 40, + size: 180, +} as const; + +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 useMRT_TableOptions: ( tableOptions: MRT_TableOptions, ) => MRT_DefinedTableOptions = ({ diff --git a/packages/material-react-table/src/index.ts b/packages/material-react-table/src/index.ts index a3600eab6..0d6a9cb71 100644 --- a/packages/material-react-table/src/index.ts +++ b/packages/material-react-table/src/index.ts @@ -10,6 +10,7 @@ export * from './inputs'; export * from './menus'; export * from './modals'; export * from './sortingFns'; +export * from './style.utils'; export * from './table'; export * from './toolbar'; export * from './types'; diff --git a/packages/material-react-table/src/inputs/MRT_GlobalFilterTextField.tsx b/packages/material-react-table/src/inputs/MRT_GlobalFilterTextField.tsx index 9b518675f..88e9bea29 100644 --- a/packages/material-react-table/src/inputs/MRT_GlobalFilterTextField.tsx +++ b/packages/material-react-table/src/inputs/MRT_GlobalFilterTextField.tsx @@ -125,11 +125,24 @@ export const MRT_GlobalFilterTextField = ({ ) : ( ), + ...textFieldProps.InputProps, + sx: (theme) => ({ + mb: 0, + ...(parseFromValuesOrFunc( + textFieldProps?.InputProps?.sx, + theme, + ) as any), + }), + }} + inputProps={{ + autoComplete: 'new-password', // disable autocomplete and autofill + ...textFieldProps.inputProps, }} onChange={handleChange} placeholder={localization.search} + size="small" value={searchValue ?? ''} - variant="standard" + variant="outlined" {...textFieldProps} inputRef={(inputRef) => { searchInputRef.current = inputRef; diff --git a/packages/material-react-table/src/locales/az.ts b/packages/material-react-table/src/locales/az.ts new file mode 100644 index 000000000..33e4ba5d4 --- /dev/null +++ b/packages/material-react-table/src/locales/az.ts @@ -0,0 +1,94 @@ +import { type MRT_Localization } from '..'; + +export const MRT_Localization_AZ: MRT_Localization = { + actions: 'Əməliyyatlar', + and: 'və', + cancel: 'Ləğv Et', + changeFilterMode: 'Filter Rejimini Dəyiş', + changeSearchMode: 'Axtarış Rejimini Dəyiş', + clearFilter: 'Filteri təmizlə', + clearSearch: 'Axtarışı təmizlə', + clearSort: 'Sıralamanı sıfırla', + clickToCopy: 'Köçür', + columnActions: 'Sütun Əməliyyatları', + copiedToClipboard: 'Panelə Köçürüldü', + collapse: 'Daralt', + collapseAll: 'Hamısını Daralt', + dropToGroupBy: '{column} İlə Qruplandırmaq Üçün Buraxın', + edit: 'Düzəliş Et', + expand: 'Genişlət', + expandAll: 'Hamısını Genişlət', + filterArrIncludes: 'Daxil Et', + filterArrIncludesAll: 'Hamısını Daxil Et', + filterArrIncludesSome: 'Daxildir', + filterBetween: 'Arasında', + filterBetweenInclusive: 'Daxildir Arasında', + filterByColumn: '{column} Filteri', + filterContains: 'Daxildir', + filterEmpty: 'Boş', + filterEndsWith: 'Sonu', + filterEquals: 'Bərabər', + filterEqualsString: 'Bərabər', + filterFuzzy: 'Təxmini', + filterGreaterThan: 'Böyükdür', + filterGreaterThanOrEqualTo: 'Böyük Bərabərdir', + filterInNumberRange: 'Arasında', + filterIncludesString: 'Daxil', + filterIncludesStringSensitive: 'Daxil', + filterLessThan: 'Kiçikdir', + filterLessThanOrEqualTo: 'Kiçik Bərabərdir', + filterMode: 'Filter Rejimi: {filterType}', + filterNotEmpty: 'Boş Deyil', + filterNotEquals: 'Bərabər Deyil', + filterStartsWith: 'Başlanğıcı', + filterWeakEquals: 'Bərabərdir', + filteringByColumn: 'Filter Rejimi - {filterType} {filterValue}', + goToFirstPage: 'İlk Səhifəyə Get', + goToLastPage: 'Son Səhifəyə Get', + goToNextPage: 'Sonrakı Səhifəyə Get', + goToPreviousPage: 'Əvvəlki Səhifəyə Get', + grab: 'Tut', + groupByColumn: "{column}'a Görə Qruplandır", + groupedBy: 'Qruplandı ', + hideAll: 'Hamısını Gizlə', + hideColumn: '{column} Sütununu Gizlə', + max: 'Maksimum', + min: 'Minimum', + move: 'Daşı', + noRecordsToDisplay: 'Göstəriləcək Qeyd Yoxdur', + noResultsFound: 'Heç Bir Nəticə Tapılmadı', + of: 'of', + or: 'və ya', + pin: 'Sabitlə', + pinToLeft: 'Sola Sabitlə', + pinToRight: 'Sağa Sabitlə', + resetColumnSize: 'Sütun Ölçüsünü Sıfırla', + resetOrder: 'Sıranı Temizlə', + rowActions: 'Sətir Əməliyyatları', + rowNumber: '#', + rowNumbers: 'Sətir Sayl', + rowsPerPage: 'Səhifə Başına Sətirlər', + save: 'Yadda Saxla', + search: 'Axtar', + selectedCountOfRowCountRowsSelected: + '{rowCount} Sətir Arasında {selectedCount} Ədəd Seçildi', + select: 'Seç', + showAll: 'Hamısını Göstər', + showAllColumns: 'Bütün Sütunları Göstər', + showHideColumns: 'Sütunları Göstər/Gizlə', + showHideFilters: 'Filterləri Göstər/Gizlə', + showHideSearch: 'Axtarışı Göstər/Gizlə', + sortByColumnAsc: 'Artan Şəkildə Sırala', + sortByColumnDesc: 'Azalan Şəkildə Sırala', + sortedByColumnAsc: 'Artan Şəkildə Sıralandı', + sortedByColumnDesc: 'Azalan Şəkildə Sıralandı', + thenBy: ', sonra ', + toggleDensity: 'Sıxlığı Dəyiş', + toggleFullScreen: 'Tam Ekranı Dəyiş', + toggleSelectAll: 'Hamısını Seç', + toggleSelectRow: 'Sətir Seç', + toggleVisibility: 'Görünməni Dəyiş', + ungroupByColumn: '{column} Sütununu Ayır', + unpin: 'Ayır', + unpinAll: 'Hamısını Ayır', +}; diff --git a/packages/material-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx b/packages/material-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx index d9fee23f0..232c77ff9 100644 --- a/packages/material-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx +++ b/packages/material-react-table/src/menus/MRT_ShowHideColumnsMenuItems.tsx @@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography'; import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons'; import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton'; import { parseFromValuesOrFunc, reorderColumn } from '../column.utils'; +import { getMRTTheme } from '../style.utils'; import { type MRT_Column, type MRT_RowData, @@ -101,9 +102,9 @@ export const MRT_ShowHideColumnsMenuItems = ({ my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging - ? `2px dashed ${theme.palette.divider}` + ? `2px dashed ${theme.palette.grey[500]}` : hoveredColumn?.id === column.id - ? `2px dashed ${theme.palette.primary.main}` + ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}` : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, diff --git a/packages/material-react-table/src/style.utils.ts b/packages/material-react-table/src/style.utils.ts new file mode 100644 index 000000000..647d8d88c --- /dev/null +++ b/packages/material-react-table/src/style.utils.ts @@ -0,0 +1,149 @@ +import { type CSSProperties } from 'react'; +import { type TableCellProps } from '@mui/material/TableCell'; +import { alpha, darken, lighten } from '@mui/material/styles'; +import { type Theme } from '@mui/material/styles'; +import { + getIsFirstRightPinnedColumn, + getIsLastLeftPinnedColumn, + getTotalRight, + parseFromValuesOrFunc, +} from './column.utils'; +import { + type MRT_Column, + type MRT_Header, + type MRT_RowData, + type MRT_TableInstance, +} from './types'; + +export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_'); + +export const getMRTTheme = ( + table: MRT_TableInstance, + theme: Theme, +) => ({ + baseBackgroundColor: + theme.palette.mode === 'dark' + ? lighten(theme.palette.background.default, 0.05) + : theme.palette.background.default, + draggingBorderColor: theme.palette.primary.main, + matchHighlightColor: + theme.palette.mode === 'dark' + ? darken(theme.palette.warning.dark, 0.25) + : lighten(theme.palette.warning.light, 0.5), + pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), + selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2), + ...table.options.mrtTheme, +}); + +export const getCommonMRTCellStyles = ({ + column, + header, + table, + tableCellProps, + theme, +}: { + column: MRT_Column; + header?: MRT_Header; + table: MRT_TableInstance; + 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( + darken( + getMRTTheme(table, theme).baseBackgroundColor, + theme.palette.mode === 'dark' ? 0.05 : 0.01, + ), + 0.97, + ) + : 'inherit', + backgroundImage: 'inherit', + boxShadow: getIsLastLeftPinnedColumn(table, column) + ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset` + : getIsFirstRightPinnedColumn(column) + ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} 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, + ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any), + }; +}; + +export const getCommonToolbarStyles = ({ + table, + theme, +}: { + table: MRT_TableInstance; + theme: Theme; +}) => ({ + alignItems: 'flex-start', + backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, + display: 'grid', + flexWrap: 'wrap-reverse', + minHeight: '3.5rem', + overflow: 'hidden', + position: 'relative', + transition: 'all 150ms ease-in-out', + zIndex: 1, +}); diff --git a/packages/material-react-table/src/table/MRT_Table.tsx b/packages/material-react-table/src/table/MRT_Table.tsx index 0e5665357..fc0317ca4 100644 --- a/packages/material-react-table/src/table/MRT_Table.tsx +++ b/packages/material-react-table/src/table/MRT_Table.tsx @@ -8,11 +8,11 @@ import Table, { type TableProps } from '@mui/material/Table'; import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody'; import { extraIndexRangeExtractor, - parseCSSVarId, parseFromValuesOrFunc, } from '../column.utils'; import { MRT_TableFooter } from '../footer/MRT_TableFooter'; import { MRT_TableHead } from '../head/MRT_TableHead'; +import { parseCSSVarId } from '../style.utils'; import { type MRT_RowData, type MRT_TableInstance } from '../types'; interface Props extends TableProps { diff --git a/packages/material-react-table/src/table/MRT_TableLoadingOverlay.tsx b/packages/material-react-table/src/table/MRT_TableLoadingOverlay.tsx index ab9477dee..cac01db48 100644 --- a/packages/material-react-table/src/table/MRT_TableLoadingOverlay.tsx +++ b/packages/material-react-table/src/table/MRT_TableLoadingOverlay.tsx @@ -2,8 +2,9 @@ import Box from '@mui/material/Box'; import CircularProgress, { type CircularProgressProps, } from '@mui/material/CircularProgress'; -import { alpha, lighten } from '@mui/material/styles'; +import { alpha } from '@mui/material/styles'; import { parseFromValuesOrFunc } from '../column.utils'; +import { getMRTTheme } from '../style.utils'; import { type MRT_RowData, type MRT_TableInstance } from '../types'; interface Props extends CircularProgressProps { @@ -28,7 +29,7 @@ export const MRT_TableLoadingOverlay = ({ sx={(theme) => ({ alignItems: 'center', backgroundColor: alpha( - lighten(theme.palette.background.paper, 0.05), + getMRTTheme(table, theme).baseBackgroundColor, 0.5, ), bottom: 0, diff --git a/packages/material-react-table/src/table/MRT_TablePaper.tsx b/packages/material-react-table/src/table/MRT_TablePaper.tsx index 004d4d476..6de9fc27e 100644 --- a/packages/material-react-table/src/table/MRT_TablePaper.tsx +++ b/packages/material-react-table/src/table/MRT_TablePaper.tsx @@ -56,7 +56,7 @@ export const MRT_TablePaper = ({ right: 0, top: 0, width: '100vw', - zIndex: 9999, + zIndex: 999, } : {}), ...tablePaperProps?.style, diff --git a/packages/material-react-table/src/toolbar/MRT_BottomToolbar.tsx b/packages/material-react-table/src/toolbar/MRT_BottomToolbar.tsx index fdfd7c71c..2a076e104 100644 --- a/packages/material-react-table/src/toolbar/MRT_BottomToolbar.tsx +++ b/packages/material-react-table/src/toolbar/MRT_BottomToolbar.tsx @@ -1,12 +1,12 @@ +import { alpha } from '@mui/material'; import Box, { type BoxProps } from '@mui/material/Box'; -import { alpha } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { MRT_LinearProgressBar } from './MRT_LinearProgressBar'; import { MRT_TablePagination } from './MRT_TablePagination'; import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner'; import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone'; -import { commonToolbarStyles } from './MRT_TopToolbar'; import { parseFromValuesOrFunc } from '../column.utils'; +import { getCommonToolbarStyles } from '../style.utils'; import { type MRT_RowData, type MRT_TableInstance } from '../types'; interface Props extends BoxProps { @@ -53,11 +53,11 @@ export const MRT_BottomToolbar = ({ } }} sx={(theme) => ({ - ...commonToolbarStyles({ theme }), + ...getCommonToolbarStyles({ table, theme }), bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha( - theme.palette.common.black, - 0.1, + theme.palette.grey[700], + 0.5, )} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', diff --git a/packages/material-react-table/src/toolbar/MRT_TopToolbar.tsx b/packages/material-react-table/src/toolbar/MRT_TopToolbar.tsx index 1da47bd10..2ec70b7b1 100644 --- a/packages/material-react-table/src/toolbar/MRT_TopToolbar.tsx +++ b/packages/material-react-table/src/toolbar/MRT_TopToolbar.tsx @@ -1,6 +1,4 @@ import Box from '@mui/material/Box'; -import { lighten } from '@mui/material/styles'; -import { type Theme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { MRT_LinearProgressBar } from './MRT_LinearProgressBar'; import { MRT_TablePagination } from './MRT_TablePagination'; @@ -9,20 +7,9 @@ import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone'; import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons'; import { parseFromValuesOrFunc } from '../column.utils'; import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField'; +import { getCommonToolbarStyles } from '../style.utils'; import { type MRT_RowData, type MRT_TableInstance } from '../types'; -export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({ - alignItems: 'flex-start', - backgroundColor: lighten(theme.palette.background.default, 0.05), - display: 'grid', - flexWrap: 'wrap-reverse', - minHeight: '3.5rem', - overflow: 'hidden', - position: 'relative', - transition: 'all 150ms ease-in-out', - zIndex: 1, -}); - interface Props { table: MRT_TableInstance; } @@ -66,7 +53,7 @@ export const MRT_TopToolbar = ({ } }} sx={(theme) => ({ - ...commonToolbarStyles({ theme }), + ...getCommonToolbarStyles({ table, theme }), position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined, ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any), @@ -86,6 +73,7 @@ export const MRT_TopToolbar = ({ alignItems: 'flex-start', boxSizing: 'border-box', display: 'flex', + gap: '0.5rem', justifyContent: 'space-between', p: '0.5rem', position: stackAlertBanner ? 'relative' : 'absolute', @@ -101,8 +89,10 @@ export const MRT_TopToolbar = ({ {enableToolbarInternalActions ? ( diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts index 1fc3a0f1f..9cd7f5380 100644 --- a/packages/material-react-table/src/types.ts +++ b/packages/material-react-table/src/types.ts @@ -1,4 +1,5 @@ import { + type CSSProperties, type Dispatch, type MutableRefObject, type ReactNode, @@ -770,6 +771,13 @@ export type MRT_TableOptions = Omit< * @link https://www.material-react-table.com/docs/guides/memoize-components */ memoMode?: 'cells' | 'rows' | 'table-body'; + mrtTheme?: { + baseBackgroundColor?: CSSProperties['backgroundColor']; + draggingBorderColor?: CSSProperties['borderColor']; + matchHighlightColor?: CSSProperties['backgroundColor']; + pinnedRowBackgroundColor?: CSSProperties['backgroundColor']; + selectedRowBackgroundColor?: CSSProperties['backgroundColor']; + }; muiBottomToolbarProps?: | ((props: { table: MRT_TableInstance }) => BoxProps) | BoxProps; diff --git a/packages/material-react-table/src/useMaterialReactTable.ts b/packages/material-react-table/src/useMaterialReactTable.ts index c042e7a0e..d8d084950 100644 --- a/packages/material-react-table/src/useMaterialReactTable.ts +++ b/packages/material-react-table/src/useMaterialReactTable.ts @@ -8,8 +8,5 @@ import { export const useMaterialReactTable = ( tableOptions: MRT_TableOptions, -): MRT_TableInstance => { - const parsedTableOptions = useMRT_TableOptions(tableOptions); - const tableInstance = useMRT_TableInstance(parsedTableOptions); - return tableInstance; -}; +): MRT_TableInstance => + useMRT_TableInstance(useMRT_TableOptions(tableOptions));