[DataGrid] Remove GridOverlays export (#15573)

Co-authored-by: Andrew Cherniavskyi <[email protected]>
mui · Nov 25, 2024 · ea367d2 · ea367d2
1 parent d6bc10a
commit ea367d2
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 42 deletions.
diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -6,12 +6,16 @@ import clsx from 'clsx';
 import { minimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
+import { GridSlotsComponent } from '../../models';
+
+export type GridOverlayType =
+  | keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'>
+  | null;
 
 interface GridOverlaysProps {
   overlayType: GridOverlayType;
@@ -66,7 +70,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
+export function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
@@ -111,30 +115,3 @@ GridOverlayWrapper.propTypes = {
   loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
 } as any;
-
-GridOverlays.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 function GridOverlays(props: GridOverlaysProps) {
-  const { overlayType } = props;
-  const rootProps = useGridRootProps();
-
-  if (!overlayType) {
-    return null;
-  }
-
-  const Overlay = rootProps.slots?.[overlayType];
-  const overlayProps = rootProps.slotProps?.[overlayType];
-
-  return (
-    <GridOverlayWrapper {...props}>
-      <Overlay {...overlayProps} />
-    </GridOverlayWrapper>
-  );
-}
diff --git a/packages/x-data-grid/src/components/base/index.ts b/packages/x-data-grid/src/components/base/index.ts
@@ -1,3 +1,2 @@
 export * from './GridBody';
 export * from './GridFooterPlaceholder';
-export * from './GridOverlays';
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/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()}>

diff --git a/...ooks/features/overlays/useGridOverlays.ts → ...oks/features/overlays/useGridOverlays.tsx b/...ooks/features/overlays/useGridOverlays.ts → ...oks/features/overlays/useGridOverlays.tsx
@@ -1,14 +1,12 @@
+import * as React from 'react';
 import { useGridSelector } from '../../utils';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { gridExpandedRowCountSelector } from '../filter';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
-import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
-
-export type GridOverlayType =
-  | keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'>
-  | null;
+import { GridOverlayWrapper } from '../../../components/base/GridOverlays';
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
 
 /**
  * Uses the grid state to determine which overlay to display.
@@ -43,5 +41,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 };
 };
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
@@ -423,7 +423,6 @@
   { "name": "gridNumberComparator", "kind": "Variable" },
   { "name": "GridOverlay", "kind": "Variable" },
   { "name": "GridOverlayProps", "kind": "TypeAlias" },
-  { "name": "GridOverlays", "kind": "Function" },
   { "name": "gridPageCountSelector", "kind": "Variable" },
   { "name": "gridPageSelector", "kind": "Variable" },
   { "name": "gridPageSizeSelector", "kind": "Variable" },

diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
@@ -386,7 +386,6 @@
   { "name": "gridNumberComparator", "kind": "Variable" },
   { "name": "GridOverlay", "kind": "Variable" },
   { "name": "GridOverlayProps", "kind": "TypeAlias" },
-  { "name": "GridOverlays", "kind": "Function" },
   { "name": "gridPageCountSelector", "kind": "Variable" },
   { "name": "gridPageSelector", "kind": "Variable" },
   { "name": "gridPageSizeSelector", "kind": "Variable" },

diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
@@ -348,7 +348,6 @@
   { "name": "gridNumberComparator", "kind": "Variable" },
   { "name": "GridOverlay", "kind": "Variable" },
   { "name": "GridOverlayProps", "kind": "TypeAlias" },
-  { "name": "GridOverlays", "kind": "Function" },
   { "name": "gridPageCountSelector", "kind": "Variable" },
   { "name": "gridPageSelector", "kind": "Variable" },
   { "name": "gridPageSizeSelector", "kind": "Variable" },