@mui/x-data-grid 5.11.1 → 5.12.2

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

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterForm = GridFilterForm;
+exports.GridFilterForm = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -43,6 +45,8 @@ var _gridClasses = require("../../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -131,8 +135,7 @@ const getLinkOperatorLocaleKey = linkOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 
 const collator = new Intl.Collator();
-
-function GridFilterForm(props) {
+const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
   var _rootProps$components, _rootProps$components2, _baseSelectProps$nati, _rootProps$components3, _rootProps$components4, _rootProps$components5, _currentColumn$filter2;
 
   const {
@@ -152,7 +155,8 @@ function GridFilterForm(props) {
     operatorInputProps = {},
     columnInputProps = {},
     valueInputProps = {}
-  } = props;
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
   const columnSelectId = (0, _utils.unstable_useId)();
@@ -252,8 +256,10 @@ function GridFilterForm(props) {
       }
     }
   }), [currentOperator]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, {
-    className: classes.root,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root
+  }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
       variant: "standard",
       as: rootProps.components.BaseFormControl
@@ -348,35 +354,111 @@ function GridFilterForm(props) {
         focusElementRef: valueRef
       }, currentOperator.InputComponentProps)) : null
     }))]
-  });
-}
-
+  }));
+});
+exports.GridFilterForm = GridFilterForm;
 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.default.func.isRequired,
+
+  /**
+   * Callback called when the logic operator is changed.
+   * @param {GridLinkOperator} operator The new logic operator.
+   */
   applyMultiFilterOperatorChanges: _propTypes.default.func.isRequired,
+
+  /**
+   * Props passed to the column input component.
+   * @default {}
+   */
   columnInputProps: _propTypes.default.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.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Callback called when the delete button is clicked.
+   * @param {GridFilterItem} item The deleted [[GridFilterItem]].
+   */
   deleteFilter: _propTypes.default.func.isRequired,
+
+  /**
+   * Props passed to the delete icon.
+   * @default {}
+   */
   deleteIconProps: _propTypes.default.any,
+
+  /**
+   * If `true`, disables the logic operator field but still renders it.
+   */
   disableMultiFilterOperator: _propTypes.default.bool,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the el
+   */
   focusElementRef: _propTypes.default
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.func, _propTypes.default.object]),
+
+  /**
+   * If `true`, the logic operator field is rendered.
+   * The field will be invisible if `showMultiFilterOperators` is also `true`.
+   */
   hasMultipleFilters: _propTypes.default.bool.isRequired,
+
+  /**
+   * The [[GridFilterItem]] representing this form.
+   */
   item: _propTypes.default.shape({
     columnField: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     operatorValue: _propTypes.default.string,
     value: _propTypes.default.any
   }).isRequired,
+
+  /**
+   * Props passed to the logic operator input component.
+   * @default {}
+   */
   linkOperatorInputProps: _propTypes.default.any,
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The current logic operator applied.
+   */
   multiFilterOperator: _propTypes.default.oneOf(['and', 'or']),
+
+  /**
+   * Props passed to the operator input component.
+   * @default {}
+   */
   operatorInputProps: _propTypes.default.any,
+
+  /**
+   * If `true`, the logic operator field is visible.
+   */
   showMultiFilterOperators: _propTypes.default.bool,
+
+  /**
+   * Props passed to the value input component.
+   * @default {}
+   */
   valueInputProps: _propTypes.default.any
 } : void 0;

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

@@ -106,7 +106,6 @@ function GridFilterInputMultipleSingleSelect(props) {
   }, [applyValue, item]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     multiple: true,
-    freeSolo: false,
     limitTags: 1,
     options: resolvedValueOptions // TODO: avoid `any`?
     ,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterPanel = GridFilterPanel;
+exports.GridFilterPanel = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -39,13 +39,13 @@ var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsS
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["linkOperators", "columnsSort", "filterFormProps"];
+const _excluded = ["linkOperators", "columnsSort", "filterFormProps", "children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function GridFilterPanel(props) {
+const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   var _rootProps$components;
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -99,9 +99,7 @@ function GridFilterPanel(props) {
       return;
     }
 
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items: [...items, defaultItem]
-    }));
+    apiRef.current.upsertFilterItems([...items, defaultItem]);
   };
 
   const deleteFilter = React.useCallback(item => {
@@ -122,7 +120,9 @@ function GridFilterPanel(props) {
       lastFilterRef.current.focus();
     }
   }, [items.length]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
+    ref: ref
+  }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
       children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
         item: item,
@@ -140,21 +140,29 @@ function GridFilterPanel(props) {
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelFooter.GridPanelFooter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {})
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))
     })]
   }));
-}
-
+});
+exports.GridFilterPanel = GridFilterPanel;
 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.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Props passed to each filter form.
+   */
   filterFormProps: _propTypes.default.shape({
     columnInputProps: _propTypes.default.any,
     columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
@@ -163,6 +171,15 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     operatorInputProps: _propTypes.default.any,
     valueInputProps: _propTypes.default.any
   }),
+
+  /**
+   * Sets the available logic operators.
+   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   */
   linkOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -63,7 +63,6 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -123,7 +123,6 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -75,7 +75,6 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -136,7 +136,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
         badgeContent: activeFilters.length,

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
 var _styles = require("@mui/material/styles");
 
 var _utils = require("@mui/material/utils");
@@ -25,9 +27,15 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+
+var _filter = require("../../hooks/features/filter");
+
+var _utils2 = require("../../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["quickFilterParser", "debounceMs"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,27 +50,54 @@ const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
 }) => ({
   width: 'auto',
   paddingBottom: theme.spacing(0.5),
-  '& .MuiSvgIcon-root': {
-    marginRight: theme.spacing(0.5)
+  '& input': {
+    marginLeft: theme.spacing(0.5)
   },
   '& .MuiInput-underline:before': {
     borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  [`& input[type=search]::-ms-clear,
+& input[type=search]::-ms-reveal`]: {
+    /* clears the 'X' icon from IE */
+    display: 'none',
+    width: 0,
+    height: 0
+  },
+  [`& input[type="search"]::-webkit-search-decoration,
+  & input[type="search"]::-webkit-search-cancel-button,
+  & input[type="search"]::-webkit-search-results-button,
+  & input[type="search"]::-webkit-search-results-decoration`]: {
+    /* clears the 'X' icon from Chrome */
+    display: 'none'
   }
 }));
 
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 
+const defaultSearchValueFormatter = values => values.join(' ');
+
 function GridToolbarQuickFilter(props) {
   var _rootProps$components;
 
   const {
     quickFilterParser = defaultSearchValueParser,
+    quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = 500
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const [searchValue, setSearchValue] = React.useState('');
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
+  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  React.useEffect(() => {
+    if (!(0, _utils2.isDeepEqual)(prevQuickFilterValues, quickFilterValues)) {
+      // The model of quick filter value has been updated
+      setPrevQuickFilterValues(quickFilterValues); // Update the input value if needed to match the new model
+
+      setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues != null ? quickFilterValues : []));
+    }
+  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
     apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
   }, [apiRef, quickFilterParser]);
@@ -72,6 +107,10 @@ function GridToolbarQuickFilter(props) {
     setSearchValue(newSearchValue);
     debouncedUpdateSearchValue(newSearchValue);
   }, [debouncedUpdateSearchValue]);
+  const handleSearchReset = React.useCallback(() => {
+    setSearchValue('');
+    updateSearchValue('');
+  }, [updateSearchValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
     as: rootProps.components.BaseTextField,
     variant: "standard",
@@ -83,6 +122,17 @@ function GridToolbarQuickFilter(props) {
     InputProps: {
       startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterIcon, {
         fontSize: "small"
+      }),
+      endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+        size: "small",
+        sx: {
+          visibility: searchValue ? 'visible' : 'hidden'
+        },
+        onClick: handleSearchReset,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.QuickFilterClearIcon, {
+          fontSize: "small"
+        })
       })
     }
   }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
@@ -100,6 +150,13 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    */
   debounceMs: _propTypes.default.number,
 
+  /**
+   * Function responsible for formatting values of quick filter in a string when the model is modified
+   * @param {any[]} values The new values passed to the quick filter model
+   * @returns {string} The string to display in the text field
+   */
+  quickFilterFormatter: _propTypes.default.func,
+
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user

package/node/constants/defaultGridSlotsComponents.js

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

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;

package/node/constants/localeTextConstants.js

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

package/node/hooks/core/useGridStateInitialization.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const useGridStateInitialization = (apiRef, props) => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
-  const updateControlState = React.useCallback(controlStateItem => {
+  const registerControlState = React.useCallback(controlStateItem => {
     const {
       stateId
     } = controlStateItem,
@@ -37,7 +37,7 @@ const useGridStateInitialization = (apiRef, props) => {
       stateId
     });
   }, []);
-  const setState = React.useCallback(state => {
+  const setState = React.useCallback((state, reason) => {
     let newState;
 
     if ((0, _utils2.isFunction)(state)) {
@@ -98,23 +98,36 @@ const useGridStateInitialization = (apiRef, props) => {
 
       if (controlState.propOnChange && hasPropChanged) {
         const details = props.signature === _useGridApiEventHandler.GridSignature.DataGridPro ? {
-          api: apiRef.current
-        } : {};
+          api: apiRef.current,
+          reason
+        } : {
+          reason
+        };
         controlState.propOnChange(model, details);
       }
 
       if (!ignoreSetState) {
-        apiRef.current.publishEvent(controlState.changeEvent, model);
+        apiRef.current.publishEvent(controlState.changeEvent, model, {
+          reason
+        });
       }
     }
 
     return !ignoreSetState;
   }, [apiRef, props.signature]);
+  const updateControlState = React.useCallback((key, state, reason) => {
+    return apiRef.current.setState(previousState => {
+      return (0, _extends2.default)({}, previousState, {
+        [key]: state(previousState[key])
+      });
+    }, reason);
+  }, [apiRef]);
   const forceUpdate = React.useCallback(() => rawForceUpdate(() => apiRef.current.state), [apiRef]);
   const stateApi = {
     setState,
     forceUpdate,
-    unstable_updateControlState: updateControlState
+    unstable_updateControlState: updateControlState,
+    unstable_registerControlState: registerControlState
   };
   (0, _utils.useGridApiMethod)(apiRef, stateApi, 'GridStateApi');
 };

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

@@ -15,6 +15,8 @@ var _utils = require("../../utils");
 
 var _columnMenuSelector = require("./columnMenuSelector");
 
+var _gridClasses = require("../../../constants/gridClasses");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -97,7 +99,28 @@ const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
+  const handleColumnHeaderFocus = React.useCallback((params, event) => {
+    // Check if the column menu button received focus
+    if (!event.target.classList.contains(_gridClasses.gridClasses.menuIconButton)) {
+      return;
+    } // Check if there's an element which lost focus
+
+
+    if (!event.relatedTarget) {
+      return;
+    } // `true` if the focus was on the column menu itself, not on any item
+
+
+    const columnMenuLostFocus = event.relatedTarget.classList.contains(_gridClasses.gridClasses.menuList); // `true` if the focus was on an item from the column menu
+
+    const columnMenuItemLostFocus = event.relatedTarget.getAttribute('role') === 'menuitem';
+
+    if (columnMenuLostFocus || columnMenuItemLostFocus) {
+      apiRef.current.setColumnHeaderFocus(params.field);
+    }
+  }, [apiRef]);
   (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStart', hideColumnMenu);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
   (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
   (0, _utils.useGridApiEventHandler)(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

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

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