@mui/x-data-grid 7.24.1 → 7.26.0

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

@@ -15,7 +15,7 @@ var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
-var _dimensions = require("../dimensions");
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
@@ -54,19 +54,17 @@ const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
   const offsetLeft = (0, _useGridVirtualScroller.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 = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
+  const groupHeaderHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridGroupHeaderHeightSelector);
+  const scrollbarWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -138,8 +136,7 @@ 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 = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === _constants.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;
@@ -150,7 +147,7 @@ const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, 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,
@@ -242,8 +239,7 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
@@ -258,7 +254,7 @@ const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -509,7 +509,8 @@ const useGridColumnResize = (apiRef, props) => {
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
         const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
+exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridPinnedColumnsSelector = exports.gridHasColSpanSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridCoreSelector = require("../../core/gridCoreSelector");
@@ -114,18 +114,6 @@ const gridColumnPositionsSelector = exports.gridColumnPositionsSelector = (0, _c
   return positions;
 });
 
-/**
- * Get the summed width of all the visible columns.
- * @category Visible Columns
- */
-const gridColumnsTotalWidthSelector = exports.gridColumnsTotalWidthSelector = (0, _createSelector.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/node/hooks/features/columns/useGridColumns.js

@@ -252,9 +252,13 @@ function useGridColumns(apiRef, props) {
    */
 
   const prevInnerWidth = React.useRef(null);
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

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

@@ -3,6 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridDimensionsSelector = void 0;
+exports.gridVerticalScrollbarWidthSelector = exports.gridRowHeightSelector = exports.gridHorizontalScrollbarHeightSelector = exports.gridHeaderHeightSelector = exports.gridHeaderFilterHeightSelector = exports.gridHasScrollYSelector = exports.gridHasScrollXSelector = exports.gridHasFillerSelector = exports.gridHasBottomFillerSelector = exports.gridGroupHeaderHeightSelector = exports.gridDimensionsSelector = exports.gridContentHeightSelector = exports.gridColumnsTotalWidthSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
 const gridDimensionsSelector = state => state.dimensions;
-exports.gridDimensionsSelector = gridDimensionsSelector;
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+exports.gridDimensionsSelector = gridDimensionsSelector;
+const gridColumnsTotalWidthSelector = exports.gridColumnsTotalWidthSelector = (0, _createSelector.createSelector)(gridDimensionsSelector, dimensions => dimensions.columnsTotalWidth);
+const gridRowHeightSelector = state => state.dimensions.rowHeight;
+exports.gridRowHeightSelector = gridRowHeightSelector;
+const gridContentHeightSelector = state => state.dimensions.contentSize.height;
+exports.gridContentHeightSelector = gridContentHeightSelector;
+const gridHasScrollXSelector = state => state.dimensions.hasScrollX;
+exports.gridHasScrollXSelector = gridHasScrollXSelector;
+const gridHasScrollYSelector = state => state.dimensions.hasScrollY;
+exports.gridHasScrollYSelector = gridHasScrollYSelector;
+const gridHasFillerSelector = state => state.dimensions.columnsTotalWidth < state.dimensions.viewportOuterSize.width;
+exports.gridHasFillerSelector = gridHasFillerSelector;
+const gridHeaderHeightSelector = state => state.dimensions.headerHeight;
+exports.gridHeaderHeightSelector = gridHeaderHeightSelector;
+const gridGroupHeaderHeightSelector = state => state.dimensions.groupHeaderHeight;
+exports.gridGroupHeaderHeightSelector = gridGroupHeaderHeightSelector;
+const gridHeaderFilterHeightSelector = state => state.dimensions.headerFilterHeight;
+exports.gridHeaderFilterHeightSelector = gridHeaderFilterHeightSelector;
+const gridVerticalScrollbarWidthSelector = state => state.dimensions.hasScrollY ? state.dimensions.scrollbarSize : 0;
+exports.gridVerticalScrollbarWidthSelector = gridVerticalScrollbarWidthSelector;
+const gridHorizontalScrollbarHeightSelector = state => state.dimensions.hasScrollX ? state.dimensions.scrollbarSize : 0;
+exports.gridHorizontalScrollbarHeightSelector = gridHorizontalScrollbarHeightSelector;
+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;
+};
+exports.gridHasBottomFillerSelector = gridHasBottomFillerSelector;

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

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
-Object.keys(_gridDimensionsSelectors).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridDimensionsSelectors[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridDimensionsSelectors[key];
-    }
-  });
-});
+Object.defineProperty(exports, "gridColumnsTotalWidthSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDimensionsSelectors.gridColumnsTotalWidthSelector;
+  }
+});
+Object.defineProperty(exports, "gridDimensionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDimensionsSelectors.gridDimensionsSelector;
+  }
+});
+var _gridDimensionsSelectors = require("./gridDimensionsSelectors");

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

@@ -13,6 +13,7 @@ var _utils = require("@mui/utils");
 var _throttle = require("@mui/x-internals/throttle");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _createSelector = require("../../../utils/createSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
@@ -24,7 +25,9 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
+var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
+var _utils3 = require("../../../utils/utils");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -51,40 +54,48 @@ const EMPTY_DIMENSIONS = {
   topContainerHeight: 0,
   bottomContainerHeight: 0
 };
-const dimensionsStateInitializer = state => {
+const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
+  const density = (0, _density.gridDensityFactorSelector)(apiRef);
   return (0, _extends2.default)({}, state, {
-    dimensions
+    dimensions: (0, _extends2.default)({}, dimensions, getStaticDimensions(props, apiRef, density, (0, _columns.gridVisiblePinnedColumnDefinitionsSelector)(apiRef)))
   });
 };
 exports.dimensionsStateInitializer = dimensionsStateInitializer;
+const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_columns.gridVisibleColumnDefinitionsSelector, _columns.gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return (0, _roundToDecimalPlaces.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const dimensionsState = (0, _utils2.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const validRowHeight = React.useMemo(() => (0, _gridRowsUtils.getValidRowHeight)(props.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.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((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
-  const headersTotalHeight = (0, _gridColumnsUtils.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(() => (0, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
+  const columnsTotalWidth = (0, _utils2.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 = (0, _utils.unstable_useEventCallback)(dimensions => {
+  const getRootDimensions = React.useCallback(() => (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state), [apiRef]);
+  const setDimensions = React.useCallback(dimensions => {
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       dimensions
     }));
-  });
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state));
+    }
+  }, [apiRef]);
   const resize = React.useCallback(() => {
     const element = apiRef.current.mainElementRef.current;
     if (!element) {
@@ -105,10 +116,7 @@ function useGridDimensions(apiRef, props) {
     if (!dimensions.isReady) {
       return 0;
     }
-    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    const currentPage = (0, _useGridVisibleRows.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
@@ -119,17 +127,23 @@ 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 = (0, _gridRowsUtils.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 = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
+    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
     const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
       width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -203,12 +217,21 @@ function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
+    if ((0, _utils3.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 = (0, _utils.unstable_useEventCallback)(updateDimensions);
+  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
+    updateDimensionCallback();
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
+  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     resize,
     getRootDimensions
@@ -217,35 +240,12 @@ function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
+  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (savedSize) {
-      updateDimensions();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateDimensions]);
-  const root = apiRef.current.rootElementRef.current;
-  (0, _utils.unstable_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, (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state));
+  }, [apiRef]);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
@@ -256,28 +256,58 @@ 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]);
-  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'paginationModelChange', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnsChange', updateDimensions);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
+    debouncedUpdateDimensions();
+  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', handleRootMount);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'resize', handleResize);
   (0, _useGridApiEventHandler.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 = (0, _gridRowsUtils.getValidRowHeight)(props.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.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: (0, _gridColumnsUtils.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 = (0, _utils.unstable_ownerDocument)(rootElement);
   const scrollDiv = doc.createElement('div');
   scrollDiv.style.width = '99px';
@@ -288,14 +318,9 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   rootElement.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
   rootElement.removeChild(scrollDiv);
+  scrollbarSizeCache.set(rootElement, size);
   return size;
 }
-
-// Get rid of floating point imprecision errors
-// https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-function roundToDecimalPlaces(value, decimals) {
-  return Math.round(value * 10 ** decimals) / 10 ** decimals;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

package/node/hooks/features/editing/gridEditingSelectors.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridEditRowsStateSelector = void 0;
+exports.gridRowIsEditingSelector = exports.gridEditRowsStateSelector = exports.gridEditCellStateSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
 /**
  * Select the row editing state.
  */
 const gridEditRowsStateSelector = state => state.editRows;
-exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+const gridRowIsEditingSelector = exports.gridRowIsEditingSelector = (0, _createSelector.createSelectorV8)(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  editMode
+}) => editMode === _gridEditRowModel.GridEditModes.Row && Boolean(editRows[rowId]));
+const gridEditCellStateSelector = exports.gridEditCellStateSelector = (0, _createSelector.createSelectorV8)(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

package/node/hooks/features/editing/index.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridEditingSelectors = require("./gridEditingSelectors");
-Object.keys(_gridEditingSelectors).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridEditingSelectors[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridEditingSelectors[key];
-    }
-  });
-});
+Object.defineProperty(exports, "gridEditRowsStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridEditingSelectors.gridEditRowsStateSelector;
+  }
+});
+var _gridEditingSelectors = require("./gridEditingSelectors");

package/node/hooks/features/editing/useGridCellEditing.js

@@ -450,7 +450,7 @@ const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -459,7 +459,7 @@ const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || _gridEditRowModel.GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
         if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
           updateStateToStartCellEditMode((0, _extends2.default)({
             id: originalId,

package/node/hooks/features/editing/useGridRowEditing.js

@@ -240,11 +240,10 @@ const useGridRowEditing = (apiRef, props) => {
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
-    if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
-      return _gridEditRowModel.GridRowModes.View;
-    }
-    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef, {
+      rowId: id,
+      editMode: props.editMode
+    });
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
@@ -579,7 +578,7 @@ const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -591,7 +590,7 @@ const useGridRowEditing = (apiRef, props) => {
         mode: _gridEditRowModel.GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
         updateStateToStartRowEditMode((0, _extends2.default)({
           id: originalId

package/node/hooks/features/filter/gridFilterState.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultGridFilterModel = void 0;
+exports.getDefaultGridFilterModel = exports.defaultGridFilterLookup = void 0;
 var _gridFilterItem = require("../../../models/gridFilterItem");
+const defaultGridFilterLookup = exports.defaultGridFilterLookup = {
+  filteredRowsLookup: {},
+  filteredChildrenCountLookup: {},
+  filteredDescendantCountLookup: {}
+};
 const getDefaultGridFilterModel = () => ({
   items: [],
   logicOperator: _gridFilterItem.GridLogicOperator.And,

package/node/hooks/features/filter/useGridFilter.js

@@ -28,12 +28,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)();
   return (0, _extends2.default)({}, state, {
-    filter: {
-      filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      filteredRowsLookup: {},
-      filteredChildrenCountLookup: {},
-      filteredDescendantCountLookup: {}
-    },
+    filter: (0, _extends2.default)({
+      filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef)
+    }, _gridFilterState.defaultGridFilterLookup),
     visibleRowsLookup: {}
   });
 };
@@ -280,12 +277,8 @@ const useGridFilter = (apiRef, props) => {
   } = props;
   const getRowsRef = (0, _useLazyRef.useLazyRef)(createMemoizedValues);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
-      return {
-        filteredRowsLookup: {},
-        filteredChildrenCountLookup: {},
-        filteredDescendantCountLookup: {}
-      };
+    if (props.filterMode !== 'client' || !params.isRowMatchingFilters || !params.filterModel.items.length && !params.filterModel.quickFilterValues?.length) {
+      return _gridFilterState.defaultGridFilterLookup;
     }
     const dataRowIdToModelLookup = (0, _rows.gridRowsLookupSelector)(apiRef);
     const filteredRowsLookup = {};