@mui/x-data-grid 9.12.0 → 9.14.0

package/components/base/GridOverlays.js

@@ -21,19 +21,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -70,7 +72,6 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: classes.inner,
       style: {

package/components/base/GridOverlays.mjs

@@ -13,19 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -62,7 +64,6 @@ export function GridOverlayWrapper(props) {
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: classes.inner,
       style: {

package/components/cell/GridActionsCell.js

@@ -20,6 +20,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _domUtils = require("../../utils/domUtils");
 var _GridActionsCellItem = require("./GridActionsCellItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
@@ -140,7 +141,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || (0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -170,55 +173,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: rootRef,
-    tabIndex: -1,
-    className: _gridClasses.gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: _gridClasses.gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      ref: rootRef,
+      tabIndex: -1,
+      className: _gridClasses.gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: _gridClasses.gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCell.mjs

@@ -13,6 +13,7 @@ import { gridClasses } from "../../constants/gridClasses.mjs";
 import { GridMenu } from "../menu/GridMenu.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { isEventTargetInPortal } from "../../utils/domUtils.mjs";
 import { GridActionsCellItem } from "./GridActionsCellItem.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
@@ -132,7 +133,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || isEventTargetInPortal(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -162,55 +165,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: rootRef,
-    tabIndex: -1,
-    className: gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", _extends({
+      ref: rootRef,
+      tabIndex: -1,
+      className: gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCellItem.js

@@ -30,7 +30,6 @@ const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwar
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
       size: "small",
-      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick

package/components/cell/GridActionsCellItem.mjs

@@ -23,7 +23,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       size: "small",
-      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick

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;
@@ -174,6 +177,10 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseUp) {
@@ -181,6 +188,10 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
   }, [apiRef, field, onMouseUp, rowId]);
   const publishMouseDown = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseDown) {

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;
@@ -167,6 +170,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseUp) {
@@ -174,6 +181,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
   }, [apiRef, field, onMouseUp, rowId]);
   const publishMouseDown = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseDown) {

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,
   /**