@mui/x-data-grid 9.12.0 → 9.14.0

package/CHANGELOG.md

@@ -1,5 +1,306 @@
 # Changelog
 
+## 9.14.0
+
+_Sep 17, 2026_
+
+We'd like to extend a big thank you to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hebrew (he-IL) locale to the Scheduler
+- 📅 Scheduler time grid now opens at 7 AM by default, configurable with the new `initialScrollTime` prop
+- 🗓️ Auto-scheduling engine for finish-to-start dependencies in the Premium Event Timeline
+- 🧩 New content slots for the Event Timeline event block and resource title cell
+- ♿️ Charts announce the visible zoom range to screen readers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@eterry1388, @jamesDin, @kareem-ib, @mateuseap, @mustafajw07
+
+The following team members contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.14.0`
+
+- [DataGrid] Do not crash on unmount when the document has no body (#23431) @eterry1388
+- [DataGrid] Fix `MissingRowIdError` on cell `mousedown`/`mouseup` after row removal (#23261) @kareem-ib
+- [DataGrid] Fix quick filter dropping a pending search on parser identity change (#23575) @michelengelen
+- [DataGrid] Keep overlays sticky in RTL mode (#23492) @arminmeh
+- [DataGrid] Prevent scroll area state update before mount (#23478) @michelengelen
+- [DataGrid] Remove `'menu'` role from the actions cell (#23437) @michelengelen
+
+#### `@mui/x-data-grid-pro@9.14.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.14.0`, plus:
+
+- [DataGridPro] Fix data integrity issue in nested server data (#23518) @MBilalShafi
+- [DataGridPro] Keep parent selection when lazily loaded children arrive (#23421) @michelengelen
+
+#### `@mui/x-data-grid-premium@9.14.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.14.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.14.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.14.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.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.14.0`
+
+- [charts] Announce the visible zoom range to screen readers (#23371) @JCQuintas
+- [charts] Fix Premium chart zoom props and `apiRef` forwarding (#23590) @bernardobelchior
+
+#### `@mui/x-charts-pro@9.14.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.14.0`.
+
+#### `@mui/x-charts-premium@9.14.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.14.0`, plus:
+
+- [charts-premium] Add the Excel data extraction layer (#23569) @JCQuintas
+- [charts-premium] Forward `apiRef` on `RadialBarChart` and `RadialLineChart` (#23625) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.14.0`
+
+- [tree view] Optimize lazy loading store writes for nested children (#23489) @noraleonte
+- [tree view] Prune stale children when replacing an item's children (#23598) @JCQuintas
+
+#### `@mui/x-tree-view-pro@9.14.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.14.0`.
+
+### Scheduler
+
+#### Breaking changes
+
+- The `dataSource` prop has been removed from the Community Event Calendar components:
+  `EventCalendar`, `StandaloneDayView`, `StandaloneWeekView`, `StandaloneMonthView`,
+  `StandaloneAgendaView`, `StandaloneCompactDayView`, `StandaloneCompactThreeDayView` and
+  `StandaloneCompactWeekView`.
+
+  Lazy loading has always been Premium-only, and the prop never had any effect on these
+  components: it left the calendar in a permanent loading state. To load events through a data
+  source, use `EventCalendarPremium` (or the Premium standalone views) and `EventTimelinePremium`,
+  where `dataSource` is unchanged.
+
+  ```diff
+  -import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+  +import { EventCalendarPremium } from '@mui/x-scheduler-premium/event-calendar-premium';
+
+  -<EventCalendar dataSource={dataSource} />
+  +<EventCalendarPremium dataSource={dataSource} />
+  ```
+
+#### `@mui/x-scheduler@9.0.0-beta.12`
+
+- [l10n] Add Hebrew (he-IL) locale (#23577) @jamesDin
+- [scheduler] Add content slots for the Event Timeline event block and resource title cell (#23557) @rita-codes
+- [scheduler] Fix `onPreferencesChange` never being called on `EventCalendar` (#23568) @rita-codes
+- [scheduler] Fix flaky timeline observer absorb (#23523) @JCQuintas
+- [scheduler] Open the time grid at 7 AM by default and add `initialScrollTime` (#23594) @rita-codes
+- [scheduler] Pin sibling scheduler packages to exact versions (#23574) @rita-codes
+- [scheduler] Read form initialization settings without subscriptions (#23614) @flaviendelangle
+- [scheduler] Remove `dataSource` from the Community components (#23483) @mustafajw07
+- [scheduler] Remove redundant recurrence subscriptions (#23610) @flaviendelangle
+- [scheduler] Remove unused more-events popover count (#23619) @flaviendelangle
+- [scheduler] Remove unused refs (#23616) @flaviendelangle
+- [scheduler] Reuse precomputed timeline duration (#23620) @flaviendelangle
+- [scheduler] Reuse recurrence option labels (#23609) @flaviendelangle
+- [scheduler] Reuse recurrence presets for form drafts (#23615) @flaviendelangle
+- [scheduler] Simplify month-view overflow counting (#23617) @flaviendelangle
+- [scheduler] Use form store state to guard submissions (#23613) @flaviendelangle
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.12` [![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.12`, plus:
+
+- [scheduler-premium] Dependencies - Arrows and terminals for SS, FF and SF (#23524) @rita-codes
+- [scheduler-premium] Dependencies - Auto-scheduling engine (FS) (#23439) @rita-codes
+
+### Docs
+
+- [DataGrid][docs] Fix "Apply filters on demand" demo (#23602) @mateuseap
+- [docs] Add recipe for getting the tree view's root DOM element via `ref` (#22941) @michelengelen
+- [docs][pickers] Mention `Moment.js` maintenance mode (#23601) @mateuseap
+
+### Core
+
+- [code-infra] Gate the `DataGridScrollRestoration` screenshot on the horizontal restore (#23527) @JCQuintas
+- [code-infra] Let the `NoColumnsOverlay` demo settle before screenshotting (#23529) @JCQuintas
+- [code-infra] Pin the only-allow version in the preinstall hook (#23551) @Janpot
+- [code-infra] Remove disabled Discord release announcement workflow (#23554) @Janpot
+- [code-infra] Trial: Claude CI flake-fix caller (#23556) @Janpot
+
+### Miscellaneous
+
+- [chat] Add feedback form to the docs (#23403) @hasdfa
+- [ci] Grant actions: read to the flake-fix caller (#23560) @Janpot
+- [ci] Update flake-fix caller to mui-public#1849 (#23571) @Janpot
+
+## 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/GridScrollArea.js

@@ -27,6 +27,7 @@ var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
 var _createSelector = require("../utils/createSelector");
 var _gridRowsMetaSelector = require("../hooks/features/rows/gridRowsMetaSelector");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -89,15 +90,27 @@ const offsetSelector = (0, _createSelector.createSelector)(_gridDimensionsSelect
   // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
+
+// The `columnReorder` state is only initialized by the Pro package,
+// so it is read defensively here.
+const gridColumnReorderDragColSelector = (0, _createSelector.createRootSelector)(state => state.columnReorder?.dragCol);
+
+// The drag direction is derived from the reorder state instead of the drag events.
+// An event handler subscribed during render can fire for a render pass that never mounts.
+// A `setState` call from such a handler triggers a React warning.
+// See https://github.com/mui/mui-x/issues/23469.
+const gridDragDirectionSelector = (0, _createSelector.createSelector)(gridColumnReorderDragColSelector, _gridRowReorderSelector.gridIsRowDragActiveSelector, (dragCol, isRowDragActive) => {
+  if (dragCol) {
+    return 'horizontal';
+  }
+  if (isRowDragActive) {
+    return 'vertical';
+  }
+  return 'none';
+});
 function GridScrollAreaWrapper(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const [dragDirection, setDragDirection] = React.useState('none');
-
-  // Listen for both column and row drag events
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
-  (0, _useGridEvent.useGridEvent)(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  const dragDirection = (0, _useGridSelector.useGridSelector)(apiRef, gridDragDirectionSelector);
   if (dragDirection === 'none') {
     return null;
   }

package/components/GridScrollArea.mjs

@@ -18,8 +18,9 @@ import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/
 import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.mjs";
 import { useTimeout } from "../hooks/utils/useTimeout.mjs";
 import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.mjs";
-import { createSelector } from "../utils/createSelector.mjs";
+import { createRootSelector, createSelector } from "../utils/createSelector.mjs";
 import { gridRowsMetaSelector } from "../hooks/features/rows/gridRowsMetaSelector.mjs";
+import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;
@@ -82,15 +83,27 @@ const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direc
   // For vertical scroll areas, we don't need horizontal offset
   return 0;
 });
+
+// The `columnReorder` state is only initialized by the Pro package,
+// so it is read defensively here.
+const gridColumnReorderDragColSelector = createRootSelector(state => state.columnReorder?.dragCol);
+
+// The drag direction is derived from the reorder state instead of the drag events.
+// An event handler subscribed during render can fire for a render pass that never mounts.
+// A `setState` call from such a handler triggers a React warning.
+// See https://github.com/mui/mui-x/issues/23469.
+const gridDragDirectionSelector = createSelector(gridColumnReorderDragColSelector, gridIsRowDragActiveSelector, (dragCol, isRowDragActive) => {
+  if (dragCol) {
+    return 'horizontal';
+  }
+  if (isRowDragActive) {
+    return 'vertical';
+  }
+  return 'none';
+});
 function GridScrollAreaWrapper(props) {
   const apiRef = useGridApiContext();
-  const [dragDirection, setDragDirection] = React.useState('none');
-
-  // Listen for both column and row drag events
-  useGridEvent(apiRef, 'columnHeaderDragStart', () => setDragDirection('horizontal'));
-  useGridEvent(apiRef, 'columnHeaderDragEnd', () => setDragDirection('none'));
-  useGridEvent(apiRef, 'rowDragStart', () => setDragDirection('vertical'));
-  useGridEvent(apiRef, 'rowDragEnd', () => setDragDirection('none'));
+  const dragDirection = useGridSelector(apiRef, gridDragDirectionSelector);
   if (dragDirection === 'none') {
     return null;
   }