@mui/x-data-grid 5.11.1 → 5.12.2

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { GridFilterModel } from '../../../models';
+import { GridFilterItem, GridFilterModel } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridAggregatedFilterItemApplier } from './gridFilterState';
+/**
+ * Adds default values to the optional fields of a filter items.
+ * @param {GridFilterItem} item The raw filter item.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @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.
+ */
+export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (state: GridStateCommunity) => GridStateCommunity;
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['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.

package/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/hooks/features/filter/useGridFilter.d.ts

@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'filterModel' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'components' | 'componentsProps'>) => void;
+export declare const useGridFilter: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'filterModel' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'components' | 'componentsProps'>) => void;

package/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) => {
@@ -37,7 +37,7 @@ export const useGridFilter = (apiRef, props) => {
   var _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -78,7 +78,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);
@@ -90,7 +106,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -104,13 +120,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, {
@@ -133,7 +149,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -146,12 +162,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]);
@@ -164,6 +180,7 @@ export const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -197,7 +214,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/hooks/features/pagination/useGridPage.js

@@ -39,7 +39,7 @@ 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/hooks/features/pagination/useGridPageSize.js

@@ -21,7 +21,7 @@ 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/hooks/features/rows/useGridRowsMeta.d.ts

@@ -7,4 +7,4 @@ export declare const rowsMetaStateInitializer: GridStateInitializer;
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getEstimatedRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'>) => void;

package/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,68 +22,101 @@ 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 (getRowHeight) {
-            var _getRowHeight;
+      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
+        }));
 
-            // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = (_getRowHeight = getRowHeight(_extends({}, row, {
+        if (rowHeightFromUser === 'auto') {
+          if (needsFirstMeasurement) {
+            const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
               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
 
-        const initialHeights = {
-          base: baseRowHeight
-        };
 
-        if (getRowSpacing) {
-          var _spacing$top, _spacing$bottom;
-
-          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 = spacing.top) != null ? _spacing$top : 0;
-          initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
-        }
+      const initialHeights = {
+        base: baseRowHeight
+      };
 
-        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);
+      if (getRowSpacing) {
+        var _spacing$top, _spacing$bottom;
+
+        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 = spacing.top) != null ? _spacing$top : 0;
+        initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 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,
@@ -90,41 +124,73 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
-  const 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]);
+  const getRowHeight = React.useCallback(rowId => {
+    const height = rowsHeightLookup.current[rowId];
+    return height ? height.sizes.base : rowHeightFromDensity;
+  }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => {
-    var _rowsHeightLookup$cur2;
+    var _rowsHeightLookup$cur;
 
-    return (_rowsHeightLookup$cur2 = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur2.sizes;
+    return (_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.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 => {
+    var _rowsHeightLookup$cur2;
+
+    return ((_rowsHeightLookup$cur2 = rowsHeightLookup.current[id]) == null ? void 0 : _rowsHeightLookup$cur2.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/hooks/features/selection/useGridSelection.js

@@ -50,7 +50,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/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/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableMultipleColumnsSorting'>) => void;
+export declare const useGridSorting: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableMultipleColumnsSorting'>) => void;

package/hooks/features/sorting/useGridSorting.js

@@ -30,7 +30,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,

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridRenderContext } from '../../../models';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
-export declare function getIndexFromScroll(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
+export declare function binarySearch(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
 export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, minFirstIndex, maxLastIndex, }: {
     firstIndex: number;
     lastIndex: number;
@@ -28,6 +28,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         minFirstColumn?: number | undefined;
         maxLastColumn?: number | undefined;
         availableSpace?: number | null | undefined;
+        ignoreAutoHeight?: boolean | undefined;
     }) => JSX.Element[] | null;
     getRootProps: ({ style, ...other }?: {
         style?: {} | undefined;