@mui/x-data-grid 5.11.0 → 5.12.1

package/node/hooks/core/useGridStateInitialization.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const useGridStateInitialization = (apiRef, props) => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
-  const updateControlState = React.useCallback(controlStateItem => {
+  const registerControlState = React.useCallback(controlStateItem => {
     const {
       stateId
     } = controlStateItem,
@@ -37,7 +37,7 @@ const useGridStateInitialization = (apiRef, props) => {
       stateId
     });
   }, []);
-  const setState = React.useCallback(state => {
+  const setState = React.useCallback((state, reason) => {
     let newState;
 
     if ((0, _utils2.isFunction)(state)) {
@@ -98,23 +98,36 @@ const useGridStateInitialization = (apiRef, props) => {
 
       if (controlState.propOnChange && hasPropChanged) {
         const details = props.signature === _useGridApiEventHandler.GridSignature.DataGridPro ? {
-          api: apiRef.current
-        } : {};
+          api: apiRef.current,
+          reason
+        } : {
+          reason
+        };
         controlState.propOnChange(model, details);
       }
 
       if (!ignoreSetState) {
-        apiRef.current.publishEvent(controlState.changeEvent, model);
+        apiRef.current.publishEvent(controlState.changeEvent, model, {
+          reason
+        });
       }
     }
 
     return !ignoreSetState;
   }, [apiRef, props.signature]);
+  const updateControlState = React.useCallback((key, state, reason) => {
+    return apiRef.current.setState(previousState => {
+      return (0, _extends2.default)({}, previousState, {
+        [key]: state(previousState[key])
+      });
+    }, reason);
+  }, [apiRef]);
   const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
   const stateApi = {
     setState,
     forceUpdate,
-    unstable_updateControlState: updateControlState
+    unstable_updateControlState: updateControlState,
+    unstable_registerControlState: registerControlState
   };
   (0, _utils.useGridApiMethod)(apiRef, stateApi, 'GridStateApi');
 };

package/node/hooks/features/columnMenu/useGridColumnMenu.js

@@ -15,6 +15,8 @@ var _utils = require("../../utils");
 
 var _columnMenuSelector = require("./columnMenuSelector");
 
+var _gridClasses = require("../../../constants/gridClasses");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -97,7 +99,28 @@ const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
+  const handleColumnHeaderFocus = React.useCallback((params, event) => {
+    // Check if the column menu button received focus
+    if (!event.target.classList.contains(_gridClasses.gridClasses.menuIconButton)) {
+      return;
+    } // Check if there's an element which lost focus
+
+
+    if (!event.relatedTarget) {
+      return;
+    } // `true` if the focus was on the column menu itself, not on any item
+
+
+    const columnMenuLostFocus = event.relatedTarget.classList.contains(_gridClasses.gridClasses.menuList); // `true` if the focus was on an item from the column menu
+
+    const columnMenuItemLostFocus = event.relatedTarget.getAttribute('role') === 'menuitem';
+
+    if (columnMenuLostFocus || columnMenuItemLostFocus) {
+      apiRef.current.setColumnHeaderFocus(params.field);
+    }
+  }, [apiRef]);
   (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStart', hideColumnMenu);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
   (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
   (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/node/hooks/features/columns/useGridColumns.js

@@ -36,6 +36,9 @@ const columnsStateInitializer = (state, props, apiRef) => {
   var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
   const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!((_props$initialState = props.initialState) != null && (_props$initialState$c = _props$initialState.columns) != null && _props$initialState$c.columnVisibilityModel);
+  apiRef.current.unstable_caches.columns = {
+    isUsingColumnVisibilityModel
+  };
   const columnsTypes = (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes);
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
@@ -60,19 +63,13 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 
 function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
+  var _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.columnTypes]);
   const previousColumnsProp = React.useRef(props.columns);
   const previousColumnTypesProp = React.useRef(columnTypes);
-  /**
-   * If `initialState.columns.columnVisibilityModel` or `columnVisibilityModel` was defined during the 1st render, we are directly updating the model
-   * If not, we keep the old behavior and update the `GridColDef.hide` option (which will update the state model through the `GridColDef.hide` => `columnVisibilityModel` sync in `createColumnsState`
-   */
-
-  const isUsingColumnVisibilityModel = React.useRef(!!props.columnVisibilityModel || !!((_props$initialState4 = props.initialState) != null && (_props$initialState4$ = _props$initialState4.columns) != null && _props$initialState4$.columnVisibilityModel));
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
@@ -135,7 +132,7 @@ function useGridColumns(apiRef, props) {
     // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
     // `updateColumns` take care of updating the model itself if needs be.
     // TODO v6: stop using the `hide` field even when the model is not defined
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       var _columnVisibilityMode;
 
       const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
@@ -171,7 +168,8 @@ function useGridColumns(apiRef, props) {
 
     logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
     const updatedColumns = [...allColumns];
-    updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+    const fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
     setGridColumnsState((0, _extends2.default)({}, (0, _gridColumnsSelector.gridColumnsSelector)(apiRef.current.state), {
       all: updatedColumns
     }));
@@ -219,7 +217,7 @@ function useGridColumns(apiRef, props) {
   const stateExportPreProcessing = React.useCallback(prevState => {
     const columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
       const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
 
@@ -260,7 +258,7 @@ function useGridColumns(apiRef, props) {
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
-    const columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -272,7 +270,7 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -323,7 +321,7 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -353,7 +351,7 @@ function useGridColumns(apiRef, props) {
       columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });

package/node/hooks/features/editRows/useGridCellEditing.new.js

@@ -323,6 +323,9 @@ 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 = _gridEditRowModel.GridCellModes.Edit;
       return;
     }
 
@@ -330,6 +333,8 @@ const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -432,12 +437,15 @@ const useGridCellEditing = (apiRef, props) => {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef);
+    const idToIdLookup = (0, _gridRowsSelector.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]) => {
-        var _prevCellModesModel$c, _prevCellModesModel$c2, _idToIdLookup$id;
+        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
 
-        const prevMode = ((_prevCellModesModel$c = prevCellModesModel.current[id]) == null ? void 0 : (_prevCellModesModel$c2 = _prevCellModesModel$c[field]) == null ? void 0 : _prevCellModesModel$c2.mode) || _gridEditRowModel.GridCellModes.View;
+        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || _gridEditRowModel.GridCellModes.View;
         const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
         if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
@@ -453,7 +461,6 @@ const useGridCellEditing = (apiRef, props) => {
         }
       });
     });
-    prevCellModesModel.current = cellModesModel;
   }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };
 

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

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

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

@@ -402,12 +402,14 @@ const useGridRowEditing = (apiRef, props) => {
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
 
     if (isSomeFieldProcessingProps) {
+      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       return;
     }
 
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
+      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       return;
     }
 
@@ -415,6 +417,8 @@ const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
+        prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -578,11 +582,14 @@ const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef);
+    const idToIdLookup = (0, _gridRowsSelector.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]) => {
-      var _prevRowModesModel$cu, _idToIdLookup$id;
+      var _copyOfPrevRowModesMo, _idToIdLookup$id;
 
-      const prevMode = ((_prevRowModesModel$cu = prevRowModesModel.current[id]) == null ? void 0 : _prevRowModesModel$cu.mode) || _gridEditRowModel.GridRowModes.View;
+      const prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || _gridEditRowModel.GridRowModes.View;
       const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
@@ -595,7 +602,6 @@ const useGridRowEditing = (apiRef, props) => {
         }, params));
       }
     });
-    prevRowModesModel.current = rowModesModel;
   }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };
 

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisibleTopLevelRowCountSelector = exports.gridVisibleSortedTopLevelRowEntriesSelector = exports.gridVisibleSortedRowIdsSelector = exports.gridVisibleSortedRowEntriesSelector = exports.gridVisibleRowsSelector = exports.gridVisibleRowsLookupSelector = exports.gridVisibleRowCountSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilterStateSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = void 0;
+exports.gridVisibleTopLevelRowCountSelector = exports.gridVisibleSortedTopLevelRowEntriesSelector = exports.gridVisibleSortedRowIdsSelector = exports.gridVisibleSortedRowEntriesSelector = exports.gridVisibleRowsSelector = exports.gridVisibleRowsLookupSelector = exports.gridVisibleRowCountSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilterStateSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -26,11 +26,18 @@ const gridFilterStateSelector = state => state.filter;
 exports.gridFilterStateSelector = gridFilterStateSelector;
 const gridFilterModelSelector = (0, _createSelector.createSelector)(gridFilterStateSelector, filterState => filterState.filterModel);
 /**
+ * Get the current quick filter values.
  * @category Filtering
- * @ignore - do not document.
  */
 
 exports.gridFilterModelSelector = gridFilterModelSelector;
+const gridQuickFilterValuesSelector = (0, _createSelector.createSelector)(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+
+exports.gridQuickFilterValuesSelector = gridQuickFilterValuesSelector;
 const gridVisibleRowsLookupSelector = (0, _createSelector.createSelector)(gridFilterStateSelector, filterState => filterState.visibleRowsLookup);
 /**
  * @category Filtering

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sanitizeFilterModel = exports.mergeStateWithFilterModel = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
+exports.sanitizeFilterModel = exports.mergeStateWithFilterModel = exports.cleanFilterItem = exports.buildAggregatedQuickFilterApplier = exports.buildAggregatedFilterItemsApplier = exports.buildAggregatedFilterApplier = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -38,6 +38,7 @@ const cleanFilterItem = (item, apiRef) => {
   return cleanItem;
 };
 
+exports.cleanFilterItem = cleanFilterItem;
 const filterModelDisableMultiColumnsFilteringWarning = (0, _warning.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 = (0, _warning.buildWarning)("MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.", 'error');
 const filterModelMissingItemOperatorWarning = (0, _warning.buildWarning)(['MUI: One of your filtering item have no `operatorValue` provided.', 'This property will become required on `@mui/x-data-grid@6.X`.']);
@@ -81,10 +82,8 @@ const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) =>
 
 exports.sanitizeFilterModel = sanitizeFilterModel;
 
-const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => state => (0, _extends2.default)({}, state, {
-  filter: (0, _extends2.default)({}, state.filter, {
-    filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
-  })
+const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => (0, _extends2.default)({}, filteringState, {
+  filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
 /**
  * Generates a method to easily check if a row is matching the current filter model.

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

@@ -70,7 +70,7 @@ const useGridFilter = (apiRef, props) => {
   var _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -111,7 +111,23 @@ const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
       items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  const upsertFilterItems = React.useCallback(items => {
+    const filterModel = (0, _gridFilterSelector.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((0, _extends2.default)({}, filterModel, {
+      items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
@@ -123,7 +139,7 @@ const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -137,13 +153,13 @@ const useGridFilter = (apiRef, props) => {
       if (filterItemOnTarget) {
         newFilterItems = filterItemsWithValue;
       } else if (props.disableMultipleColumnsFiltering) {
-        newFilterItems = [{
+        newFilterItems = [(0, _gridFilterUtils.cleanFilterItem)({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       } else {
-        newFilterItems = [...filterItemsWithValue, {
+        newFilterItems = [...filterItemsWithValue, (0, _gridFilterUtils.cleanFilterItem)({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       }
 
       apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
@@ -166,7 +182,7 @@ const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
@@ -179,12 +195,12 @@ const useGridFilter = (apiRef, props) => {
       quickFilterValues: [...values]
     }));
   }, [apiRef]);
-  const setFilterModel = React.useCallback(model => {
+  const setFilterModel = React.useCallback((model, reason) => {
     const currentModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
 
     if (currentModel !== model) {
       logger.debug('Setting filter model');
-      apiRef.current.setState((0, _gridFilterUtils.mergeStateWithFilterModel)(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_updateControlState('filter', (0, _gridFilterUtils.mergeStateWithFilterModel)(model, props.disableMultipleColumnsFiltering, apiRef), reason);
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
@@ -197,6 +213,7 @@ const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -230,7 +247,7 @@ const useGridFilter = (apiRef, props) => {
       return params;
     }
 
-    apiRef.current.setState((0, _gridFilterUtils.mergeStateWithFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    apiRef.current.unstable_updateControlState('filter', (0, _gridFilterUtils.mergeStateWithFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef), 'restoreState');
     return (0, _extends2.default)({}, params, {
       callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });

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

@@ -61,7 +61,7 @@ const useGridPage = (apiRef, props) => {
 
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPage');
   const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridVisibleTopLevelRowCountSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'page',
     propModel: props.page,
     propOnChange: props.onPageChange,

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

@@ -42,7 +42,7 @@ const useGridPageSize = (apiRef, props) => {
 
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPageSize');
   const rowHeight = (0, _utils.useGridSelector)(apiRef, _density.gridDensityRowHeightSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pageSize',
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,

package/node/hooks/features/rows/gridRowsUtils.js

@@ -1,10 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkGridRowIdIsValid = checkGridRowIdIsValid;
-exports.getTreeNodeDescendants = void 0;
+exports.getTreeNodeDescendants = exports.getRowsStateFromCache = exports.getRowIdFromRowModel = exports.createRowsInternalCache = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+const _excluded = ["rowsBeforePartialUpdates"];
 
 /**
  * A helper function to check if the id provided is valid.
@@ -18,6 +26,64 @@ function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided
   }
 }
 
+const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
+  const id = getRowId ? getRowId(rowModel) : rowModel.id;
+  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
+  return id;
+};
+
+exports.getRowIdFromRowModel = getRowIdFromRowModel;
+
+const createRowsInternalCache = ({
+  rows,
+  getRowId,
+  loading
+}) => {
+  const cache = {
+    rowsBeforePartialUpdates: rows,
+    loadingPropBeforePartialUpdates: loading,
+    idRowsLookup: {},
+    idToIdLookup: {},
+    ids: []
+  };
+
+  for (let i = 0; i < rows.length; i += 1) {
+    const row = rows[i];
+    const id = getRowIdFromRowModel(row, getRowId);
+    cache.idRowsLookup[id] = row;
+    cache.idToIdLookup[id] = id;
+    cache.ids.push(id);
+  }
+
+  return cache;
+};
+
+exports.createRowsInternalCache = createRowsInternalCache;
+
+const getRowsStateFromCache = ({
+  apiRef,
+  previousTree,
+  rowCountProp,
+  loadingProp
+}) => {
+  const _apiRef$current$unsta = apiRef.current.unstable_caches.rows,
+        cacheForGrouping = (0, _objectWithoutPropertiesLoose2.default)(_apiRef$current$unsta, _excluded);
+  const rowCount = rowCountProp != null ? rowCountProp : 0;
+  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', (0, _extends2.default)({}, cacheForGrouping, {
+    previousTree
+  }));
+  const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
+  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null).length;
+  return (0, _extends2.default)({}, processedGroupingResponse, {
+    groupingResponseBeforeRowHydration: groupingResponse,
+    loading: loadingProp,
+    totalRowCount: Math.max(rowCount, processedGroupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  });
+};
+
+exports.getRowsStateFromCache = getRowsStateFromCache;
+
 const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
   var _tree$parentId;