diff --git a/apps/material-react-table-docs/examples/chart-detail-panel/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/chart-detail-panel/sandbox/src/TS.tsx index 59ec827d5..4a0e711b8 100644 --- a/apps/material-react-table-docs/examples/chart-detail-panel/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/chart-detail-panel/sandbox/src/TS.tsx @@ -4,7 +4,7 @@ import { useMaterialReactTable, type MRT_ColumnDef, } from 'material-react-table'; -import { useTheme } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import { LineChart } from '@mui/x-charts/LineChart'; import { data, type Person } from './makeData'; diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index 28e98614e..379cdcea8 100644 --- a/apps/material-react-table-docs/pages/changelog.mdx +++ b/apps/material-react-table-docs/pages/changelog.mdx @@ -9,7 +9,32 @@ import Head from 'next/head'; ### Version 3.0.0 -TODO +- `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break) +- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency +- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT) +- Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts. +- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types +- Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types. +- Deprecated several `mui*Props` table options that were column-specific. These table options should either be specified in column defs or in the `defaultColumn` table option. + - `muiColumnActionsButtonProps` + - `muiColumnDragHandleProps` + - `muiCopyButtonProps` + - `muiEditTextFieldProps` + - `muiFilterAutocompleteProps` + - `muiFilterCheckboxProps` + - `muiFilterDatePickerProps` + - `muiFilterDateTimePickerProps` + - `muiFilterSliderProps` + - `muiFilterTextFieldProps` + - `muiFilterTimePickerProps` + - `muiTableBodyCellProps` + - `muiTableHeadCellProps` + - `muiTableFooterCellProps` + - `renderCellActionMenuItems` + - `renderColumnActionsMenuItems` + - `renderColumnFilterModeMenuItems` + +See the entire [v3 migration guide](/docs/getting-started/migrating-to-v3) for more details. Is anything missing from this V3 changelog? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss. diff --git a/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx b/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx index 743bad0f3..00c9cd3db 100644 --- a/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx +++ b/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx @@ -55,6 +55,7 @@ You should now be on Material React Table V3! Look for any code or type errors i - `@mui/material` and `@mui/icons-material` v6.0.0 are now minimum required versions of Material UI packages (you might be able to get away with lower MUI versions for a while, but eventually MUI V6 APIs will be used internally by MRT and your project will break) - `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency +- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT) - Keyboard navigation for table cells in now enabled by default. If you had added your own custom keyboard shortcuts, you may want to set `enableKeyboardShortcuts` to `false` or remove your custom shortcuts. - Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types - Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types. @@ -72,6 +73,7 @@ You should now be on Material React Table V3! Look for any code or type errors i - `muiFilterTimePickerProps` - `muiTableBodyCellProps` - `muiTableHeadCellProps` + - `muiTableFooterCellProps` - `renderCellActionMenuItems` - `renderColumnActionsMenuItems` - `renderColumnFilterModeMenuItems` diff --git a/apps/material-react-table-docs/pages/docs/guides/accessibility.mdx b/apps/material-react-table-docs/pages/docs/guides/accessibility.mdx index dd429aa2d..361537b34 100644 --- a/apps/material-react-table-docs/pages/docs/guides/accessibility.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/accessibility.mdx @@ -45,6 +45,7 @@ This option enables the following keyboard shortcuts: - `Enter` - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc. - `Space` - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc. - `Ctrl/Cmd + Enter` - Opens column actions menu on a header +- `Escape` - Exits full screen mode A `tabIndex={0}` is also automatically added to all cells, headers, and footers when `enableKeyboardShortcuts` is enabled to allow for keyboard focus. @@ -123,3 +124,10 @@ const table = useMaterialReactTable({ }, }); ``` + +### Full Screen Mode + +Now in V3, a focus trap is applied to the table when in full screen mode. This is to prevent the user from navigating outside of the table when using the arrow keys. + +The user can exit full screen mode by pressing `Escape`. + diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json index 7cb9e972c..ac6802652 100644 --- a/packages/material-react-table/package.json +++ b/packages/material-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "3.0.0-beta.2", + "version": "3.0.0-rc.0", "license": "MIT", "name": "material-react-table", "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.", @@ -110,8 +110,8 @@ "@mui/icons-material": ">=6", "@mui/material": ">=6", "@mui/x-date-pickers": ">=7.15", - "react": ">=17.0", - "react-dom": ">=17.0" + "react": ">=18.0", + "react-dom": ">=18.0" }, "dependencies": { "@tanstack/match-sorter-utils": "8.19.4", diff --git a/packages/material-react-table/src/components/buttons/MRT_RowPinButton.tsx b/packages/material-react-table/src/components/buttons/MRT_RowPinButton.tsx index 02d0561bf..635d3114e 100644 --- a/packages/material-react-table/src/components/buttons/MRT_RowPinButton.tsx +++ b/packages/material-react-table/src/components/buttons/MRT_RowPinButton.tsx @@ -49,7 +49,9 @@ export const MRT_RowPinButton = ({ > setTooltipOpened(false)} onClick={handleTogglePin} + onFocus={() => setTooltipOpened(true)} onMouseEnter={() => setTooltipOpened(true)} onMouseLeave={() => setTooltipOpened(false)} size="small" diff --git a/packages/material-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx b/packages/material-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx index baf7f35c8..958e1fd12 100644 --- a/packages/material-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx +++ b/packages/material-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx @@ -36,7 +36,9 @@ export const MRT_ToggleFullScreenButton = ({ > setTooltipOpened(false)} onClick={handleToggleFullScreen} + onFocus={() => setTooltipOpened(true)} onMouseEnter={() => setTooltipOpened(true)} onMouseLeave={() => setTooltipOpened(false)} {...rest} diff --git a/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx b/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx index 30f4a3158..7d57bfba2 100644 --- a/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx +++ b/packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx @@ -17,6 +17,7 @@ export const MRT_TableLoadingOverlay = ({ }: MRT_TableLoadingOverlayProps) => { const { options: { + id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, @@ -48,7 +49,7 @@ export const MRT_TableLoadingOverlay = ({ {circularProgressProps?.Component ?? ( )} diff --git a/packages/material-react-table/src/components/table/MRT_TablePaper.tsx b/packages/material-react-table/src/components/table/MRT_TablePaper.tsx index 532c67127..26b3303ee 100644 --- a/packages/material-react-table/src/components/table/MRT_TablePaper.tsx +++ b/packages/material-react-table/src/components/table/MRT_TablePaper.tsx @@ -1,5 +1,6 @@ import Paper, { type PaperProps } from '@mui/material/Paper'; -import { useTheme } from '@mui/material'; +import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap'; +import { useTheme } from '@mui/material/styles'; import { MRT_TableContainer } from './MRT_TableContainer'; import { type MRT_RowData, type MRT_TableInstance } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; @@ -37,52 +38,55 @@ export const MRT_TablePaper = ({ const theme = useTheme(); return ( - { - tablePaperRef.current = ref; - if (paperProps?.ref) { - //@ts-ignore - paperProps.ref.current = ref; - } - }} - style={{ - ...(isFullScreen - ? { - bottom: 0, - height: '100dvh', - left: 0, - margin: 0, - maxHeight: '100dvh', - maxWidth: '100dvw', - padding: 0, - position: 'fixed', - right: 0, - top: 0, - width: '100dvw', - zIndex: theme.zIndex.modal, - } - : {}), - ...paperProps?.style, - }} - sx={(theme) => ({ - backgroundColor: baseBackgroundColor, - backgroundImage: 'unset', - overflow: 'hidden', - transition: 'all 100ms ease-in-out', - ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any), - })} - > - {enableTopToolbar && - (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( - - ))} - - {enableBottomToolbar && - (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? ( - - ))} - + + e.key === 'Escape' && table.setIsFullScreen(false)} + {...paperProps} + ref={(ref: HTMLDivElement) => { + tablePaperRef.current = ref; + if (paperProps?.ref) { + //@ts-ignore + paperProps.ref.current = ref; + } + }} + style={{ + ...(isFullScreen + ? { + bottom: 0, + height: '100dvh', + left: 0, + margin: 0, + maxHeight: '100dvh', + maxWidth: '100dvw', + padding: 0, + position: 'fixed', + right: 0, + top: 0, + width: '100dvw', + zIndex: theme.zIndex.modal, + } + : {}), + ...paperProps?.style, + }} + sx={(theme) => ({ + backgroundColor: baseBackgroundColor, + backgroundImage: 'unset', + overflow: 'hidden', + transition: 'all 100ms ease-in-out', + ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any), + })} + > + {enableTopToolbar && + (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? ( + + ))} + + {enableBottomToolbar && + (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? ( + + ))} + + ); }; diff --git a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx index 68a612aa0..be65ece43 100644 --- a/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx +++ b/packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx @@ -41,6 +41,7 @@ export const MRT_TablePagination = ({ options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, + id, localization, muiPaginationProps, paginationDisplayMode, @@ -107,7 +108,7 @@ export const MRT_TablePagination = ({ > {showRowsPerPage && ( - + {localization.rowsPerPage}