@mui/x-data-grid 5.12.0 → 5.12.3

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

@@ -38,7 +38,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   var _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -83,7 +83,27 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  var upsertFilterItems = React.useCallback(function (items) {
+    var filterModel = gridFilterModelSelector(apiRef);
+
+    var existingItems = _toConsumableArray(filterModel.items);
+
+    items.forEach(function (item) {
+      var itemIndex = items.findIndex(function (filterItem) {
+        return filterItem.id === item.id;
+      });
+
+      if (itemIndex === -1) {
+        existingItems.push(item);
+      } else {
+        existingItems[itemIndex] = item;
+      }
+    });
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   var deleteFilterItem = React.useCallback(function (itemToDelete) {
     var filterModel = gridFilterModelSelector(apiRef);
@@ -97,7 +117,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   var showFilterPanel = React.useCallback(function (targetColumnField) {
     logger.debug('Displaying filter panel');
@@ -144,7 +164,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator: linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   var setQuickFilterValues = React.useCallback(function (values) {
     var filterModel = gridFilterModelSelector(apiRef);
@@ -157,12 +177,12 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       quickFilterValues: _toConsumableArray(values)
     }));
   }, [apiRef]);
-  var setFilterModel = React.useCallback(function (model) {
+  var setFilterModel = React.useCallback(function (model, reason) {
     var currentModel = gridFilterModelSelector(apiRef);
 
     if (currentModel !== model) {
       logger.debug('Setting filter model');
-      apiRef.current.setState(mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef), reason);
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
@@ -177,6 +197,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     unstable_applyFilters: applyFilters,
     deleteFilterItem: deleteFilterItem,
     upsertFilterItem: upsertFilterItem,
+    upsertFilterItems: upsertFilterItems,
     setFilterModel: setFilterModel,
     showFilterPanel: showFilterPanel,
     hideFilterPanel: hideFilterPanel,
@@ -210,7 +231,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       return params;
     }
 
-    apiRef.current.setState(mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef), 'restoreState');
     return _extends({}, params, {
       callbacks: [].concat(_toConsumableArray(params.callbacks), [apiRef.current.unstable_applyFilters])
     });

package/legacy/hooks/features/pagination/useGridPage.js

@@ -43,7 +43,7 @@ export var useGridPage = function useGridPage(apiRef, props) {
 
   var logger = useGridLogger(apiRef, 'useGridPage');
   var visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'page',
     propModel: props.page,
     propOnChange: props.onPageChange,

package/legacy/hooks/features/pagination/useGridPageSize.js

@@ -27,7 +27,7 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
 
   var logger = useGridLogger(apiRef, 'useGridPageSize');
   var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pageSize',
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,

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

@@ -348,10 +348,25 @@ export var useGridRows = function useGridRows(apiRef, props) {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    }
 
+    var areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
+    var isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(function (state) {
+          return _extends({}, state, {
+            rows: _extends({}, state.rows, {
+              loading: props.loading
+            })
+          });
+        });
+        apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates = props.loading;
+        apiRef.current.forceUpdate();
+      }
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }
 

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/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,9 +126,11 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
 
     var _ref2 = scrollPosition.current,
         top = _ref2.top,
-        left = _ref2.left;
-    var firstRowIndex = Math.min(Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex()), getIndexFromScroll(top, rowsMeta.positions));
-    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
+        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;
@@ -122,8 +152,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
 
     if (!hasRowWithAutoHeight) {
-      firstColumnIndex = getIndexFromScroll(left, columnPositions);
-      lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+      firstColumnIndex = binarySearch(left, columnPositions);
+      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
     }
 
     return {
@@ -132,7 +162,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       firstColumnIndex: firstColumnIndex,
       lastColumnIndex: 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(function () {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = "translate3d(0px, 0px, 0px)";
@@ -405,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.12.0
+/** @license MUI v5.12.3
  *
  * 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

package/legacy/locales/heIL.js

@@ -119,6 +119,7 @@ var heILGrid = {
     return "\u05D4\u05E4\u05E1\u05E7 \u05DC\u05E7\u05D1\u05E5 \u05DC\u05E4\u05D9 ".concat(name);
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'הרחב',
   collapseDetailPanel: 'כווץ',
   // Row reordering text

package/legacy/locales/huHU.js

@@ -119,6 +119,7 @@ var huHUGrid = {
     return "".concat(name, " szerinti csoportos\xEDt\xE1s t\xF6rl\xE9se");
   },
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Kibontás',
   collapseDetailPanel: 'Összecsukás' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/legacy/locales/index.js

@@ -20,6 +20,7 @@ export * from './plPL';
 export * from './ptBR';
 export * from './ruRU';
 export * from './skSK';
+export * from './svSE';
 export * from './trTR';
 export * from './ukUA';
 export * from './viVN';

package/legacy/locales/itIT.js

@@ -118,6 +118,7 @@ var itITGrid = {
   unGroupColumn: function unGroupColumn(name) {
     return "Annulla raggruppamento per ".concat(name);
   } // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text