@mui/x-data-grid 5.12.0 → 5.12.1

package/CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.1
+
+_Jun 9, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- 🔎 Control quick filter input value via model prop (#5013) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.1` / `@mui/x-data-grid-pro@v5.12.1` / `@mui/x-data-grid-premium@v5.12.1`
+
+#### Changes
+
+- [DataGrid] Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- [DataGrid] Restore focus after dismissing the column menu (#5027) @m4theushw
+- [DataGrid] Update quick filter input when model is modified (#5013) @alexfauquette
+- [DataGrid] Fix implicit dependency on react-dom (#5121) @oliviertassinari
+- [DataGrid] Support `getRowId` in row reordering (#5093) @flaviendelangle
+- [DataGridPro] Fix column resizing in RTL mode (#4989) @cherniavskii
+- [DataGridPro] Fix column resizing on touchscreen (#5056) @cherniavskii
+- [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
+- [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
+
+### `@mui/x-date-pickers@5.0.0-alpha.6` / `@mui/x-date-pickers-pro@5.0.0-alpha.6`
+
+#### Changes
+
+- [pickers] Fix usage of `maxDate` / `minDate` / `disableFuture` and `disablePast` (#5081) @flaviendelangle
+- [pickers] Infer mask from `inputFormat` (#5060) @alexfauquette
+- [pickers] Manage input value without using the focus (#4486) @alexfauquette
+- [pickers] Use new localization for doc examples (#5097) @flaviendelangle
+- [pickers] Fix `shouldDisableDate` in range pickers (#5123) @flaviendelangle
+- [l10n] Add Brazilian Portuguese (pt-BR) locale (#5100) @jardelnovaes
+- [l10n] Use `localText` for remaining texts (#4986) @alexfauquette
+
+### Docs
+
+- [docs] Implement the focus management on data grid demo links (#5070) @alexfauquette
+- [docs] Fix `301` link to render cell (#5106) @oliviertassinari
+- [docs] Fix broken anchor link @oliviertassinari
+- [docs] Improve movie dataset (#5142) @flaviendelangle
+- [docs] Move all localization documentation in a unique page (#5072) @alexfauquette
+- [docs] Section for overwriting core components i18n keys (#4998) @DanailH
+- [docs] Small grammar and format fixes for Dynamic Row Height section (#5098) @samuelsycamore
+
+### Core
+
+- [core] Allows to run tests with different date adapters (#5055) @alexfauquette
+- [core] Prettify the l10n issue (#4928) @alexfauquette
+- [core] Set correct `apiRef` type in row reorder pre processors #5125 @DanailH
+- [core] Stop using `GridEvents` in technical doc (#5157) @flaviendelangle
+- [core] Upgrade monorepo (#5101) @oliviertassinari
+- [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
+- [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
+
 ## v5.12.0
 
 _May 31, 2022_
@@ -21,6 +78,8 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 ### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
 
+#### Changes
+
 - [DataGrid] Support dynamic row height (#4859) @m4theushw
 - [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
 - [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris

package/components/containers/GridRootStyles.js

@@ -221,6 +221,9 @@ export const GridRootStyles = styled('div', {
       },
       [`&.${gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
       }
     },
     [`& .${gridClasses.iconSeparator}`]: {

package/components/panel/filterPanel/GridFilterPanel.js

@@ -72,9 +72,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 => {

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextFieldProps } from '@mui/material/TextField';
+import { GridFilterModel } from '../../models/gridFilterModel';
 export declare type GridToolbarQuickFilterProps = TextFieldProps & {
     /**
      * Function responsible for parsing text input in an array of independent values for quick filtering.
@@ -7,6 +8,12 @@ export declare type GridToolbarQuickFilterProps = TextFieldProps & {
      * @returns {any[]} The array of value on which quick filter is applied
      */
     quickFilterParser?: (input: string) => any[];
+    /**
+     * 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?: (values: GridFilterModel['quickFilterValues']) => string;
     /**
      * The debounce time in milliseconds.
      * @default 500

package/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,28 +22,55 @@ 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) {
   var _rootProps$components;
 
   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 != null ? 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 != null ? quickFilterValues : []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -49,6 +80,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",
@@ -60,6 +95,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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
@@ -77,6 +123,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/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/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/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/hooks/features/columns/useGridColumns.js

@@ -42,7 +42,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/hooks/features/editRows/useGridEditing.old.js

@@ -23,7 +23,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/hooks/features/filter/gridFilterSelector.d.ts

@@ -9,6 +9,11 @@ export declare const gridFilterStateSelector: (state: GridStateCommunity) => imp
  * @category Filtering
  */
 export declare const gridFilterModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel>;
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+export declare const gridQuickFilterValuesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, any[] | undefined>;
 /**
  * @category Filtering
  * @ignore - do not document.

package/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/hooks/features/filter/gridFilterUtils.d.ts

@@ -12,7 +12,7 @@ import { GridAggregatedFilterItemApplier } from './gridFilterState';
  */
 export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (state: GridStateCommunity) => GridStateCommunity;
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.

package/hooks/features/filter/gridFilterUtils.js

@@ -64,10 +64,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.

package/hooks/features/filter/useGridFilter.js

@@ -37,7 +37,7 @@ export const useGridFilter = (apiRef, props) => {
   var _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -78,7 +78,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);
@@ -90,7 +106,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -133,7 +149,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -146,12 +162,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]);
@@ -164,6 +180,7 @@ export const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -197,7 +214,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/hooks/features/pagination/useGridPage.js

@@ -39,7 +39,7 @@ 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/hooks/features/pagination/useGridPageSize.js

@@ -21,7 +21,7 @@ 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/hooks/features/selection/useGridSelection.js

@@ -50,7 +50,7 @@ export const useGridSelection = (apiRef, props) => {
     return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
   }, [apiRef, props.selectionModel]);
   const lastRowToggled = React.useRef(null);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'selection',
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,

package/hooks/features/sorting/useGridSorting.js

@@ -30,7 +30,7 @@ export const sortingStateInitializer = (state, props) => {
 
 export const useGridSorting = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'sortModel',
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.12.0
+/** @license MUI v5.12.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/containers/GridRootStyles.js

@@ -10,7 +10,7 @@ export var GridRootStyles = styled('div', {
     _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
 })(function (_ref46) {
-  var _$concat3, _extends2;
+  var _$concat2, _$concat3, _extends2;
 
   var theme = _ref46.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
@@ -100,7 +100,7 @@ export var GridRootStyles = styled('div', {
     left: -12
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideRight']), {
     right: -12
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), _defineProperty({
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), (_$concat2 = {
     cursor: 'col-resize',
     touchAction: 'none',
     '&:hover': {
@@ -110,9 +110,11 @@ export var GridRootStyles = styled('div', {
         color: borderColor
       }
     }
-  }, "&.".concat(gridClasses['columnSeparator--resizing']), {
+  }, _defineProperty(_$concat2, "&.".concat(gridClasses['columnSeparator--resizing']), {
     color: theme.palette.text.primary
-  })), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
+  }), _defineProperty(_$concat2, '& svg', {
+    pointerEvents: 'none'
+  }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
     color: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
     width: 0,

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

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 import * as React from 'react';
@@ -73,9 +73,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
       return;
     }
 
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: [].concat(_toConsumableArray(items), [defaultItem])
-    }));
+    apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [defaultItem]));
   };
 
   var deleteFilter = React.useCallback(function (item) {