mui · cherniavskii · Feb 25, 2022 · Feb 3, 2022 · Feb 3, 2022 · Feb 3, 2022
diff --git a/docs/data/data-grid/components/CustomEmptyOverlayGrid.js b/docs/data/data-grid/components/CustomEmptyOverlayGrid.js
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { GridOverlay, DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import { styled } from '@mui/material/styles';
 
-const StyledGridOverlay = styled(GridOverlay)(({ theme }) => ({
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+  display: 'flex',
   flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
   '& .ant-empty-img-1': {
     fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
   },

diff --git a/docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx b/docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { GridOverlay, DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import { styled } from '@mui/material/styles';
 
-const StyledGridOverlay = styled(GridOverlay)(({ theme }) => ({
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+  display: 'flex',
   flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
   '& .ant-empty-img-1': {
     fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
   },

diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.js b/docs/data/data-grid/components/CustomLoadingOverlayGrid.js
@@ -1,18 +1,8 @@
 import * as React from 'react';
-import { GridOverlay, DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import LinearProgress from '@mui/material/LinearProgress';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-function CustomLoadingOverlay() {
-  return (
-    <GridOverlay>
-      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
-        <LinearProgress />
-      </div>
-    </GridOverlay>
-  );
-}
-
 export default function CustomLoadingOverlayGrid() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
@@ -24,7 +14,7 @@ export default function CustomLoadingOverlayGrid() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         components={{
-          LoadingOverlay: CustomLoadingOverlay,
+          LoadingOverlay: LinearProgress,
         }}
         loading
         {...data}

diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx
@@ -1,18 +1,8 @@
 import * as React from 'react';
-import { GridOverlay, DataGrid } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import LinearProgress from '@mui/material/LinearProgress';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-function CustomLoadingOverlay() {
-  return (
-    <GridOverlay>
-      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
-        <LinearProgress />
-      </div>
-    </GridOverlay>
-  );
-}
-
 export default function CustomLoadingOverlayGrid() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
@@ -24,7 +14,7 @@ export default function CustomLoadingOverlayGrid() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         components={{
-          LoadingOverlay: CustomLoadingOverlay,
+          LoadingOverlay: LinearProgress,
         }}
         loading
         {...data}

diff --git a/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview b/docs/data/data-grid/components/CustomLoadingOverlayGrid.tsx.preview
@@ -1,6 +1,6 @@
 <DataGrid
   components={{
-    LoadingOverlay: CustomLoadingOverlay,
+    LoadingOverlay: LinearProgress,
   }}
   loading
   {...data}

diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.js b/docs/data/data-grid/rows/InfiniteLoadingGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, GridOverlay } from '@mui/x-data-grid-pro';
+import { DataGridPro } from '@mui/x-data-grid-pro';
 import {
   useDemoData,
   getRealGridData,
@@ -17,16 +17,6 @@ function sleep(duration) {
   });
 }
 
-function CustomLoadingOverlay() {
-  return (
-    <GridOverlay>
-      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
-        <LinearProgress />
-      </div>
-    </GridOverlay>
-  );
-}
-
 export default function InfiniteLoadingGrid() {
   const [loading, setLoading] = React.useState(false);
   const [loadedRows, setLoadedRows] = React.useState([]);
@@ -70,7 +60,7 @@ export default function InfiniteLoadingGrid() {
         hideFooterPagination
         onRowsScrollEnd={handleOnRowsScrollEnd}
         components={{
-          LoadingOverlay: CustomLoadingOverlay,
+          LoadingOverlay: LinearProgress,
         }}
       />
     </div>

diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx b/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, GridOverlay } from '@mui/x-data-grid-pro';
+import { DataGridPro } from '@mui/x-data-grid-pro';
 import {
   useDemoData,
   getRealGridData,
@@ -17,16 +17,6 @@ function sleep(duration: number) {
   });
 }
 
-function CustomLoadingOverlay() {
-  return (
-    <GridOverlay>
-      <div style={{ position: 'absolute', top: 0, width: '100%' }}>
-        <LinearProgress />
-      </div>
-    </GridOverlay>
-  );
-}
-
 export default function InfiniteLoadingGrid() {
   const [loading, setLoading] = React.useState(false);
   const [loadedRows, setLoadedRows] = React.useState<any>([]);
@@ -70,7 +60,7 @@ export default function InfiniteLoadingGrid() {
         hideFooterPagination
         onRowsScrollEnd={handleOnRowsScrollEnd}
         components={{
-          LoadingOverlay: CustomLoadingOverlay,
+          LoadingOverlay: LinearProgress,
         }}
       />
     </div>

diff --git a/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx.preview b/docs/data/data-grid/rows/InfiniteLoadingGrid.tsx.preview
@@ -5,6 +5,6 @@
   hideFooterPagination
   onRowsScrollEnd={handleOnRowsScrollEnd}
   components={{
-    LoadingOverlay: CustomLoadingOverlay,
+    LoadingOverlay: LinearProgress,
   }}
 />
diff --git a/packages/grid/x-data-grid/src/internals/components/base/GridBody.tsx b/packages/grid/x-data-grid/src/internals/components/base/GridBody.tsx
@@ -9,6 +9,7 @@ import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { GridOverlaysRoot } from './GridOverlaysRoot';
 
 interface GridBodyProps {
   children?: React.ReactNode;
@@ -72,7 +73,9 @@ function GridBody(props: GridBodyProps) {
 
   return (
     <GridMainContainer>
-      <GridOverlays />
+      <GridOverlaysRoot>
+        <GridOverlays />
+      </GridOverlaysRoot>
       <ColumnHeadersComponent ref={columnsContainerRef} innerRef={columnHeadersRef} />
       <GridAutoSizer
         nonce={rootProps.nonce}

diff --git a/packages/grid/x-data-grid/src/internals/components/base/GridErrorHandler.tsx b/packages/grid/x-data-grid/src/internals/components/base/GridErrorHandler.tsx
@@ -6,6 +6,7 @@ import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridAutoSizer, AutoSizerSize } from '../GridAutoSizer';
 import { GridEvents } from '../../models/events/gridEvents';
+import { GridOverlaysRoot } from './GridOverlaysRoot';
 
 export function GridErrorHandler(props) {
   const { children } = props;
@@ -35,10 +36,12 @@ export function GridErrorHandler(props) {
             onResize={handleResize}
           >
             {() => (
-              <rootProps.components.ErrorOverlay
-                {...errorProps}
-                {...rootProps.componentsProps?.errorOverlay}
-              />
+              <GridOverlaysRoot>
+                <rootProps.components.ErrorOverlay
+                  {...errorProps}
+                  {...rootProps.componentsProps?.errorOverlay}
+                />
+              </GridOverlaysRoot>
             )}
           </GridAutoSizer>
         </GridMainContainer>

diff --git a/packages/grid/x-data-grid/src/internals/components/base/GridOverlaysRoot.tsx b/packages/grid/x-data-grid/src/internals/components/base/GridOverlaysRoot.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { GridEvents } from '../../models/events';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+
+export function GridOverlaysRoot(props: React.PropsWithChildren<{}>) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+
+  const [viewportInnerSize, setViewportInnerSize] = React.useState(
+    () => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null,
+  );
+
+  const handleViewportSizeChange = React.useCallback(() => {
+    setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
+  }, [apiRef]);
+
+  useEnhancedEffect(() => {
+    return apiRef.current.subscribeEvent(
+      GridEvents.viewportInnerSizeChange,
+      handleViewportSizeChange,
+    );
+  }, [apiRef, handleViewportSizeChange]);
+
+  let height: React.CSSProperties['height'] = viewportInnerSize?.height ?? 0;
+  if (rootProps.autoHeight && height === 0) {
+    height = 'auto';
+  }
+
+  if (!viewportInnerSize) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        height,
+        width: viewportInnerSize?.width ?? 0,
+        position: 'absolute',
+        top: headerHeight,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/grid/x-data-grid/src/internals/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/internals/components/containers/GridOverlay.tsx
@@ -1,15 +1,10 @@
 import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { GridEvents } from '../../models/events';
 
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -31,11 +26,7 @@ const GridOverlayRoot = styled('div', {
   overridesResolver: (props, styles) => styles.overlay,
 })(({ theme }) => ({
   display: 'flex',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
+  height: '100%',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
@@ -46,50 +37,10 @@ export const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(fu
   props: GridOverlayProps,
   ref,
 ) {
-  const { className, style, ...other } = props;
-  const apiRef = useGridApiContext();
+  const { className, ...other } = props;
   const rootProps = useGridRootProps();
   const ownerState = { classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
 
-  const [viewportInnerSize, setViewportInnerSize] = React.useState(
-    () => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null,
-  );
-
-  const handleViewportSizeChange = React.useCallback(() => {
-    setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
-  }, [apiRef]);
-
-  useEnhancedEffect(() => {
-    return apiRef.current.subscribeEvent(
-      GridEvents.viewportInnerSizeChange,
-      handleViewportSizeChange,
-    );
-  }, [apiRef, handleViewportSizeChange]);
-
-  let height: React.CSSProperties['height'] = viewportInnerSize?.height ?? 0;
-  if (rootProps.autoHeight && height === 0) {
-    height = 'auto';
-  }
-
-  if (!viewportInnerSize) {
-    return null;
-  }
-
-  return (
-    <GridOverlayRoot
-      ref={ref}
-      className={clsx(classes.root, className)}
-      style={{
-        height,
-        width: viewportInnerSize?.width ?? 0,
-        top: headerHeight,
-        position: 'absolute',
-        left: 0,
-        ...style,
-      }}
-      {...other}
-    />
-  );
+  return <GridOverlayRoot ref={ref} className={clsx(classes.root, className)} {...other} />;
 });
diff --git a/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/components.DataGrid.test.tsx
@@ -125,7 +125,7 @@ describe('<DataGrid /> - Components', () => {
         </ErrorBoundary>,
       );
     }).toErrorDev([
-      'MUI: Could not find the data grid context.',
+      'MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.',
       'The above error occurred in the <ForwardRef(GridOverlay)> component',
     ]);
   });

diff --git a/packages/storybook/src/stories/grid-error.stories.tsx b/packages/storybook/src/stories/grid-error.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro, GridColDef, useGridApiRef, GridOverlay } from '@mui/x-data-grid-pro';
+import { DataGridPro, GridColDef, useGridApiRef } from '@mui/x-data-grid-pro';
 import '../style/grid-stories.css';
 
 export default {
@@ -145,12 +145,19 @@ export const ErrorProp = () => {
 };
 function CustomErrorOverlay(props) {
   return (
-    <GridOverlay className="custom-overlay">
-      <div style={{ textAlign: 'center' }}>
-        <h1>{props.title}</h1>
-        <p>{typeof props.error === 'string' ? props.error : props.error.message}</p>
-      </div>
-    </GridOverlay>
+    <div
+      style={{
+        textAlign: 'center',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      }}
+      className="custom-overlay"
+    >
+      <h1>{props.title}</h1>
+      <p>{typeof props.error === 'string' ? props.error : props.error.message}</p>
+    </div>
   );
 }