@mui/x-data-grid 5.11.1 → 5.12.2

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/dimensions/useGridDimensions.js

@@ -58,7 +58,7 @@ const hasScroll = ({
 
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.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 = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -115,7 +115,8 @@ function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -165,14 +166,14 @@ 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/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,