release v3.0.1 - removed fullscreen focus trap for now. fixes #1236

Author: KevinVandy

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

@@ -7,6 +7,10 @@ import Head from 'next/head';
 
 ## MRT V3 Changelog
 
+### Version 3.0.1
+
+- Removed fullscreen MUI FocusTrap wrapper for now since vitest had issues with it
+
 ### Version 3.0.0
 
 - `@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)

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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.",

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

@@ -1,5 +1,4 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
-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';
@@ -38,55 +37,53 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   const theme = useTheme();
 
   return (
-    <FocusTrap disableEnforceFocus 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>
+    <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>
   );
 };