@mui/x-data-grid 9.11.0 → 9.13.0

package/components/cell/GridCell.js

@@ -101,14 +101,17 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   } = cellAggregationResult || {};
+  const stateTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, () => {
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+  });
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
     rowNode: rowNode,
-    tabIndex: (0, _useGridSelector.useGridSelector)(apiRef, () => {
-      const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
-      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
-    }),
+    // A cell kept mounted outside the render context is collapsed to zero size, so it must not
+    // become the grid's tab stop: tabbing in would move focus to something the user can't see.
+    tabIndex: isNotVisible ? -1 : stateTabIndex,
     hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
       const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
       return focus?.id === rowId && focus.field === field;
@@ -231,6 +234,19 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
     const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      // An external editor can legitimately hold DOM focus for the focused cell
+      // (e.g. the Premium formula bar) — the same pipe the document click
+      // handler consults decides whether pulling focus back is allowed. The
+      // pseudo-event only carries the element that owns the focus.
+      const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
+        event: {
+          target: doc.activeElement
+        },
+        cell: null
+      });
+      if (!canUpdateFocus) {
+        return;
+      }
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
       (0, _focusElement.focusElement)(elementToFocus, apiRef);
@@ -291,7 +307,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, classNames, className),
-    role: "gridcell",
+    role: column.rowHeader ? 'rowheader' : 'gridcell',
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,

package/components/cell/GridCell.mjs

@@ -94,14 +94,17 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   } = cellAggregationResult || {};
+  const stateTabIndex = useGridSelector(apiRef, () => {
+    const cellTabIndex = gridTabIndexCellSelector(apiRef);
+    return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+  });
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
     rowNode: rowNode,
-    tabIndex: useGridSelector(apiRef, () => {
-      const cellTabIndex = gridTabIndexCellSelector(apiRef);
-      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
-    }),
+    // A cell kept mounted outside the render context is collapsed to zero size, so it must not
+    // become the grid's tab stop: tabbing in would move focus to something the user can't see.
+    tabIndex: isNotVisible ? -1 : stateTabIndex,
     hasFocus: useGridSelector(apiRef, () => {
       const focus = gridFocusCellSelector(apiRef);
       return focus?.id === rowId && focus.field === field;
@@ -224,6 +227,19 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      // An external editor can legitimately hold DOM focus for the focused cell
+      // (e.g. the Premium formula bar) — the same pipe the document click
+      // handler consults decides whether pulling focus back is allowed. The
+      // pseudo-event only carries the element that owns the focus.
+      const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
+        event: {
+          target: doc.activeElement
+        },
+        cell: null
+      });
+      if (!canUpdateFocus) {
+        return;
+      }
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || cellRef.current;
       focusElement(elementToFocus, apiRef);
@@ -284,7 +300,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   };
   return /*#__PURE__*/_jsx("div", _extends({
     className: clsx(classes.root, classNames, className),
-    role: "gridcell",
+    role: column.rowHeader ? 'rowheader' : 'gridcell',
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,

package/components/cell/GridEditBooleanCell.d.mts

@@ -5,7 +5,7 @@ export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
 }

package/components/cell/GridEditBooleanCell.d.ts

@@ -5,7 +5,7 @@ export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
 }

package/components/cell/GridEditBooleanCell.js

@@ -51,15 +51,15 @@ function GridEditBooleanCell(props) {
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
     setValueState(newValue);
     await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
   }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
@@ -126,7 +126,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes /* remove-
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditBooleanCell.mjs

@@ -43,15 +43,15 @@ function GridEditBooleanCell(props) {
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
     setValueState(newValue);
     await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
   }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes /* remove-
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditDateCell.d.mts

@@ -6,7 +6,7 @@ export interface GridEditDateCellProps extends GridRenderEditCellParams {
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditDateCell.d.ts

@@ -6,7 +6,7 @@ export interface GridEditDateCellProps extends GridRenderEditCellParams {
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditDateCell.js

@@ -94,18 +94,18 @@ function GridEditDateCell(props) {
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     const newParsedDate = parseValueToDate(newFormattedDate);
-    if (onValueChange) {
-      await onValueChange(event, newParsedDate);
-    }
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes /* remove-pro
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditDateCell.mjs

@@ -86,18 +86,18 @@ function GridEditDateCell(props) {
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     const newParsedDate = parseValueToDate(newFormattedDate);
-    if (onValueChange) {
-      await onValueChange(event, newParsedDate);
-    }
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
@@ -172,7 +172,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes /* remove-pro
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditInputCell.d.mts

@@ -7,7 +7,7 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams {
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditInputCell.d.ts

@@ -7,7 +7,7 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams {
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditInputCell.js

@@ -153,7 +153,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes /* remove-pr
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditInputCell.mjs

@@ -146,7 +146,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes /* remove-pr
    * 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditLongTextCell.d.mts

@@ -7,7 +7,7 @@ export interface GridEditLongTextCellProps extends GridRenderEditCellParams<any,
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, newValue: string) => Promise<void> | void;
   /**

package/components/cell/GridEditLongTextCell.d.ts

@@ -7,7 +7,7 @@ export interface GridEditLongTextCellProps extends GridRenderEditCellParams<any,
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, newValue: string) => Promise<void> | void;
   /**

package/components/cell/GridEditLongTextCell.js

@@ -217,7 +217,7 @@ process.env.NODE_ENV !== "production" ? GridEditLongTextCell.propTypes /* remove
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**
@@ -359,7 +359,7 @@ process.env.NODE_ENV !== "production" ? GridEditLongTextarea.propTypes /* remove
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditLongTextCell.mjs

@@ -209,7 +209,7 @@ process.env.NODE_ENV !== "production" ? GridEditLongTextCell.propTypes /* remove
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**
@@ -351,7 +351,7 @@ process.env.NODE_ENV !== "production" ? GridEditLongTextarea.propTypes /* remove
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLTextAreaElement>} event The event source of the callback.
    * @param {string} 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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditSingleSelectCell.d.mts

@@ -6,7 +6,7 @@ export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams
    * Callback called when the value is changed by the user.
    * @param {Event<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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**

package/components/cell/GridEditSingleSelectCell.d.ts

@@ -6,7 +6,7 @@ export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams
    * Callback called when the value is changed by the user.
    * @param {Event<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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**

package/components/cell/GridEditSingleSelectCell.js

@@ -70,14 +70,14 @@ function GridEditSingleSelectCell(props) {
     const target = event.target;
     // NativeSelect casts the value to a string.
     const formattedTargetValue = (0, _filterPanelUtils.getValueFromValueOptions)(target.value, valueOptions, getOptionValue);
-    if (onValueChange) {
-      await onValueChange(event, formattedTargetValue);
-    }
     await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, formattedTargetValue);
+    }
   };
   const handleClose = (event, reason) => {
     if (rootProps.editMode === _gridEditRowModel.GridEditModes.Row) {
@@ -174,7 +174,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes /* re
    * Callback called when the value is changed by the user.
    * @param {Event<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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditSingleSelectCell.mjs

@@ -62,14 +62,14 @@ function GridEditSingleSelectCell(props) {
     const target = event.target;
     // NativeSelect casts the value to a string.
     const formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
-    if (onValueChange) {
-      await onValueChange(event, formattedTargetValue);
-    }
     await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, formattedTargetValue);
+    }
   };
   const handleClose = (event, reason) => {
     if (rootProps.editMode === GridEditModes.Row) {
@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes /* re
    * Callback called when the value is changed by the user.
    * @param {Event<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`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -47,7 +47,7 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.fo
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "none",
+    role: "rowgroup",
     ref: ref
   }));
 });

package/components/columnHeaders/GridBaseColumnHeaders.mjs

@@ -40,7 +40,7 @@ export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "none",
+    role: "rowgroup",
     ref: ref
   }));
 });

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -18,6 +18,7 @@ var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _focusElement = require("../../utils/focusElement");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 var _getColumnMenuItemKeys = require("../../hooks/features/columnMenu/getColumnMenuItemKeys");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -81,8 +82,10 @@ function GridColumnHeaderItem(props) {
     pinnedOffset
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const adornment = configuration.hooks.useColumnHeaderAdornment(colDef.field);
   const headerCellRef = React.useRef(null);
   const columnMenuId = (0, _useId.default)();
   const columnMenuButtonId = (0, _useId.default)();
@@ -232,6 +235,7 @@ function GridColumnHeaderItem(props) {
     separatorSide: separatorSide,
     isDraggable: isDraggable,
     headerComponent: headerComponent,
+    adornment: adornment,
     description: colDef.description,
     elementId: colDef.field,
     width: colDef.computedWidth,

package/components/columnHeaders/GridColumnHeaderItem.mjs

@@ -11,6 +11,7 @@ import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { focusElement } from "../../utils/focusElement.mjs";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.mjs";
 import { getColumnMenuItemKeys } from "../../hooks/features/columnMenu/getColumnMenuItemKeys.mjs";
 import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.mjs";
 import { GridColumnHeaderMenu } from "../menu/columnMenu/GridColumnHeaderMenu.mjs";
@@ -74,8 +75,10 @@ function GridColumnHeaderItem(props) {
     pinnedOffset
   } = props;
   const apiRef = useGridPrivateApiContext();
+  const configuration = useGridConfiguration();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
+  const adornment = configuration.hooks.useColumnHeaderAdornment(colDef.field);
   const headerCellRef = React.useRef(null);
   const columnMenuId = useId();
   const columnMenuButtonId = useId();
@@ -225,6 +228,7 @@ function GridColumnHeaderItem(props) {
     separatorSide: separatorSide,
     isDraggable: isDraggable,
     headerComponent: headerComponent,
+    adornment: adornment,
     description: colDef.description,
     elementId: colDef.field,
     width: colDef.computedWidth,

package/components/columnHeaders/GridGenericColumnHeaderItem.d.mts

@@ -23,6 +23,13 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
   columnMenuIconButton?: React.ReactNode;
   columnMenu?: React.ReactNode;
   columnTitleIconButtons?: React.ReactNode;
+  /**
+   * Optional adornment rendered at the start of the title content, before the
+   * title label (used by the Premium formula feature for A1 column letters).
+   * Placing it inside the (non-reversed) title content keeps it on the same
+   * side of the title for both left- and right-aligned headers.
+   */
+  adornment?: React.ReactNode;
   label: string;
   draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
   columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;

package/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -23,6 +23,13 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
   columnMenuIconButton?: React.ReactNode;
   columnMenu?: React.ReactNode;
   columnTitleIconButtons?: React.ReactNode;
+  /**
+   * Optional adornment rendered at the start of the title content, before the
+   * title label (used by the Premium formula feature for A1 column letters).
+   * Placing it inside the (non-reversed) title content keeps it on the same
+   * side of the title for both left- and right-aligned headers.
+   */
+  adornment?: React.ReactNode;
   label: string;
   draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
   columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -17,7 +17,7 @@ var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "adornment", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _forwardRef.forwardRef)(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
@@ -34,6 +34,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       columnMenuIconButton = null,
       columnMenu = null,
       columnTitleIconButtons = null,
+      adornment = null,
       headerClassName,
       label,
       resizable,
@@ -68,13 +69,13 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.titleContainer,
         role: "none",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: classes.titleContainerContent,
-          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+          children: [adornment, headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
             label: label,
             description: description,
             columnWidth: width
-          })
+          })]
         }), columnTitleIconButtons]
       }), columnMenuIconButton]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSeparator.GridColumnHeaderSeparator, (0, _extends2.default)({

package/components/columnHeaders/GridGenericColumnHeaderItem.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "adornment", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
 import useForkRef from '@mui/utils/useForkRef';
@@ -27,6 +27,7 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       columnMenuIconButton = null,
       columnMenu = null,
       columnTitleIconButtons = null,
+      adornment = null,
       headerClassName,
       label,
       resizable,
@@ -61,13 +62,13 @@ const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderI
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,
         role: "none",
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/_jsxs("div", {
           className: classes.titleContainerContent,
-          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+          children: [adornment, headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
             label: label,
             description: description,
             columnWidth: width
-          })
+          })]
         }), columnTitleIconButtons]
       }), columnMenuIconButton]
     })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({