@mui/x-data-grid 5.11.1 → 5.12.2

package/legacy/components/panel/GridPanelWrapper.js

@@ -37,7 +37,7 @@ var isEnabled = function isEnabled() {
   return true;
 };
 
-function GridPanelWrapper(props) {
+var GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -51,10 +51,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
+      ref: ref,
       tabIndex: -1,
       className: clsx(className, classes.root)
     }, other))
   });
-}
-
+});
 export { GridPanelWrapper };

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -116,8 +118,7 @@ var getColumnLabel = function getColumnLabel(col) {
 };
 
 var collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   var item = props.item,
@@ -141,7 +142,10 @@ function GridFilterForm(props) {
       _props$columnInputPro = props.columnInputProps,
       columnInputProps = _props$columnInputPro === void 0 ? {} : _props$columnInputPro,
       _props$valueInputProp = props.valueInputProps,
-      valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp;
+      valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp,
+      children = props.children,
+      other = _objectWithoutProperties(props, _excluded);
+
   var apiRef = useGridApiContext();
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   var columnSelectId = useId();
@@ -253,8 +257,10 @@ function GridFilterForm(props) {
       }
     };
   }, [currentOperator]);
-  return /*#__PURE__*/_jsxs(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -355,36 +361,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Callback called when the operator, column field or value is changed.
+   * @param {GridFilterItem} item The updated [[GridFilterItem]].
+   */
   applyFilterChanges: PropTypes.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: PropTypes.any,
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: PropTypes.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: PropTypes.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: PropTypes.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: PropTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: PropTypes.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: PropTypes.shape({
     columnField: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operatorValue: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: PropTypes.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: PropTypes.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: PropTypes.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: PropTypes.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: PropTypes.any
 } : void 0;
 export { GridFilterForm };

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

@@ -93,7 +93,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

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

@@ -1,7 +1,7 @@
-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"];
+var _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridLinkOperator } from '../../../models/gridFilterItem';
@@ -17,8 +17,7 @@ import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilt
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-function GridFilterPanel(props) {
+var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
   var apiRef = useGridApiContext();
@@ -31,6 +30,7 @@ function GridFilterPanel(props) {
       linkOperators = _props$linkOperators === void 0 ? [GridLinkOperator.And, GridLinkOperator.Or] : _props$linkOperators,
       columnsSort = props.columnsSort,
       filterFormProps = props.filterFormProps,
+      children = props.children,
       other = _objectWithoutProperties(props, _excluded);
 
   var applyFilter = React.useCallback(function (item) {
@@ -73,9 +73,7 @@ function GridFilterPanel(props) {
       return;
     }
 
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: [].concat(_toConsumableArray(items), [defaultItem])
-    }));
+    apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [defaultItem]));
   };
 
   var deleteFilter = React.useCallback(function (item) {
@@ -96,7 +94,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/_jsx(GridPanelContent, {
       children: items.map(function (item, index) {
         return /*#__PURE__*/_jsx(GridFilterForm, _extends({
@@ -116,21 +116,28 @@ function GridFilterPanel(props) {
     }), !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')
       }))
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
   columnsSort: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: PropTypes.shape({
     columnInputProps: PropTypes.any,
     columnsSort: PropTypes.oneOf(['asc', 'desc']),
@@ -139,7 +146,16 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: PropTypes.any,
     valueInputProps: PropTypes.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { GridFilterPanel };

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/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

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';