Skip to content

Commit d341fb3

Browse files
KevinVandyKevinVandy
committed
release v3.0.0-rc.0
1 parent 04526ab commit d341fb3

File tree

13 files changed

+178
-113
lines changed

13 files changed

+178
-113
lines changed

‎apps/material-react-table-docs/examples/chart-detail-panel/sandbox/src/TS.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
useMaterialReactTable,
55
type MRT_ColumnDef,
66
} from 'material-react-table';
7-
import { useTheme } from '@mui/material';
7+
import { useTheme } from '@mui/material/styles';
88
import { LineChart } from '@mui/x-charts/LineChart';
99
import { data, type Person } from './makeData';
1010

‎apps/material-react-table-docs/pages/changelog.mdx

+26-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,32 @@ import Head from 'next/head';
99

1010
### Version 3.0.0
1111

12-
TODO
12+
- `@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)
13+
- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
14+
- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT)
15+
- 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.
16+
- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
17+
- Removed deprecated `text` in favor of the more consistent `label` type in dropdown/autocomplete/select option types.
18+
- 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.
19+
- `muiColumnActionsButtonProps`
20+
- `muiColumnDragHandleProps`
21+
- `muiCopyButtonProps`
22+
- `muiEditTextFieldProps`
23+
- `muiFilterAutocompleteProps`
24+
- `muiFilterCheckboxProps`
25+
- `muiFilterDatePickerProps`
26+
- `muiFilterDateTimePickerProps`
27+
- `muiFilterSliderProps`
28+
- `muiFilterTextFieldProps`
29+
- `muiFilterTimePickerProps`
30+
- `muiTableBodyCellProps`
31+
- `muiTableHeadCellProps`
32+
- `muiTableFooterCellProps`
33+
- `renderCellActionMenuItems`
34+
- `renderColumnActionsMenuItems`
35+
- `renderColumnFilterModeMenuItems`
36+
37+
See the entire [v3 migration guide](/docs/getting-started/migrating-to-v3) for more details.
1338

1439
Is anything missing from this V3 changelog? Make a PR or join the [Discord](https://discord.gg/5wqyRx6fnm) to discuss.
1540

‎apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ You should now be on Material React Table V3! Look for any code or type errors i
5555

5656
- `@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)
5757
- `@mui/x-date-pickers` v7.15.0 is now a minimum required dependency
58+
- `react` and `react-dom` v18.0.0 are now a minimum required dependencies (some React 18 APIs are now used internally by MRT)
5859
- 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.
5960
- Removed deprecated `MRT_Virtualizer` type in favor of separate `MRT_RowVirtualizer` and `MRT_ColumnVirtualizer` types
6061
- 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
7273
- `muiFilterTimePickerProps`
7374
- `muiTableBodyCellProps`
7475
- `muiTableHeadCellProps`
76+
- `muiTableFooterCellProps`
7577
- `renderCellActionMenuItems`
7678
- `renderColumnActionsMenuItems`
7779
- `renderColumnFilterModeMenuItems`

‎apps/material-react-table-docs/pages/docs/guides/accessibility.mdx

+8
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ This option enables the following keyboard shortcuts:
4545
- `Enter` - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
4646
- `Space` - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
4747
- `Ctrl/Cmd + Enter` - Opens column actions menu on a header
48+
- `Escape` - Exits full screen mode
4849

4950
A `tabIndex={0}` is also automatically added to all cells, headers, and footers when `enableKeyboardShortcuts` is enabled to allow for keyboard focus.
5051

@@ -123,3 +124,10 @@ const table = useMaterialReactTable({
123124
},
124125
});
125126
```
127+
128+
### Full Screen Mode
129+
130+
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.
131+
132+
The user can exit full screen mode by pressing `Escape`.
133+

‎packages/material-react-table/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "3.0.0-beta.2",
2+
"version": "3.0.0-rc.0",
33
"license": "MIT",
44
"name": "material-react-table",
55
"description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -110,8 +110,8 @@
110110
"@mui/icons-material": ">=6",
111111
"@mui/material": ">=6",
112112
"@mui/x-date-pickers": ">=7.15",
113-
"react": ">=17.0",
114-
"react-dom": ">=17.0"
113+
"react": ">=18.0",
114+
"react-dom": ">=18.0"
115115
},
116116
"dependencies": {
117117
"@tanstack/match-sorter-utils": "8.19.4",

‎packages/material-react-table/src/components/buttons/MRT_RowPinButton.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
4949
>
5050
<IconButton
5151
aria-label={localization.pin}
52+
onBlur={() => setTooltipOpened(false)}
5253
onClick={handleTogglePin}
54+
onFocus={() => setTooltipOpened(true)}
5355
onMouseEnter={() => setTooltipOpened(true)}
5456
onMouseLeave={() => setTooltipOpened(false)}
5557
size="small"

‎packages/material-react-table/src/components/buttons/MRT_ToggleFullScreenButton.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
3636
>
3737
<IconButton
3838
aria-label={localization.toggleFullScreen}
39+
onBlur={() => setTooltipOpened(false)}
3940
onClick={handleToggleFullScreen}
41+
onFocus={() => setTooltipOpened(true)}
4042
onMouseEnter={() => setTooltipOpened(true)}
4143
onMouseLeave={() => setTooltipOpened(false)}
4244
{...rest}

‎packages/material-react-table/src/components/table/MRT_TableLoadingOverlay.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
1717
}: MRT_TableLoadingOverlayProps<TData>) => {
1818
const {
1919
options: {
20+
id,
2021
localization,
2122
mrtTheme: { baseBackgroundColor },
2223
muiCircularProgressProps,
@@ -48,7 +49,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
4849
{circularProgressProps?.Component ?? (
4950
<CircularProgress
5051
aria-label={localization.noRecordsToDisplay}
51-
id="mrt-progress"
52+
id={`mrt-progress-${id}`}
5253
{...circularProgressProps}
5354
/>
5455
)}

‎packages/material-react-table/src/components/table/MRT_TablePaper.tsx

+52-48
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Paper, { type PaperProps } from '@mui/material/Paper';
2-
import { useTheme } from '@mui/material';
2+
import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap';
3+
import { useTheme } from '@mui/material/styles';
34
import { MRT_TableContainer } from './MRT_TableContainer';
45
import { type MRT_RowData, type MRT_TableInstance } from '../../types';
56
import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -37,52 +38,55 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
3738
const theme = useTheme();
3839

3940
return (
40-
<Paper
41-
elevation={2}
42-
{...paperProps}
43-
ref={(ref: HTMLDivElement) => {
44-
tablePaperRef.current = ref;
45-
if (paperProps?.ref) {
46-
//@ts-ignore
47-
paperProps.ref.current = ref;
48-
}
49-
}}
50-
style={{
51-
...(isFullScreen
52-
? {
53-
bottom: 0,
54-
height: '100dvh',
55-
left: 0,
56-
margin: 0,
57-
maxHeight: '100dvh',
58-
maxWidth: '100dvw',
59-
padding: 0,
60-
position: 'fixed',
61-
right: 0,
62-
top: 0,
63-
width: '100dvw',
64-
zIndex: theme.zIndex.modal,
65-
}
66-
: {}),
67-
...paperProps?.style,
68-
}}
69-
sx={(theme) => ({
70-
backgroundColor: baseBackgroundColor,
71-
backgroundImage: 'unset',
72-
overflow: 'hidden',
73-
transition: 'all 100ms ease-in-out',
74-
...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
75-
})}
76-
>
77-
{enableTopToolbar &&
78-
(parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
79-
<MRT_TopToolbar table={table} />
80-
))}
81-
<MRT_TableContainer table={table} />
82-
{enableBottomToolbar &&
83-
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
84-
<MRT_BottomToolbar table={table} />
85-
))}
86-
</Paper>
41+
<FocusTrap open={isFullScreen}>
42+
<Paper
43+
elevation={2}
44+
onKeyDown={(e) => e.key === 'Escape' && table.setIsFullScreen(false)}
45+
{...paperProps}
46+
ref={(ref: HTMLDivElement) => {
47+
tablePaperRef.current = ref;
48+
if (paperProps?.ref) {
49+
//@ts-ignore
50+
paperProps.ref.current = ref;
51+
}
52+
}}
53+
style={{
54+
...(isFullScreen
55+
? {
56+
bottom: 0,
57+
height: '100dvh',
58+
left: 0,
59+
margin: 0,
60+
maxHeight: '100dvh',
61+
maxWidth: '100dvw',
62+
padding: 0,
63+
position: 'fixed',
64+
right: 0,
65+
top: 0,
66+
width: '100dvw',
67+
zIndex: theme.zIndex.modal,
68+
}
69+
: {}),
70+
...paperProps?.style,
71+
}}
72+
sx={(theme) => ({
73+
backgroundColor: baseBackgroundColor,
74+
backgroundImage: 'unset',
75+
overflow: 'hidden',
76+
transition: 'all 100ms ease-in-out',
77+
...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
78+
})}
79+
>
80+
{enableTopToolbar &&
81+
(parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
82+
<MRT_TopToolbar table={table} />
83+
))}
84+
<MRT_TableContainer table={table} />
85+
{enableBottomToolbar &&
86+
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
87+
<MRT_BottomToolbar table={table} />
88+
))}
89+
</Paper>
90+
</FocusTrap>
8791
);
8892
};

‎packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
4141
options: {
4242
enableToolbarInternalActions,
4343
icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
44+
id,
4445
localization,
4546
muiPaginationProps,
4647
paginationDisplayMode,
@@ -107,7 +108,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
107108
>
108109
{showRowsPerPage && (
109110
<Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
110-
<InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
111+
<InputLabel htmlFor={`mrt-rows-per-page-${id}`} sx={{ mb: 0 }}>
111112
{localization.rowsPerPage}
112113
</InputLabel>
113114
<Select
@@ -116,7 +117,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
116117
disabled={disabled}
117118
inputProps={{
118119
'aria-label': localization.rowsPerPage,
119-
id: 'mrt-rows-per-page',
120+
id: `mrt-rows-per-page-${id}`,
120121
}}
121122
label={localization.rowsPerPage}
122123
onChange={(event) =>

‎packages/material-react-table/src/hooks/useMRT_TableOptions.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useMemo } from 'react';
1+
import { useId, useMemo } from 'react';
22
import {
33
getCoreRowModel,
44
getExpandedRowModel,
@@ -92,6 +92,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
9292
enableTopToolbar = true,
9393
filterFns,
9494
icons,
95+
id = useId(),
9596
layoutMode,
9697
localization,
9798
manualFiltering,
@@ -244,6 +245,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
244245
enableSorting && !manualSorting ? getSortedRowModel() : undefined,
245246
getSubRows: (row) => row?.subRows,
246247
icons,
248+
id,
247249
layoutMode,
248250
localization,
249251
manualFiltering,

‎packages/material-react-table/src/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -894,6 +894,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
894894
globalFilterFn?: MRT_FilterOption;
895895
globalFilterModeOptions?: MRT_FilterOption[] | null;
896896
icons?: Partial<MRT_Icons>;
897+
id?: string;
897898
initialState?: Partial<MRT_TableState<TData>>;
898899
/**
899900
* Changes which kind of CSS layout is used to render the table. `semantic` uses default semantic HTML elements, while `grid` adds CSS grid and flexbox styles
@@ -1132,6 +1133,9 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
11321133
muiTableContainerProps?:
11331134
| ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps)
11341135
| TableContainerProps;
1136+
/**
1137+
* @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
1138+
*/
11351139
muiTableFooterCellProps?:
11361140
| ((props: {
11371141
column: MRT_Column<TData>;

0 commit comments

Comments
 (0)