@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/components/cell/GridEditDateCell.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 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", "isProcessingProps"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
@@ -18,7 +21,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export function GridEditDateCell(props) {
+function GridEditDateCell(props) {
   var id = props.id,
       valueProp = props.value,
       formattedValue = props.formattedValue,
@@ -35,6 +38,7 @@ export function GridEditDateCell(props) {
       inputProps = props.inputProps,
       isValidating = props.isValidating,
       isProcessingProps = props.isProcessingProps,
+      onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
   var isDateTime = colDef.type === 'dateTime';
@@ -75,48 +79,62 @@ export function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  var handleChange = React.useCallback(function (event) {
-    var newFormattedDate = event.target.value;
-    var newParsedDate;
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var newFormattedDate, newParsedDate, _newFormattedDate$spl, _newFormattedDate$spl2, date, time, _date$split, _date$split2, year, month, day, _time$split, _time$split2, hours, minutes;
 
-    if (newFormattedDate === '') {
-      newParsedDate = null;
-    } else {
-      var _newFormattedDate$spl = newFormattedDate.split('T'),
-          _newFormattedDate$spl2 = _slicedToArray(_newFormattedDate$spl, 2),
-          date = _newFormattedDate$spl2[0],
-          time = _newFormattedDate$spl2[1];
-
-      var _date$split = date.split('-'),
-          _date$split2 = _slicedToArray(_date$split, 3),
-          year = _date$split2[0],
-          month = _date$split2[1],
-          day = _date$split2[2];
-
-      newParsedDate = new Date();
-      newParsedDate.setFullYear(year, Number(month) - 1, day);
-      newParsedDate.setHours(0, 0, 0, 0);
-
-      if (time) {
-        var _time$split = time.split(':'),
-            _time$split2 = _slicedToArray(_time$split, 2),
-            hours = _time$split2[0],
-            minutes = _time$split2[1];
-
-        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-      }
-    }
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              newFormattedDate = event.target.value;
 
-    setValueState({
-      parsed: newParsedDate,
-      formatted: newFormattedDate
-    });
-    api.setEditCellValue({
-      id: id,
-      field: field,
-      value: newParsedDate
-    }, event);
-  }, [api, field, id]);
+              if (newFormattedDate === '') {
+                newParsedDate = null;
+              } else {
+                _newFormattedDate$spl = newFormattedDate.split('T'), _newFormattedDate$spl2 = _slicedToArray(_newFormattedDate$spl, 2), date = _newFormattedDate$spl2[0], time = _newFormattedDate$spl2[1];
+                _date$split = date.split('-'), _date$split2 = _slicedToArray(_date$split, 3), year = _date$split2[0], month = _date$split2[1], day = _date$split2[2];
+                newParsedDate = new Date();
+                newParsedDate.setFullYear(year, Number(month) - 1, day);
+                newParsedDate.setHours(0, 0, 0, 0);
+
+                if (time) {
+                  _time$split = time.split(':'), _time$split2 = _slicedToArray(_time$split, 2), hours = _time$split2[0], minutes = _time$split2[1];
+                  newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+                }
+              }
+
+              if (!onValueChange) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 5;
+              return onValueChange(event, newParsedDate);
+
+            case 5:
+              setValueState({
+                parsed: newParsedDate,
+                formatted: newFormattedDate
+              });
+              api.setEditCellValue({
+                id: id,
+                field: field,
+                value: newParsedDate
+              }, event);
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [api, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(function (state) {
       var _valueTransformed$par, _state$parsed;
@@ -145,6 +163,94 @@ export function GridEditDateCell(props) {
     onChange: handleChange
   }, other));
 }
+
+process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @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,
+
+  /**
+   * 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,
+
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
+  /**
+   * 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,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditDateCell };
 export var renderEditDateCell = function renderEditDateCell(params) {
   return /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
 };

package/legacy/components/cell/GridEditInputCell.js

@@ -1,7 +1,9 @@
+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 _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "getValue", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -61,6 +63,7 @@ function GridEditInputCell(props) {
       _props$debounceMs = 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,
+      onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
   var inputRef = React.useRef();
@@ -74,16 +77,44 @@ function GridEditInputCell(props) {
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  var handleChange = React.useCallback(function (event) {
-    var newValue = event.target.value;
-    setValueState(newValue);
-    api.setEditCellValue({
-      id: id,
-      field: field,
-      value: newValue,
-      debounceMs: debounceMs
-    }, event);
-  }, [api, debounceMs, field, id]);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var newValue;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              newValue = event.target.value;
+
+              if (!onValueChange) {
+                _context.next = 4;
+                break;
+              }
+
+              _context.next = 4;
+              return onValueChange(event, newValue);
+
+            case 4:
+              setValueState(newValue);
+              api.setEditCellValue({
+                id: id,
+                field: field,
+                value: newValue,
+                debounceMs: debounceMs
+              }, event);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [api, debounceMs, field, id, onValueChange]);
   React.useEffect(function () {
     setValueState(value);
   }, [value]);
@@ -134,7 +165,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -162,6 +193,14 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   isProcessingProps: PropTypes.bool,
   isValidating: PropTypes.bool,
 
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
   /**
    * The row model of the row that the current cell belongs to.
    */
@@ -170,7 +209,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
 } : 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", "isProcessingProps", "error"];
+var _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,21 +12,22 @@ import MenuItem from '@mui/material/MenuItem';
 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,
@@ -45,6 +46,7 @@ function GridEditSingleSelectCell(props) {
       isValidating = props.isValidating,
       isProcessingProps = props.isProcessingProps,
       error = props.error,
+      onValueChange = props.onValueChange,
       other = _objectWithoutProperties(props, _excluded);
 
   var ref = React.useRef();
@@ -56,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') {
@@ -90,46 +94,58 @@ function GridEditSingleSelectCell(props) {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var _rootProps$experiment;
 
-      var target, isValid, canCommit, params;
+      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);
+
+              if (!onValueChange) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 6;
+              return onValueChange(event, formattedTargetValue);
+
+            case 6:
+              _context.next = 8;
               return api.setEditCellValue({
                 id: id,
                 field: field,
-                value: target.value
+                value: formattedTargetValue
               }, event);
 
-            case 4:
+            case 8:
               isValid = _context.sent;
 
               if (!((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi)) {
-                _context.next = 7;
+                _context.next = 11;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 7:
+            case 11:
               if (!(rootProps.editMode === GridEditModes.Row || isValid === false)) {
-                _context.next = 9;
+                _context.next = 13;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 9:
-              _context.next = 11;
+            case 13:
+              _context.next = 15;
               return Promise.resolve(api.commitCellChange({
                 id: id,
                 field: field
               }, event));
 
-            case 11:
+            case 15:
               canCommit = _context.sent;
 
               if (canCommit) {
@@ -138,11 +154,11 @@ function GridEditSingleSelectCell(props) {
                 if (event.key) {
                   // TODO v6: remove once we stop ignoring events fired from portals
                   params = api.getCellParams(id, field);
-                  api.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+                  api.publishEvent('cellNavigationKeyDown', params, event);
                 }
               }
 
-            case 13:
+            case 17:
             case "end":
               return _context.stop();
           }
@@ -196,9 +212,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);
+    })
   }));
 }
 
@@ -232,7 +251,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
@@ -260,6 +279,14 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isProcessingProps: PropTypes.bool,
   isValidating: PropTypes.bool,
 
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+
   /**
    * The row model of the row that the current cell belongs to.
    */
@@ -268,7 +295,17 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: PropTypes.object.isRequired
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
 } : void 0;
 export { GridEditSingleSelectCell };
 export var renderEditSingleSelectCell = function renderEditSingleSelectCell(params) {

package/legacy/components/cell/index.js

@@ -1,4 +1,6 @@
 export * from './GridCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { GridEvents } from '../../models/events';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
@@ -91,25 +90,25 @@ function GridColumnHeaderItem(props) {
     };
   }, [apiRef, column.field]);
   var mouseEventsHandlers = {
-    onClick: publish(GridEvents.columnHeaderClick),
-    onDoubleClick: publish(GridEvents.columnHeaderDoubleClick),
-    onMouseOver: publish(GridEvents.columnHeaderOver),
+    onClick: publish('columnHeaderClick'),
+    onDoubleClick: publish('columnHeaderDoubleClick'),
+    onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used
-    onMouseOut: publish(GridEvents.columnHeaderOut),
+    onMouseOut: publish('columnHeaderOut'),
     // TODO remove as it's not used
-    onMouseEnter: publish(GridEvents.columnHeaderEnter),
+    onMouseEnter: publish('columnHeaderEnter'),
     // TODO remove as it's not used
-    onMouseLeave: publish(GridEvents.columnHeaderLeave),
+    onMouseLeave: publish('columnHeaderLeave'),
     // TODO remove as it's not used
-    onKeyDown: publish(GridEvents.columnHeaderKeyDown),
-    onFocus: publish(GridEvents.columnHeaderFocus),
-    onBlur: publish(GridEvents.columnHeaderBlur)
+    onKeyDown: publish('columnHeaderKeyDown'),
+    onFocus: publish('columnHeaderFocus'),
+    onBlur: publish('columnHeaderBlur')
   };
   var draggableEventHandlers = {
-    onDragStart: publish(GridEvents.columnHeaderDragStart),
-    onDragEnter: publish(GridEvents.columnHeaderDragEnter),
-    onDragOver: publish(GridEvents.columnHeaderDragOver),
-    onDragEnd: publish(GridEvents.columnHeaderDragEnd)
+    onDragStart: publish('columnHeaderDragStart'),
+    onDragEnter: publish('columnHeaderDragEnter'),
+    onDragOver: publish('columnHeaderDragOver'),
+    onDragEnd: publish('columnHeaderDragEnd')
   };
   var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   var showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
@@ -121,7 +120,7 @@ function GridColumnHeaderItem(props) {
 
   var classes = useUtilityClasses(ownerState);
   var width = column.computedWidth;
-  var ariaSort;
+  var ariaSort = 'none';
 
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
@@ -162,14 +161,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
@@ -207,7 +203,7 @@ function GridColumnHeaderItem(props) {
       resizable: !rootProps.disableColumnResize && !!column.resizable,
       resizing: isResizing,
       height: headerHeight,
-      onMouseDown: publish(GridEvents.columnSeparatorMouseDown),
+      onMouseDown: publish('columnSeparatorMouseDown'),
       side: separatorSide
     }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
       columnMenuId: columnMenuId,

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';
@@ -40,8 +40,7 @@ var GridColumnHeadersRoot = styled('div', {
   };
 });
 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();