@mui/x-data-grid 5.12.0 → 5.12.3

package/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -26,9 +26,17 @@ function GridFilterInputMultipleSingleSelect(props) {
   const id = useId();
   const resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const resolvedValueOptions = React.useMemo(() => {
-    return typeof resolvedColumn?.valueOptions === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn?.valueOptions;
+    if (!resolvedColumn?.valueOptions) {
+      return [];
+    }
+
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+
+    return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   const resolvedFormattedValueOptions = React.useMemo(() => {
     return resolvedValueOptions?.map(getValueFromOption);
@@ -85,8 +93,7 @@ function GridFilterInputMultipleSingleSelect(props) {
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     limitTags: 1,
-    options: resolvedValueOptions // TODO: avoid `any`?
-    ,
+    options: resolvedValueOptions,
     isOptionEqualToValue: isOptionEqualToValue,
     filterOptions: filter,
     id: id,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -66,9 +66,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       return;
     }
 
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: [...items, defaultItem]
-    }));
+    apiRef.current.upsertFilterItems([...items, defaultItem]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -109,8 +107,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/_jsx(GridPanelFooter, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/_jsx(GridAddIcon, {})
       }, rootProps.componentsProps?.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -39,7 +39,6 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
   return /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/_jsx(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -93,7 +93,6 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -50,7 +50,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -104,7 +104,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -1,13 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["quickFilterParser", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
 import { styled } from '@mui/material/styles';
 import { debounce } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
+import { isDeepEqual } from '../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
@@ -18,26 +22,53 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
 }) => ({
   width: 'auto',
   paddingBottom: theme.spacing(0.5),
-  '& .MuiSvgIcon-root': {
-    marginRight: theme.spacing(0.5)
+  '& input': {
+    marginLeft: theme.spacing(0.5)
   },
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  [`& input[type=search]::-ms-clear,
+& input[type=search]::-ms-reveal`]: {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  },
+  [`& input[type="search"]::-webkit-search-decoration,
+  & input[type="search"]::-webkit-search-cancel-button,
+  & input[type="search"]::-webkit-search-results-button,
+  & input[type="search"]::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
   }
 }));
 
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 
+const defaultSearchValueFormatter = values => values.join(' ');
+
 function GridToolbarQuickFilter(props) {
   const {
     quickFilterParser = defaultSearchValueParser,
+    quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = 500
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
+  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
+  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  React.useEffect(() => {
+    if (!isDeepEqual(prevQuickFilterValues, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      setPrevQuickFilterValues(quickFilterValues); // Update the input value if needed to match the new model
+
+      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -47,6 +78,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -58,6 +93,17 @@ function GridToolbarQuickFilter(props) {
     InputProps: {
       startAdornment: /*#__PURE__*/_jsx(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset,
+        children: /*#__PURE__*/_jsx(rootProps.components.QuickFilterClearIcon, {
+          fontSize: "small"
+        })
       })
     }
   }, other, rootProps.componentsProps?.baseTextField));
@@ -75,6 +121,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   debounceMs: PropTypes.number,
 
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   */
+  quickFilterFormatter: PropTypes.func,
+
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user

package/modern/constants/defaultGridSlotsComponents.js

@@ -35,7 +35,8 @@ const DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
   DetailPanelExpandIcon: GridAddIcon,
   DetailPanelCollapseIcon: GridRemoveIcon,
   RowReorderIcon: GridDragIcon,
-  QuickFilterIcon: GridSearchIcon
+  QuickFilterIcon: GridSearchIcon,
+  QuickFilterClearIcon: GridCloseIcon
 };
 /**
  * TODO: Differentiate community and pro value and interface

package/modern/constants/localeTextConstants.js

@@ -105,6 +105,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   groupColumn: name => `Group by ${name}`,
   unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/modern/hooks/core/useGridStateInitialization.js

@@ -8,7 +8,7 @@ import { isFunction } from '../../utils/utils';
 export 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,
@@ -18,7 +18,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       stateId
     });
   }, []);
-  const setState = React.useCallback(state => {
+  const setState = React.useCallback((state, reason) => {
     let newState;
 
     if (isFunction(state)) {
@@ -79,23 +79,36 @@ export const useGridStateInitialization = (apiRef, props) => {
 
       if (controlState.propOnChange && hasPropChanged) {
         const details = props.signature === 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 _extends({}, 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
   };
   useGridApiMethod(apiRef, stateApi, 'GridStateApi');
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
+import { gridClasses } from '../../../constants/gridClasses';
 export const columnMenuStateInitializer = state => _extends({}, state, {
   columnMenu: {
     open: false
@@ -77,7 +78,28 @@ export const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
+  const handleColumnHeaderFocus = React.useCallback((params, event) => {
+    // Check if the column menu button received focus
+    if (!event.target.classList.contains(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.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]);
   useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
   useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
   useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 

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

@@ -38,7 +38,7 @@ export function useGridColumns(apiRef, props) {
   const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
   const previousColumnsProp = React.useRef(props.columns);
   const previousColumnTypesProp = React.useRef(columnTypes);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,

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

@@ -37,7 +37,7 @@ const hasScroll = ({
 
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
-  const warningShown = React.useRef(false);
+  const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -92,7 +92,8 @@ export function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -142,14 +143,14 @@ export function useGridDimensions(apiRef, props) {
 
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
-    if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
     if (isTestEnvironment) {

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

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

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

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

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
-import { gridColumnFieldsSelector } from '../columns';
+import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -18,8 +18,9 @@ export const cleanFilterItem = (item, apiRef) => {
   }
 
   if (cleanItem.operatorValue == null) {
-    // we select a default operator
-    const column = apiRef.current.getColumn(cleanItem.columnField);
+    // Selects a default operator
+    // We don't use `apiRef.current.getColumn` because it is not ready during state initialization
+    const column = gridColumnLookupSelector(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -64,10 +65,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.
@@ -185,14 +184,16 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
+    const columnsFieldsToFilter = [];
     Object.keys(appliersPerColumnField).forEach(columnField => {
       if (!shouldApplyFilter || shouldApplyFilter(columnField)) {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
+        columnsFieldsToFilter.push(columnField);
       }
     }); // Return `false` as soon as we have a quick filter value that does not match any column
 
     if (quickFilterLogicOperator === GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
         if (appliersPerColumnField[field][index] == null) {
           return false;
         }
@@ -202,7 +203,7 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     } // Return `true` as soon as we have have a quick filter value that match any column
 
 
-    return sanitizedQuickFilterValues.some((value, index) => Object.keys(appliersPerColumnField).some(field => {
+    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
       if (appliersPerColumnField[field][index] == null) {
         return false;
       }

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

@@ -33,7 +33,7 @@ export const filterStateInitializer = (state, props, apiRef) => {
 
 export const useGridFilter = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -74,7 +74,23 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  const upsertFilterItems = React.useCallback(items => {
+    const filterModel = gridFilterModelSelector(apiRef);
+    const existingItems = [...filterModel.items];
+    items.forEach(item => {
+      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+
+      if (itemIndex === -1) {
+        existingItems.push(item);
+      } else {
+        existingItems[itemIndex] = item;
+      }
+    });
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -86,7 +102,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -129,7 +145,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -142,12 +158,12 @@ export const useGridFilter = (apiRef, props) => {
       quickFilterValues: [...values]
     }));
   }, [apiRef]);
-  const setFilterModel = React.useCallback(model => {
+  const setFilterModel = React.useCallback((model, reason) => {
     const currentModel = gridFilterModelSelector(apiRef);
 
     if (currentModel !== model) {
       logger.debug('Setting filter model');
-      apiRef.current.setState(mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef), reason);
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
@@ -160,6 +176,7 @@ export const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -191,7 +208,7 @@ export const useGridFilter = (apiRef, props) => {
       return params;
     }
 
-    apiRef.current.setState(mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef), 'restoreState');
     return _extends({}, params, {
       callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });

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

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

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

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

package/modern/hooks/features/rows/useGridRows.js

@@ -315,10 +315,23 @@ export const useGridRows = (apiRef, props) => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
-    } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    }
+
+    const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            loading: props.loading
+          })
+        }));
+        apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates = props.loading;
+        apiRef.current.forceUpdate();
+      }
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }