[DataGrid] Replace GridAutoSizer with ResizeObserver

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

@@ -426,7 +426,7 @@ describe('<DataGridPro /> - Rows', () => {
       });
       await act(() => Promise.resolve());
       clock.runToLast();
-      expect(getRows()).to.have.length(4);
+      expect(getRows()).to.have.length(3);
     });
 
     it('should render last row when scrolling to the bottom', () => {

packages/grid/x-data-grid/src/components/GridHeader.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
-export const GridHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  function GridHeader(props, ref) {
-    const rootProps = useGridRootProps();
+export function GridHeader() {
+  const rootProps = useGridRootProps();
 
-    return (
-      <div ref={ref} {...props}>
-        <rootProps.slots.preferencesPanel {...rootProps.slotProps?.preferencesPanel} />
-        {rootProps.slots.toolbar && <rootProps.slots.toolbar {...rootProps.slotProps?.toolbar} />}
-      </div>
-    );
-  },
-);
+  return (
+    <React.Fragment>
+      <rootProps.slots.preferencesPanel {...rootProps.slotProps?.preferencesPanel} />
+      {rootProps.slots.toolbar && <rootProps.slots.toolbar {...rootProps.slotProps?.toolbar} />}
+    </React.Fragment>
+  );
+}

packages/grid/x-data-grid/src/components/base/GridBody.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { ElementSize } from '../../models/elementSize';
 import { GridMainContainer } from '../containers/GridMainContainer';
-import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import {
   gridColumnPositionsSelector,
@@ -28,7 +27,6 @@ import {
 import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
 
 interface GridBodyProps {
-  children?: React.ReactNode;
   ColumnHeadersProps?: Record<string, any>;
   VirtualScrollerComponent: React.JSXElementConstructor<
     React.HTMLAttributes<HTMLDivElement> & {
@@ -39,9 +37,10 @@ interface GridBodyProps {
 }
 
 function GridBody(props: GridBodyProps) {
-  const { children, VirtualScrollerComponent, ColumnHeadersProps } = props;
+  const { VirtualScrollerComponent, ColumnHeadersProps } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
+  const rootRef = React.useRef<HTMLDivElement>(null);
 
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
@@ -80,6 +79,29 @@ function GridBody(props: GridBodyProps) {
     rootProps.disableVirtualization,
   );
 
+  useEnhancedEffect(() => {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+
+    const observer = new ResizeObserver(() => {
+      apiRef.current.computeSizeAndPublishResizeEvent();
+    });
+
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+
+    return () => {
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
+
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
@@ -111,15 +133,10 @@ function GridBody(props: GridBodyProps) {
     virtualScrollerRef,
   });
 
-  const handleResize = React.useCallback(
-    (size: ElementSize) => {
-      apiRef.current.publishEvent('resize', size);
-    },
-    [apiRef],
-  );
+  const hasDimensions = !!apiRef.current.getRootDimensions();
 
   return (
-    <GridMainContainer>
+    <GridMainContainer ref={rootRef}>
       <rootProps.slots.columnHeaders
         ref={columnsContainerRef}
         innerRef={columnHeadersRef}
@@ -139,17 +156,17 @@ function GridBody(props: GridBodyProps) {
         hasOtherElementInTabSequence={hasOtherElementInTabSequence}
         {...ColumnHeadersProps}
       />
-      <GridAutoSizer
-        nonce={rootProps.nonce}
-        disableHeight={rootProps.autoHeight}
-        onResize={handleResize}
-      >
+      {hasDimensions && (
         <VirtualScrollerComponent
+          // The content is only rendered after dimensions are computed because
+          // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
+          // but only does something if the dimensions are also available.
+          // If this event is published while dimensions haven't been computed,
+          // the `onFetchRows` prop won't be called during mount.
           ref={virtualScrollerRef}
           disableVirtualization={isVirtualizationDisabled}
         />
-      </GridAutoSizer>
-      {children}
+      )}
     </GridMainContainer>
   );
 }
@@ -159,7 +176,6 @@ GridBody.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  children: PropTypes.node,
   ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired,
 } as any;

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

@@ -29,12 +29,14 @@ const GridMainContainerRoot = styled('div', {
   overflow: 'hidden',
 }));
 
-export function GridMainContainer(props: React.PropsWithChildren<{}>) {
-  const rootProps = useGridRootProps();
-  const classes = useUtilityClasses(rootProps);
-  return (
-    <GridMainContainerRoot className={classes.root} ownerState={rootProps}>
-      {props.children}
-    </GridMainContainerRoot>
-  );
-}
+export const GridMainContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    const rootProps = useGridRootProps();
+    const classes = useUtilityClasses(rootProps);
+    return (
+      <GridMainContainerRoot ref={ref} className={classes.root} ownerState={rootProps}>
+        {props.children}
+      </GridMainContainerRoot>
+    );
+  },
+);

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

@@ -78,12 +78,6 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
     setMountedState(true);
   }, []);
 
-  useEnhancedEffect(() => {
-    if (mountedState) {
-      apiRef.current.updateGridDimensionsRef();
-    }
-  }, [apiRef, mountedState]);
-
   if (!mountedState) {
     return null;
   }

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

@@ -9,7 +9,6 @@ export * from './panel';
 export * from './toolbar';
 
 export * from './GridApiContext';
-export * from './GridAutoSizer';
 export * from './GridFooter';
 export * from './GridHeader';
 export * from './GridLoadingOverlay';

packages/grid/x-data-grid/src/hooks/features/dimensions/gridDimensionsApi.ts

@@ -46,4 +46,8 @@ export interface GridDimensionsPrivateApi {
    * Forces a recalculation of all dimensions.
    */
   updateGridDimensionsRef: () => void;
+  /**
+   * Computes the size and publishes a `resize` event with the new value.
+   */
+  computeSizeAndPublishResizeEvent: () => void;
 }