release v3.0.0-rc.0

KevinVandy · Sep 4, 2024 · d341fb3 · d341fb3
1 parent 04526ab
commit d341fb3
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 113 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -49,7 +49,9 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
     >
       <IconButton
         aria-label={localization.pin}
+        onBlur={() => 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
@@ -36,7 +36,9 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
     >
       <IconButton
         aria-label={localization.toggleFullScreen}
+        onBlur={() => 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
@@ -17,6 +17,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
 }: MRT_TableLoadingOverlayProps<TData>) => {
   const {
     options: {
+      id,
       localization,
       mrtTheme: { baseBackgroundColor },
       muiCircularProgressProps,
@@ -48,7 +49,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
       {circularProgressProps?.Component ?? (
         <CircularProgress
           aria-label={localization.noRecordsToDisplay}
-          id="mrt-progress"
+          id={`mrt-progress-${id}`}
           {...circularProgressProps}
         />
       )}

diff --git 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 = <TData extends MRT_RowData>({
   const theme = useTheme();
 
   return (
-    <Paper
-      elevation={2}
-      {...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 }) ?? (
-          <MRT_TopToolbar table={table} />
-        ))}
-      <MRT_TableContainer table={table} />
-      {enableBottomToolbar &&
-        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
-          <MRT_BottomToolbar table={table} />
-        ))}
-    </Paper>
+    <FocusTrap open={isFullScreen}>
+      <Paper
+        elevation={2}
+        onKeyDown={(e) => 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 }) ?? (
+            <MRT_TopToolbar table={table} />
+          ))}
+        <MRT_TableContainer table={table} />
+        {enableBottomToolbar &&
+          (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+            <MRT_BottomToolbar table={table} />
+          ))}
+      </Paper>
+    </FocusTrap>
   );
 };
diff --git 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 = <TData extends MRT_RowData>({
     options: {
       enableToolbarInternalActions,
       icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon },
+      id,
       localization,
       muiPaginationProps,
       paginationDisplayMode,
@@ -107,7 +108,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     >
       {showRowsPerPage && (
         <Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
-          <InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
+          <InputLabel htmlFor={`mrt-rows-per-page-${id}`} sx={{ mb: 0 }}>
             {localization.rowsPerPage}
           </InputLabel>
           <Select
@@ -116,7 +117,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             disabled={disabled}
             inputProps={{
               'aria-label': localization.rowsPerPage,
-              id: 'mrt-rows-per-page',
+              id: `mrt-rows-per-page-${id}`,
             }}
             label={localization.rowsPerPage}
             onChange={(event) =>

diff --git a/packages/material-react-table/src/hooks/useMRT_TableOptions.ts b/packages/material-react-table/src/hooks/useMRT_TableOptions.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -92,6 +92,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableTopToolbar = true,
   filterFns,
   icons,
+  id = useId(),
   layoutMode,
   localization,
   manualFiltering,
@@ -244,6 +245,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
       enableSorting && !manualSorting ? getSortedRowModel() : undefined,
     getSubRows: (row) => row?.subRows,
     icons,
+    id,
     layoutMode,
     localization,
     manualFiltering,

diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
@@ -894,6 +894,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   globalFilterFn?: MRT_FilterOption;
   globalFilterModeOptions?: MRT_FilterOption[] | null;
   icons?: Partial<MRT_Icons>;
+  id?: string;
   initialState?: Partial<MRT_TableState<TData>>;
   /**
    * 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>
   muiTableContainerProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps)
     | TableContainerProps;
+  /**
+   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
+   */
   muiTableFooterCellProps?:
     | ((props: {
         column: MRT_Column<TData>;