@mui/x-data-grid 9.12.0 → 9.13.0

package/CHANGELOG.md

@@ -1,5 +1,157 @@
 # Changelog
 
+## 9.13.0
+
+<!-- generated comparing v9.12.0..master -->
+
+_Sep 4, 2026_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦮 Improve keyboard navigation features of the Charts.
+- 🎨 Improved customization of the edit event dialog in the `EventCalendar`
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @jvskriubakken, @mustafajw07, @roychan1
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.13.0`
+
+- [DataGrid] Call `onValueChange` after `setEditCellValue` in edit cells (#23417) @michelengelen
+- [DataGrid] Add support for replacing rows instead of merging updates (#23323) @jvskriubakken
+- [DataGrid] Always render `rowHeader` in virtualized setups (#23386) @silviuaavram
+- [DataGrid] Export `ToolbarRoot` (#23322) @JCQuintas
+- [DataGrid] Fix `rowsPerPage` selector appearing when `autoPageSize` is enabled and `pageSize` is one of `pageSizeOptions` (#23401) @roychan1
+- [DataGrid] Fix row tree reset when a data source grid becomes visible (#23288) @JCQuintas
+
+#### `@mui/x-data-grid-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@9.13.0`, plus:
+
+- [DataGridPro] Remove rows deleted server-side on nested lazy loading revalidation (#23320) @JCQuintas
+- [DataGridPro] Stop `disableDebounce` from reaching the DOM in multi select filter (#23445) @JCQuintas
+
+#### `@mui/x-data-grid-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@9.13.0`, plus:
+
+- [DataGridPremium] Refine cell selection and speed up clipboard copy (#23473) @michelengelen
+- [DataGridPremium] Select all cells with Ctrl+A (#23415) @michelengelen
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.13.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@9.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.13.0`
+
+- [charts] Activate the focused axis with Enter/Space (#23219) @JCQuintas
+- [charts] Add keyboard zoom and pan (#23369) @JCQuintas
+- [charts] Fix line mark position under browser zoom in Safari (#23387) @noraleonte
+- [charts] Fix y axis tick labels shortened near the top of the chart (#23435) @JCQuintas
+- [charts] Focus the clicked item on radar charts (#23287) @JCQuintas
+- [charts] Stop text measurements leaking into each other (#23430) @JCQuintas
+
+#### `@mui/x-charts-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.13.0`.
+
+#### `@mui/x-charts-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.13.0`
+
+- [tree view] Add `loading` prop and customizable loading UI (#22251) @michelengelen
+- [tree view] Reduce selector bundle size (#23412) @flaviendelangle
+- [tree view] Remove dead UI from community component (#23487) @noraleonte
+- [tree view] Remove unused dependencies (#23488) @noraleonte
+- [tree view] Use `useId` for the default tree id (#23341) @Anexus5919
+
+#### `@mui/x-tree-view-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.13.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.11`
+
+- [scheduler] Absorb un-acted `ResizeObserver` deliveries after rendering the timeline (#23444) @rita-codes
+- [scheduler] Add `EventContextMenu` with Edit and Delete actions (#23379) @mustafajw07
+- [scheduler] Add aria-hidden to collapsed side panel and refactor landmark structure (#23425) @mustafajw07
+- [scheduler] Add the `eventDialogGeneralTab` slot (#23338) @rita-codes
+- [scheduler] Fix the un-awaited act warning in the event dialog slot test (#23446) @JCQuintas
+- [scheduler] Improve timeline event layout performance (#23364) @flaviendelangle
+- [scheduler] Keep `aria-expanded` present when ViewSwitcher and PreferencesMenu menus are closed (#23427) @mustafajw07
+- [scheduler] Make the event dialog General-tab building blocks public (#23398) @rita-codes
+- [scheduler] Migrate to the pragmatic-drag-and-drop v3 entry points (#23442) @rita-codes
+- [scheduler] Reduce selector bundle size (#23413) @flaviendelangle
+- [scheduler] Reuse processed events between updates (#23363) @flaviendelangle
+- [scheduler] Add `aria-expanded` and `aria-controls` to side panel toggle button (#23402) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-beta.11`, plus:
+
+- [scheduler-premium] Dependencies - Keep event drags working over the arrow hit-areas (#23441) @rita-codes
+- [scheduler-premium] Dependencies - Reject dependencies that would create a cycle (#23389) @rita-codes
+- [scheduler-premium] Key recurring `exDates` on their data-timezone day (#23467) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.13.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add synchronized tooltip and crosshair demo to charts (#23368) @JCQuintas
+- [docs] Add sticky headers recipe to `RichTreeView` customization (#22908) @michelengelen
+- [docs] Pin the visible date of the scheduler preferences demos (#23432) @rita-codes
+- [docs] Star-prefix bare :where() dark-mode selectors (#23419) @Janpot
+- [docs] Consolidate demo data into shared dataset files (#23496) @michelengelen
+
+### Core
+
+- [code-infra] Consume shared commands from code-infra orb (#23485) @brijeshb42
+- [code-infra] Move the shared spy helpers off Sinon (#23466) @JCQuintas
+- [code-infra] Point the support validator link at frontend-public (#23422) @Janpot
+- [code-infra] Reduce per-page memory in the browser test suite (#23424) @Janpot
+- [code-infra] Remove Sinon (#23476) @JCQuintas
+- [code-infra] Remove the explicit `styled-components` dependency (#23479) @LukasTy
+- [code-infra] Replace the mechanical sinon `spy()` usages with `vi.fn()` (#23443) @JCQuintas
+- [code-infra] Replace the sinon `spy(fn)` usages with `vi.fn(fn)` (#23460) @JCQuintas
+- [code-infra] Replace the sinon spy types with the Vitest ones (#23464) @JCQuintas
+- [code-infra] Replace the sinon spy-on-object calls with `vi.spyOn` (#23474) @JCQuintas
+- [code-infra] Replace the sinon stubs with Vitest mocks (#23472) @JCQuintas
+- [code-infra] Run TypeScript 7 alongside the TS6 JS API (#23471) @brijeshb42
+- [code-infra] Trim the shared browser test setup graph (#23426) @LukasTy
+- [code-infra] Update CircleCI orb (#23418) @JCQuintas
+- [code-infra] Use explicit vitest imports in test files (#23375) @michelengelen
+
+### Miscellaneous
+
+- [chat] Enforce top-level type imports (#23037) @Janpot
+- [chat] Fix global preload error from the `remend` import (#23263) @hasdfa
+- [ci] Add Claude PR review via mui-public reusable workflow (#23423) @Janpot
+- [telemetry] Fix get-context test leaking mock from sender test (#23447) @JCQuintas
+- [test] Fail the regression run when a webfont does not load (#23376) @LukasTy
+
 ## 9.12.0
 
 _Aug 21, 2026_

package/DataGrid/DataGrid.js

@@ -777,7 +777,7 @@ process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptype
    * @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: _propTypes.default.func,
   /**

package/DataGrid/DataGrid.mjs

@@ -770,7 +770,7 @@ process.env.NODE_ENV !== "production" ? DataGridRaw.propTypes /* remove-proptype
    * @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: PropTypes.func,
   /**

package/components/GridPagination.js

@@ -71,7 +71,7 @@ function GridPagination() {
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
-  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  const pageSizeOptions = !rootProps.autoPageSize && isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     as: rootProps.slots.basePagination,
     count: rowCount ?? -1,

package/components/GridPagination.mjs

@@ -64,7 +64,7 @@ function GridPagination() {
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
-  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  const pageSizeOptions = !rootProps.autoPageSize && isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     as: rootProps.slots.basePagination,
     count: rowCount ?? -1,

package/components/GridRow.d.mts

@@ -16,6 +16,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   columnsTotalWidth: number;
   firstColumnIndex: number;
   lastColumnIndex: number;
+  retainedColumnIndexes: number[];
   visibleColumns: GridStateColDef[];
   pinnedColumns: GridPinnedColumns;
   /**

package/components/GridRow.d.ts

@@ -16,6 +16,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   columnsTotalWidth: number;
   firstColumnIndex: number;
   lastColumnIndex: number;
+  retainedColumnIndexes: number[];
   visibleColumns: GridStateColDef[];
   pinnedColumns: GridPinnedColumns;
   /**

package/components/GridRow.js

@@ -39,7 +39,7 @@ var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "retainedColumnIndexes", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 const isRowReorderingEnabledSelector = (0, _createSelector.createSelector)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, {
   rowReordering,
   treeData
@@ -65,6 +65,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       columnsTotalWidth,
       firstColumnIndex,
       lastColumnIndex,
+      retainedColumnIndexes,
       focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
@@ -231,7 +232,16 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
+
+    // Virtual cells stay mounted for focus and accessibility relationships, but GridCell collapses
+    // them to zero size so they do not participate in the visible row layout.
+    const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     if (rowNode.type === 'skeletonRow') {
+      // Skeleton cells have no value to expose and don't support the collapsed style, so a virtual
+      // one would only add a full-width placeholder that shifts the rest of the row.
+      if (cellIsNotVisible) {
+        return null;
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
         type: column.type,
         width: width,
@@ -254,7 +264,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
-    const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
     const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.cell, (0, _extends2.default)({
@@ -284,9 +293,27 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, _constants.PinnedColumnPosition.RIGHT);
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
+
+  // Build the middle section in visual column order:
+  // 1. retained or focused virtual cells before the render context;
+  // 2. the cells inside the render context;
+  // 3. retained or focused virtual cells after the render context.
   const cells = [];
-  if (hasVirtualFocusCellLeft) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
+  const firstUnpinnedColumnIndex = pinnedColumns.left.length;
+  const lastUnpinnedColumnIndex = visibleColumns.length - pinnedColumns.right.length;
+
+  // Select retained columns before the render context. The unpinned bounds exclude retained
+  // columns already rendered by `leftCells` or `rightCells`.
+  const virtualColumnIndexesLeft = retainedColumnIndexes.filter(columnIndex => columnIndex >= firstUnpinnedColumnIndex && columnIndex < firstColumnIndex);
+
+  // The grid already retains a focused cell outside the render context. Add it to the same ordered
+  // list, unless the column is a retained row header and is therefore already present.
+  if (hasVirtualFocusCellLeft && !virtualColumnIndexesLeft.includes(focusedColumnIndex)) {
+    virtualColumnIndexesLeft.push(focusedColumnIndex);
+    virtualColumnIndexesLeft.sort((a, b) => a - b);
+  }
+  for (const columnIndex of virtualColumnIndexesLeft) {
+    cells.push(getCell(visibleColumns[columnIndex], columnIndex - pinnedColumns.left.length, columnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
@@ -296,8 +323,15 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
-  if (hasVirtualFocusCellRight) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
+
+  // Repeat the retention step for unpinned columns after the render context.
+  const virtualColumnIndexesRight = retainedColumnIndexes.filter(columnIndex => columnIndex >= lastColumnIndex && columnIndex < lastUnpinnedColumnIndex);
+  if (hasVirtualFocusCellRight && !virtualColumnIndexesRight.includes(focusedColumnIndex)) {
+    virtualColumnIndexesRight.push(focusedColumnIndex);
+    virtualColumnIndexesRight.sort((a, b) => a - b);
+  }
+  for (const columnIndex of virtualColumnIndexesRight) {
+    cells.push(getCell(visibleColumns[columnIndex], columnIndex - pinnedColumns.left.length, columnIndex, middleColumnsLength, _constants.PinnedColumnPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -358,6 +392,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes /* remove-proptypes */
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
   pinnedColumns: _propTypes.default.object.isRequired,
+  retainedColumnIndexes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
   row: _propTypes.default.object.isRequired,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,

package/components/GridRow.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "retainedColumnIndexes", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -58,6 +58,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       columnsTotalWidth,
       firstColumnIndex,
       lastColumnIndex,
+      retainedColumnIndexes,
       focusedColumnIndex,
       isFirstVisible,
       isLastVisible,
@@ -224,7 +225,16 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
+
+    // Virtual cells stay mounted for focus and accessibility relationships, but GridCell collapses
+    // them to zero size so they do not participate in the visible row layout.
+    const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     if (rowNode.type === 'skeletonRow') {
+      // Skeleton cells have no value to expose and don't support the collapsed style, so a virtual
+      // one would only add a full-width placeholder that shifts the rest of the row.
+      if (cellIsNotVisible) {
+        return null;
+      }
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
         width: width,
@@ -247,7 +257,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
-    const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection, rootProps.showCellVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
     const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
     return /*#__PURE__*/_jsx(slots.cell, _extends({
@@ -277,9 +286,27 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.right.length, PinnedColumnPosition.RIGHT);
   });
   const middleColumnsLength = visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
+
+  // Build the middle section in visual column order:
+  // 1. retained or focused virtual cells before the render context;
+  // 2. the cells inside the render context;
+  // 3. retained or focused virtual cells after the render context.
   const cells = [];
-  if (hasVirtualFocusCellLeft) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
+  const firstUnpinnedColumnIndex = pinnedColumns.left.length;
+  const lastUnpinnedColumnIndex = visibleColumns.length - pinnedColumns.right.length;
+
+  // Select retained columns before the render context. The unpinned bounds exclude retained
+  // columns already rendered by `leftCells` or `rightCells`.
+  const virtualColumnIndexesLeft = retainedColumnIndexes.filter(columnIndex => columnIndex >= firstUnpinnedColumnIndex && columnIndex < firstColumnIndex);
+
+  // The grid already retains a focused cell outside the render context. Add it to the same ordered
+  // list, unless the column is a retained row header and is therefore already present.
+  if (hasVirtualFocusCellLeft && !virtualColumnIndexesLeft.includes(focusedColumnIndex)) {
+    virtualColumnIndexesLeft.push(focusedColumnIndex);
+    virtualColumnIndexesLeft.sort((a, b) => a - b);
+  }
+  for (const columnIndex of virtualColumnIndexesLeft) {
+    cells.push(getCell(visibleColumns[columnIndex], columnIndex - pinnedColumns.left.length, columnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
   }
   for (let i = firstColumnIndex; i < lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
@@ -289,8 +316,15 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
-  if (hasVirtualFocusCellRight) {
-    cells.push(getCell(visibleColumns[focusedColumnIndex], focusedColumnIndex - pinnedColumns.left.length, focusedColumnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
+
+  // Repeat the retention step for unpinned columns after the render context.
+  const virtualColumnIndexesRight = retainedColumnIndexes.filter(columnIndex => columnIndex >= lastColumnIndex && columnIndex < lastUnpinnedColumnIndex);
+  if (hasVirtualFocusCellRight && !virtualColumnIndexesRight.includes(focusedColumnIndex)) {
+    virtualColumnIndexesRight.push(focusedColumnIndex);
+    virtualColumnIndexesRight.sort((a, b) => a - b);
+  }
+  for (const columnIndex of virtualColumnIndexesRight) {
+    cells.push(getCell(visibleColumns[columnIndex], columnIndex - pinnedColumns.left.length, columnIndex, middleColumnsLength, PinnedColumnPosition.VIRTUAL));
   }
   const eventHandlers = row ? {
     onClick: publishClick,
@@ -351,6 +385,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes /* remove-proptypes */
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   pinnedColumns: PropTypes.object.isRequired,
+  retainedColumnIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
   row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/components/cell/GridCell.js

@@ -101,14 +101,17 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   } = cellAggregationResult || {};
+  const stateTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, () => {
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+  });
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
     rowNode: rowNode,
-    tabIndex: (0, _useGridSelector.useGridSelector)(apiRef, () => {
-      const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
-      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
-    }),
+    // A cell kept mounted outside the render context is collapsed to zero size, so it must not
+    // become the grid's tab stop: tabbing in would move focus to something the user can't see.
+    tabIndex: isNotVisible ? -1 : stateTabIndex,
     hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
       const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
       return focus?.id === rowId && focus.field === field;

package/components/cell/GridCell.mjs

@@ -94,14 +94,17 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   } = cellAggregationResult || {};
+  const stateTabIndex = useGridSelector(apiRef, () => {
+    const cellTabIndex = gridTabIndexCellSelector(apiRef);
+    return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+  });
   const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
     colDef: column,
     cellMode,
     rowNode: rowNode,
-    tabIndex: useGridSelector(apiRef, () => {
-      const cellTabIndex = gridTabIndexCellSelector(apiRef);
-      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
-    }),
+    // A cell kept mounted outside the render context is collapsed to zero size, so it must not
+    // become the grid's tab stop: tabbing in would move focus to something the user can't see.
+    tabIndex: isNotVisible ? -1 : stateTabIndex,
     hasFocus: useGridSelector(apiRef, () => {
       const focus = gridFocusCellSelector(apiRef);
       return focus?.id === rowId && focus.field === field;

package/components/cell/GridEditBooleanCell.d.mts

@@ -5,7 +5,7 @@ export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
 }

package/components/cell/GridEditBooleanCell.d.ts

@@ -5,7 +5,7 @@ export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
 }

package/components/cell/GridEditBooleanCell.js

@@ -51,15 +51,15 @@ function GridEditBooleanCell(props) {
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
     setValueState(newValue);
     await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
   }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
@@ -126,7 +126,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes /* remove-
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditBooleanCell.mjs

@@ -43,15 +43,15 @@ function GridEditBooleanCell(props) {
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
     const newValue = event.target.checked;
-    if (onValueChange) {
-      await onValueChange(event, newValue);
-    }
     setValueState(newValue);
     await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
   }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
@@ -118,7 +118,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes /* remove-
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditDateCell.d.mts

@@ -6,7 +6,7 @@ export interface GridEditDateCellProps extends GridRenderEditCellParams {
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditDateCell.d.ts

@@ -6,7 +6,7 @@ export interface GridEditDateCellProps extends GridRenderEditCellParams {
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
   slotProps?: {

package/components/cell/GridEditDateCell.js

@@ -94,18 +94,18 @@ function GridEditDateCell(props) {
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     const newParsedDate = parseValueToDate(newFormattedDate);
-    if (onValueChange) {
-      await onValueChange(event, newParsedDate);
-    }
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes /* remove-pro
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: _propTypes.default.func,
   /**

package/components/cell/GridEditDateCell.mjs

@@ -86,18 +86,18 @@ function GridEditDateCell(props) {
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
     const newParsedDate = parseValueToDate(newFormattedDate);
-    if (onValueChange) {
-      await onValueChange(event, newParsedDate);
-    }
     setValueState({
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    apiRef.current.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
   }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
@@ -172,7 +172,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes /* remove-pro
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange: PropTypes.func,
   /**

package/components/cell/GridEditInputCell.d.mts

@@ -7,7 +7,7 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams {
    * Callback called when the value is changed by the user.
    * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
    * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
-   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   * @returns {Promise<void> | void} A promise to be awaited after `apiRef.current.setEditCellValue` is called
    */
   onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
   slotProps?: {