@mui/x-data-grid 5.12.0 → 5.12.3

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
 var _styles = require("@mui/material/styles");
 
 var _utils = require("@mui/material/utils");
@@ -25,9 +27,15 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+
+var _filter = require("../../hooks/features/filter");
+
+var _utils2 = require("../../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["quickFilterParser", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 
 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); }
 
@@ -42,27 +50,54 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
 }) => ({
   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) {
   var _rootProps$components;
 
   const {
     quickFilterParser = defaultSearchValueParser,
+    quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = 500
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const [searchValue, setSearchValue] = React.useState('');
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  React.useEffect(() => {
+    if (!(0, _utils2.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 => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -72,6 +107,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -83,6 +122,17 @@ function GridToolbarQuickFilter(props) {
     InputProps: {
       startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterClearIcon, {
+          fontSize: "small"
+        })
       })
     }
   }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
@@ -100,6 +150,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   debounceMs: _propTypes.default.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.default.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/node/constants/defaultGridSlotsComponents.js

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

package/node/constants/localeTextConstants.js

@@ -111,6 +111,7 @@ 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/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/useGridColumnSpanning.js

@@ -1,26 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridColumnSpanning = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
+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; }
+
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const lookup = _react.default.useRef({});
-
-  const setCellColSpanInfo = _react.default.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
     const sizes = lookup.current;
 
     if (!sizes[rowId]) {
@@ -29,15 +30,13 @@ const useGridColumnSpanning = apiRef => {
 
     sizes[rowId][columnIndex] = cellColSpanInfo;
   }, []);
-
-  const getCellColSpanInfo = _react.default.useCallback((rowId, columnIndex) => {
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
     var _lookup$current$rowId;
 
     return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
   }, []); // Calculate `colSpan` for the cell.
 
-
-  const calculateCellColSpan = _react.default.useCallback(params => {
+  const calculateCellColSpan = React.useCallback(params => {
     const {
       columnIndex,
       rowId,
@@ -91,8 +90,7 @@ const useGridColumnSpanning = apiRef => {
     };
   }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
 
-
-  const calculateColSpan = _react.default.useCallback(({
+  const calculateColSpan = React.useCallback(({
     rowId,
     minFirstColumn,
     maxLastColumn
@@ -110,18 +108,15 @@ const useGridColumnSpanning = apiRef => {
       }
     }
   }, [calculateCellColSpan]);
-
   const columnSpanningApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo,
     unstable_calculateColSpan: calculateColSpan
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
-
-  const handleColumnReorderChange = _react.default.useCallback(() => {
+  const handleColumnReorderChange = React.useCallback(() => {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };
 

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

@@ -69,7 +69,7 @@ function useGridColumns(apiRef, props) {
   const columnTypes = React.useMemo(() => (0, _gridColumnsUtils.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/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/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/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

@@ -30,8 +30,9 @@ 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 = (0, _columns.gridColumnLookupSelector)(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -82,10 +83,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.
@@ -210,14 +209,16 @@ 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 === _models.GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => Object.keys(appliersPerColumnField).some(field => {
+      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
         var _appliersPerColumnFie, _appliersPerColumnFie2;
 
         if (appliersPerColumnField[field][index] == null) {
@@ -229,7 +230,7 @@ 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 => {
       var _appliersPerColumnFie3, _appliersPerColumnFie4;
 
       if (appliersPerColumnField[field][index] == null) {

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');
@@ -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/useGridRows.js

@@ -349,10 +349,23 @@ 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 => (0, _extends2.default)({}, state, {
+          rows: (0, _extends2.default)({}, 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;
     }