@mui/x-data-grid 9.12.0 → 9.14.0

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/quickFilter/QuickFilter.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
@@ -108,11 +109,15 @@ function QuickFilter(props) {
       previousExpandedValue.current = expandedValue;
     }
   }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => (0, _debounce.default)(newValue => {
+
+  // Identity-stable, so that a re-render with a new `parser` does not recreate the debounced
+  // function below and clear a pending commit. See https://github.com/mui/mui-x/issues/23572.
+  const commitQuickFilterValue = (0, _useEventCallback.default)(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, debounceMs), [apiRef, debounceMs, parser]);
+  });
+  const setQuickFilterValueDebounced = React.useMemo(() => (0, _debounce.default)(commitQuickFilterValue, debounceMs), [commitQuickFilterValue, debounceMs]);
   React.useEffect(() => setQuickFilterValueDebounced.clear, [setQuickFilterValueDebounced]);
   const handleValueChange = React.useCallback(event => {
     const newValue = event.target.value;

package/components/quickFilter/QuickFilter.mjs

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '@mui/utils/debounce';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import useId from '@mui/utils/useId';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
@@ -101,11 +102,15 @@ function QuickFilter(props) {
       previousExpandedValue.current = expandedValue;
     }
   }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => debounce(newValue => {
+
+  // Identity-stable, so that a re-render with a new `parser` does not recreate the debounced
+  // function below and clear a pending commit. See https://github.com/mui/mui-x/issues/23572.
+  const commitQuickFilterValue = useEventCallback(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, debounceMs), [apiRef, debounceMs, parser]);
+  });
+  const setQuickFilterValueDebounced = React.useMemo(() => debounce(commitQuickFilterValue, debounceMs), [commitQuickFilterValue, debounceMs]);
   React.useEffect(() => setQuickFilterValueDebounced.clear, [setQuickFilterValueDebounced]);
   const handleValueChange = React.useCallback(event => {
     const newValue = event.target.value;

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/components/virtualization/GridVirtualScroller.js

@@ -93,7 +93,10 @@ const Viewport = (0, _styles.styled)('div', {
     display: 'inline-block',
     position: 'sticky',
     top: 0,
+    // The viewport spans the scrollport exactly, so both 0-insets resolve to the same
+    // offset and it stays pinned in LTR and RTL alike.
     left: 0,
+    right: 0,
     overflow: 'hidden'
   }
 });

package/components/virtualization/GridVirtualScroller.mjs

@@ -85,7 +85,10 @@ const Viewport = styled('div', {
     display: 'inline-block',
     position: 'sticky',
     top: 0,
+    // The viewport spans the scrollport exactly, so both 0-insets resolve to the same
+    // offset and it stays pinned in LTR and RTL alike.
     left: 0,
+    right: 0,
     overflow: 'hidden'
   }
 });

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/columnResize/useGridColumnResize.js

@@ -464,7 +464,10 @@ const useGridColumnResize = (apiRef, props) => {
   });
   const stopListening = React.useCallback(() => {
     const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
-    doc.body.style.removeProperty('cursor');
+    // Also runs as this effect's unmount cleanup, which can execute against a
+    // document that no longer has a body. The cursor is only ever set while a
+    // resize is in progress, so there is nothing to clear in that case.
+    doc.body?.style.removeProperty('cursor');
     doc.removeEventListener('mousemove', handleResizeMouseMove);
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -456,7 +456,10 @@ export const useGridColumnResize = (apiRef, props) => {
   });
   const stopListening = React.useCallback(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
-    doc.body.style.removeProperty('cursor');
+    // Also runs as this effect's unmount cleanup, which can execute against a
+    // document that no longer has a body. The cursor is only ever set while a
+    // resize is in progress, so there is nothing to clear in that case.
+    doc.body?.style.removeProperty('cursor');
     doc.removeEventListener('mousemove', handleResizeMouseMove);
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);

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

@@ -83,7 +83,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     // The selector prunes the incomplete items, but a caller passing its own `filterModel`
     // overrides it, so prune again on the merged params.
     fetchParams.filterModel = (0, _gridFilterUtils.removeIncompleteFilterItems)(fetchParams.filterModel, (0, _columns.gridColumnLookupSelector)(apiRef));
-    if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+    if (parentId != null && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
       options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
       return;
     }
@@ -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";
@@ -76,7 +76,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
     // The selector prunes the incomplete items, but a caller passing its own `filterModel`
     // overrides it, so prune again on the merged params.
     fetchParams.filterModel = removeIncompleteFilterItems(fetchParams.filterModel, gridColumnLookupSelector(apiRef));
-    if (parentId && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+    if (parentId != null && parentId !== GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
       options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
       return;
     }
@@ -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;
 }