@mui/x-data-grid 5.11.1 → 5.12.2

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';
@@ -22,69 +23,101 @@ export var rowsMetaStateInitializer = function rowsMetaStateInitializer(state) {
  */
 
 export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
-  var getRowHeight = props.getRowHeight,
-      getRowSpacing = props.getRowSpacing;
-  var rowsHeightLookup = React.useRef({});
-  var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  var getRowHeightProp = props.getRowHeight,
+      getRowSpacing = props.getRowSpacing,
+      getEstimatedRowHeight = props.getEstimatedRowHeight;
+  var rowsHeightLookup = React.useRef({}); // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+  var lastMeasuredRowIndex = React.useRef(-1);
+  var hasRowWithAutoHeight = React.useRef(false);
+  var rowHeightFromDensity = useGridSelector(apiRef, gridDensityRowHeightSelector);
   var filterState = useGridSelector(apiRef, gridFilterStateSelector);
   var paginationState = useGridSelector(apiRef, gridPaginationSelector);
   var sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   var currentPage = useGridVisibleRows(apiRef, props);
   var hydrateRowsMeta = React.useCallback(function () {
-    apiRef.current.setState(function (state) {
-      var positions = [];
-      var densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
-      var currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
-      var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
-        positions.push(acc);
-        var baseRowHeight;
-        var isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
-
-        if (isResized) {
-          // do not recalculate resized row height and use the value from the lookup
-          baseRowHeight = rowsHeightLookup.current[row.id].value;
-        } else {
-          baseRowHeight = currentRowHeight;
+    hasRowWithAutoHeight.current = false;
+    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
+
+        };
+      }
 
-          if (getRowHeight) {
-            var _getRowHeight;
+      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;
 
-            // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = (_getRowHeight = getRowHeight(_extends({}, row, {
+      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
-            }))) != null ? _getRowHeight : currentRowHeight;
+            })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
+
+            baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
+          } else {
+            baseRowHeight = existingBaseRowHeight;
           }
-        } // We use an object to make simple to check if a height is already added or not
 
+          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;
+          rowsHeightLookup.current[row.id].autoHeight = false;
+        }
+      } 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 initialHeights = {
+        base: baseRowHeight
+      };
 
-        var sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-        var finalRowHeight = Object.values(sizes).reduce(function (acc2, value) {
-          return acc2 + value;
-        }, 0);
-        rowsHeightLookup.current[row.id] = {
-          value: baseRowHeight,
-          sizes: sizes,
-          isResized: isResized
-        };
-        return acc + finalRowHeight;
+      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,
@@ -92,14 +125,18 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
         }
       });
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
-  var getTargetRowHeight = function getTargetRowHeight(rowId) {
-    var _rowsHeightLookup$cur;
+    if (!hasRowWithAutoHeight.current) {
+      // No row has height=auto, so all rows are already measured
+      lastMeasuredRowIndex.current = Infinity;
+    }
 
-    return ((_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.value) || rowHeight;
-  };
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  var getRowHeight = React.useCallback(function (rowId) {
+    var height = rowsHeightLookup.current[rowId];
+    return height ? height.sizes.base : rowHeightFromDensity;
+  }, [rowHeightFromDensity]);
 
   var getRowInternalSizes = function getRowInternalSizes(rowId) {
     var _rowsHeightLookup$cur2;
@@ -108,25 +145,55 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   };
 
   var setRowHeight = React.useCallback(function (id, height) {
-    rowsHeightLookup.current[id] = {
-      value: height,
-      isResized: true,
-      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
-        base: height
-      })
-    };
+    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].isResized = true;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
-  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, [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;
+    } // Only trigger hydration if the value is different, otherwise we trigger a loop
+
+
+    var needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
+    rowsHeightLookup.current[id].sizes.base = height;
+
+    if (needsHydration) {
+      debouncedHydrateRowsMeta();
+    }
+  }, [debouncedHydrateRowsMeta]);
+  var rowHasAutoHeight = React.useCallback(function (id) {
+    var _rowsHeightLookup$cur3;
+
+    return ((_rowsHeightLookup$cur3 = rowsHeightLookup.current[id]) == null ? void 0 : _rowsHeightLookup$cur3.autoHeight) || false;
+  }, []);
+  var getLastMeasuredRowIndex = React.useCallback(function () {
+    return lastMeasuredRowIndex.current;
+  }, []);
+  var setLastMeasuredRowIndex = React.useCallback(function (index) {
+    if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
+      lastMeasuredRowIndex.current = index;
+    }
+  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(function () {
     hydrateRowsMeta();
-  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  }, [rowHeightFromDensity, filterState, paginationState, sortingState, hydrateRowsMeta]);
   useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   var rowsMetaApi = {
-    unstable_getRowHeight: getTargetRowHeight,
+    unstable_getLastMeasuredRowIndex: getLastMeasuredRowIndex,
+    unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,
+    unstable_rowHasAutoHeight: rowHasAutoHeight,
+    unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
-    unstable_setRowHeight: setRowHeight
+    unstable_setRowHeight: setRowHeight,
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

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

@@ -51,7 +51,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
   }, [apiRef, props.selectionModel]);
   var lastRowToggled = React.useRef(null);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'selection',
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,

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;

package/legacy/hooks/features/sorting/useGridSorting.js

@@ -31,7 +31,7 @@ export var sortingStateInitializer = function sortingStateInitializer(state, pro
 
 export var useGridSorting = function useGridSorting(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridSorting');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'sortModel',
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -20,7 +20,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) {
+export function binarySearch(offset, positions) {
   var sliceStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var sliceEnd = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : positions.length;
 
@@ -34,8 +34,20 @@ export function getIndexFromScroll(offset, positions) {
 
   var pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
   var 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) {
+  var 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 var getRenderableIndexes = function getRenderableIndexes(_ref) {
   var firstIndex = _ref.firstIndex,
       lastIndex = _ref.lastIndex,
@@ -86,6 +98,22 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       setContainerWidth = _React$useState4[1];
 
   var prevTotalWidth = React.useRef(columnsTotalWidth);
+  var getNearestIndexToRender = React.useCallback(function (offset) {
+    var lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
+    var 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]);
   var computeRenderContext = React.useCallback(function () {
     if (disableVirtualization) {
       return {
@@ -98,18 +126,43 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
 
     var _ref2 = scrollPosition.current,
         top = _ref2.top,
-        left = _ref2.left;
-    var firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
-    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
-    var firstColumnIndex = getIndexFromScroll(left, columnPositions);
-    var lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+        left = _ref2.left; // 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.
+
+    var firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
+    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    var hasRowWithAutoHeight = false;
+    var firstColumnIndex = 0;
+    var lastColumnIndex = columnPositions.length;
+
+    var _getRenderableIndexes = getRenderableIndexes({
+      firstIndex: firstRowIndex,
+      lastIndex: lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
+
+    for (var i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+      var row = currentPage.rows[i];
+      hasRowWithAutoHeight = apiRef.current.unstable_rowHasAutoHeight(row.id);
+    }
+
+    if (!hasRowWithAutoHeight) {
+      firstColumnIndex = binarySearch(left, columnPositions);
+      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+    }
+
     return {
       firstRowIndex: firstRowIndex,
       lastRowIndex: lastRowIndex,
       firstColumnIndex: firstColumnIndex,
       lastColumnIndex: lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, currentPage.rows.length, columnPositions, containerWidth, visibleColumns.length]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
   React.useEffect(function () {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = "translate3d(0px, 0px, 0px)";
@@ -129,26 +182,26 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   }, []);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
-    var _getRenderableIndexes = getRenderableIndexes({
+    var _getRenderableIndexes3 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
       maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     }),
-        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
-        firstRowToRender = _getRenderableIndexes2[0],
-        lastRowToRender = _getRenderableIndexes2[1];
+        _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
+        firstRowToRender = _getRenderableIndexes4[0],
+        lastRowToRender = _getRenderableIndexes4[1];
 
-    var _getRenderableIndexes3 = getRenderableIndexes({
+    var _getRenderableIndexes5 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: renderZoneMinColumnIndex,
       maxLastIndex: renderZoneMaxColumnIndex,
       buffer: rootProps.columnBuffer
     }),
-        _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 1),
-        initialFirstColumnToRender = _getRenderableIndexes4[0];
+        _getRenderableIndexes6 = _slicedToArray(_getRenderableIndexes5, 1),
+        initialFirstColumnToRender = _getRenderableIndexes6[0];
 
     var firstColumnToRender = getFirstNonSpannedColumnToRender({
       firstColumnToRender: initialFirstColumnToRender,
@@ -248,7 +301,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         _params$maxLastColumn = params.maxLastColumn,
         maxLastColumn = _params$maxLastColumn === void 0 ? renderZoneMaxColumnIndex : _params$maxLastColumn,
         _params$availableSpac = params.availableSpace,
-        availableSpace = _params$availableSpac === void 0 ? containerWidth : _params$availableSpac;
+        availableSpace = _params$availableSpac === void 0 ? containerWidth : _params$availableSpac,
+        ignoreAutoHeight = params.ignoreAutoHeight;
 
     if (!currentPage.range || !nextRenderContext || availableSpace == null) {
       return null;
@@ -257,16 +311,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0;
     var columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0;
 
-    var _getRenderableIndexes5 = getRenderableIndexes({
+    var _getRenderableIndexes7 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     }),
-        _getRenderableIndexes6 = _slicedToArray(_getRenderableIndexes5, 2),
-        firstRowToRender = _getRenderableIndexes6[0],
-        lastRowToRender = _getRenderableIndexes6[1];
+        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
+        firstRowToRender = _getRenderableIndexes8[0],
+        lastRowToRender = _getRenderableIndexes8[1];
 
     var renderedRows = [];
 
@@ -280,16 +334,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       });
     }
 
-    var _getRenderableIndexes7 = getRenderableIndexes({
+    var _getRenderableIndexes9 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     }),
-        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
-        initialFirstColumnToRender = _getRenderableIndexes8[0],
-        lastColumnToRender = _getRenderableIndexes8[1];
+        _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
+        initialFirstColumnToRender = _getRenderableIndexes10[0],
+        lastColumnToRender = _getRenderableIndexes10[1];
 
     var firstColumnToRender = getFirstNonSpannedColumnToRender({
       firstColumnToRender: initialFirstColumnToRender,
@@ -308,7 +362,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
           _id = _renderedRows$_i.id,
           _model = _renderedRows$_i.model;
       var lastVisibleRowIndex = firstRowToRender + _i === currentPage.rows.length - 1;
-      var targetRowHeight = apiRef.current.unstable_getRowHeight(_id);
+      var baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(_id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
       var isSelected = void 0;
 
       if (selectedRowsLookup[_id] == null) {
@@ -322,7 +376,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
         row: _model,
         rowId: _id,
-        rowHeight: targetRowHeight,
+        rowHeight: baseRowHeight,
         cellFocus: cellFocus // TODO move to inside the row
         ,
         cellTabIndex: cellTabIndex // TODO move to inside the row
@@ -381,6 +435,10 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     rootStyle.overflowX = 'hidden';
   }
 
+  if (rootProps.autoHeight) {
+    rootStyle.overflowY = 'hidden';
+  }
+
   var getRenderContext = React.useCallback(function () {
     return prevRenderContext.current;
   }, []);

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.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/locales/arSD.js

@@ -119,6 +119,7 @@ var arSDGrid = {
     return "\u0625\u064A\u0642\u0627\u0641 \u0627\u0644\u062A\u062C\u0645\u064A\u0639 \u062D\u0633\u0628 ".concat(name);
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'توسيع',
   collapseDetailPanel: 'طوي' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/legacy/locales/bgBG.js

@@ -119,6 +119,7 @@ var bgBGGrid = {
     return "\u0421\u043F\u0440\u0438 \u0433\u0440\u0443\u043F\u0438\u0440\u0430\u043D\u0435 \u043F\u043E ".concat(name);
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Разгъване',
   collapseDetailPanel: 'Свиване' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/legacy/locales/csCZ.js

@@ -145,6 +145,7 @@ var csCZGrid = {
   unGroupColumn: function unGroupColumn(name) {
     return "P\u0159estat zoskupovat podle ".concat(name);
   } // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/legacy/locales/daDK.js

@@ -119,6 +119,7 @@ var daDKGrid = {
     return "Fjern grupp\xE9ring efter ".concat(name);
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Udvid',
   collapseDetailPanel: 'Kollaps' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/legacy/locales/deDE.js

@@ -119,6 +119,7 @@ var deDEGrid = {
     return "Gruppierung nach ".concat(name, " aufheben");
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Aufklappen',
   collapseDetailPanel: 'Zuklappen',
   // Row reordering text

package/legacy/locales/elGR.js

@@ -113,6 +113,7 @@ var elGRGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/legacy/locales/esES.js

@@ -114,6 +114,7 @@ var esESGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/legacy/locales/faIR.js

@@ -119,6 +119,7 @@ var faIRGrid = {
     return "\u0644\u063A\u0648 \u06AF\u0631\u0648\u0647\u200C\u0628\u0646\u062F\u06CC \u0628\u0631\u0627\u0633\u0627\u0633 ".concat(name);
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'بازکردن پنل جزئیات',
   collapseDetailPanel: 'بستن پنل جزئیات' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/legacy/locales/fiFI.js

@@ -114,6 +114,7 @@ var fiFIGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/legacy/locales/frFR.js

@@ -118,6 +118,7 @@ var frFRGrid = {
   unGroupColumn: function unGroupColumn(name) {
     return "Arr\xEAter de grouper par ".concat(name);
   } // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text