@mui/x-data-grid 5.11.1 → 5.12.2

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

@@ -14,6 +14,9 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
   var _props$initialState, _props$initialState$c, _props$initialState2, _ref, _props$columnVisibili, _props$initialState3, _props$initialState3$;
 
   var 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: isUsingColumnVisibilityModel
+  };
   var columnsTypes = computeColumnTypes(props.columnTypes);
   var columnsState = createColumnsState({
     apiRef: apiRef,
@@ -35,7 +38,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$initialState4$, _props$componentsProp2;
+  var _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridColumns');
   var columnTypes = React.useMemo(function () {
@@ -43,13 +46,7 @@ export function useGridColumns(apiRef, props) {
   }, [props.columnTypes]);
   var previousColumnsProp = React.useRef(props.columns);
   var 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`
-   */
-
-  var 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,
@@ -127,7 +124,7 @@ export 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;
 
       var columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -168,7 +165,8 @@ export function useGridColumns(apiRef, props) {
 
     var updatedColumns = _toConsumableArray(allColumns);
 
-    updatedColumns.splice(targetIndexPosition, 0, updatedColumns.splice(oldIndexPosition, 1)[0]);
+    var fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
     setGridColumnsState(_extends({}, gridColumnsSelector(apiRef.current.state), {
       all: updatedColumns
     }));
@@ -218,7 +216,7 @@ export function useGridColumns(apiRef, props) {
   var stateExportPreProcessing = React.useCallback(function (prevState) {
     var columnsStateToExport = {};
 
-    if (isUsingColumnVisibilityModel.current) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       var columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
       var hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(function (value) {
         return value === false;
@@ -259,7 +257,7 @@ export function useGridColumns(apiRef, props) {
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 
-    var columnVisibilityModelToImport = isUsingColumnVisibilityModel.current ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
+    var columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel : undefined;
     var initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -271,7 +269,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       currentColumnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
@@ -322,7 +320,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes: columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel.current,
+      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -352,7 +350,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes: 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/legacy/hooks/features/dimensions/useGridDimensions.js

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

@@ -301,17 +301,22 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               _editingState$id$fiel = editingState[id][field], error = _editingState$id$fiel.error, isProcessingProps = _editingState$id$fiel.isProcessingProps;
 
               if (!(error || isProcessingProps)) {
-                _context.next = 11;
+                _context.next = 12;
                 break;
               }
 
+              // 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 _context.abrupt("return");
 
-            case 11:
+            case 12:
               rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
               if (processRowUpdate) {
                 handleError = function handleError(errorThrown) {
+                  prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+
                   if (onProcessRowUpdateError) {
                     onProcessRowUpdateError(errorThrown);
                   } else {
@@ -333,7 +338,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
                 finishCellEditMode();
               }
 
-            case 13:
+            case 14:
             case "end":
               return _context.stop();
           }
@@ -446,20 +451,23 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     }
   }, [cellModesModelProp, updateCellModesModel]);
   React.useEffect(function () {
-    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
+
+    var copyOfPrevCellModes = prevCellModesModel.current;
+    prevCellModesModel.current = cellModesModel;
     Object.entries(cellModesModel).forEach(function (_ref3) {
       var _ref4 = _slicedToArray(_ref3, 2),
           id = _ref4[0],
           fields = _ref4[1];
 
       Object.entries(fields).forEach(function (_ref5) {
-        var _prevCellModesModel$c, _prevCellModesModel$c2, _idToIdLookup$id;
+        var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;
 
         var _ref6 = _slicedToArray(_ref5, 2),
             field = _ref6[0],
             params = _ref6[1];
 
-        var prevMode = ((_prevCellModesModel$c = prevCellModesModel.current[id]) == null ? void 0 : (_prevCellModesModel$c2 = _prevCellModesModel$c[field]) == null ? void 0 : _prevCellModesModel$c2.mode) || GridCellModes.View;
+        var prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null ? void 0 : (_copyOfPrevCellModes$2 = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$2.mode) || GridCellModes.View;
         var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
@@ -475,6 +483,5 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
         }
       });
     });
-    prevCellModesModel.current = cellModesModel;
   }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };

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

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

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

@@ -381,6 +381,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (isSomeFieldProcessingProps) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -389,6 +390,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     if (hasSomeFieldWithError) {
+      prevRowModesModel.current[id].mode = GridRowModes.Edit;
       return;
     }
 
@@ -396,6 +398,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
+        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else {
@@ -574,15 +578,18 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(function () {
-    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+
+    var copyOfPrevRowModesModel = prevRowModesModel.current;
+    prevRowModesModel.current = rowModesModel;
     Object.entries(rowModesModel).forEach(function (_ref5) {
-      var _prevRowModesModel$cu, _idToIdLookup$id;
+      var _copyOfPrevRowModesMo, _idToIdLookup$id;
 
       var _ref6 = _slicedToArray(_ref5, 2),
           id = _ref6[0],
           params = _ref6[1];
 
-      var prevMode = ((_prevRowModesModel$cu = prevRowModesModel.current[id]) == null ? void 0 : _prevRowModesModel$cu.mode) || GridRowModes.View;
+      var prevMode = ((_copyOfPrevRowModesMo = copyOfPrevRowModesModel[id]) == null ? void 0 : _copyOfPrevRowModesMo.mode) || GridRowModes.View;
       var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
 
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
@@ -595,6 +602,5 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         }, params));
       }
     });
-    prevRowModesModel.current = rowModesModel;
   }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

package/legacy/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/legacy/hooks/features/filter/gridFilterSelector.js

@@ -17,6 +17,14 @@ export var gridFilterStateSelector = function gridFilterStateSelector(state) {
 export var gridFilterModelSelector = createSelector(gridFilterStateSelector, function (filterState) {
   return filterState.filterModel;
 });
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+
+export var gridQuickFilterValuesSelector = createSelector(gridFilterModelSelector, function (filterModel) {
+  return filterModel.quickFilterValues;
+});
 /**
  * @category Filtering
  * @ignore - do not document.

package/legacy/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.
  */
-var cleanFilterItem = function cleanFilterItem(item, apiRef) {
+export var cleanFilterItem = function cleanFilterItem(item, apiRef) {
   var cleanItem = _extends({}, item);
 
   if (cleanItem.id == null) {
@@ -25,7 +25,6 @@ var cleanFilterItem = function cleanFilterItem(item, apiRef) {
 
   return cleanItem;
 };
-
 var 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');
 var filterModelMissingItemIdWarning = buildWarning("MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.", 'error');
 var filterModelMissingItemOperatorWarning = buildWarning(['MUI: One of your filtering item have no `operatorValue` provided.', 'This property will become required on `@mui/x-data-grid@6.X`.']);
@@ -72,11 +71,9 @@ export var sanitizeFilterModel = function sanitizeFilterModel(model, disableMult
   return model;
 };
 export var mergeStateWithFilterModel = function mergeStateWithFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef) {
-  return function (state) {
-    return _extends({}, state, {
-      filter: _extends({}, state.filter, {
-        filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
-      })
+  return function (filteringState) {
+    return _extends({}, filteringState, {
+      filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
     });
   };
 };

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

@@ -13,7 +13,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 var filterStateInitializer = function filterStateInitializer(state, props, apiRef) {
@@ -38,7 +38,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   var _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -83,7 +83,27 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  var upsertFilterItems = React.useCallback(function (items) {
+    var filterModel = gridFilterModelSelector(apiRef);
+
+    var existingItems = _toConsumableArray(filterModel.items);
+
+    items.forEach(function (item) {
+      var itemIndex = items.findIndex(function (filterItem) {
+        return filterItem.id === item.id;
+      });
+
+      if (itemIndex === -1) {
+        existingItems.push(item);
+      } else {
+        existingItems[itemIndex] = item;
+      }
+    });
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   var deleteFilterItem = React.useCallback(function (itemToDelete) {
     var filterModel = gridFilterModelSelector(apiRef);
@@ -97,7 +117,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items: items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   var showFilterPanel = React.useCallback(function (targetColumnField) {
     logger.debug('Displaying filter panel');
@@ -115,13 +135,13 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       if (filterItemOnTarget) {
         newFilterItems = filterItemsWithValue;
       } else if (props.disableMultipleColumnsFiltering) {
-        newFilterItems = [{
+        newFilterItems = [cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       } else {
-        newFilterItems = [].concat(_toConsumableArray(filterItemsWithValue), [{
+        newFilterItems = [].concat(_toConsumableArray(filterItemsWithValue), [cleanFilterItem({
           columnField: targetColumnField
-        }]);
+        }, apiRef)]);
       }
 
       apiRef.current.setFilterModel(_extends({}, filterModel, {
@@ -144,7 +164,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator: linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   var setQuickFilterValues = React.useCallback(function (values) {
     var filterModel = gridFilterModelSelector(apiRef);
@@ -157,12 +177,12 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       quickFilterValues: _toConsumableArray(values)
     }));
   }, [apiRef]);
-  var setFilterModel = React.useCallback(function (model) {
+  var setFilterModel = React.useCallback(function (model, reason) {
     var 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]);
@@ -177,6 +197,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     unstable_applyFilters: applyFilters,
     deleteFilterItem: deleteFilterItem,
     upsertFilterItem: upsertFilterItem,
+    upsertFilterItems: upsertFilterItems,
     setFilterModel: setFilterModel,
     showFilterPanel: showFilterPanel,
     hideFilterPanel: hideFilterPanel,
@@ -210,7 +231,7 @@ export var useGridFilter = function 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: [].concat(_toConsumableArray(params.callbacks), [apiRef.current.unstable_applyFilters])
     });

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

@@ -43,7 +43,7 @@ export var useGridPage = function useGridPage(apiRef, props) {
 
   var logger = useGridLogger(apiRef, 'useGridPage');
   var visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'page',
     propModel: props.page,
     propOnChange: props.onPageChange,

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

@@ -27,7 +27,7 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
 
   var logger = useGridLogger(apiRef, 'useGridPageSize');
   var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pageSize',
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,