@mui/x-data-grid 5.12.0 → 5.12.3

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);
@@ -68,7 +68,7 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
+    overflowX: 'hidden'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',
@@ -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/GridColumnsPanel.js

@@ -91,7 +91,9 @@ export function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(function (col) {
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(function (col) {
+        return col.hideable !== false;
+      }).map(function (col) {
         return [col.field, false];
       })));
     } // TODO v6: Remove
@@ -149,7 +151,6 @@ export function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -168,15 +169,13 @@ export function GridColumnsPanel(props) {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(false);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(true);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

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

@@ -29,9 +29,17 @@ function GridFilterInputMultipleSingleSelect(props) {
   var id = useId();
   var resolvedColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   var resolvedValueOptions = React.useMemo(function () {
-    return typeof (resolvedColumn == null ? void 0 : resolvedColumn.valueOptions) === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn == null ? void 0 : resolvedColumn.valueOptions;
+    if (!(resolvedColumn != null && resolvedColumn.valueOptions)) {
+      return [];
+    }
+
+    if (typeof resolvedColumn.valueOptions === 'function') {
+      return resolvedColumn.valueOptions({
+        field: resolvedColumn.field
+      });
+    }
+
+    return resolvedColumn.valueOptions;
   }, [resolvedColumn]);
   var resolvedFormattedValueOptions = React.useMemo(function () {
     return resolvedValueOptions == null ? void 0 : resolvedValueOptions.map(getValueFromOption);
@@ -94,8 +102,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/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) {
@@ -118,8 +116,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     }), !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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))

package/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -39,7 +39,6 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
   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/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -105,7 +105,6 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
   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/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -58,7 +58,6 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
   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/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -110,7 +110,6 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
     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/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -1,14 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["quickFilterParser", "debounceMs"];
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _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";
 var GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
@@ -17,17 +22,27 @@ var GridToolbarQuickFilterRoot = styled(TextField, {
     return styles.toolbarQuickFilter;
   }
 })(function (_ref) {
+  var _ref2;
+
   var theme = _ref.theme;
-  return {
+  return _ref2 = {
     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 ".concat(theme.palette.divider)
     }
-  };
+  }, _defineProperty(_ref2, "& input[type=search]::-ms-clear,\n& input[type=search]::-ms-reveal", {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  }), _defineProperty(_ref2, "& input[type=\"search\"]::-webkit-search-decoration,\n  & input[type=\"search\"]::-webkit-search-cancel-button,\n  & input[type=\"search\"]::-webkit-search-results-button,\n  & input[type=\"search\"]::-webkit-search-results-decoration", {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
+  }), _ref2;
 });
 
 var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
@@ -36,23 +51,47 @@ var defaultSearchValueParser = function defaultSearchValueParser(searchText) {
   });
 };
 
+var defaultSearchValueFormatter = function defaultSearchValueFormatter(values) {
+  return values.join(' ');
+};
+
 function GridToolbarQuickFilter(props) {
   var _rootProps$components;
 
   var _props$quickFilterPar = props.quickFilterParser,
       quickFilterParser = _props$quickFilterPar === void 0 ? defaultSearchValueParser : _props$quickFilterPar,
+      _props$quickFilterFor = props.quickFilterFormatter,
+      quickFilterFormatter = _props$quickFilterFor === void 0 ? defaultSearchValueFormatter : _props$quickFilterFor,
       _props$debounceMs = props.debounceMs,
       debounceMs = _props$debounceMs === void 0 ? 500 : _props$debounceMs,
       other = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
+  var quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
 
-  var _React$useState = React.useState(''),
+  var _React$useState = React.useState(function () {
+    return quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
+  }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       searchValue = _React$useState2[0],
       setSearchValue = _React$useState2[1];
 
+  var _React$useState3 = React.useState(quickFilterValues),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      prevQuickFilterValues = _React$useState4[0],
+      setPrevQuickFilterValues = _React$useState4[1];
+
+  React.useEffect(function () {
+    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(function (prevSearchValue) {
+        return isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []);
+      });
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   var updateSearchValue = React.useCallback(function (newSearchValue) {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -64,6 +103,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  var handleSearchReset = React.useCallback(function () {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -75,6 +118,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));
@@ -92,6 +146,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/legacy/constants/defaultGridSlotsComponents.js

@@ -35,7 +35,8 @@ var 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/legacy/constants/localeTextConstants.js

@@ -117,6 +117,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
     return "Stop grouping by ".concat(name);
   },
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/legacy/hooks/core/useGridStateInitialization.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -13,7 +14,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rawForceUpdate = _React$useState2[1];
 
-  var updateControlState = React.useCallback(function (controlStateItem) {
+  var registerControlState = React.useCallback(function (controlStateItem) {
     var stateId = controlStateItem.stateId,
         others = _objectWithoutProperties(controlStateItem, _excluded);
 
@@ -21,7 +22,7 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
       stateId: stateId
     });
   }, []);
-  var setState = React.useCallback(function (state) {
+  var setState = React.useCallback(function (state, reason) {
     var newState;
 
     if (isFunction(state)) {
@@ -83,18 +84,28 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
 
       if (controlState.propOnChange && hasPropChanged) {
         var details = props.signature === GridSignature.DataGridPro ? {
-          api: apiRef.current
-        } : {};
+          api: apiRef.current,
+          reason: reason
+        } : {
+          reason: reason
+        };
         controlState.propOnChange(model, details);
       }
 
       if (!ignoreSetState) {
-        apiRef.current.publishEvent(controlState.changeEvent, model);
+        apiRef.current.publishEvent(controlState.changeEvent, model, {
+          reason: reason
+        });
       }
     }
 
     return !ignoreSetState;
   }, [apiRef, props.signature]);
+  var updateControlState = React.useCallback(function (key, state, reason) {
+    return apiRef.current.setState(function (previousState) {
+      return _extends({}, previousState, _defineProperty({}, key, state(previousState[key])));
+    }, reason);
+  }, [apiRef]);
   var forceUpdate = React.useCallback(function () {
     return rawForceUpdate(function () {
       return apiRef.current.state;
@@ -103,7 +114,8 @@ export var useGridStateInitialization = function useGridStateInitialization(apiR
   var stateApi = {
     setState: setState,
     forceUpdate: forceUpdate,
-    unstable_updateControlState: updateControlState
+    unstable_updateControlState: updateControlState,
+    unstable_registerControlState: registerControlState
   };
   useGridApiMethod(apiRef, stateApi, 'GridStateApi');
 };

package/legacy/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 var columnMenuStateInitializer = function columnMenuStateInitializer(state) {
   return _extends({}, state, {
     columnMenu: {
@@ -79,7 +80,28 @@ export var useGridColumnMenu = function useGridColumnMenu(apiRef) {
    * EVENTS
    */
 
+  var handleColumnHeaderFocus = React.useCallback(function (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
+
+
+    var columnMenuLostFocus = event.relatedTarget.classList.contains(gridClasses.menuList); // `true` if the focus was on an item from the column menu
+
+    var 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/legacy/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/legacy/hooks/features/columns/useGridColumns.js

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

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/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/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

@@ -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 var cleanFilterItem = function cleanFilterItem(item, apiRef) {
   }
 
   if (cleanItem.operatorValue == null) {
-    // we select a default operator
-    var 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
+    var column = gridColumnLookupSelector(apiRef)[cleanItem.columnField];
     cleanItem.operatorValue = column && column.filterOperators[0].value;
   }
 
@@ -71,11 +72,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)
     });
   };
 };
@@ -214,15 +213,17 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
   });
   return function (rowId, shouldApplyFilter) {
     var usedCellParams = {};
+    var columnsFieldsToFilter = [];
     Object.keys(appliersPerColumnField).forEach(function (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(function (value, index) {
-        return Object.keys(appliersPerColumnField).some(function (field) {
+        return columnsFieldsToFilter.some(function (field) {
           var _appliersPerColumnFie, _appliersPerColumnFie2;
 
           if (appliersPerColumnField[field][index] == null) {
@@ -236,7 +237,7 @@ export var buildAggregatedQuickFilterApplier = function buildAggregatedQuickFilt
 
 
     return sanitizedQuickFilterValues.some(function (value, index) {
-      return Object.keys(appliersPerColumnField).some(function (field) {
+      return columnsFieldsToFilter.some(function (field) {
         var _appliersPerColumnFie3, _appliersPerColumnFie4;
 
         if (appliersPerColumnField[field][index] == null) {