@mui/x-data-grid 5.11.1 → 5.12.2

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

@@ -37,7 +37,7 @@ const hasScroll = ({
 
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
-  const warningShown = React.useRef(false);
+  const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -92,7 +92,8 @@ export function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -142,14 +143,14 @@ export function useGridDimensions(apiRef, props) {
 
     const 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/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -303,6 +303,9 @@ export const useGridCellEditing = (apiRef, props) => {
     } = editingState[id][field];
 
     if (error || isProcessingProps) {
+      // Attempt to change cell mode to "view" was not successful
+      // Update previous mode to allow another attempt
+      prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
       return;
     }
 
@@ -310,6 +313,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -413,10 +418,13 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+
+    const copyOfPrevCellModes = prevCellModesModel.current;
+    prevCellModesModel.current = cellModesModel;
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        const prevMode = prevCellModesModel.current[id]?.[field]?.mode || GridCellModes.View;
+        const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
         const originalId = idToIdLookup[id] ?? id;
 
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
@@ -432,6 +440,5 @@ export const useGridCellEditing = (apiRef, props) => {
         }
       });
     });
-    prevCellModesModel.current = cellModesModel;
   }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };

package/modern/hooks/features/editRows/useGridEditing.old.js

@@ -21,7 +21,7 @@ export function useGridEditing(apiRef, props) {
   useCellEditing(apiRef, props);
   useGridRowEditing(apiRef, props);
   const debounceMap = React.useRef({});
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'editRows',
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -382,12 +382,14 @@ export const useGridRowEditing = (apiRef, props) => {
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
 
     if (isSomeFieldProcessingProps) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -395,6 +397,8 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -565,9 +569,12 @@ export const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+
+    const copyOfPrevRowModesModel = prevRowModesModel.current;
+    prevRowModesModel.current = rowModesModel;
     Object.entries(rowModesModel).forEach(([id, params]) => {
-      const prevMode = prevRowModesModel.current[id]?.mode || GridRowModes.View;
+      const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;
 
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
@@ -580,6 +587,5 @@ export const useGridRowEditing = (apiRef, props) => {
         }, params));
       }
     });
-    prevRowModesModel.current = rowModesModel;
   }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

package/modern/hooks/features/events/useGridEvents.js

@@ -18,6 +18,8 @@ export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, 'cellFocusOut', props.onCellFocusOut);
   useGridApiOptionHandler(apiRef, 'preferencePanelClose', props.onPreferencePanelClose);
   useGridApiOptionHandler(apiRef, 'preferencePanelOpen', props.onPreferencePanelOpen);
+  useGridApiOptionHandler(apiRef, 'menuOpen', props.onMenuOpen);
+  useGridApiOptionHandler(apiRef, 'menuClose', props.onMenuClose);
   useGridApiOptionHandler(apiRef, 'rowDoubleClick', props.onRowDoubleClick);
   useGridApiOptionHandler(apiRef, 'rowClick', props.onRowClick);
   useGridApiOptionHandler(apiRef, 'componentError', props.onError);

package/modern/hooks/features/filter/gridFilterSelector.js

@@ -13,6 +13,12 @@ export const gridFilterStateSelector = state => state.filter;
  */
 
 export const gridFilterModelSelector = createSelector(gridFilterStateSelector, filterState => filterState.filterModel);
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+
+export const gridQuickFilterValuesSelector = createSelector(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
 /**
  * @category Filtering
  * @ignore - do not document.

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

@@ -10,7 +10,7 @@ import { gridColumnFieldsSelector } from '../columns';
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operatorValue.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-const cleanFilterItem = (item, apiRef) => {
+export const cleanFilterItem = (item, apiRef) => {
   const cleanItem = _extends({}, item);
 
   if (cleanItem.id == null) {
@@ -25,7 +25,6 @@ const cleanFilterItem = (item, apiRef) => {
 
   return cleanItem;
 };
-
 const filterModelDisableMultiColumnsFilteringWarning = buildWarning(['MUI: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
 const filterModelMissingItemIdWarning = buildWarning("MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.", 'error');
 const filterModelMissingItemOperatorWarning = buildWarning(['MUI: One of your filtering item have no `operatorValue` provided.', 'This property will become required on `@mui/x-data-grid@6.X`.']);
@@ -65,10 +64,8 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 
   return model;
 };
-export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => state => _extends({}, state, {
-  filter: _extends({}, state.filter, {
-    filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
-  })
+export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
+  filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
 /**
  * Generates a method to easily check if a row is matching the current filter model.

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

@@ -12,7 +12,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -33,7 +33,7 @@ export const filterStateInitializer = (state, props, apiRef) => {
 
 export const useGridFilter = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -74,7 +74,23 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  const upsertFilterItems = React.useCallback(items => {
+    const filterModel = gridFilterModelSelector(apiRef);
+    const existingItems = [...filterModel.items];
+    items.forEach(item => {
+      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+
+      if (itemIndex === -1) {
+        existingItems.push(item);
+      } else {
+        existingItems[itemIndex] = item;
+      }
+    });
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -86,7 +102,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -100,13 +116,13 @@ export const useGridFilter = (apiRef, props) => {
       if (filterItemOnTarget) {
         newFilterItems = filterItemsWithValue;
       } else if (props.disableMultipleColumnsFiltering) {
-        newFilterItems = [{
+        newFilterItems = [cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       } else {
-        newFilterItems = [...filterItemsWithValue, {
+        newFilterItems = [...filterItemsWithValue, cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       }
 
       apiRef.current.setFilterModel(_extends({}, filterModel, {
@@ -129,7 +145,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -142,12 +158,12 @@ export const useGridFilter = (apiRef, props) => {
       quickFilterValues: [...values]
     }));
   }, [apiRef]);
-  const setFilterModel = React.useCallback(model => {
+  const setFilterModel = React.useCallback((model, reason) => {
     const 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]);
@@ -160,6 +176,7 @@ export const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -191,7 +208,7 @@ export const 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: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });

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

@@ -37,7 +37,7 @@ const noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefi
 export const useGridPage = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPage');
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'page',
     propModel: props.page,
     propOnChange: props.onPageChange,

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

@@ -19,7 +19,7 @@ const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
 export const useGridPageSize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPageSize');
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pageSize',
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,

package/modern/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';
@@ -21,64 +22,99 @@ export const rowsMetaStateInitializer = state => _extends({}, state, {
 
 export const useGridRowsMeta = (apiRef, props) => {
   const {
-    getRowHeight,
-    getRowSpacing
+    getRowHeight: getRowHeightProp,
+    getRowSpacing,
+    getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef({});
-  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  const rowsHeightLookup = React.useRef({}); // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+  const lastMeasuredRowIndex = React.useRef(-1);
+  const hasRowWithAutoHeight = React.useRef(false);
+  const rowHeightFromDensity = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
-    apiRef.current.setState(state => {
-      const positions = [];
-      const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
-      const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
-      const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-        positions.push(acc);
-        let baseRowHeight;
-        const 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;
+    const densityFactor = gridDensityFactorSelector(apiRef.current.state, apiRef.current.instanceId);
+    const positions = [];
+    const currentPageTotalHeight = currentPage.rows.reduce((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
+
+        };
+      }
+
+      const {
+        isResized,
+        needsFirstMeasurement,
+        sizes
+      } = rowsHeightLookup.current[row.id];
+      let baseRowHeight = rowHeightFromDensity;
+      const existingBaseRowHeight = sizes.base;
+
+      if (isResized) {
+        // Do not recalculate resized row height and use the value from the lookup
+        baseRowHeight = existingBaseRowHeight;
+      } else if (getRowHeightProp) {
+        const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
+          densityFactor
+        }));
 
-          if (getRowHeight) {
-            // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = getRowHeight(_extends({}, row, {
+        if (rowHeightFromUser === 'auto') {
+          if (needsFirstMeasurement) {
+            const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
               densityFactor
-            })) ?? currentRowHeight;
+            })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
+
+            baseRowHeight = 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 ?? 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
 
 
-        const initialHeights = {
-          base: baseRowHeight
-        };
+      const initialHeights = {
+        base: baseRowHeight
+      };
 
-        if (getRowSpacing) {
-          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-          const spacing = getRowSpacing(_extends({}, row, {
-            isFirstVisible: indexRelativeToCurrentPage === 0,
-            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-            indexRelativeToCurrentPage
-          }));
-          initialHeights.spacingTop = spacing.top ?? 0;
-          initialHeights.spacingBottom = spacing.bottom ?? 0;
-        }
+      if (getRowSpacing) {
+        const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+        const spacing = getRowSpacing(_extends({}, row, {
+          isFirstVisible: indexRelativeToCurrentPage === 0,
+          isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+          indexRelativeToCurrentPage
+        }));
+        initialHeights.spacingTop = spacing.top ?? 0;
+        initialHeights.spacingBottom = spacing.bottom ?? 0;
+      }
 
-        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
-        rowsHeightLookup.current[row.id] = {
-          value: baseRowHeight,
-          sizes,
-          isResized
-        };
-        return acc + finalRowHeight;
-      }, 0);
+      const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
+      rowsHeightLookup.current[row.id].sizes = processedSizes;
+      const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
+      return acc + finalRowHeight;
+    }, 0);
+    apiRef.current.setState(state => {
       return _extends({}, state, {
         rowsMeta: {
           currentPageTotalHeight,
@@ -86,33 +122,67 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
-  const getTargetRowHeight = rowId => rowsHeightLookup.current[rowId]?.value || rowHeight;
+    if (!hasRowWithAutoHeight.current) {
+      // No row has height=auto, so all rows are already measured
+      lastMeasuredRowIndex.current = Infinity;
+    }
+
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  const getRowHeight = React.useCallback(rowId => {
+    const height = rowsHeightLookup.current[rowId];
+    return height ? height.sizes.base : rowHeightFromDensity;
+  }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
 
   const setRowHeight = React.useCallback((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]);
+  const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta), [hydrateRowsMeta]);
+  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+    if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
+      return;
+    } // Only trigger hydration if the value is different, otherwise we trigger a loop
+
+
+    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
+    rowsHeightLookup.current[id].sizes.base = height;
+
+    if (needsHydration) {
+      debouncedHydrateRowsMeta();
+    }
+  }, [debouncedHydrateRowsMeta]);
+  const rowHasAutoHeight = React.useCallback(id => {
+    return rowsHeightLookup.current[id]?.autoHeight || false;
+  }, []);
+  const getLastMeasuredRowIndex = React.useCallback(() => {
+    return lastMeasuredRowIndex.current;
+  }, []);
+  const setLastMeasuredRowIndex = React.useCallback(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(() => {
     hydrateRowsMeta();
-  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  }, [rowHeightFromDensity, filterState, paginationState, sortingState, hydrateRowsMeta]);
   useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   const 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/modern/hooks/features/selection/useGridSelection.js

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

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

@@ -3,7 +3,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';
 
 const useUtilityClasses = ownerState => {
   const {
@@ -31,14 +31,16 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
     });
 
     const shouldHaveSelectionColumn = props.checkboxSelection;
-    const haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+    const haveSelectionColumn = columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] != null;
 
     if (shouldHaveSelectionColumn && !haveSelectionColumn) {
-      columnsState.lookup[selectionColumn.field] = selectionColumn;
-      columnsState.all = [selectionColumn.field, ...columnsState.all];
+      columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] = selectionColumn;
+      columnsState.all = [GRID_CHECKBOX_SELECTION_FIELD, ...columnsState.all];
     } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
-      delete columnsState.lookup[selectionColumn.field];
-      columnsState.all = columnsState.all.filter(field => field !== selectionColumn.field);
+      delete columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD];
+      columnsState.all = columnsState.all.filter(field => 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/modern/hooks/features/sorting/useGridSorting.js

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