@mui/x-data-grid 5.15.2 → 5.17.0

package/legacy/hooks/features/density/densitySelector.js

@@ -11,6 +11,12 @@ export var gridDensityRowHeightSelector = createSelector(gridDensitySelector, fu
 export var gridDensityHeaderHeightSelector = createSelector(gridDensitySelector, function (density) {
   return density.headerHeight;
 });
+export var gridDensityHeaderGroupingMaxDepthSelector = createSelector(gridDensitySelector, function (density) {
+  return density.headerGroupingMaxDepth;
+});
 export var gridDensityFactorSelector = createSelector(gridDensitySelector, function (density) {
   return density.factor;
+});
+export var gridDensityTotalHeaderHeightSelector = createSelector(gridDensitySelector, function (density) {
+  return density.headerHeight * (1 + density.headerGroupingMaxDepth);
 });

package/legacy/hooks/features/density/useGridDensity.js

@@ -1,20 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { GridDensityTypes } from '../../../models/gridDensity';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector } from '../columns';
+import { unwrapGroupingColumnModel } from '../columnGrouping/useGridColumnGrouping';
 export var COMPACT_DENSITY_FACTOR = 0.7;
 export var COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
 
-var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight) {
+var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth) {
   switch (newDensity) {
     case GridDensityTypes.Compact:
       return {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMPACT_DENSITY_FACTOR
       };
 
@@ -23,6 +28,7 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMFORTABLE_DENSITY_FACTOR
       };
 
@@ -31,25 +37,57 @@ var getUpdatedDensityState = function getUpdatedDensityState(newDensity, newHead
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
+        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
 export var densityStateInitializer = function densityStateInitializer(state, props) {
+  // TODO: think about improving this initialization. Could it be done in the useColumn initializer?
+  // TODO: manage to remove ts-ignore
+  var maxDepth;
+
+  if (props.columnGroupingModel == null || Object.keys(props.columnGroupingModel).length === 0) {
+    maxDepth = 0;
+  } else {
+    var unwrappedGroupingColumnModel = unwrapGroupingColumnModel(props.columnGroupingModel);
+    var columnsState = state.columns;
+    var visibleColumns = columnsState.all.filter(function (field) {
+      return columnsState.columnVisibilityModel[field] !== false;
+    });
+
+    if (visibleColumns.length === 0) {
+      maxDepth = 0;
+    } else {
+      maxDepth = Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (field) {
+        var _unwrappedGroupingCol, _unwrappedGroupingCol2;
+
+        return (_unwrappedGroupingCol = (_unwrappedGroupingCol2 = unwrappedGroupingColumnModel[field]) == null ? void 0 : _unwrappedGroupingCol2.length) != null ? _unwrappedGroupingCol : 0;
+      })));
+    }
+  }
+
   return _extends({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
   });
 };
 export var useGridDensity = function useGridDensity(apiRef, props) {
+  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  var maxDepth = visibleColumns.length > 0 ? Math.max.apply(Math, _toConsumableArray(visibleColumns.map(function (column) {
+    var _column$groupPath$len, _column$groupPath;
+
+    return (_column$groupPath$len = (_column$groupPath = column.groupPath) == null ? void 0 : _column$groupPath.length) != null ? _column$groupPath$len : 0;
+  }))) : 0;
   var logger = useGridLogger(apiRef, 'useDensity');
   var setDensity = React.useCallback(function (newDensity) {
     var newHeaderHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.headerHeight;
     var newRowHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : props.rowHeight;
+    var newMaxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : maxDepth;
     logger.debug("Set grid density to ".concat(newDensity));
     apiRef.current.setState(function (state) {
       var currentDensityState = gridDensitySelector(state);
-      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
+      var newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
 
       if (isDeepEqual(currentDensityState, newDensityState)) {
         return state;
@@ -60,10 +98,10 @@ export var useGridDensity = function useGridDensity(apiRef, props) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
+  }, [logger, apiRef, props.headerHeight, props.rowHeight, maxDepth]);
   React.useEffect(function () {
-    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
-  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight, maxDepth);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight, maxDepth]);
   var densityApi = {
     setDensity: setDensity
   };

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

@@ -4,7 +4,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
-import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { gridDensityTotalHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -41,7 +41,7 @@ export function useGridDimensions(apiRef, props) {
   var rootDimensionsRef = React.useRef(null);
   var fullDimensionsRef = React.useRef(null);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   var updateGridDimensionsRef = React.useCallback(function () {
     var _apiRef$current$rootE;
 
@@ -86,7 +86,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - headerHeight
+        height: rootDimensionsRef.current.height - totalHeaderHeight
       };
       var scrollInformation = hasScroll({
         content: {
@@ -120,7 +120,7 @@ export function useGridDimensions(apiRef, props) {
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
-  }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
+  }, [apiRef, props.scrollbarSize, props.autoHeight, totalHeaderHeight, rowsMeta.currentPageTotalHeight]);
   var resize = React.useCallback(function () {
     updateGridDimensionsRef();
     apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -7,7 +7,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -86,7 +86,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
       return;
     }
 
-    var headerHeight = gridDensityHeaderHeightSelector(apiRef);
+    var totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     var gridRootElement = apiRef.current.rootElementRef.current;
     var gridClone = gridRootElement.cloneNode(true);
@@ -120,7 +120,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + headerHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // Remove all loaded elements from the current host
+    gridClone.style.height = "".concat(rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight, "px"); // Remove all loaded elements from the current host
 
     printDoc.body.innerHTML = '';
     printDoc.body.appendChild(gridClone);

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

@@ -79,76 +79,78 @@ export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filter
     });
   };
 };
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
 
-export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
-  var items = filterModel.items;
-
-  var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem) {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, apiRef) {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    var column = apiRef.current.getColumn(filterItem.columnField);
+  var column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    var parsedValue;
+  var parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      var parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
-        return parser(x);
-      }) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    var parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
+      return parser(x);
+    }) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    var newFilterItem = _extends({}, filterItem, {
-      value: parsedValue
-    });
+  var newFilterItem = _extends({}, filterItem, {
+    value: parsedValue
+  });
 
-    var filterOperators = column.filterOperators;
+  var filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
+  }
 
-    var filterOperator = filterOperators.find(function (operator) {
-      return operator.value === newFilterItem.operatorValue;
-    });
+  var filterOperator = filterOperators.find(function (operator) {
+    return operator.value === newFilterItem.operatorValue;
+  });
 
-    if (!filterOperator) {
-      throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
-    }
+  if (!filterOperator) {
+    throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operatorValue, "'."));
+  }
 
-    var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    var fn = function fn(rowId) {
-      var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  var fn = function fn(rowId) {
+    var cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn: fn,
-      item: newFilterItem
-    };
+  return {
+    fn: fn,
+    item: newFilterItem
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
+
 
-  var appliers = items.map(getFilterCallbackFromItem).filter(function (callback) {
+export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterItemsApplier(filterModel, apiRef) {
+  var items = filterModel.items;
+  var appliers = items.map(function (item) {
+    return getFilterCallbackFromItem(item, apiRef);
+  }).filter(function (callback) {
     return !!callback;
   });
 
@@ -242,9 +244,12 @@ export var buildAggregatedFilterApplier = function buildAggregatedFilterApplier(
     };
   };
 };
-export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel) {
+export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQuickFilterResults, filterModel, apiRef) {
   var _filterModel$quickFil2, _filterModel$linkOper;
 
+  var cleanedFilterItems = filterModel.items.filter(function (item) {
+    return getFilterCallbackFromItem(item, apiRef) !== null;
+  });
   var cleanedAllFilterItemResults = allFilterItemResults.filter(function (result) {
     return result != null;
   });
@@ -264,13 +269,13 @@ export var passFilterLogic = function passFilterLogic(allFilterItemResults, allQ
     };
 
     if (linkOperator === GridLinkOperator.And) {
-      var passesAllFilters = filterModel.items.every(filterItemPredicate);
+      var passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      var passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      var passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

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

@@ -288,7 +288,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
               passingFilterItems = _params$isRowMatching.passingFilterItems,
               passingQuickFilterValues = _params$isRowMatching.passingQuickFilterValues;
 
-          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/legacy/hooks/features/index.js

@@ -1,6 +1,7 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

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

@@ -109,7 +109,7 @@ export function useGridParamsApi(apiRef) {
       formattedValue: value
     };
 
-    if (colDef.valueFormatter) {
+    if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
         id: id,
         field: params.field,

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

@@ -1,10 +1,11 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector, gridRowsIdToIdLookupSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
@@ -109,14 +110,14 @@ export var useGridRows = function useGridRows(apiRef, props) {
     } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
-    var uniqUpdates = new Map();
+    var uniqueUpdates = new Map();
     updates.forEach(function (update) {
       var id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
-      if (uniqUpdates.has(id)) {
-        uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
+      if (uniqueUpdates.has(id)) {
+        uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
       } else {
-        uniqUpdates.set(id, update);
+        uniqueUpdates.set(id, update);
       }
     });
     var deletedRowIds = [];
@@ -128,7 +129,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: _toConsumableArray(prevCache.ids)
     };
-    uniqUpdates.forEach(function (partialRow, id) {
+    uniqueUpdates.forEach(function (partialRow, id) {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
         delete newCache.idRowsLookup[id];
@@ -264,8 +265,71 @@ export var useGridRows = function useGridRows(apiRef, props) {
         })
       });
     });
-    apiRef.current.applySorting();
+    apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
+  var replaceRows = React.useCallback(function (firstRowToRender, newRows) {
+    if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(["MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+
+    if (newRows.length === 0) {
+      return;
+    }
+
+    var allRows = gridRowIdsSelector(apiRef);
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    var idRowsLookup = gridRowsLookupSelector(apiRef);
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    var tree = gridRowTreeSelector(apiRef);
+
+    var updatedIdRowsLookup = _extends({}, idRowsLookup);
+
+    var updatedIdToIdLookup = _extends({}, idToIdLookup);
+
+    var updatedTree = _extends({}, tree);
+
+    var newRowEntries = newRows.map(function (newRowModel) {
+      var rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      return {
+        id: rowId,
+        model: newRowModel
+      };
+    });
+    newRowEntries.forEach(function (row, index) {
+      var _updatedRows$splice = updatedRows.splice(firstRowToRender + index, 1, row.id),
+          _updatedRows$splice2 = _slicedToArray(_updatedRows$splice, 1),
+          replacedRowId = _updatedRows$splice2[0];
+
+      delete updatedIdRowsLookup[replacedRowId];
+      delete updatedIdToIdLookup[replacedRowId];
+      delete updatedTree[replacedRowId];
+    });
+    newRowEntries.forEach(function (row) {
+      var rowTreeNodeConfig = {
+        id: row.id,
+        parent: null,
+        depth: 0,
+        groupingKey: null,
+        groupingField: null
+      };
+      updatedIdRowsLookup[row.id] = row.model;
+      updatedIdToIdLookup[row.id] = row.id;
+      updatedTree[row.id] = rowTreeNodeConfig;
+    });
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          idRowsLookup: updatedIdRowsLookup,
+          idToIdLookup: updatedIdToIdLookup,
+          tree: updatedTree,
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
@@ -277,7 +341,8 @@ export var useGridRows = function useGridRows(apiRef, props) {
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,
     getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows,
-    getRowGroupChildren: getRowGroupChildren
+    getRowGroupChildren: getRowGroupChildren,
+    unstable_replaceRows: replaceRows
   };
   /**
    * EVENTS

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

@@ -1,6 +1,7 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { debounce } from '@mui/material/utils';
+import { debounce, capitalize } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -47,7 +48,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
-            base: rowHeightFromDensity
+            baseCenter: rowHeightFromDensity
           },
           isResized: false,
           autoHeight: false,
@@ -61,7 +62,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
           needsFirstMeasurement = _rowsHeightLookup$cur.needsFirstMeasurement,
           sizes = _rowsHeightLookup$cur.sizes;
       var baseRowHeight = rowHeightFromDensity;
-      var existingBaseRowHeight = sizes.base;
+      var existingBaseRowHeight = sizes.baseCenter;
 
       if (isResized) {
         // Do not recalculate resized row height and use the value from the lookup
@@ -92,12 +93,23 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
         }
       } 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 existingBaseSizes = Object.entries(sizes).reduce(function (acc, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            size = _ref2[1];
+
+        if (/^base[A-Z]/.test(key)) {
+          acc[key] = size;
+        }
 
+        return acc;
+      }, {}); // We use an object to make simple to check if a height is already added or not
 
-      var initialHeights = {
-        base: baseRowHeight
-      };
+      var initialHeights = _extends({}, existingBaseSizes, {
+        baseCenter: baseRowHeight
+      });
 
       if (getRowSpacing) {
         var _spacing$top, _spacing$bottom;
@@ -120,11 +132,21 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     var positions = [];
     var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
       positions.push(acc);
+      var maximumBaseSize = 0;
+      var otherSizes = 0;
       var processedSizes = calculateRowProcessedSizes(row);
-      var finalRowHeight = Object.values(processedSizes).reduce(function (acc2, value) {
-        return acc2 + value;
-      }, 0);
-      return acc + finalRowHeight;
+      Object.entries(processedSizes).forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            size = _ref4[0],
+            value = _ref4[1];
+
+        if (/^base[A-Z]/.test(size)) {
+          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
+        } else {
+          otherSizes += value;
+        }
+      });
+      return acc + maximumBaseSize + otherSizes;
     }, 0);
     pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(function (row) {
       calculateRowProcessedSizes(row);
@@ -150,7 +172,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   var getRowHeight = React.useCallback(function (rowId) {
     var height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.base : rowHeightFromDensity;
+    return height ? height.sizes.baseCenter : rowHeightFromDensity;
   }, [rowHeightFromDensity]);
 
   var getRowInternalSizes = function getRowInternalSizes(rowId) {
@@ -160,7 +182,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   };
 
   var setRowHeight = React.useCallback(function (id, height) {
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     rowsHeightLookup.current[id].isResized = true;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
@@ -168,15 +190,15 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   var debouncedHydrateRowsMeta = React.useMemo(function () {
     return debounce(hydrateRowsMeta);
   }, [hydrateRowsMeta]);
-  var storeMeasuredRowHeight = React.useCallback(function (id, height) {
+  var storeMeasuredRowHeight = React.useCallback(function (id, height, position) {
     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;
+    var needsHydration = rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].sizes["base".concat(capitalize(position))] = height;
 
     if (needsHydration) {
       debouncedHydrateRowsMeta();
@@ -194,7 +216,11 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
-  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, []);
+  var resetRowHeights = React.useCallback(function () {
+    rowsHeightLookup.current = {};
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]); // 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 () {
@@ -208,7 +234,8 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    resetRowHeights: resetRowHeights
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };