@mui/x-data-grid 9.12.0 → 9.14.0

package/hooks/features/rows/gridRowsUtils.mjs

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridRowNodeSelector } from "./gridRowsSelector.mjs";
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
@@ -159,6 +160,79 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, di
   }
   return validDescendants;
 };
+export const isReplaceUpdate = update =>
+// eslint-disable-next-line no-underscore-dangle
+update._action === 'replace';
+
+/**
+ * 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 const getReplaceRow = update => {
+  const {
+    row
+  } = update;
+  if (row == null) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Data Grid: A row update with \`_action: 'replace'\` was provided without a \`row\` property.
+Without it, the Data Grid does not know which object to store for that row.
+Provide the replacement object in the \`row\` property, for example \`updateRows([{ _action: 'replace', row }])\`.
+For more detail, see https://mui.com/x/react-data-grid/row-updates/.` : _formatErrorMessage(304));
+  }
+  return row;
+};
+
+/**
+ * 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 const mergeRowUpdate = (oldRow, partialRow) => {
+  const partialRowProto = Object.getPrototypeOf(partialRow);
+  const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
+  const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
+  const merged = Object.create(proto);
+  Object.assign(merged, oldRow, partialRow);
+  return merged;
+};
+
+/**
+ * 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 const warnIfReplaceLosesPrototype = (oldRow, replacement) => {
+  if (process.env.NODE_ENV === 'production' || !oldRow) {
+    return;
+  }
+  const replacementProto = Object.getPrototypeOf(replacement);
+  if (replacementProto !== Object.prototype && replacementProto !== null) {
+    return;
+  }
+  const oldRowProto = Object.getPrototypeOf(oldRow);
+  if (oldRowProto === Object.prototype || oldRowProto === null) {
+    return;
+  }
+
+  // The message must stay free of row-specific details: `warnOnce()` caches by message, so
+  // interpolating the id would log once per row and grow the cache with every update.
+  warnOnce(["MUI X Data Grid: A plain object was provided as the `row` of a `_action: 'replace'` update, but the row it replaces is a class instance.", "Building the replacement with a spread (`{ _action: 'replace', row: { ...row } }`) creates a plain object, dropping the prototype chain and the private fields that `_action: 'replace'` exists to preserve.", "Pass the instance itself instead, for example `{ _action: 'replace', row }`.", 'For more detail, see https://mui.com/x/react-data-grid/row-updates/.']);
+};
 export const updateCacheWithNewRows = ({
   previousCache,
   getRowId,
@@ -172,10 +246,28 @@ export const updateCacheWithNewRows = ({
   // Remove duplicate updates.
   // A server can batch updates, and send several updates for the same row in one fn call.
   const uniqueUpdates = new Map();
+  // Ids whose accumulated update is stored as the row instead of being merged into the
+  // existing one. The flag lives outside the row object so that it is never mutated.
+  const replaceIds = new Set();
   updates.forEach(update => {
-    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
-    if (uniqueUpdates.has(id)) {
-      uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
+    // A replace is provided as a `{ _action: 'replace', row }` envelope: the marker stays
+    // on the throwaway envelope and the inner row is used verbatim, so that the object
+    // provided by the caller is the one that ends up in the lookup.
+    const isReplace = isReplaceUpdate(update);
+    const row = isReplace ? getReplaceRow(update) : update;
+    const id = getRowIdFromRowModel(row, getRowId, 'A row was provided without id when calling updateRows():');
+    if (isReplace) {
+      // A replace resets whatever has been accumulated for that id.
+      uniqueUpdates.set(id, row);
+      replaceIds.add(id);
+    } else if (uniqueUpdates.has(id)) {
+      const accumulatedUpdate = uniqueUpdates.get(id);
+      if (process.env.NODE_ENV !== 'production' && replaceIds.has(id)) {
+        warnOnce(["MUI X Data Grid: A row was provided with `_action: 'replace'` but it is not the last update for that row in this batch.", 'The remaining updates are merged onto the replacement, so the row keeps its prototype but is neither the same object nor carries its `#private` fields, which a merge cannot copy.', 'Make the replace the last update for that row if `apiRef.current.getRow(id)` must return the object you passed in.', 'For more detail, see https://mui.com/x/react-data-grid/row-updates/.']);
+      }
+      // The merge keeps the accumulated entry's prototype and the id stays in `replaceIds`,
+      // so the result is still applied as a replace.
+      uniqueUpdates.set(id, mergeRowUpdate(accumulatedUpdate, update));
     } else {
       uniqueUpdates.set(id, update);
     }
@@ -227,6 +319,15 @@ export const updateCacheWithNewRows = ({
     }
     const oldRow = dataRowIdToModelLookup[id];
 
+    // Action === "replace"
+    // The bookkeeping is the same as for "modify" / "insert" below, only the way the row
+    // is stored differs: the object is stored as-is so that its prototype chain, private
+    // fields (#field) and reference identity are all preserved.
+    const isReplace = replaceIds.has(id);
+    if (isReplace) {
+      warnIfReplaceLosesPrototype(oldRow, partialRow);
+    }
+
     // Action === "modify"
     if (oldRow) {
       // If the data row has been removed since the last state update,
@@ -242,23 +343,7 @@ export const updateCacheWithNewRows = ({
       }
 
       // Update the data row lookups.
-      // 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 supply a fully-constructed instance as partialRow (rule 1 above)
-      // rather than a plain-object partial update.
-      const partialRowProto = Object.getPrototypeOf(partialRow);
-      const isPartialRowPlain = partialRowProto === Object.prototype || partialRowProto === null;
-      const proto = isPartialRowPlain ? Object.getPrototypeOf(oldRow) : partialRowProto;
-      const merged = Object.create(proto);
-      Object.assign(merged, oldRow, partialRow);
-      dataRowIdToModelLookup[id] = merged;
+      dataRowIdToModelLookup[id] = isReplace ? partialRow : mergeRowUpdate(oldRow, partialRow);
       return;
     }
 
@@ -299,16 +384,24 @@ export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--he
 export function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {
-    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+    const isReplace = isReplaceUpdate(update);
+    const row = isReplace ? getReplaceRow(update) : update;
+    const id = getRowIdFromRowModel(row, getRowId, 'A row was provided without id when calling updateRows():');
     const rowNode = gridRowNodeSelector(apiRef, id);
     if (rowNode?.type === 'pinnedRow') {
       // @ts-ignore because otherwise `release:build` doesn't work
       const pinnedRowsCache = apiRef.current.caches.pinnedRows;
       const prevModel = pinnedRowsCache.idLookup[id];
       if (prevModel) {
-        pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
+        if (isReplace) {
+          warnIfReplaceLosesPrototype(prevModel, row);
+          pinnedRowsCache.idLookup[id] = row;
+        } else {
+          pinnedRowsCache.idLookup[id] = mergeRowUpdate(prevModel, update);
+        }
       }
     } else {
+      // The envelope is passed through untouched, `updateCacheWithNewRows` unwraps it.
       nonPinnedRowsUpdates.push(update);
     }
   });

package/hooks/features/rows/useGridRows.js

@@ -57,6 +57,7 @@ const useGridRows = (apiRef, props, configuration) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
+  const lastGetRowId = React.useRef(props.getRowId);
   const timeout = (0, _useTimeout.useTimeout)();
 
   // Get overridable methods from configuration
@@ -450,8 +451,16 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock this f
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
+    let isGetRowIdPropUpdated = false;
+    if (props.getRowId !== lastGetRowId.current) {
+      isGetRowIdPropUpdated = true;
+      lastGetRowId.current = props.getRowId;
+    }
     const currentRows = props.dataSource ? (0, _gridRowsSelector.gridDataRowsSelector)(apiRef) : props.rows;
-    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
+    // Data source rows live in the state, not in props: there is never a new set to apply, and
+    // `gridDataRowsSelector` returns a new array each time so the identity check never holds.
+    // Only a new `getRowId` needs a rebuild, to re-key them.
+    const areNewRowsAlreadyInState = props.dataSource ? !isGetRowIdPropUpdated : apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
     const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
     const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
 

package/hooks/features/rows/useGridRows.mjs

@@ -49,6 +49,7 @@ export const useGridRows = (apiRef, props, configuration) => {
   const logger = useGridLogger(apiRef, 'useGridRows');
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
+  const lastGetRowId = React.useRef(props.getRowId);
   const timeout = useTimeout();
 
   // Get overridable methods from configuration
@@ -442,8 +443,16 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock this f
       isRowCountPropUpdated = true;
       lastRowCount.current = props.rowCount;
     }
+    let isGetRowIdPropUpdated = false;
+    if (props.getRowId !== lastGetRowId.current) {
+      isGetRowIdPropUpdated = true;
+      lastGetRowId.current = props.getRowId;
+    }
     const currentRows = props.dataSource ? gridDataRowsSelector(apiRef) : props.rows;
-    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
+    // Data source rows live in the state, not in props: there is never a new set to apply, and
+    // `gridDataRowsSelector` returns a new array each time so the identity check never holds.
+    // Only a new `getRowId` needs a rebuild, to re-key them.
+    const areNewRowsAlreadyInState = props.dataSource ? !isGetRowIdPropUpdated : apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
     const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
     const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
 

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.12.0
+ * @mui/x-data-grid v9.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v9.12.0
+ * @mui/x-data-grid v9.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.mts

@@ -67,7 +67,7 @@ export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRo
 export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.mjs";
 export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.mjs";
 export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.mjs";
-export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hooks/features/rows/gridRowsUtils.mjs";
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue, isReplaceUpdate, getReplaceRow, warnIfReplaceLosesPrototype } from "../hooks/features/rows/gridRowsUtils.mjs";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.mjs";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.mjs";
@@ -110,7 +110,7 @@ export { NotRendered } from "../utils/assert.mjs";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.mjs";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
 export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isSelectAllShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
 export * from "../utils/utils.mjs";
 export { exportAs } from "../utils/exportAs.mjs";
 export * from "../utils/getPublicApiRef.mjs";

package/internals/index.d.ts

@@ -67,7 +67,7 @@ export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRo
 export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";
 export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
-export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hooks/features/rows/gridRowsUtils.js";
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue, isReplaceUpdate, getReplaceRow, warnIfReplaceLosesPrototype } from "../hooks/features/rows/gridRowsUtils.js";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
@@ -110,7 +110,7 @@ export { NotRendered } from "../utils/assert.js";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.js";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.js";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isSelectAllShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.js";
 export * from "../utils/utils.js";
 export { exportAs } from "../utils/exportAs.js";
 export * from "../utils/getPublicApiRef.js";

package/internals/index.js

@@ -80,6 +80,9 @@ var _exportNames = {
   getRowIdFromRowModel: true,
   GRID_ID_AUTOGENERATED: true,
   getRowValue: true,
+  isReplaceUpdate: true,
+  getReplaceRow: true,
+  warnIfReplaceLosesPrototype: true,
   useGridRowsMeta: true,
   rowsMetaStateInitializer: true,
   useGridParamsApi: true,
@@ -131,6 +134,7 @@ var _exportNames = {
   isNavigationKey: true,
   isPasteShortcut: true,
   isCopyShortcut: true,
+  isSelectAllShortcut: true,
   isUndoShortcut: true,
   isRedoShortcut: true,
   isFillDownShortcut: true,
@@ -389,6 +393,12 @@ Object.defineProperty(exports, "getGridFilter", {
     return _GridFilterPanel.getGridFilter;
   }
 });
+Object.defineProperty(exports, "getReplaceRow", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.getReplaceRow;
+  }
+});
 Object.defineProperty(exports, "getRowIdFromRowModel", {
   enumerable: true,
   get: function () {
@@ -581,6 +591,18 @@ Object.defineProperty(exports, "isRedoShortcut", {
     return _keyboardUtils.isRedoShortcut;
   }
 });
+Object.defineProperty(exports, "isReplaceUpdate", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.isReplaceUpdate;
+  }
+});
+Object.defineProperty(exports, "isSelectAllShortcut", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.isSelectAllShortcut;
+  }
+});
 Object.defineProperty(exports, "isSingleSelectColDef", {
   enumerable: true,
   get: function () {
@@ -971,6 +993,12 @@ Object.defineProperty(exports, "vars", {
     return _cssVariables.vars;
   }
 });
+Object.defineProperty(exports, "warnIfReplaceLosesPrototype", {
+  enumerable: true,
+  get: function () {
+    return _gridRowsUtils.warnIfReplaceLosesPrototype;
+  }
+});
 var _gridStringColDef = require("../colDef/gridStringColDef");
 var _gridColumnTypesRegistry = require("../colDef/gridColumnTypesRegistry");
 var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");

package/internals/index.mjs

@@ -54,7 +54,7 @@ export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreP
 export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.mjs";
 export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.mjs";
 export { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.mjs";
-export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hooks/features/rows/gridRowsUtils.mjs";
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue, isReplaceUpdate, getReplaceRow, warnIfReplaceLosesPrototype } from "../hooks/features/rows/gridRowsUtils.mjs";
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.mjs";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.mjs";
@@ -88,7 +88,7 @@ export { NotRendered } from "../utils/assert.mjs";
 export { createSelector, createRootSelector, createSelectorMemoized } from "../utils/createSelector.mjs";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.mjs";
 export { findParentElementFromClassName, getActiveElement, getGridCellElement, isEventTargetInPortal } from "../utils/domUtils.mjs";
-export { isNavigationKey, isPasteShortcut, isCopyShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut, isSelectAllShortcut, isUndoShortcut, isRedoShortcut, isFillDownShortcut, isFillRightShortcut } from "../utils/keyboardUtils.mjs";
 export * from "../utils/utils.mjs";
 export { exportAs } from "../utils/exportAs.mjs";
 export * from "../utils/getPublicApiRef.mjs";

package/material/variables.d.mts

@@ -1,5 +1,10 @@
+import type { Theme } from '@mui/material/styles';
 import type { GridCSSVariablesInterface } from "../constants/cssVariables.mjs";
 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.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.