@mui/x-data-grid 5.6.1 → 5.9.0

package/legacy/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "children", "colIndex", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+var _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -51,6 +51,7 @@ function GridCell(props) {
   var align = props.align,
       children = props.children,
       colIndex = props.colIndex,
+      colDef = props.colDef,
       cellMode = props.cellMode,
       field = props.field,
       formattedValue = props.formattedValue,
@@ -65,6 +66,7 @@ function GridCell(props) {
       showRightBorder = props.showRightBorder,
       extendRowFullWidth = props.extendRowFullWidth,
       row = props.row,
+      colSpan = props.colSpan,
       onClick = props.onClick,
       onDoubleClick = props.onDoubleClick,
       onMouseDown = props.onMouseDown,
@@ -76,6 +78,7 @@ function GridCell(props) {
 
   var valueToRender = formattedValue == null ? value : formattedValue;
   var cellRef = React.useRef(null);
+  var focusElementRef = React.useRef(null);
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var ownerState = {
@@ -130,7 +133,7 @@ function GridCell(props) {
 
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      var elementToFocus = focusableElement || cellRef.current;
+      var elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
 
       if (doesSupportPreventScroll()) {
         elementToFocus.focus({
@@ -164,6 +167,26 @@ function GridCell(props) {
     };
   }
 
+  var column = apiRef.current.getColumn(field);
+  var managesOwnFocus = column.type === 'actions';
+
+  var renderChildren = function renderChildren() {
+    if (children == null) {
+      return /*#__PURE__*/_jsx("div", {
+        className: classes.content,
+        children: valueToRender == null ? void 0 : valueToRender.toString()
+      });
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        focusElementRef: focusElementRef
+      });
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/_jsx("div", _extends({
     ref: cellRef,
     className: clsx(className, classes.root),
@@ -171,8 +194,9 @@ function GridCell(props) {
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
     style: style,
-    tabIndex: cellMode === 'view' || !isEditable ? tabIndex : -1,
+    tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish(GridEvents.cellClick, onClick),
     onDoubleClick: publish(GridEvents.cellDoubleClick, onDoubleClick),
     onMouseDown: publish(GridEvents.cellMouseDown, onMouseDown),
@@ -182,10 +206,7 @@ function GridCell(props) {
     onDragOver: publish(GridEvents.cellDragOver, onDragOver)
   }, other, {
     onFocus: handleFocus,
-    children: children != null ? children : /*#__PURE__*/_jsx("div", {
-      className: classes.content,
-      children: valueToRender == null ? void 0 : valueToRender.toString()
-    })
+    children: renderChildren()
   }));
 }
 
@@ -199,8 +220,9 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
   field: PropTypes.string.isRequired,
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
   height: PropTypes.number.isRequired,
   isEditable: PropTypes.bool,
@@ -214,7 +236,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   showRightBorder: PropTypes.bool,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
+  value: PropTypes.any,
   width: PropTypes.number.isRequired
 } : void 0;
 export { GridCell };

package/legacy/components/cell/GridEditBooleanCell.js

@@ -1,7 +1,7 @@
 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 = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -36,6 +36,7 @@ export function GridEditBooleanCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 

package/legacy/components/cell/GridEditDateCell.js

@@ -1,7 +1,7 @@
 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 = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
@@ -34,6 +34,7 @@ export function GridEditDateCell(props) {
       getValue = props.getValue,
       inputProps = props.inputProps,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';

package/legacy/components/cell/GridEditInputCell.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -10,6 +10,7 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -39,6 +40,10 @@ var GridEditInputCellRoot = styled(InputBase, {
 });
 
 function GridEditInputCell(props) {
+  var _rootProps$experiment;
+
+  var rootProps = useGridRootProps();
+
   var id = props.id,
       value = props.value,
       formattedValue = props.formattedValue,
@@ -54,7 +59,8 @@ function GridEditInputCell(props) {
       getValue = props.getValue,
       isValidating = props.isValidating,
       _props$debounceMs = props.debounceMs,
-      debounceMs = _props$debounceMs === void 0 ? SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      debounceMs = _props$debounceMs === void 0 ? (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi ? 200 : SUBMIT_FILTER_STROKE_TIME : _props$debounceMs,
+      isProcessingProps = props.isProcessingProps,
       other = _objectWithoutProperties(props, _excluded);
 
   var inputRef = React.useRef();
@@ -64,7 +70,6 @@ function GridEditInputCell(props) {
       valueState = _React$useState2[0],
       setValueState = _React$useState2[1];
 
-  var rootProps = useGridRootProps();
   var ownerState = {
     classes: rootProps.classes
   };
@@ -93,7 +98,8 @@ function GridEditInputCell(props) {
     fullWidth: true,
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState != null ? valueState : '',
-    onChange: handleChange
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
   }, other));
 }
 
@@ -108,8 +114,63 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
   debounceMs: PropTypes.number,
-  isValidating: PropTypes.bool
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditInputCell };
 export var renderEditInputCell = function renderEditInputCell(params) {

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -3,7 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,20 +13,22 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { GridEvents } from '../../models/events/gridEvents';
+import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-var renderSingleSelectOptions = function renderSingleSelectOptions(option) {
-  return _typeof(option) === 'object' ? /*#__PURE__*/_jsx(MenuItem, {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/_jsx(MenuItem, {
-    value: option,
-    children: option
-  }, option);
+var renderSingleSelectOptions = function renderSingleSelectOptions(option, OptionComponent) {
+  var isOptionTypeObject = _typeof(option) === 'object';
+  var key = isOptionTypeObject ? option.value : option;
+  var value = isOptionTypeObject ? option.value : option;
+  var content = isOptionTypeObject ? option.label : option;
+  return /*#__PURE__*/_jsx(OptionComponent, {
+    value: value,
+    children: content
+  }, key);
 };
 
 function GridEditSingleSelectCell(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
   var id = props.id,
       value = props.value,
@@ -43,6 +45,7 @@ function GridEditSingleSelectCell(props) {
       getValue = props.getValue,
       hasFocus = props.hasFocus,
       isValidating = props.isValidating,
+      isProcessingProps = props.isProcessingProps,
       error = props.error,
       other = _objectWithoutProperties(props, _excluded);
 
@@ -55,6 +58,8 @@ function GridEditSingleSelectCell(props) {
       open = _React$useState2[0],
       setOpen = _React$useState2[1];
 
+  var baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  var isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   var valueOptionsFormatted;
 
   if (typeof colDef.valueOptions === 'function') {
@@ -87,38 +92,50 @@ function GridEditSingleSelectCell(props) {
 
   var handleChange = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var target, isValid, canCommit, params;
+      var _rootProps$experiment;
+
+      var target, formattedTargetValue, isValid, canCommit, params;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               setOpen(false);
-              target = event.target;
-              _context.next = 4;
+              target = event.target; // NativeSelect casts the value to a string.
+
+              formattedTargetValue = getValueFromValueOptions(target.value, valueOptionsFormatted);
+              _context.next = 5;
               return api.setEditCellValue({
                 id: id,
                 field: field,
-                value: target.value
+                value: formattedTargetValue
               }, event);
 
-            case 4:
+            case 5:
               isValid = _context.sent;
 
+              if (!((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi)) {
+                _context.next = 8;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 8:
               if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
-                _context.next = 7;
+                _context.next = 10;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 7:
-              _context.next = 9;
+            case 10:
+              _context.next = 12;
               return Promise.resolve(api.commitCellChange({
                 id: id,
                 field: field
               }, event));
 
-            case 9:
+            case 12:
               canCommit = _context.sent;
 
               if (canCommit) {
@@ -131,7 +148,7 @@ function GridEditSingleSelectCell(props) {
                 }
               }
 
-            case 11:
+            case 14:
             case "end":
               return _context.stop();
           }
@@ -151,7 +168,17 @@ function GridEditSingleSelectCell(props) {
     }
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
-      api.setCellMode(id, field, 'view');
+      var _rootProps$experiment2;
+
+      if ((_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+        api.stopCellEditMode({
+          id: id,
+          field: field,
+          ignoreModifications: true
+        });
+      } else {
+        api.setCellMode(id, field, 'view');
+      }
     }
   };
 
@@ -175,9 +202,12 @@ function GridEditSingleSelectCell(props) {
       onClose: handleClose
     },
     error: error,
+    native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect, {
-    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+    children: valueOptionsFormatted.map(function (valueOptions) {
+      return renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : MenuItem);
+    })
   }));
 }
 
@@ -192,7 +222,62 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
   api: PropTypes.any.isRequired,
-  isValidating: PropTypes.bool
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired
 } : void 0;
 export { GridEditSingleSelectCell };
 export var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {

package/legacy/components/columnHeaders/{ColumnHeaderFilterIcon.js → GridColumnHeaderFilterIconButton.js}

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Badge from '@mui/material/Badge';
@@ -20,10 +21,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function ColumnHeaderFilterIcon(props) {
+function GridColumnHeaderFilterIconButton(props) {
   var _rootProps$components;
 
-  var counter = props.counter;
+  var counter = props.counter,
+      field = props.field,
+      onClick = props.onClick;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
 
@@ -45,7 +48,11 @@ export function ColumnHeaderFilterIcon(props) {
     } else {
       apiRef.current.showFilterPanel();
     }
-  }, [apiRef]);
+
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick]);
 
   if (!counter) {
     return null;
@@ -75,4 +82,15 @@ export function ColumnHeaderFilterIcon(props) {
       }), counter === 1 && iconButton]
     })
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: PropTypes.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -11,7 +11,6 @@ import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -39,7 +38,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _column$headerName, _rootProps$components;
+  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
 
   var column = props.column,
       columnMenuOpen = props.columnMenuOpen,
@@ -148,9 +147,10 @@ function GridColumnHeaderItem(props) {
   var sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   var columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(ColumnHeaderFilterIcon, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
+      field: column.field,
       counter: filterItemsCounter
-    }), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -162,14 +162,11 @@ function GridColumnHeaderItem(props) {
 
     if (hasFocus && !columnMenuState.open) {
       var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-
-      if (focusableElement) {
-        focusableElement.focus();
-      } else {
-        headerCellRef.current.focus();
-      }
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   var headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column
@@ -216,7 +213,7 @@ function GridColumnHeaderItem(props) {
       open: columnMenuOpen,
       target: iconButtonRef.current,
       ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
       onExited: handleExited
     })]
   }));

package/legacy/components/columnHeaders/GridColumnHeaderTitle.js

@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   columnWidth: PropTypes.number.isRequired,
-  description: PropTypes.string,
+  description: PropTypes.node,
   label: PropTypes.string.isRequired
 } : void 0;
 export { GridColumnHeaderTitle };

package/legacy/components/columnHeaders/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["innerRef", "className"];
+var _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -34,12 +34,13 @@ var GridColumnHeadersRoot = styled('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: "1px solid ".concat(borderColor)
+    borderBottom: "1px solid ".concat(borderColor),
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
   };
 });
 export var GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
-  var innerRef = props.innerRef,
-      className = props.className,
+  var className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var rootProps = useGridRootProps();

package/legacy/components/columnHeaders/index.js

@@ -1,4 +1,5 @@
 export * from './GridColumnHeaderItem';
 export * from './GridColumnHeaderSeparator';
 export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
 export * from './GridColumnHeaderTitle';