material-react-table 3.0.0-beta.2 → 3.0.0-rc.0

package/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",

package/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"

package/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}

package/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}
         />
       )}

package/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>
   );
 };

package/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) =>

package/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,

package/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>;