@mui/x-data-grid 7.25.0 → 7.26.0

package/modern/components/containers/GridRoot.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
@@ -13,6 +13,7 @@ import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiCon
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
+import { useIsSSR } from "../../hooks/utils/useIsSSR.js";
 import { GridHeader } from "../GridHeader.js";
 import { GridBody, GridFooterPlaceholder } from "../base/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,16 +38,17 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
-  const handleRef = useForkRef(rootElementRef, ref);
+  const rootMountCallback = React.useCallback(node => {
+    if (node === null) {
+      return;
+    }
+    apiRef.current.publishEvent('rootMount', node);
+  }, [apiRef]);
+  const handleRef = useForkRef(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
-
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  useEnhancedEffect(() => {
-    setMountedState(true);
-  }, []);
-  if (!mountedState) {
+  const isSSR = useIsSSR();
+  if (isSSR) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({

package/modern/components/containers/GridRootStyles.js

@@ -3,7 +3,6 @@ import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '
 import { gridClasses as c } from "../../constants/gridClasses.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -35,6 +34,7 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+const shouldShowBorderTopRightRadiusSelector = state => state.dimensions.hasScrollX && (!state.dimensions.hasScrollY || state.dimensions.scrollbarSize === 0);
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -265,7 +265,7 @@ export const GridRootStyles = styled('div', {
   theme: t
 }) => {
   const apiRef = useGridPrivateApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const shouldShowBorderTopRightRadius = useGridSelector(apiRef, shouldShowBorderTopRightRadiusSelector);
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
   const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
@@ -417,7 +417,7 @@ export const GridRootStyles = styled('div', {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,

package/modern/components/virtualization/GridMainContainer.js

@@ -18,7 +18,7 @@ const Element = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.main, ownerState.dimensions.rightPinnedWidth > 0 && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
+    return [styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay']];
   }
 })({
   flexGrow: 1,

package/modern/components/virtualization/GridVirtualScroller.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridOverlays as Overlays } from "../base/GridOverlays.js";
@@ -23,12 +23,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -39,7 +40,7 @@ const Scroller = styled('div', {
     const {
       ownerState
     } = props;
-    return [styles.virtualScroller, ownerState.dimensions.hasScrollX && styles['virtualScroller--hasScrollX']];
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
 })({
   position: 'relative',
@@ -58,14 +59,19 @@ const Scroller = styled('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const hasPinnedRightSelector = state => state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const overlaysProps = useGridOverlays();
   const ownerState = {
     classes: rootProps.classes,
-    dimensions,
+    hasScrollX,
+    hasPinnedRight,
     loadingOverlayVariant: overlaysProps.loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
@@ -77,18 +83,19 @@ function GridVirtualScroller(props) {
     getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
-    getRows
+    getRows,
+    getScrollAreaProps
   } = virtualScroller;
   const rows = getRows();
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridScrollArea, {
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
-    }), /*#__PURE__*/_jsxs(Scroller, _extends({
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
@@ -103,7 +110,7 @@ function GridVirtualScroller(props) {
             virtualScroller: virtualScroller
           })]
         }))
-      })), /*#__PURE__*/_jsx(SpaceFiller, {
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(BottomContainer, {
         children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
@@ -111,9 +118,9 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
-    }, getScrollbarHorizontalProps())), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
     }, getScrollbarVerticalProps())), props.children]
   }));

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,19 +1,21 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
-export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+export const useGridRegisterPipeProcessor = (apiRef, group, callback, enabled = true) => {
   const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(() => {
-    registerPreProcessor();
+    if (enabled) {
+      registerPreProcessor();
+    }
   });
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
-    } else {
+    } else if (enabled) {
       registerPreProcessor();
     }
     return () => {
@@ -22,5 +24,5 @@ export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
         cleanup.current = null;
       }
     };
-  }, [registerPreProcessor]);
+  }, [registerPreProcessor, enabled]);
 };

package/modern/hooks/core/useGridStateInitialization.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from "../utils/index.js";
 import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
-  const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
     controlStateMapRef.current[controlStateItem.stateId] = controlStateItem;
   }, []);
@@ -79,7 +78,9 @@ export const useGridStateInitialization = apiRef => {
       });
     }, reason);
   }, [apiRef]);
-  const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
+  const forceUpdate = React.useCallback(() => {
+    // @deprecated - do nothing
+  }, []);
   const publicStateApi = {
     setState,
     forceUpdate

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,7 +7,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
-import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
@@ -46,19 +46,17 @@ export const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
+  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -130,8 +128,7 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
@@ -142,7 +139,7 @@ export const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -234,8 +231,7 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === PinnedColumnPosition.LEFT) {
@@ -250,7 +246,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -107,18 +107,6 @@ export const gridColumnPositionsSelector = createSelectorMemoized(gridVisibleCol
   return positions;
 });
 
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-export const gridColumnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
-  const colCount = visibleColumns.length;
-  if (colCount === 0) {
-    return 0;
-  }
-  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
-});
-
 /**
  * Get the filterable columns as an array.
  * @category Columns

package/modern/hooks/features/dimensions/gridDimensionsSelectors.js

@@ -1 +1,26 @@
-export const gridDimensionsSelector = state => state.dimensions;
+import { createSelector } from "../../../utils/createSelector.js";
+export const gridDimensionsSelector = state => state.dimensions;
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+export const gridColumnsTotalWidthSelector = createSelector(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+export const gridRowHeightSelector = state => state.dimensions.rowHeight;
+export const gridContentHeightSelector = state => state.dimensions.contentSize.height;
+export const gridHasScrollXSelector = state => state.dimensions.hasScrollX;
+export const gridHasScrollYSelector = state => state.dimensions.hasScrollY;
+export const gridHasFillerSelector = state => state.dimensions.columnsTotalWidth < state.dimensions.viewportOuterSize.width;
+export const gridHeaderHeightSelector = state => state.dimensions.headerHeight;
+export const gridGroupHeaderHeightSelector = state => state.dimensions.groupHeaderHeight;
+export const gridHeaderFilterHeightSelector = state => state.dimensions.headerFilterHeight;
+export const gridVerticalScrollbarWidthSelector = state => state.dimensions.hasScrollY ? state.dimensions.scrollbarSize : 0;
+export const gridHorizontalScrollbarHeightSelector = state => state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+export const gridHasBottomFillerSelector = state => {
+  const height = state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+  const needsLastRowBorder = state.dimensions.viewportOuterSize.height - state.dimensions.minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return false;
+  }
+  return true;
+};

package/modern/hooks/features/dimensions/index.js

@@ -1,2 +1 @@
-export * from "./gridDimensionsSelectors.js";
-export {};
+export { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "./gridDimensionsSelectors.js";

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -2,21 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { throttle } from '@mui/x-internals/throttle';
-import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { createSelector } from "../../../utils/createSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
-import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
+import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { gridRenderContextSelector } from "../virtualization/index.js";
 import { useGridSelector } from "../../utils/index.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
-import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
+import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
 import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -43,39 +45,47 @@ const EMPTY_DIMENSIONS = {
   topContainerHeight: 0,
   bottomContainerHeight: 0
 };
-export const dimensionsStateInitializer = state => {
+export const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
+  const density = gridDensityFactorSelector(apiRef);
   return _extends({}, state, {
-    dimensions
+    dimensions: _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)))
   });
 };
+const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const validRowHeight = React.useMemo(() => getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning), [props.rowHeight]);
-  const rowHeight = Math.floor(validRowHeight * densityFactor);
-  const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
-  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
-  const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
-  const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 1);
-  const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
-  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
-  const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
-  const [savedSize, setSavedSize] = React.useState();
-  const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
+  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
+  const isFirstSizing = React.useRef(true);
+  const {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
   const previousSize = React.useRef(undefined);
-  const getRootDimensions = () => apiRef.current.state.dimensions;
-  const setDimensions = useEventCallback(dimensions => {
+  const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef.current.state), [apiRef]);
+  const setDimensions = React.useCallback(dimensions => {
     apiRef.current.setState(state => _extends({}, state, {
       dimensions
     }));
-  });
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, gridDimensionsSelector(apiRef.current.state));
+    }
+  }, [apiRef]);
   const resize = React.useCallback(() => {
     const element = apiRef.current.mainElementRef.current;
     if (!element) {
@@ -96,10 +106,7 @@ export function useGridDimensions(apiRef, props) {
     if (!dimensions.isReady) {
       return 0;
     }
-    const currentPage = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    const currentPage = getVisibleRows(apiRef);
 
     // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
     // to find out the maximum number of rows that can fit in the visible part of the grid
@@ -110,16 +117,19 @@ export function useGridDimensions(apiRef, props) {
     }
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
+  }, [apiRef, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    if (isFirstSizing.current) {
+      return;
+    }
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
     const rootElement = apiRef.current.rootElementRef.current;
-    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
-    const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
-    const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
     const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
       width: nonPinnedColumnsTotalWidth,
@@ -197,12 +207,21 @@ export function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
+    if (isDeepEqual(prevDimensions, newDimensions)) {
+      return;
+    }
     setDimensions(newDimensions);
     if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  const updateDimensionCallback = useEventCallback(updateDimensions);
+  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? throttle(() => {
+    updateDimensionCallback();
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
+  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     resize,
     getRootDimensions
@@ -211,35 +230,12 @@ export function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
+  useEnhancedEffect(updateDimensions, [updateDimensions]);
   useGridApiMethod(apiRef, apiPublic, 'public');
   useGridApiMethod(apiRef, apiPrivate, 'private');
-  useEnhancedEffect(() => {
-    if (savedSize) {
-      updateDimensions();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateDimensions]);
-  const root = apiRef.current.rootElementRef.current;
-  useEnhancedEffect(() => {
-    if (!root) {
-      return;
-    }
-    const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
-    set('--height', `${dimensionsState.rowHeight}px`);
-  }, [root, dimensionsState]);
-  const isFirstSizing = React.useRef(true);
+  const handleRootMount = React.useCallback(root => {
+    setCSSVariables(root, gridDimensionsSelector(apiRef.current.state));
+  }, [apiRef]);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
@@ -250,28 +246,58 @@ export function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isFirstSizing.current) {
+    if (isFirstSizing.current || !debouncedUpdateDimensions) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      setSavedSize(size);
       isFirstSizing.current = false;
+      updateDimensions();
       return;
     }
-    debouncedSetSavedSize(size);
-  }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
-  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'paginationModelChange', updateDimensions);
-  useGridApiOptionHandler(apiRef, 'columnsChange', updateDimensions);
-  useGridApiEventHandler(apiRef, 'resize', handleResize);
+    debouncedUpdateDimensions();
+  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  useGridApiOptionHandler(apiRef, 'rootMount', handleRootMount);
+  useGridApiOptionHandler(apiRef, 'resize', handleResize);
   useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
 }
-function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
+function setCSSVariables(root, dimensions) {
+  const set = (k, v) => root.style.setProperty(k, v);
+  set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
+  set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
+  set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
+  set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
+  set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
+  set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
+  set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
+  set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
+  set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
+  set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
+  set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  set('--height', `${dimensions.rowHeight}px`);
+}
+function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
+  const validRowHeight = getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
+  return {
+    rowHeight: Math.floor(validRowHeight * density),
+    headerHeight: Math.floor(props.columnHeaderHeight * density),
+    groupHeaderHeight: Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * density),
+    headerFilterHeight: Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * density),
+    columnsTotalWidth: columnsTotalWidthSelector(apiRef),
+    headersTotalHeight: getTotalHeaderHeight(apiRef, props),
+    leftPinnedWidth: pinnedColumnns.left.reduce((w, col) => w + col.computedWidth, 0),
+    rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
+  };
+}
+const scrollbarSizeCache = new WeakMap();
+function measureScrollbarSize(rootElement, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null || columnsTotalWidth === 0) {
+  if (rootElement === null) {
     return 0;
   }
+  const cachedSize = scrollbarSizeCache.get(rootElement);
+  if (cachedSize !== undefined) {
+    return cachedSize;
+  }
   const doc = ownerDocument(rootElement);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
@@ -282,6 +308,7 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   rootElement.removeChild(scrollDiv);
+  scrollbarSizeCache.set(rootElement, size);
   return size;
 }
 function areElementSizesEqual(a, b) {