@mui/x-data-grid 9.12.0 → 9.13.0

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/toolbarV8/Toolbar.d.mts

@@ -6,6 +6,10 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
@@ -25,4 +29,4 @@ declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.For
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 } & React.RefAttributes<HTMLDivElement>>;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/components/toolbarV8/Toolbar.d.ts

@@ -6,6 +6,10 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
@@ -25,4 +29,4 @@ declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.For
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 } & React.RefAttributes<HTMLDivElement>>;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/components/toolbarV8/Toolbar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = void 0;
+exports.ToolbarRoot = exports.Toolbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,6 +18,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _cssVariables = require("../../constants/cssVariables");
+var _variables = require("../../material/variables");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,19 +32,40 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const ToolbarRoot = (0, _styles.styled)('div', {
+
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
+const ToolbarRoot = exports.ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
-})({
-  flex: '0 1 1px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'end',
-  gap: _cssVariables.vars.spacing(0.25),
-  padding: _cssVariables.vars.spacing(0.75),
-  minHeight: 52,
-  boxSizing: 'border-box',
-  borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
+})(({
+  theme
+}) => {
+  // The Data Grid CSS variables are only defined on the Data Grid root element, so they are
+  // declared with a fallback to keep the styles working when rendered outside of a Data Grid.
+  const spacingUnit = `var(${_cssVariables.vars.keys.spacingUnit}, ${(0, _variables.getSpacingUnit)(theme)})`;
+  const borderColor = `var(${_cssVariables.vars.keys.colors.border.base}, ${(0, _variables.getBorderColor)(theme)})`;
+  const background = `var(${_cssVariables.vars.keys.colors.background.base}, ${(0, _variables.getBackgroundBase)(theme)})`;
+  const foreground = `var(${_cssVariables.vars.keys.colors.foreground.base}, ${(theme.vars || theme).palette.text.primary})`;
+  const fontBody = (0, _variables.getFontBody)(theme);
+  return {
+    flex: '0 1 1px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    gap: `calc(${spacingUnit} * 0.25)`,
+    padding: `calc(${spacingUnit} * 0.75)`,
+    minHeight: 52,
+    boxSizing: 'border-box',
+    borderBottom: `1px solid ${borderColor}`,
+    // Inherited from the Data Grid root inside a grid, declared here so the component keeps
+    // matching it when rendered on its own.
+    backgroundColor: background,
+    color: foreground,
+    font: fontBody ? `var(${_cssVariables.vars.keys.typography.font.body}, ${fontBody})` : undefined
+  };
 });
 
 /**

package/components/toolbarV8/Toolbar.mjs

@@ -12,6 +12,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { vars } from "../../constants/cssVariables.mjs";
+import { getBackgroundBase, getBorderColor, getFontBody, getSpacingUnit } from "../../material/variables.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,19 +25,40 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+
+/**
+ * The styled `<div />` element rendered by the `<Toolbar />` component.
+ * Use it to apply the toolbar styles to other elements, inside or outside of a Data Grid.
+ */
 const ToolbarRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
-})({
-  flex: '0 1 1px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'end',
-  gap: vars.spacing(0.25),
-  padding: vars.spacing(0.75),
-  minHeight: 52,
-  boxSizing: 'border-box',
-  borderBottom: `1px solid ${vars.colors.border.base}`
+})(({
+  theme
+}) => {
+  // The Data Grid CSS variables are only defined on the Data Grid root element, so they are
+  // declared with a fallback to keep the styles working when rendered outside of a Data Grid.
+  const spacingUnit = `var(${vars.keys.spacingUnit}, ${getSpacingUnit(theme)})`;
+  const borderColor = `var(${vars.keys.colors.border.base}, ${getBorderColor(theme)})`;
+  const background = `var(${vars.keys.colors.background.base}, ${getBackgroundBase(theme)})`;
+  const foreground = `var(${vars.keys.colors.foreground.base}, ${(theme.vars || theme).palette.text.primary})`;
+  const fontBody = getFontBody(theme);
+  return {
+    flex: '0 1 1px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    gap: `calc(${spacingUnit} * 0.25)`,
+    padding: `calc(${spacingUnit} * 0.75)`,
+    minHeight: 52,
+    boxSizing: 'border-box',
+    borderBottom: `1px solid ${borderColor}`,
+    // Inherited from the Data Grid root inside a grid, declared here so the component keeps
+    // matching it when rendered on its own.
+    backgroundColor: background,
+    color: foreground,
+    font: fontBody ? `var(${vars.keys.typography.font.body}, ${fontBody})` : undefined
+  };
 });
 
 /**
@@ -82,4 +104,4 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
 } : void 0;
-export { Toolbar };
+export { Toolbar, ToolbarRoot };

package/hooks/core/useGridVirtualizer.js

@@ -67,6 +67,18 @@ function useGridVirtualizer() {
     listView
   } = rootProps;
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  // Convert visible row-header columns to their indexes once per column-model change. Each GridRow
+  // uses this ordered list to render those cells even when they fall outside its horizontal render
+  // context. This keeps the row-identifying cells available to assistive technology while scrolling.
+  const retainedColumnIndexes = React.useMemo(() => {
+    const indexes = [];
+    visibleColumns.forEach((column, index) => {
+      if (column.rowHeader) {
+        indexes.push(index);
+      }
+    });
+    return indexes;
+  }, [visibleColumns]);
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
   const pinnedColumns = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
   const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
@@ -219,6 +231,7 @@ function useGridVirtualizer() {
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
       visibleColumns: visibleColumns,
+      retainedColumnIndexes: retainedColumnIndexes,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -228,7 +241,7 @@ function useGridVirtualizer() {
       showBottomBorder: params.showBottomBorder,
       scrollbarWidth: verticalScrollbarWidth,
       gridHasFiller: hasFiller
-    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
+    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, retainedColumnIndexes, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
     renderInfiniteLoadingTrigger: React.useCallback(id => apiRef.current.getInfiniteLoadingTriggerElement?.({
       lastRowId: id
     }), [apiRef])

package/hooks/core/useGridVirtualizer.mjs

@@ -59,6 +59,18 @@ export function useGridVirtualizer() {
     listView
   } = rootProps;
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  // Convert visible row-header columns to their indexes once per column-model change. Each GridRow
+  // uses this ordered list to render those cells even when they fall outside its horizontal render
+  // context. This keeps the row-identifying cells available to assistive technology while scrolling.
+  const retainedColumnIndexes = React.useMemo(() => {
+    const indexes = [];
+    visibleColumns.forEach((column, index) => {
+      if (column.rowHeader) {
+        indexes.push(index);
+      }
+    });
+    return indexes;
+  }, [visibleColumns]);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const pinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
   const rowSelectionManager = useGridSelector(apiRef, gridRowSelectionManagerSelector);
@@ -211,6 +223,7 @@ export function useGridVirtualizer() {
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
       visibleColumns: visibleColumns,
+      retainedColumnIndexes: retainedColumnIndexes,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -220,7 +233,7 @@ export function useGridVirtualizer() {
       showBottomBorder: params.showBottomBorder,
       scrollbarWidth: verticalScrollbarWidth,
       gridHasFiller: hasFiller
-    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
+    }, rowSlotProps), params.id), [columnsTotalWidth, hasFiller, isRowSelected, pinnedColumns, retainedColumnIndexes, RowSlot, rowSlotProps, verticalScrollbarWidth, visibleColumns]),
     renderInfiniteLoadingTrigger: React.useCallback(id => apiRef.current.getInfiniteLoadingTriggerElement?.({
       lastRowId: id
     }), [apiRef])

package/hooks/features/dataSource/models.d.mts

@@ -1,5 +1,5 @@
 import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams, GridGetRowsOptions } from "../../../models/gridDataSource.mjs";
-import type { GridRowId, GridRowModel } from "../../../models/gridRows.mjs";
+import type { GridRowId, GridRowModel, GridRowModelReplace, GridRowModelUpdate } from "../../../models/gridRows.mjs";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.mjs";
 /**
  * The parameters for the `fetchRows` method.
@@ -43,5 +43,5 @@ export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
   fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
-  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
+  handleEditRow?: (params: GridUpdateRowParams, rowUpdate: GridRowModelUpdate | GridRowModelReplace) => void;
 }

package/hooks/features/dataSource/models.d.ts

@@ -1,5 +1,5 @@
 import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams, GridGetRowsOptions } from "../../../models/gridDataSource.js";
-import type { GridRowId, GridRowModel } from "../../../models/gridRows.js";
+import type { GridRowId, GridRowModel, GridRowModelReplace, GridRowModelUpdate } from "../../../models/gridRows.js";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
 /**
  * The parameters for the `fetchRows` method.
@@ -43,5 +43,5 @@ export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
   fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
-  handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
+  handleEditRow?: (params: GridUpdateRowParams, rowUpdate: GridRowModelUpdate | GridRowModelReplace) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -254,16 +254,20 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     try {
       const finalRowUpdate = await dataSourceUpdateRow(params);
-      if (typeof handleEditRowOption === 'function') {
-        handleEditRowOption(params, finalRowUpdate);
-        return finalRowUpdate;
-      }
-      if (finalRowUpdate && !(0, _isDeepEqual.isDeepEqual)(finalRowUpdate, params.previousRow)) {
+      // `dataSource.updateRow()` can resolve with a `{ _action: 'replace', row }` update.
+      // The row update methods unwrap it themselves, everything else works with the row it
+      // holds: comparing the envelope with the previous row would never match.
+      const updatedRow = finalRowUpdate && (0, _gridRowsUtils.isReplaceUpdate)(finalRowUpdate) ? (0, _gridRowsUtils.getReplaceRow)(finalRowUpdate) : finalRowUpdate;
+      if (updatedRow && !(0, _isDeepEqual.isDeepEqual)(updatedRow, params.previousRow)) {
         // Reset the outdated cache, only if the row is _actually_ updated
         apiRef.current.dataSource.cache.clear();
       }
-      apiRef.current.updateNestedRows([finalRowUpdate], []);
-      return finalRowUpdate;
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+      } else {
+        apiRef.current.updateNestedRows([finalRowUpdate], []);
+      }
+      return updatedRow;
     } catch (errorThrown) {
       if (typeof onDataSourceErrorProp === 'function') {
         onDataSourceErrorProp(new _gridDataSourceError.GridUpdateRowError({

package/hooks/features/dataSource/useGridDataSourceBase.mjs

@@ -9,7 +9,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import debounce from '@mui/utils/debounce';
 import { warnOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.mjs";
+import { GRID_ROOT_GROUP_ID, getReplaceRow, isReplaceUpdate } from "../rows/gridRowsUtils.mjs";
 import { runIf } from "../../../utils/utils.mjs";
 import { GridStrategyGroup } from "../../core/strategyProcessing/index.mjs";
 import { useGridSelector } from "../../utils/useGridSelector.mjs";
@@ -247,16 +247,20 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }
     try {
       const finalRowUpdate = await dataSourceUpdateRow(params);
-      if (typeof handleEditRowOption === 'function') {
-        handleEditRowOption(params, finalRowUpdate);
-        return finalRowUpdate;
-      }
-      if (finalRowUpdate && !isDeepEqual(finalRowUpdate, params.previousRow)) {
+      // `dataSource.updateRow()` can resolve with a `{ _action: 'replace', row }` update.
+      // The row update methods unwrap it themselves, everything else works with the row it
+      // holds: comparing the envelope with the previous row would never match.
+      const updatedRow = finalRowUpdate && isReplaceUpdate(finalRowUpdate) ? getReplaceRow(finalRowUpdate) : finalRowUpdate;
+      if (updatedRow && !isDeepEqual(updatedRow, params.previousRow)) {
         // Reset the outdated cache, only if the row is _actually_ updated
         apiRef.current.dataSource.cache.clear();
       }
-      apiRef.current.updateNestedRows([finalRowUpdate], []);
-      return finalRowUpdate;
+      if (typeof handleEditRowOption === 'function') {
+        handleEditRowOption(params, finalRowUpdate);
+      } else {
+        apiRef.current.updateNestedRows([finalRowUpdate], []);
+      }
+      return updatedRow;
     } catch (errorThrown) {
       if (typeof onDataSourceErrorProp === 'function') {
         onDataSourceErrorProp(new GridUpdateRowError({

package/hooks/features/pivoting/gridPivotingInterfaces.d.mts

@@ -1,10 +1,10 @@
-import type { GridRowModelUpdate } from '@mui/x-data-grid';
+import type { GridRowModelUpdate, GridRowModelReplace } from '@mui/x-data-grid';
 import type { GridColDef } from "../../../models/colDef/index.mjs";
 export interface GridPivotingStatePartial {
   active: boolean;
   initialColumns: Map<string, GridColDef> | undefined;
 }
 export interface GridPivotingPrivateApiCommunity {
-  updateNonPivotRows: (rows: readonly GridRowModelUpdate[], keepPreviousRows?: boolean) => void;
+  updateNonPivotRows: (rows: ReadonlyArray<GridRowModelUpdate | GridRowModelReplace>, keepPreviousRows?: boolean) => void;
   updateNonPivotColumns: (columns: readonly GridColDef[], keepPreviousColumns?: boolean) => void;
 }

package/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -1,10 +1,10 @@
-import type { GridRowModelUpdate } from '@mui/x-data-grid';
+import type { GridRowModelUpdate, GridRowModelReplace } from '@mui/x-data-grid';
 import type { GridColDef } from "../../../models/colDef/index.js";
 export interface GridPivotingStatePartial {
   active: boolean;
   initialColumns: Map<string, GridColDef> | undefined;
 }
 export interface GridPivotingPrivateApiCommunity {
-  updateNonPivotRows: (rows: readonly GridRowModelUpdate[], keepPreviousRows?: boolean) => void;
+  updateNonPivotRows: (rows: ReadonlyArray<GridRowModelUpdate | GridRowModelReplace>, keepPreviousRows?: boolean) => void;
   updateNonPivotColumns: (columns: readonly GridColDef[], keepPreviousColumns?: boolean) => void;
 }

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -542,7 +542,7 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       handleSingleRowSelection(params.id, event);
       return;
     }
-    if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) {
+    if ((0, _keyboardUtils.isSelectAllShortcut)(event)) {
       event.preventDefault();
       if (canHaveMultipleSelection) {
         toggleAllRows(true);

package/hooks/features/rowSelection/useGridRowSelection.mjs

@@ -15,7 +15,7 @@ import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.mjs";
 import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector, gridFilterModelSelector, gridQuickFilterValuesSelector } from "../filter/gridFilterSelector.mjs";
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.mjs";
 import { GridCellModes } from "../../../models/gridEditRowModel.mjs";
-import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.mjs";
+import { isKeyboardEvent, isNavigationKey, isSelectAllShortcut } from "../../../utils/keyboardUtils.mjs";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.mjs";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.mjs";
 import { gridClasses } from "../../../constants/gridClasses.mjs";
@@ -534,7 +534,7 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       handleSingleRowSelection(params.id, event);
       return;
     }
-    if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) {
+    if (isSelectAllShortcut(event)) {
       event.preventDefault();
       if (canHaveMultipleSelection) {
         toggleAllRows(true);

package/hooks/features/rows/gridRowsUtils.d.mts

@@ -1,5 +1,5 @@
 import type { RefObject } from '@mui/x-internals/types';
-import type { GridAutoGeneratedGroupNode, GridAutoGeneratedPinnedRowNode, GridColDef, GridFooterNode, GridGroupNode, GridRowId, GridRowIdGetter, GridRowModel, GridRowModelUpdate, GridRowTreeConfig, GridSkeletonRowNode, GridTreeNode, GridValidRowModel } from "../../../models/index.mjs";
+import type { GridAutoGeneratedGroupNode, GridAutoGeneratedPinnedRowNode, GridColDef, GridFooterNode, GridGroupNode, GridRowId, GridRowIdGetter, GridRowModel, GridRowModelUpdate, GridRowModelReplace, GridRowTreeConfig, GridSkeletonRowNode, GridTreeNode, GridValidRowModel } from "../../../models/index.mjs";
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
 import type { GridApiCommunity, GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { GridRowsInternalCache, GridRowsState, GridRowTreeCreationParams } from "./gridRowsInterfaces.mjs";
@@ -43,6 +43,40 @@ export declare const getRowsStateFromCache: ({
 export declare const isAutogeneratedRow: (row: GridRowModel) => boolean;
 export declare const isAutogeneratedRowNode: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
 export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean, directChildrenOnly?: boolean) => GridRowId[];
+export declare const isReplaceUpdate: (update: GridRowModelUpdate | GridRowModelReplace) => update is GridRowModelReplace;
+/**
+ * Extracts the replacement row from a `{ _action: 'replace', row }` update.
+ * The marker lives on the throwaway envelope, so the row object itself is never touched.
+ * @param {GridRowModelReplace} update The update provided to `updateRows()`.
+ * @returns {GridRowModel} The object to store as the row, verbatim.
+ */
+export declare const getReplaceRow: (update: GridRowModelReplace) => GridRowModel;
+/**
+ * Merges a partial update into the existing row.
+ * Prototype-preservation rules:
+ *   1. If partialRow is a class instance (non-plain object), use its prototype — the
+ *      caller is passing in a fully-constructed instance and owns the prototype chain.
+ *   2. If partialRow is a plain object (Object.prototype), prefer oldRow's prototype so
+ *      that a partial-update object does not silently discard the existing row's class.
+ *   3. If both are plain objects the result is also a plain object (no-op).
+ *
+ * Note: private class fields (#field syntax) cannot be preserved through a spread-style
+ * merge because the brand check is tied to the original instance. Rows that rely on
+ * private fields must either supply a fully-constructed instance as partialRow (rule 1
+ * above) or use `_action: 'replace'` rather than a plain-object partial update.
+ * @param {GridRowModel} oldRow The row currently stored in the lookup.
+ * @param {GridRowModelUpdate} partialRow The update to merge into it.
+ * @returns {GridRowModel} The merged row.
+ */
+export declare const mergeRowUpdate: (oldRow: GridRowModel, partialRow: GridRowModelUpdate) => GridRowModel;
+/**
+ * Warns when a replace demotes a class instance to a plain object, which happens when the
+ * replacement was built with a spread instead of being passed as-is.
+ * Dev-only, does nothing in production.
+ * @param {GridRowModel | undefined} oldRow The row being replaced, if any.
+ * @param {GridRowModel} replacement The row provided in a `{ _action: 'replace', row }` update.
+ */
+export declare const warnIfReplaceLosesPrototype: (oldRow: GridRowModel | undefined, replacement: GridRowModel) => void;
 export declare const updateCacheWithNewRows: ({
   previousCache,
   getRowId,
@@ -51,10 +85,10 @@ export declare const updateCacheWithNewRows: ({
 }: {
   previousCache: GridRowsInternalCache;
   getRowId: DataGridProcessedProps['getRowId'];
-  updates: GridRowModelUpdate[];
+  updates: Array<GridRowModelUpdate | GridRowModelReplace>;
   groupKeys?: string[];
 }) => GridRowsInternalCache;
 export declare const minimalContentHeight = "var(--DataGrid-overlayHeight, calc(var(--height) * 2))";
-export declare function computeRowsUpdates(apiRef: RefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];
+export declare function computeRowsUpdates(apiRef: RefObject<GridApiCommunity>, updates: Array<GridRowModelUpdate | GridRowModelReplace>, getRowId: DataGridProcessedProps['getRowId']): (GridRowModelReplace<GridValidRowModel> | GridRowModelUpdate)[];
 export declare const getValidRowHeight: (rowHeightProp: any, defaultRowHeight: number, warningMessage: string) => number;
 export declare const rowHeightWarning: string;