subscribe to 'resize' asynchronously

packages/grid/_modules_/grid/components/ErrorOverlay.tsx

@@ -8,6 +8,7 @@ export interface ErrorOverlayProps extends GridOverlayProps {
   errorInfo: any;
 }
 
+// TODO v6: rename to GridErrorOverlay
 export const ErrorOverlay = React.forwardRef<HTMLDivElement, ErrorOverlayProps>(
   function ErrorOverlay(props: ErrorOverlayProps, ref) {
     const { message, hasError, errorInfo, ...other } = props;

packages/grid/_modules_/grid/components/base/GridBody.tsx

@@ -67,7 +67,9 @@ function GridBody(props: GridBodyProps) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   const handleResize = React.useCallback(
-    (size: ElementSize) => apiRef.current.publishEvent(GridEvents.resize, size),
+    (size: ElementSize) => {
+      apiRef.current.publishEvent(GridEvents.resize, size);
+    },
     [apiRef],
   );
 

packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx

@@ -4,6 +4,8 @@ import { useGridLogger } from '../../hooks/utils/useGridLogger';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridAutoSizer, AutoSizerSize } from '../GridAutoSizer';
+import { GridEvents } from '../../models/events/gridEvents';
 
 export function GridErrorHandler(props) {
   const { children } = props;
@@ -12,6 +14,13 @@ export function GridErrorHandler(props) {
   const rootProps = useGridRootProps();
   const error = apiRef.current.state.error;
 
+  const handleResize = React.useCallback(
+    (size: AutoSizerSize) => {
+      apiRef.current.publishEvent(GridEvents.resize, size);
+    },
+    [apiRef],
+  );
+
   return (
     <ErrorBoundary
       hasError={error != null}
@@ -20,10 +29,18 @@ export function GridErrorHandler(props) {
       logger={logger}
       render={(errorProps) => (
         <GridMainContainer>
-          <rootProps.components.ErrorOverlay
-            {...errorProps}
-            {...rootProps.componentsProps?.errorOverlay}
-          />
+          <GridAutoSizer
+            nonce={rootProps.nonce}
+            disableHeight={rootProps.autoHeight}
+            onResize={handleResize}
+          >
+            {() => (
+              <rootProps.components.ErrorOverlay
+                {...errorProps}
+                {...rootProps.componentsProps?.errorOverlay}
+              />
+            )}
+          </GridAutoSizer>
         </GridMainContainer>
       )}
     >

packages/grid/_modules_/grid/components/base/GridOverlays.tsx

@@ -28,5 +28,6 @@ export function GridOverlays() {
   if (rootProps.loading) {
     return <rootProps.components.LoadingOverlay {...rootProps.componentsProps?.loadingOverlay} />;
   }
+
   return null;
 }

packages/grid/_modules_/grid/components/containers/GridOverlay.tsx

@@ -1,4 +1,5 @@
 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';
@@ -8,7 +9,6 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { useGridApiEventHandler } from '../../hooks/utils/useGridApiEventHandler';
 import { GridEvents } from '../../models/events';
 
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
@@ -57,16 +57,26 @@ export const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(fu
     () => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null,
   );
 
-  const handleViewportSizeChangeTest = () =>
+  const handleViewportSizeChange = React.useCallback(() => {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
+  }, [apiRef]);
 
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleViewportSizeChangeTest);
+  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}

packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx

@@ -95,7 +95,6 @@ describe('<DataGridPro /> - Column Headers', () => {
       );
 
       const columnCell = getColumnHeaderCell(0);
-
       const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]');
 
       fireEvent.click(menuIconButton);

packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx

@@ -146,7 +146,6 @@ describe('<DataGridPro /> - Column pinning', () => {
       this.skip();
     }
     render(<TestCase nbCols={3} initialState={{ pinnedColumns: { right: ['price1M'] } }} />);
-    clock.runToLast();
     const columnHeader = getColumnHeaderCell(2);
     // @ts-expect-error need to migrate helpers to TypeScript
     expect(columnHeader).toHaveInlineStyle({ width: '100px' });
@@ -167,7 +166,6 @@ describe('<DataGridPro /> - Column pinning', () => {
       this.skip();
     }
     render(<TestCase nbCols={3} initialState={{ pinnedColumns: { right: ['price1M'] } }} />);
-    clock.runToLast();
     const columnHeader = getColumnHeaderCell(2);
     // @ts-expect-error need to migrate helpers to TypeScript
     expect(columnHeader).toHaveInlineStyle({ width: '100px' });

packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -15,7 +15,7 @@ import { useData } from 'packages/storybook/src/hooks/useData';
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGrid /> - Pagination', () => {
-  const { render, clock } = createRenderer({ clock: 'fake' });
+  const { render } = createRenderer({ clock: 'fake' });
 
   const BaselineTestCase = (
     props: Omit<DataGridProps, 'rows' | 'columns'> & { height?: number },
@@ -248,7 +248,6 @@ describe('<DataGrid /> - Pagination', () => {
 
     it('should apply the new pageSize when clicking on a page size option and onPageSizeChanged is not defined and pageSize is not controlled', () => {
       render(<BaselineTestCase rowsPerPageOptions={[1, 2, 3, 100]} />);
-      clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode
       fireEvent.mouseDown(screen.queryByLabelText('Rows per page:'));
       expect(screen.queryAllByRole('option').length).to.equal(4);
 
@@ -265,7 +264,6 @@ describe('<DataGrid /> - Pagination', () => {
           rowsPerPageOptions={[1, 2, 3, 100]}
         />,
       );
-      clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode
       fireEvent.mouseDown(screen.queryByLabelText('Rows per page:'));
       expect(screen.queryAllByRole('option').length).to.equal(4);
 
@@ -477,8 +475,6 @@ describe('<DataGrid /> - Pagination', () => {
         />,
       );
 
-      clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode
-
       const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight;
       const expectedViewportRowsLengthBefore = Math.floor(
         (heightBefore - headerHeight - footerHeight) / rowHeight,
@@ -638,7 +634,6 @@ describe('<DataGrid /> - Pagination', () => {
 
       expect(getColumnValues(0)).to.deep.equal(['0', '1']);
 
-      clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode
       fireEvent.mouseDown(screen.queryByLabelText('Rows per page:'));
       expect(screen.queryAllByRole('option').length).to.equal(2);
       fireEvent.click(screen.queryAllByRole('option')[1]);