material-react-table 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/esm/material-react-table.esm.js

@@ -2358,16 +2358,6 @@ const MRT_TableContainer = ({ table }) => {
 const MRT_TablePaper = ({ table }) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (isFullScreen) {
-                document.body.style.height = '100vh';
-            }
-            else {
-                document.body.style.height = 'auto';
-            }
-        }
-    }, [isFullScreen]);
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
@@ -2379,7 +2369,16 @@ const MRT_TablePaper = ({ table }) => {
             }
         }, sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
-            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
+            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
+            ? {
+                height: '100vh',
+                margin: 0,
+                maxHeight: '100vh',
+                maxWidth: '100vw',
+                padding: 0,
+                width: '100vw',
+            }
+            : {})) }),
         enableTopToolbar && React.createElement(MRT_TopToolbar, { table: table }),
         React.createElement(MRT_TableContainer, { table: table }),
         enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
@@ -2537,6 +2536,22 @@ const MRT_TableRoot = (props) => {
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
+    const initialBodyHeight = useRef();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (table.getState().isFullScreen) {
+                document.body.style.height = '100vh';
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+            }
+        }
+    }, [table.getState().isFullScreen]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),