@mui/x-data-grid 5.12.1 → 5.12.2

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -19,7 +19,7 @@ import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
 
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
+export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
   }
@@ -30,8 +30,20 @@ export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd =
 
   const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
   const itemOffset = positions[pivot];
-  return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
+  return offset <= itemOffset ? binarySearch(offset, positions, sliceStart, pivot) : binarySearch(offset, positions, pivot + 1, sliceEnd);
 }
+
+function exponentialSearch(offset, positions, index) {
+  let interval = 1;
+
+  while (index < positions.length && positions[index] < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return binarySearch(offset, positions, Math.floor(index / 2), Math.min(index, positions.length));
+}
+
 export const getRenderableIndexes = ({
   firstIndex,
   lastIndex,
@@ -73,6 +85,22 @@ export const useGridVirtualScroller = props => {
   });
   const [containerWidth, setContainerWidth] = React.useState(null);
   const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const getNearestIndexToRender = React.useCallback(offset => {
+    const lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
+    const allRowsMeasured = lastMeasuredIndex === Infinity;
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+      // were measured, then use a binary search because it's faster.
+      return binarySearch(offset, rowsMeta.positions);
+    } // Otherwise, use an exponential search.
+    // If rows have "auto" as height, their positions will be based on estimated heights.
+    // In this case, we can skip several steps until we find a position higher than the offset.
+    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+  }, [apiRef, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
       return {
@@ -86,9 +114,11 @@ export const useGridVirtualScroller = props => {
     const {
       top,
       left
-    } = scrollPosition.current;
-    const firstRowIndex = Math.min(Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex()), getIndexFromScroll(top, rowsMeta.positions));
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
+    } = scrollPosition.current; // Clamp the value because the search may return an index out of bounds.
+    // In the last index, this is not needed because Array.slice doesn't include it.
+
+    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
     let hasRowWithAutoHeight = false;
     let firstColumnIndex = 0;
     let lastColumnIndex = columnPositions.length;
@@ -106,8 +136,8 @@ export const useGridVirtualScroller = props => {
     }
 
     if (!hasRowWithAutoHeight) {
-      firstColumnIndex = getIndexFromScroll(left, columnPositions);
-      lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+      firstColumnIndex = binarySearch(left, columnPositions);
+      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
     }
 
     return {
@@ -116,7 +146,7 @@ export const useGridVirtualScroller = props => {
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
   React.useEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -374,6 +404,10 @@ export const useGridVirtualScroller = props => {
     rootStyle.overflowX = 'hidden';
   }
 
+  if (rootProps.autoHeight) {
+    rootStyle.overflowY = 'hidden';
+  }
+
   const getRenderContext = React.useCallback(() => {
     return prevRenderContext.current;
   }, []);

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.12.1
+/** @license MUI v5.12.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/colDef/gridCheckboxSelectionColDef.js

@@ -5,8 +5,9 @@ import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderChec
 import { selectedIdsLookupSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
+export var GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export var GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/legacy/colDef/gridNumericColDef.js

@@ -13,7 +13,7 @@ export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   },
   valueFormatter: function valueFormatter(_ref) {
     var value = _ref.value;
-    return value && isNumber(value) && value.toLocaleString() || value;
+    return isNumber(value) ? value.toLocaleString() : value || '';
   },
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -173,6 +173,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  var label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -185,7 +186,8 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
@@ -195,8 +197,8 @@ function GridColumnHeaderItem(props) {
         className: classes.titleContainer,
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -89,7 +89,6 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -121,7 +121,6 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/legacy/components/containers/GridRootStyles.js

@@ -68,7 +68,7 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
+    overflowX: 'hidden'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',

package/legacy/components/panel/GridColumnsPanel.js

@@ -149,7 +149,6 @@ export function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -168,15 +167,13 @@ export function GridColumnsPanel(props) {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(false);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(true);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -116,8 +116,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/_jsx(GridPanelFooter, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {})
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))

package/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -39,7 +39,6 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
   return /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/_jsx(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -105,7 +105,6 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -58,7 +58,6 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -110,7 +110,6 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
     children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,

package/legacy/constants/localeTextConstants.js

@@ -117,6 +117,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
     return "Stop grouping by ".concat(name);
   },
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/legacy/hooks/features/columns/useGridColumnSpanning.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 

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

@@ -36,7 +36,7 @@ var hasScroll = function hasScroll(_ref) {
 
 export function useGridDimensions(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useResizeContainer');
-  var warningShown = React.useRef(false);
+  var errorShown = React.useRef(false);
   var rootDimensionsRef = React.useRef(null);
   var fullDimensionsRef = React.useRef(null);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -94,7 +94,8 @@ export function useGridDimensions(apiRef, props) {
       viewportOuterSize: viewportOuterSize,
       viewportInnerSize: viewportInnerSize,
       hasScrollX: hasScrollX,
-      hasScrollY: hasScrollY
+      hasScrollY: hasScrollY,
+      scrollBarSize: scrollBarSize
     };
     var prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -148,14 +149,14 @@ export function useGridDimensions(apiRef, props) {
 
     var isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
-    if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      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 (isTestEnvironment) {

package/legacy/hooks/features/rows/useGridRowsMeta.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { debounce } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -36,87 +37,87 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   var currentPage = useGridVisibleRows(apiRef, props);
   var hydrateRowsMeta = React.useCallback(function () {
     hasRowWithAutoHeight.current = false;
-    apiRef.current.setState(function (state) {
-      var densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
-      var positions = [];
-      var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
-        positions.push(acc);
-
-        if (!rowsHeightLookup.current[row.id]) {
-          rowsHeightLookup.current[row.id] = {
-            sizes: {
-              base: rowHeightFromDensity
-            },
-            isResized: false,
-            autoHeight: false,
-            needsFirstMeasurement: true // Assume all rows will need to be measured by default
-
-          };
-        }
+    var densityFactor = gridDensityFactorSelector(apiRef.current.state, apiRef.current.instanceId);
+    var positions = [];
+    var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
+      positions.push(acc);
+
+      if (!rowsHeightLookup.current[row.id]) {
+        rowsHeightLookup.current[row.id] = {
+          sizes: {
+            base: rowHeightFromDensity
+          },
+          isResized: false,
+          autoHeight: false,
+          needsFirstMeasurement: true // Assume all rows will need to be measured by default
 
-        var _rowsHeightLookup$cur = rowsHeightLookup.current[row.id],
-            isResized = _rowsHeightLookup$cur.isResized,
-            needsFirstMeasurement = _rowsHeightLookup$cur.needsFirstMeasurement,
-            sizes = _rowsHeightLookup$cur.sizes;
-        var baseRowHeight = rowHeightFromDensity;
-        var existingBaseRowHeight = sizes.base;
-
-        if (isResized) {
-          // Do not recalculate resized row height and use the value from the lookup
-          baseRowHeight = existingBaseRowHeight;
-        } else if (getRowHeightProp) {
-          var rowHeightFromUser = getRowHeightProp(_extends({}, row, {
-            densityFactor: densityFactor
-          }));
-
-          if (rowHeightFromUser === 'auto') {
-            if (needsFirstMeasurement) {
-              var estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
-                densityFactor: densityFactor
-              })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
-
-              baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
-            } else {
-              baseRowHeight = existingBaseRowHeight;
-            }
-
-            hasRowWithAutoHeight.current = true;
-            rowsHeightLookup.current[row.id].autoHeight = true;
+        };
+      }
+
+      var _rowsHeightLookup$cur = rowsHeightLookup.current[row.id],
+          isResized = _rowsHeightLookup$cur.isResized,
+          needsFirstMeasurement = _rowsHeightLookup$cur.needsFirstMeasurement,
+          sizes = _rowsHeightLookup$cur.sizes;
+      var baseRowHeight = rowHeightFromDensity;
+      var existingBaseRowHeight = sizes.base;
+
+      if (isResized) {
+        // Do not recalculate resized row height and use the value from the lookup
+        baseRowHeight = existingBaseRowHeight;
+      } else if (getRowHeightProp) {
+        var rowHeightFromUser = getRowHeightProp(_extends({}, row, {
+          densityFactor: densityFactor
+        }));
+
+        if (rowHeightFromUser === 'auto') {
+          if (needsFirstMeasurement) {
+            var estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
+              densityFactor: densityFactor
+            })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
+
+            baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
           } else {
-            // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = rowHeightFromUser != null ? rowHeightFromUser : rowHeightFromDensity;
-            rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-            rowsHeightLookup.current[row.id].autoHeight = false;
+            baseRowHeight = existingBaseRowHeight;
           }
+
+          hasRowWithAutoHeight.current = true;
+          rowsHeightLookup.current[row.id].autoHeight = true;
         } else {
+          // Default back to base rowHeight if getRowHeight returns null or undefined.
+          baseRowHeight = rowHeightFromUser != null ? rowHeightFromUser : rowHeightFromDensity;
           rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-        } // We use an object to make simple to check if a height is already added or not
-
-
-        var initialHeights = {
-          base: baseRowHeight
-        };
-
-        if (getRowSpacing) {
-          var _spacing$top, _spacing$bottom;
-
-          var indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-          var spacing = getRowSpacing(_extends({}, row, {
-            isFirstVisible: indexRelativeToCurrentPage === 0,
-            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-            indexRelativeToCurrentPage: indexRelativeToCurrentPage
-          }));
-          initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
-          initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+          rowsHeightLookup.current[row.id].autoHeight = false;
         }
-
-        var processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-        rowsHeightLookup.current[row.id].sizes = processedSizes;
-        var finalRowHeight = Object.values(processedSizes).reduce(function (acc2, value) {
-          return acc2 + value;
-        }, 0);
-        return acc + finalRowHeight;
+      } else {
+        rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
+      } // We use an object to make simple to check if a height is already added or not
+
+
+      var initialHeights = {
+        base: baseRowHeight
+      };
+
+      if (getRowSpacing) {
+        var _spacing$top, _spacing$bottom;
+
+        var indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+        var spacing = getRowSpacing(_extends({}, row, {
+          isFirstVisible: indexRelativeToCurrentPage === 0,
+          isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+          indexRelativeToCurrentPage: indexRelativeToCurrentPage
+        }));
+        initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
+        initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+      }
+
+      var processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
+      rowsHeightLookup.current[row.id].sizes = processedSizes;
+      var finalRowHeight = Object.values(processedSizes).reduce(function (acc2, value) {
+        return acc2 + value;
       }, 0);
+      return acc + finalRowHeight;
+    }, 0);
+    apiRef.current.setState(function (state) {
       return _extends({}, state, {
         rowsMeta: {
           currentPageTotalHeight: currentPageTotalHeight,
@@ -149,6 +150,9 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
+  var debouncedHydrateRowsMeta = React.useMemo(function () {
+    return debounce(hydrateRowsMeta);
+  }, [hydrateRowsMeta]);
   var storeMeasuredRowHeight = React.useCallback(function (id, height) {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
@@ -160,9 +164,9 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     rowsHeightLookup.current[id].sizes.base = height;
 
     if (needsHydration) {
-      hydrateRowsMeta();
+      debouncedHydrateRowsMeta();
     }
-  }, [hydrateRowsMeta]);
+  }, [debouncedHydrateRowsMeta]);
   var rowHasAutoHeight = React.useCallback(function (id) {
     var _rowsHeightLookup$cur3;
 
@@ -172,7 +176,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     return lastMeasuredRowIndex.current;
   }, []);
   var setLastMeasuredRowIndex = React.useCallback(function (index) {
-    if (hasRowWithAutoHeight.current) {
+    if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
   }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.

package/legacy/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_CHECKBOX_SELECTION_FIELD } from '../../../colDef';
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -30,16 +30,18 @@ export var useGridSelectionPreProcessors = function useGridSelectionPreProcessor
     });
 
     var shouldHaveSelectionColumn = props.checkboxSelection;
-    var haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+    var haveSelectionColumn = columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] != null;
 
     if (shouldHaveSelectionColumn && !haveSelectionColumn) {
-      columnsState.lookup[selectionColumn.field] = selectionColumn;
-      columnsState.all = [selectionColumn.field].concat(_toConsumableArray(columnsState.all));
+      columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] = selectionColumn;
+      columnsState.all = [GRID_CHECKBOX_SELECTION_FIELD].concat(_toConsumableArray(columnsState.all));
     } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
-      delete columnsState.lookup[selectionColumn.field];
+      delete columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD];
       columnsState.all = columnsState.all.filter(function (field) {
-        return field !== selectionColumn.field;
+        return field !== GRID_CHECKBOX_SELECTION_FIELD;
       });
+    } else if (shouldHaveSelectionColumn && haveSelectionColumn) {
+      columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] = _extends({}, selectionColumn, columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD]);
     }
 
     return columnsState;