@mui/x-data-grid 9.12.0 → 9.13.0

package/material/variables.d.ts

@@ -1,5 +1,10 @@
+import type { Theme } from '@mui/material/styles';
 import type { GridCSSVariablesInterface } from "../constants/cssVariables.js";
 export declare function useMaterialCSSVariables(): {
   id: string;
   variables: GridCSSVariablesInterface;
-};
+};
+export declare function getBackgroundBase(theme: Theme): string;
+export declare function getFontBody(theme: Theme): any;
+export declare function getSpacingUnit(theme: Theme): any;
+export declare function getBorderColor(theme: Theme): string;

package/material/variables.js

@@ -4,6 +4,10 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getBackgroundBase = getBackgroundBase;
+exports.getBorderColor = getBorderColor;
+exports.getFontBody = getFontBody;
+exports.getSpacingUnit = getSpacingUnit;
 exports.useMaterialCSSVariables = useMaterialCSSVariables;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
@@ -25,19 +29,19 @@ function transformTheme(t) {
   const borderColor = getBorderColor(t);
   const dataGridPalette = (t.vars || t).palette.DataGrid;
   const paperColor = (t.vars || t).palette.background.paper;
-  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
+  const backgroundBase = getBackgroundBase(t);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
   const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
   const backgroundOverlay = t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
   const selectedColor = (t.vars || t).palette.primary.main;
   const radius = getRadius(t);
-  const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
+  const fontBody = getFontBody(t);
   const fontSmall = t.vars?.font?.caption ?? formatFont(t.typography.caption);
   const fontLarge = t.vars?.font?.body1 ?? formatFont(t.typography.body1);
   const k = _cssVariables.vars.keys;
   return {
-    [k.spacingUnit]: t.vars ? t.vars.spacing ?? t.spacing(1) : t.spacing(1),
+    [k.spacingUnit]: getSpacingUnit(t),
     [k.colors.border.base]: borderColor,
     [k.colors.background.base]: backgroundBase,
     [k.colors.background.overlay]: backgroundOverlay,
@@ -85,6 +89,16 @@ function getRadius(theme) {
   }
   return typeof theme.shape.borderRadius === 'number' ? `${theme.shape.borderRadius}px` : theme.shape.borderRadius;
 }
+function getBackgroundBase(theme) {
+  const paperColor = (theme.vars || theme).palette.background.paper;
+  return (theme.vars || theme).palette.DataGrid?.bg ?? (theme.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
+}
+function getFontBody(theme) {
+  return theme.vars?.font?.body2 ?? formatFont(theme.typography.body2);
+}
+function getSpacingUnit(theme) {
+  return theme.vars ? theme.vars.spacing ?? theme.spacing(1) : theme.spacing(1);
+}
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;

package/material/variables.mjs

@@ -18,19 +18,19 @@ function transformTheme(t) {
   const borderColor = getBorderColor(t);
   const dataGridPalette = (t.vars || t).palette.DataGrid;
   const paperColor = (t.vars || t).palette.background.paper;
-  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
+  const backgroundBase = getBackgroundBase(t);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
   const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
   const backgroundOverlay = t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
   const selectedColor = (t.vars || t).palette.primary.main;
   const radius = getRadius(t);
-  const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
+  const fontBody = getFontBody(t);
   const fontSmall = t.vars?.font?.caption ?? formatFont(t.typography.caption);
   const fontLarge = t.vars?.font?.body1 ?? formatFont(t.typography.body1);
   const k = vars.keys;
   return {
-    [k.spacingUnit]: t.vars ? t.vars.spacing ?? t.spacing(1) : t.spacing(1),
+    [k.spacingUnit]: getSpacingUnit(t),
     [k.colors.border.base]: borderColor,
     [k.colors.background.base]: backgroundBase,
     [k.colors.background.overlay]: backgroundOverlay,
@@ -78,7 +78,17 @@ function getRadius(theme) {
   }
   return typeof theme.shape.borderRadius === 'number' ? `${theme.shape.borderRadius}px` : theme.shape.borderRadius;
 }
-function getBorderColor(theme) {
+export function getBackgroundBase(theme) {
+  const paperColor = (theme.vars || theme).palette.background.paper;
+  return (theme.vars || theme).palette.DataGrid?.bg ?? (theme.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
+}
+export function getFontBody(theme) {
+  return theme.vars?.font?.body2 ?? formatFont(theme.typography.body2);
+}
+export function getSpacingUnit(theme) {
+  return theme.vars ? theme.vars.spacing ?? theme.spacing(1) : theme.spacing(1);
+}
+export function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
   }

package/models/api/gridRowApi.d.mts

@@ -1,4 +1,4 @@
-import type { GridRowModel, GridRowId, GridRowModelUpdate, GridValidRowModel, GridTreeNode } from "../gridRows.mjs";
+import type { GridRowModel, GridRowId, GridRowModelUpdate, GridRowModelReplace, GridValidRowModel, GridTreeNode } from "../gridRows.mjs";
 export type RowReorderDropPosition = 'above' | 'below' | 'inside';
 export type RowReorderDragDirection = 'up' | 'down';
 export interface GridRowGroupChildrenGetterParams {
@@ -58,10 +58,10 @@ export interface GridRowApi {
    */
   setRows: (rows: GridRowModel[]) => void;
   /**
-   * Allows to update, insert and delete rows.
-   * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+   * Allows to update, insert, replace and delete rows.
+   * @param {Array<GridRowModelUpdate | GridRowModelReplace>} updates An array of rows with an `action` specifying what to do.
    */
-  updateRows: (updates: GridRowModelUpdate[]) => void;
+  updateRows: (updates: Array<GridRowModelUpdate | GridRowModelReplace>) => void;
   /**
    * Gets the row data with a given id.
    * @param {GridRowId} id The id of the row.
@@ -139,11 +139,11 @@ export interface GridRowProApi {
 }
 export interface GridRowProPrivateApi {
   /**
-   * Allows to update, insert and delete rows at a specific nested level.
-   * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+   * Allows to update, insert, replace and delete rows at a specific nested level.
+   * @param {Array<GridRowModelUpdate | GridRowModelReplace>} updates An array of rows with an `action` specifying what to do.
    * @param {string[]} nestedLevel The nested level of the rows to update, it represents the path to the row in the tree based on `node.groupingKey`.
    */
-  updateNestedRows: (updates: GridRowModelUpdate[], nestedLevel?: string[]) => void;
+  updateNestedRows: (updates: Array<GridRowModelUpdate | GridRowModelReplace>, nestedLevel?: string[]) => void;
 }
 export interface GridRowSpanningPrivateApi {
   /**

package/models/api/gridRowApi.d.ts

@@ -1,4 +1,4 @@
-import type { GridRowModel, GridRowId, GridRowModelUpdate, GridValidRowModel, GridTreeNode } from "../gridRows.js";
+import type { GridRowModel, GridRowId, GridRowModelUpdate, GridRowModelReplace, GridValidRowModel, GridTreeNode } from "../gridRows.js";
 export type RowReorderDropPosition = 'above' | 'below' | 'inside';
 export type RowReorderDragDirection = 'up' | 'down';
 export interface GridRowGroupChildrenGetterParams {
@@ -58,10 +58,10 @@ export interface GridRowApi {
    */
   setRows: (rows: GridRowModel[]) => void;
   /**
-   * Allows to update, insert and delete rows.
-   * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+   * Allows to update, insert, replace and delete rows.
+   * @param {Array<GridRowModelUpdate | GridRowModelReplace>} updates An array of rows with an `action` specifying what to do.
    */
-  updateRows: (updates: GridRowModelUpdate[]) => void;
+  updateRows: (updates: Array<GridRowModelUpdate | GridRowModelReplace>) => void;
   /**
    * Gets the row data with a given id.
    * @param {GridRowId} id The id of the row.
@@ -139,11 +139,11 @@ export interface GridRowProApi {
 }
 export interface GridRowProPrivateApi {
   /**
-   * Allows to update, insert and delete rows at a specific nested level.
-   * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+   * Allows to update, insert, replace and delete rows at a specific nested level.
+   * @param {Array<GridRowModelUpdate | GridRowModelReplace>} updates An array of rows with an `action` specifying what to do.
    * @param {string[]} nestedLevel The nested level of the rows to update, it represents the path to the row in the tree based on `node.groupingKey`.
    */
-  updateNestedRows: (updates: GridRowModelUpdate[], nestedLevel?: string[]) => void;
+  updateNestedRows: (updates: Array<GridRowModelUpdate | GridRowModelReplace>, nestedLevel?: string[]) => void;
 }
 export interface GridRowSpanningPrivateApi {
   /**

package/models/gridDataSource.d.mts

@@ -64,6 +64,9 @@ export interface GridDataSource {
   getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
   /**
    * This method will be called when the user updates a row.
+   * Resolve with the updated row to merge it into the existing one, or with a
+   * `{ _action: 'replace', row }` update ([[GridRowModelReplace]]) to store `row` as the new row
+   * without merging, which preserves its prototype chain, its `#private` fields and its identity.
    * @param {GridUpdateRowParams} params The parameters required to update the row.
    * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
    */

package/models/gridDataSource.d.ts

@@ -64,6 +64,9 @@ export interface GridDataSource {
   getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
   /**
    * This method will be called when the user updates a row.
+   * Resolve with the updated row to merge it into the existing one, or with a
+   * `{ _action: 'replace', row }` update ([[GridRowModelReplace]]) to store `row` as the new row
+   * without merging, which preserves its prototype chain, its `#private` fields and its identity.
    * @param {GridUpdateRowParams} params The parameters required to update the row.
    * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache.
    */

package/models/gridRows.d.mts

@@ -7,9 +7,36 @@ export type GridRowsProp<R extends GridValidRowModel = GridValidRowModel> = Read
  * The key value object representing the data of a row.
  */
 export type GridRowModel<R extends GridValidRowModel = GridValidRowModel> = R;
+/**
+ * @deprecated Use `GridRowModelUpdate` or `GridRowModelReplace` instead.
+ */
 export type GridUpdateAction = 'delete';
 export interface GridRowModelUpdate extends GridRowModel {
-  _action?: GridUpdateAction;
+  /**
+   * - `'delete'` removes the row.
+   * - `undefined` (default) performs a shallow, `Object.assign`-style partial merge into
+   *   the existing row, which produces a new object.
+   *
+   * To store an object as the row without merging, see [[GridRowModelReplace]].
+   */
+  _action?: 'delete';
+}
+/**
+ * A row update that stores `row` as-is instead of merging it into the existing row.
+ * Use this when the row is a class instance (e.g. one with `#private` fields) whose
+ * prototype chain and object identity must be preserved across the update:
+ * `apiRef.current.getRow(id)` then returns the very object provided in `row`.
+ * Any field missing from `row` is removed from the stored row, because a replace is
+ * never a merge.
+ * It can be passed to `updateRows()` or returned from `processRowUpdate()`.
+ */
+export interface GridRowModelReplace<R extends GridValidRowModel = GridValidRowModel> {
+  _action: 'replace';
+  /**
+   * The object stored as the new row, verbatim. Pass the instance itself — spreading it
+   * (`{ ...row }`) creates a plain object and defeats the purpose.
+   */
+  row: R;
 }
 /**
  * The grid rows total height and row positions.

package/models/gridRows.d.ts

@@ -7,9 +7,36 @@ export type GridRowsProp<R extends GridValidRowModel = GridValidRowModel> = Read
  * The key value object representing the data of a row.
  */
 export type GridRowModel<R extends GridValidRowModel = GridValidRowModel> = R;
+/**
+ * @deprecated Use `GridRowModelUpdate` or `GridRowModelReplace` instead.
+ */
 export type GridUpdateAction = 'delete';
 export interface GridRowModelUpdate extends GridRowModel {
-  _action?: GridUpdateAction;
+  /**
+   * - `'delete'` removes the row.
+   * - `undefined` (default) performs a shallow, `Object.assign`-style partial merge into
+   *   the existing row, which produces a new object.
+   *
+   * To store an object as the row without merging, see [[GridRowModelReplace]].
+   */
+  _action?: 'delete';
+}
+/**
+ * A row update that stores `row` as-is instead of merging it into the existing row.
+ * Use this when the row is a class instance (e.g. one with `#private` fields) whose
+ * prototype chain and object identity must be preserved across the update:
+ * `apiRef.current.getRow(id)` then returns the very object provided in `row`.
+ * Any field missing from `row` is removed from the stored row, because a replace is
+ * never a merge.
+ * It can be passed to `updateRows()` or returned from `processRowUpdate()`.
+ */
+export interface GridRowModelReplace<R extends GridValidRowModel = GridValidRowModel> {
+  _action: 'replace';
+  /**
+   * The object stored as the new row, verbatim. Pass the instance itself — spreading it
+   * (`{ ...row }`) creates a plain object and defeats the purpose.
+   */
+  row: R;
 }
 /**
  * The grid rows total height and row positions.

package/models/props/DataGridProps.d.mts

@@ -8,7 +8,7 @@ import type { GridFeatureMode } from "../gridFeatureMode.mjs";
 import type { Logger } from "../logger.mjs";
 import type { GridSortDirection, GridSortModel } from "../gridSortModel.mjs";
 import type { GridSlotsComponent } from "../gridSlotsComponent.mjs";
-import type { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from "../gridRows.mjs";
+import type { GridRowId, GridRowIdGetter, GridRowModelReplace, GridRowsProp, GridValidRowModel } from "../gridRows.mjs";
 import type { GridEventListener } from "../events/index.mjs";
 import type { GridCallbackDetails, GridLocaleText } from "../api/index.mjs";
 import type { GridApiCommunity } from "../api/gridApiCommunity.mjs";
@@ -816,11 +816,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
    * @param {{ rowId: GridRowId }} params Additional parameters.
-   * @returns {Promise<R> | R} The final values to update the row.
+   * @returns {Promise<R | GridRowModelReplace<R>> | R | GridRowModelReplace<R>} The final values to update the row, or a `{ _action: 'replace', row }` update to store `row` as the new row without merging.
    */
   processRowUpdate?: (newRow: R, oldRow: R, params: {
     rowId: GridRowId;
-  }) => Promise<R> | R;
+  }) => Promise<R | GridRowModelReplace<R>> | R | GridRowModelReplace<R>;
   /**
    * Callback called when `processRowUpdate()` throws an error or rejects.
    * @param {any} error The error thrown.

package/models/props/DataGridProps.d.ts

@@ -8,7 +8,7 @@ import type { GridFeatureMode } from "../gridFeatureMode.js";
 import type { Logger } from "../logger.js";
 import type { GridSortDirection, GridSortModel } from "../gridSortModel.js";
 import type { GridSlotsComponent } from "../gridSlotsComponent.js";
-import type { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from "../gridRows.js";
+import type { GridRowId, GridRowIdGetter, GridRowModelReplace, GridRowsProp, GridValidRowModel } from "../gridRows.js";
 import type { GridEventListener } from "../events/index.js";
 import type { GridCallbackDetails, GridLocaleText } from "../api/index.js";
 import type { GridApiCommunity } from "../api/gridApiCommunity.js";
@@ -816,11 +816,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
    * @param {{ rowId: GridRowId }} params Additional parameters.
-   * @returns {Promise<R> | R} The final values to update the row.
+   * @returns {Promise<R | GridRowModelReplace<R>> | R | GridRowModelReplace<R>} The final values to update the row, or a `{ _action: 'replace', row }` update to store `row` as the new row without merging.
    */
   processRowUpdate?: (newRow: R, oldRow: R, params: {
     rowId: GridRowId;
-  }) => Promise<R> | R;
+  }) => Promise<R | GridRowModelReplace<R>> | R | GridRowModelReplace<R>;
   /**
    * Callback called when `processRowUpdate()` throws an error or rejects.
    * @param {any} error The error thrown.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "9.12.0",
+  "version": "9.13.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -38,13 +38,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@base-ui/utils": "^0.3.1",
-    "@mui/utils": "^9.3.0",
+    "@base-ui/utils": "^0.3.2",
+    "@mui/utils": "^9.4.0",
+    "@mui/x-internals": "^9.13.0",
+    "@mui/x-virtualizer": "0.7.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "^9.12.0",
-    "@mui/x-virtualizer": "0.7.0"
+    "use-sync-external-store": "^1.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/keyboardUtils.d.mts

@@ -5,6 +5,7 @@ export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEve
 export declare const isHideMenuKey: (key: React.KeyboardEvent['key']) => key is "Escape" | "Tab";
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
+export declare function isSelectAllShortcut(event: React.KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
 export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
 export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.d.ts

@@ -5,6 +5,7 @@ export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEve
 export declare const isHideMenuKey: (key: React.KeyboardEvent['key']) => key is "Escape" | "Tab";
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
+export declare function isSelectAllShortcut(event: React.KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
 export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
 export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.js

@@ -10,6 +10,7 @@ exports.isNavigationKey = exports.isKeyboardEvent = exports.isHideMenuKey = void
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
 exports.isRedoShortcut = isRedoShortcut;
+exports.isSelectAllShortcut = isSelectAllShortcut;
 exports.isUndoShortcut = isUndoShortcut;
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ -44,6 +45,11 @@ function isPasteShortcut(event) {
 function isCopyShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey;
 }
+
+// Checks if the keyboard event corresponds to the select-all shortcut (CTRL+A or CMD+A) across different localization keyboards.
+function isSelectAllShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey;
+}
 function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }

package/utils/keyboardUtils.mjs

@@ -28,6 +28,11 @@ export function isPasteShortcut(event) {
 export function isCopyShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey;
 }
+
+// Checks if the keyboard event corresponds to the select-all shortcut (CTRL+A or CMD+A) across different localization keyboards.
+export function isSelectAllShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey;
+}
 export function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }