[DataGrid] Improve custom overlay slots positioning

packages/grid/_modules_/grid/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}

packages/grid/_modules_/grid/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}
+    />
+  );
+}

packages/grid/_modules_/grid/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} />;
 });