remove GridOverlays export

packages/x-data-grid/src/components/base/index.ts

@@ -1,3 +1,2 @@
 export * from './GridBody';
 export * from './GridFooterPlaceholder';
-export * from './GridOverlays';

packages/x-data-grid/src/components/containers/GridOverlay.tsx

@@ -4,20 +4,66 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { Theme, SxProps, styled } from '@mui/system';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import { minimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
+import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
 
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };
 
+interface GridOverlaysProps {
+  overlayType: GridOverlayType;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
+}
+
+interface GridOverlayWrapperRootProps extends GridOverlaysProps {
+  right: number;
+}
+const GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  shouldForwardProp: (prop) =>
+    prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
+  overridesResolver: (props, styles) => styles.overlayWrapper,
+})<GridOverlayWrapperRootProps>(({ overlayType, loadingOverlayVariant, right }) =>
+  // Skeleton overlay should flow with the scroll container and not be sticky
+  loadingOverlayVariant !== 'skeleton'
+    ? {
+        position: 'sticky', // To stay in place while scrolling
+        top: 'var(--DataGrid-headersTotalHeight)', // TODO: take pinned rows into account
+        left: 0,
+        right: `${right}px`,
+        width: 0, // To stay above the content instead of shifting it down
+        height: 0, // To stay above the content instead of shifting it down
+        zIndex:
+          overlayType === 'loadingOverlay'
+            ? 5 // Should be above pinned columns, pinned rows, and detail panel
+            : 4, // Should be above pinned columns and detail panel
+      }
+    : {},
+);
+
+const GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  shouldForwardProp: (prop) => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
+  overridesResolver: (props, styles) => styles.overlayWrapperInner,
+})({});
 type OwnerState = DataGridProcessedProps;
 
 const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
     root: ['overlay'],
+    wrapperRoot: ['overlayWrapper'],
+    wrapperInner: ['overlayWrapperInner'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -37,14 +83,49 @@ const GridOverlayRoot = styled('div', {
   backgroundColor: 'var(--unstable_DataGrid-overlayBackground)',
 });
 
+function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+
+  let height: React.CSSProperties['height'] = Math.max(
+    dimensions.viewportOuterSize.height -
+      dimensions.topContainerHeight -
+      dimensions.bottomContainerHeight -
+      (dimensions.hasScrollX ? dimensions.scrollbarSize : 0),
+    0,
+  );
+
+  if (height === 0) {
+    height = minimalContentHeight;
+  }
+
+  const classes = useUtilityClasses(rootProps);
+
+  return (
+    <GridOverlayWrapperRoot
+      className={clsx(classes.wrapperRoot)}
+      {...props}
+      right={dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width}
+    >
+      <GridOverlayWrapperInner
+        className={clsx(classes.wrapperInner)}
+        style={{
+          height,
+          width: dimensions.viewportOuterSize.width,
+        }}
+        {...props}
+      />
+    </GridOverlayWrapperRoot>
+  );
+}
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(
   props: GridOverlayProps,
   ref,
 ) {
   const { className, ...other } = props;
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-
   return (
     <GridOverlayRoot
       ref={ref}
@@ -66,5 +147,13 @@ GridOverlay.propTypes = {
     PropTypes.object,
   ]),
 } as any;
+GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
+} as any;
 
-export { GridOverlay };
+export { GridOverlay, GridOverlayWrapper };

packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx

@@ -10,7 +10,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridDimensions, gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
 import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
-import { GridOverlays as Overlays } from '../base/GridOverlays';
 import { GridHeaders } from '../GridHeaders';
 import { GridMainContainer as Container } from './GridMainContainer';
 import { GridTopContainer as TopContainer } from './GridTopContainer';
@@ -73,7 +72,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const overlaysProps = useGridOverlays();
+  const { getOverlay, overlaysProps } = useGridOverlays();
   const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
 
   const virtualScroller = useGridVirtualScroller();
@@ -99,7 +98,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
           <rootProps.slots.pinnedRows position="top" virtualScroller={virtualScroller} />
         </TopContainer>
 
-        <Overlays {...overlaysProps} />
+        {getOverlay()}
 
         <Content {...getContentProps()}>
           <RenderZone {...getRenderZoneProps()}>

packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts → packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx

@@ -5,6 +5,7 @@ import { gridExpandedRowCountSelector } from '../filter';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
 import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
+import { GridOverlayWrapper } from '../../../components/containers';
 
 export type GridOverlayType =
   | keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'>
@@ -43,5 +44,20 @@ export const useGridOverlays = () => {
       rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
   }
 
-  return { overlayType, loadingOverlayVariant };
+  const overlaysProps = { overlayType, loadingOverlayVariant };
+
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return (
+      <GridOverlayWrapper {...overlaysProps}>
+        <Overlay {...overlayProps} />
+      </GridOverlayWrapper>
+    );
+  };
+
+  return { getOverlay, overlaysProps };
 };