@mui/x-data-grid 9.13.0 → 9.14.0

package/CHANGELOG.md

@@ -1,5 +1,154 @@
 # 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 -->

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;
   }

package/components/base/GridOverlays.js

@@ -21,19 +21,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -70,7 +72,6 @@ function GridOverlayWrapper(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperRoot, (0, _extends2.default)({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapperInner, (0, _extends2.default)({
       className: classes.inner,
       style: {

package/components/base/GridOverlays.mjs

@@ -13,19 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right'
+  shouldForwardProp: prop => prop !== 'overlayType' && prop !== 'loadingOverlayVariant'
 })(({
   overlayType,
-  loadingOverlayVariant,
-  right
+  loadingOverlayVariant
 }) =>
 // Skeleton overlay should flow with the scroll container and not be sticky
 loadingOverlayVariant !== 'skeleton' ? {
   position: 'sticky',
   // To stay in place while scrolling
   top: 'var(--DataGrid-topContainerHeight)',
+  // Both 0-insets keep the overlay in the viewport in LTR and RTL alike. Sticky insets
+  // are independent constraints, and a width: 0 box satisfies both at once, so it
+  // clamps at whichever edge the scroll pushes it past.
   left: 0,
-  right: `${right}px`,
+  right: 0,
   width: 0,
   // To stay above the content instead of shifting it down
   height: 0,
@@ -62,7 +64,6 @@ export function GridOverlayWrapper(props) {
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, _extends({
     className: classes.root
   }, props, {
-    right: dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width,
     children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
       className: classes.inner,
       style: {

package/components/cell/GridActionsCell.js

@@ -20,6 +20,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _domUtils = require("../../utils/domUtils");
 var _GridActionsCellItem = require("./GridActionsCellItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "onMenuOpen", "onMenuClose", "children", "suppressChildrenValidation"];
@@ -140,7 +141,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || (0, _domUtils.isEventTargetInPortal)(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -170,55 +173,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: rootRef,
-    tabIndex: -1,
-    className: _gridClasses.gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: _gridClasses.gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      ref: rootRef,
+      tabIndex: -1,
+      className: _gridClasses.gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: _gridClasses.gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCell.mjs

@@ -13,6 +13,7 @@ import { gridClasses } from "../../constants/gridClasses.mjs";
 import { GridMenu } from "../menu/GridMenu.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { isEventTargetInPortal } from "../../utils/domUtils.mjs";
 import { GridActionsCellItem } from "./GridActionsCellItem.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
@@ -132,7 +133,9 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
     }
   };
   const handleRootKeyDown = event => {
-    if (numberOfButtons <= 1) {
+    // The menu renders in a portal, but its key events still bubble through the React tree.
+    // They must not move the roving focus between the buttons behind the open menu.
+    if (numberOfButtons <= 1 || isEventTargetInPortal(event)) {
       return;
     }
     const getNewIndex = (index, direction) => {
@@ -162,55 +165,55 @@ If this is intentional, you can suppress this warning by passing the \`suppressC
       setFocusedButtonIndex(newIndex);
     }
   };
-
-  // role="menu" requires at least one child element
-  const attributes = numberOfButtons > 0 ? {
-    role: 'menu',
-    onKeyDown: handleRootKeyDown
-  } : undefined;
-  return /*#__PURE__*/_jsxs("div", _extends({
-    ref: rootRef,
-    tabIndex: -1,
-    className: gridClasses.actionsCell
-  }, attributes, other, {
-    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-      key: index,
-      touchRippleRef: handleTouchRippleRef(index),
-      onClick: handleButtonClick(index, button.props.onClick),
-      tabIndex: focusedButtonIndex === index ? tabIndex : -1
-    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: buttonRef,
-      id: buttonId,
-      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? menuId : undefined,
-      role: "menuitem",
-      size: "small",
-      onClick: toggleMenu,
-      touchRippleRef: handleTouchRippleRef(buttonId),
-      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
-    }, rootProps.slotProps?.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
-        fontSize: "small"
-      })
-    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
-      open: open,
-      target: buttonRef.current,
-      position: position,
-      onClose: hideMenu,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
-        id: menuId,
-        className: gridClasses.menuList,
-        "aria-labelledby": buttonId,
-        autoFocusItem: true,
-        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
-          key: index,
-          closeMenu: hideMenu
-        }))
-      })
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // The wrapper carries no role on purpose: the buttons are plain buttons inside the
+    // `gridcell`. It only relays the key events bubbling from them.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", _extends({
+      ref: rootRef,
+      tabIndex: -1,
+      className: gridClasses.actionsCell,
+      onKeyDown: handleRootKeyDown
+    }, other, {
+      children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+        key: index,
+        touchRippleRef: handleTouchRippleRef(index),
+        onClick: handleButtonClick(index, button.props.onClick),
+        tabIndex: focusedButtonIndex === index ? tabIndex : -1
+      })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: buttonRef,
+        id: buttonId,
+        "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : undefined,
+        size: "small",
+        onClick: toggleMenu,
+        touchRippleRef: handleTouchRippleRef(buttonId),
+        tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
+          fontSize: "small"
+        })
+      })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+        open: open,
+        target: buttonRef.current,
+        position: position,
+        onClose: hideMenu,
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
+          id: menuId,
+          className: gridClasses.menuList,
+          "aria-labelledby": buttonId,
+          autoFocusItem: true,
+          children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+            key: index,
+            closeMenu: hideMenu
+          }))
+        })
+      })]
+    }))
+  );
 }
 process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/components/cell/GridActionsCellItem.js

@@ -30,7 +30,6 @@ const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwar
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
       size: "small",
-      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick

package/components/cell/GridActionsCellItem.mjs

@@ -23,7 +23,6 @@ const GridActionsCellItem = forwardRef((props, ref) => {
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
       size: "small",
-      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick

package/components/cell/GridCell.js

@@ -177,6 +177,10 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseUp) {
@@ -184,6 +188,10 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
   }, [apiRef, field, onMouseUp, rowId]);
   const publishMouseDown = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseDown) {

package/components/cell/GridCell.mjs

@@ -170,6 +170,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const publishMouseUp = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseUp) {
@@ -177,6 +181,10 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
   }, [apiRef, field, onMouseUp, rowId]);
   const publishMouseDown = React.useCallback(eventName => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
     const params = apiRef.current.getCellParams(rowId, field || '');
     apiRef.current.publishEvent(eventName, params, event);
     if (onMouseDown) {

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/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/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/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;
     }

package/hooks/features/dataSource/useGridDataSourceBase.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;
     }

package/hooks/features/rowSelection/useGridRowSelection.d.mts

@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'disableRowSelectionExcludeModel' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'filterMode' | 'classes' | 'keepNonExistentRowsSelected' | 'rowSelection' | 'rowSelectionPropagation' | 'signature'>) => void;
+export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'disableRowSelectionExcludeModel' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'filterMode' | 'classes' | 'keepNonExistentRowsSelected' | 'rowSelection' | 'rowSelectionPropagation' | 'dataSource' | 'signature'>) => void;

package/hooks/features/rowSelection/useGridRowSelection.d.ts

@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'disableRowSelectionExcludeModel' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'filterMode' | 'classes' | 'keepNonExistentRowsSelected' | 'rowSelection' | 'rowSelectionPropagation' | 'signature'>) => void;
+export declare const useGridRowSelection: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'disableRowSelectionExcludeModel' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'filterMode' | 'classes' | 'keepNonExistentRowsSelected' | 'rowSelection' | 'rowSelectionPropagation' | 'dataSource' | 'signature'>) => void;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -17,6 +17,7 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
@@ -127,6 +128,10 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     if (props.rowSelection === false) {
       return false;
     }
+    const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, id);
+    if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow' || rowNode?.type === 'skeletonRow') {
+      return false;
+    }
 
     // If `keepNonExistentRowsSelected` is true, we might run in a case where row selectability is checked for a row that does not exist.
     // Since that row was previously selected (otherwise it would not be checked at this point), we return true.
@@ -136,10 +141,6 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
-    const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, id);
-    if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [apiRef, props.rowSelection, props.keepNonExistentRowsSelected, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => (0, _gridRowSelectionSelector.gridRowSelectionIdsSelector)(apiRef), [apiRef]);
@@ -315,6 +316,7 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
    * EVENTS
    */
   const isFirstRender = React.useRef(true);
+  const previousRowsLookupRef = React.useRef(null);
   const removeOutdatedSelection = React.useCallback(() => {
     if (isFirstRender.current) {
       return;
@@ -323,6 +325,11 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
     const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
+    const previousRowsLookup = previousRowsLookupRef.current;
+    previousRowsLookupRef.current = rowsLookup;
+    // Read the depth at call time. The event that runs this callback can fire in the same
+    // tick as the state update that changes the depth, before the render-scope value updates.
+    const isNested = (0, _gridRowsSelector.gridRowMaximumTreeDepthSelector)(apiRef) > 1;
     const isNonExistent = id => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
@@ -350,6 +357,32 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       return node.children.some(childId => isOrHasSelectableDescendant(childId));
     };
     let hasChanged = false;
+
+    // Rows can load after their parent was selected (server-side lazy loading).
+    // They arrive unselected, so the parent re-derivation below would drop the parent.
+    // With `rowSelectionPropagation.descendants`, the rows that appeared since the last run
+    // inherit the selection state of their closest previously known ancestor instead.
+    if (isNested && props.rowSelectionPropagation?.descendants && currentSelection.type === 'include' && currentSelection.ids.size > 0 && previousRowsLookup !== null && previousRowsLookup !== rowsLookup) {
+      const isNewRow = id => rowsLookup[id] !== undefined && previousRowsLookup[id] === undefined;
+      const inheritsSelection = id => {
+        const parentId = rowTree[id]?.parent;
+        if (parentId == null || parentId === _gridRowsUtils.GRID_ROOT_GROUP_ID) {
+          return false;
+        }
+        if (selectionManager.has(parentId)) {
+          return true;
+        }
+        // A row that appeared together with its parent reads the state further up the chain.
+        return isNewRow(parentId) ? inheritsSelection(parentId) : false;
+      };
+      const dataRowIds = (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef);
+      for (const id of dataRowIds) {
+        if (isNewRow(id) && filteredRowsLookup[id] !== false && inheritsSelection(id) && apiRef.current.isRowSelectable(id)) {
+          selectionManager.select(id);
+          hasChanged = true;
+        }
+      }
+    }
     for (const id of currentSelection.ids) {
       if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
@@ -382,9 +415,10 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
     // not empty, we need to re-run scanning of the tree to propagate the selection changes
     // Example: A parent whose de-selected children are filtered out should now be selected
-    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && (newSelectionModel.ids.size > 0 ||
-    // In case of exclude selection, newSelectionModel.ids.size === 0 means all rows are selected
-    newSelectionModel.type === 'exclude');
+    // With a data source, an `exclude` model is left alone: the grid only knows the loaded
+    // subset of the rows, so rewriting the model into an `include` of the known rows would
+    // drop the "rows that load later are selected too" semantics of the select-all state.
+    const shouldReapplyPropagation = isNested && props.rowSelectionPropagation?.parents && (newSelectionModel.type === 'exclude' ? props.dataSource === undefined : newSelectionModel.ids.size > 0);
     if (hasChanged || shouldReapplyPropagation) {
       if (shouldReapplyPropagation) {
         if (newSelectionModel.type === 'exclude') {
@@ -398,13 +432,20 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
           }
           apiRef.current.selectRows(selectedRowIds, true, true);
         } else {
-          apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
+          // `getPropagatedRowSelectionModel` reads the sibling selection state from the model
+          // built above, so the rows selected during this run count for the parent derivation.
+          // `selectRows` would read the state from before this run instead.
+          const propagatedModel = apiRef.current.getPropagatedRowSelectionModel(newSelectionModel);
+          const isSelectionValid = propagatedModel.ids.size < 2 || canHaveMultipleSelection;
+          if (isSelectionValid && (propagatedModel.type !== currentSelection.type || propagatedModel.ids.size !== currentSelection.ids.size || !Array.from(propagatedModel.ids).every(id => currentSelection.ids.has(id)))) {
+            apiRef.current.setRowSelectionModel(propagatedModel, 'multipleRowsSelection');
+          }
         }
       } else {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, getRowsToBeSelected]);
+  }, [apiRef, props.rowSelectionPropagation?.parents, props.rowSelectionPropagation?.descendants, props.keepNonExistentRowsSelected, props.filterMode, props.dataSource, canHaveMultipleSelection, getRowsToBeSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 

package/hooks/features/rowSelection/useGridRowSelection.mjs

@@ -9,7 +9,8 @@ import { useGridEvent } from "../../utils/useGridEvent.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 import { useGridLogger } from "../../utils/useGridLogger.mjs";
 import { useGridSelector } from "../../utils/useGridSelector.mjs";
-import { gridRowsLookupSelector, gridRowMaximumTreeDepthSelector, gridRowNodeSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.mjs";
+import { gridDataRowIdsSelector, gridRowsLookupSelector, gridRowMaximumTreeDepthSelector, gridRowNodeSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.mjs";
+import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.mjs";
 import { gridRowSelectionManagerSelector, gridRowSelectionStateSelector, gridRowSelectionCountSelector, gridRowSelectionIdsSelector } from "./gridRowSelectionSelector.mjs";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.mjs";
 import { gridExpandedSortedRowIdsSelector, gridFilteredRowsLookupSelector, gridFilterModelSelector, gridQuickFilterValuesSelector } from "../filter/gridFilterSelector.mjs";
@@ -119,6 +120,10 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     if (props.rowSelection === false) {
       return false;
     }
+    const rowNode = gridRowNodeSelector(apiRef, id);
+    if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow' || rowNode?.type === 'skeletonRow') {
+      return false;
+    }
 
     // If `keepNonExistentRowsSelected` is true, we might run in a case where row selectability is checked for a row that does not exist.
     // Since that row was previously selected (otherwise it would not be checked at this point), we return true.
@@ -128,10 +133,6 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
-    const rowNode = gridRowNodeSelector(apiRef, id);
-    if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [apiRef, props.rowSelection, props.keepNonExistentRowsSelected, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => gridRowSelectionIdsSelector(apiRef), [apiRef]);
@@ -307,6 +308,7 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
    * EVENTS
    */
   const isFirstRender = React.useRef(true);
+  const previousRowsLookupRef = React.useRef(null);
   const removeOutdatedSelection = React.useCallback(() => {
     if (isFirstRender.current) {
       return;
@@ -315,6 +317,11 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const rowTree = gridRowTreeSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+    const previousRowsLookup = previousRowsLookupRef.current;
+    previousRowsLookupRef.current = rowsLookup;
+    // Read the depth at call time. The event that runs this callback can fire in the same
+    // tick as the state update that changes the depth, before the render-scope value updates.
+    const isNested = gridRowMaximumTreeDepthSelector(apiRef) > 1;
     const isNonExistent = id => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
@@ -342,6 +349,32 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
       return node.children.some(childId => isOrHasSelectableDescendant(childId));
     };
     let hasChanged = false;
+
+    // Rows can load after their parent was selected (server-side lazy loading).
+    // They arrive unselected, so the parent re-derivation below would drop the parent.
+    // With `rowSelectionPropagation.descendants`, the rows that appeared since the last run
+    // inherit the selection state of their closest previously known ancestor instead.
+    if (isNested && props.rowSelectionPropagation?.descendants && currentSelection.type === 'include' && currentSelection.ids.size > 0 && previousRowsLookup !== null && previousRowsLookup !== rowsLookup) {
+      const isNewRow = id => rowsLookup[id] !== undefined && previousRowsLookup[id] === undefined;
+      const inheritsSelection = id => {
+        const parentId = rowTree[id]?.parent;
+        if (parentId == null || parentId === GRID_ROOT_GROUP_ID) {
+          return false;
+        }
+        if (selectionManager.has(parentId)) {
+          return true;
+        }
+        // A row that appeared together with its parent reads the state further up the chain.
+        return isNewRow(parentId) ? inheritsSelection(parentId) : false;
+      };
+      const dataRowIds = gridDataRowIdsSelector(apiRef);
+      for (const id of dataRowIds) {
+        if (isNewRow(id) && filteredRowsLookup[id] !== false && inheritsSelection(id) && apiRef.current.isRowSelectable(id)) {
+          selectionManager.select(id);
+          hasChanged = true;
+        }
+      }
+    }
     for (const id of currentSelection.ids) {
       if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
@@ -374,9 +407,10 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
     // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
     // not empty, we need to re-run scanning of the tree to propagate the selection changes
     // Example: A parent whose de-selected children are filtered out should now be selected
-    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && (newSelectionModel.ids.size > 0 ||
-    // In case of exclude selection, newSelectionModel.ids.size === 0 means all rows are selected
-    newSelectionModel.type === 'exclude');
+    // With a data source, an `exclude` model is left alone: the grid only knows the loaded
+    // subset of the rows, so rewriting the model into an `include` of the known rows would
+    // drop the "rows that load later are selected too" semantics of the select-all state.
+    const shouldReapplyPropagation = isNested && props.rowSelectionPropagation?.parents && (newSelectionModel.type === 'exclude' ? props.dataSource === undefined : newSelectionModel.ids.size > 0);
     if (hasChanged || shouldReapplyPropagation) {
       if (shouldReapplyPropagation) {
         if (newSelectionModel.type === 'exclude') {
@@ -390,13 +424,20 @@ You need to upgrade to DataGridPro or DataGridPremium component to unlock multip
           }
           apiRef.current.selectRows(selectedRowIds, true, true);
         } else {
-          apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
+          // `getPropagatedRowSelectionModel` reads the sibling selection state from the model
+          // built above, so the rows selected during this run count for the parent derivation.
+          // `selectRows` would read the state from before this run instead.
+          const propagatedModel = apiRef.current.getPropagatedRowSelectionModel(newSelectionModel);
+          const isSelectionValid = propagatedModel.ids.size < 2 || canHaveMultipleSelection;
+          if (isSelectionValid && (propagatedModel.type !== currentSelection.type || propagatedModel.ids.size !== currentSelection.ids.size || !Array.from(propagatedModel.ids).every(id => currentSelection.ids.has(id)))) {
+            apiRef.current.setRowSelectionModel(propagatedModel, 'multipleRowsSelection');
+          }
         }
       } else {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, getRowsToBeSelected]);
+  }, [apiRef, props.rowSelectionPropagation?.parents, props.rowSelectionPropagation?.descendants, props.keepNonExistentRowsSelected, props.filterMode, props.dataSource, canHaveMultipleSelection, getRowsToBeSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 

package/hooks/features/rowSelection/utils.js

@@ -67,6 +67,11 @@ const checkboxPropsSelector = exports.checkboxPropsSelector = (0, _createSelecto
       return;
     }
     const node = rowTree[itemToTraverseId];
+    // Skeleton rows are placeholders for rows that are not loaded yet.
+    // They have no selection state, so they do not affect the parent checkbox state.
+    if (node?.type === 'skeletonRow') {
+      return;
+    }
     if (node?.type === 'group') {
       node.children.forEach(traverseDescendants);
     }

package/hooks/features/rowSelection/utils.mjs

@@ -60,6 +60,11 @@ export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelecto
       return;
     }
     const node = rowTree[itemToTraverseId];
+    // Skeleton rows are placeholders for rows that are not loaded yet.
+    // They have no selection state, so they do not affect the parent checkbox state.
+    if (node?.type === 'skeletonRow') {
+      return;
+    }
     if (node?.type === 'group') {
       node.children.forEach(traverseDescendants);
     }

package/index.js

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

package/index.mjs

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

package/package.json

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