@mui/x-data-grid-premium 9.3.0 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,201 @@
 # Changelog
 
+## 9.4.0
+
+<!-- generated comparing v9.3.0..master -->
+
+_Jun 4, 2026_
+
+We'd like to extend a big thank you to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Scheduler is now in Beta shipping with Timeline vitualization and lazy loading
+- 📆 Implement Event Timeline virtualization (#22339)
+- 🫧 Introduce bubble charts (#22537)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@imxv, @mixelburg, @mustafajw07
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @joserodolfofreitas, @LukasTy, @MBilalShafi, @michelengelen, @mj12albert, @noraleonte, @oliviertassinari, @rita-codes, @romgrk, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.4.0`
+
+- [DataGrid] Fix `avg` aggregation when the average is zero (#22652) @mj12albert
+- [DataGrid] Inherit icon `fontSize` from `baseIconButton` size (#22187) @imxv
+- [DataGrid] Fix `noRowsOverlay` flicker between `dataSource` re-fetches (#22465) @LukasTy
+
+#### `@mui/x-data-grid-pro@9.4.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.4.0`.
+
+#### `@mui/x-data-grid-premium@9.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+> This release includes a version bump of the `@mui/x-internal-exceljs-fork` package to address the vulnerable dependencies.
+> The following CVEs are fixed:
+>
+> - <https://github.com/advisories/GHSA-ph9p-34f9-6g65>
+> - <https://github.com/isaacs/minimatch/security/advisories/GHSA-23c5-xmqv-rm74>
+> - <https://github.com/advisories/GHSA-w5hq-g745-h8pq>
+>
+> To make this security update possible, we bumped the `node` version requirement from `>=14.0.0` to `>=14.17.0`.
+> [Node.js 14.17.0](https://nodejs.org/en/blog/release/v14.17.0) was released in May 2021, so we consider it safe to bump the requirement without causing issues for our users.
+
+Same changes as in `@mui/x-data-grid-pro@9.4.0`, plus:
+
+- [DataGridPremium] Nested Lazy Loading (#21043) @MBilalShafi
+- [DataGridPremium] Update exceljs fork (#22658) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.4.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.4.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.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.4.0`
+
+- [charts] Add functionality to hide elements during chart export (#22525) @sai6855
+- [charts] Add option to show marks only on the first/last values (#22645) @alexfauquette
+- [charts] Add text customization section and demo for axis labels (#22597) @sai6855
+- [charts] Allow axes to scale according to the visible series only (#22566) @alexfauquette
+- [charts] Correctly handle different identifiers for each series (#22556) @sai6855
+- [charts] Fix inverted Y axis zoom/pan on ordinal scales (#22654) @JCQuintas
+- [charts] Introduce bubble charts (#22537) @alexfauquette
+- [charts] Let scatter chart tooltip ignore hidden series (#22614) @alexfauquette
+- [charts] Make `'sqrt'` size mapping the default (#22683) @alexfauquette
+- [charts] Remove unused proptypes (#22618) @alexfauquette
+- [charts] Support module augmentation for slots (#22519) @sai6855
+- [charts] Support multiple marker size in `findClosestPoint` (#22622) @alexfauquette
+- [charts] Upgrade bezier-easing to v3 and use it for line chart hit-detection (#22608) @sai6855
+- [charts] Use `useLayoutEffect` with `ResizeObserver` (#22646) @JCQuintas
+
+#### `@mui/x-charts-pro@9.4.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.4.0`, plus:
+
+- [charts-pro] Auto-select range button matching current zoom (#22137) @JCQuintas
+- [charts-pro] Support range values in `initialZoom` (#22563) @JCQuintas
+
+#### `@mui/x-charts-premium@9.4.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.4.0`, plus:
+
+- [charts-premium] Support range-bar series in WebGL bar renderer (#22607) @JCQuintas
+- [charts-premium] Fix `onAxisClick` for radial bar and lines (#22522) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.4.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.4.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.4.0`.
+
+### Scheduler
+
+#### Breaking changes
+
+The theme `styleOverrides` slots for the skeleton and the error container were
+renamed and unified. The CSS utility class names (for example
+`.MuiEventCalendar-eventSkeleton`) are **not** affected — only
+`theme.components.*` overrides need updating.
+
+**Event skeleton**
+
+| Before                                  | After                          |
+| --------------------------------------- | ------------------------------ |
+| `MuiEventCalendar` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
+| `MuiEventTimeline` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
+
+**Error container**
+
+| Before                                                        | After                                   |
+| ------------------------------------------------------------- | --------------------------------------- |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorContainer` | `MuiEventErrorContainer` slot `Root`    |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorAlert`     | `MuiEventErrorContainer` slot `Alert`   |
+| `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorMessage`   | `MuiEventErrorContainer` slot `Message` |
+
+If you customized these through the theme, update the component name and slot
+names accordingly:
+
+```diff
+ components: {
+-  MuiEventCalendar: {
++  MuiEventSkeleton: {
+     styleOverrides: {
+-      EventSkeleton: { /* ... */ },
++      Root: { /* ... */ },
+     },
+    },
+  },
+ }
+```
+
+#### `@mui/x-scheduler@9.0.0-beta.0`
+
+- [scheduler] Add a prop to control whether the resource of an event can be cleared (#22464) @rita-codes
+- [scheduler] Add week number labels to agenda, day and week views (#22594) @mustafajw07
+- [scheduler] Add `weekStartsOn` preference and update date functions to support custom week start (#22426) @mustafajw07
+- [scheduler] Export premium version of the standalone views (#22621) @flaviendelangle
+- [scheduler] Implement timeline virtualization (#22339) @romgrk
+- [scheduler] Split scheduler overview (#22453) @joserodolfofreitas
+- [scheduler] Unify `EventSkeleton` and `ErrorContainer` between `EventCalendar` and `EventTimeline` (#22676) @noraleonte
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.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-scheduler@9.0.0-beta.0`.
+
+### Docs
+
+- [docs] Add a performance docs page for charts (#22656) @alexfauquette
+- [docs] Add real dataset for maps documentation (#22599) @alexfauquette
+- [docs] Add spacing between selects on charts overview demo (#22589) @bernardobelchior
+- [docs] Reorganize existing chat docs navigation (#22478) @hasdfa
+- [docs] Switch to visionscarto's world atlas dataset (#22669) @cherniavskii
+- [docs] Update TreeView `domstructure` docs and add demo (#22420) @mj12albert
+- [docs] Fix indexation of Scheduler (#22567) @oliviertassinari
+- [docs] Fix wide layout on event timeline lazy loading and Import title (#22604) @rita-codes
+- [docs] Derive class name owners for shared charts classes (#22674) @JCQuintas
+
+### Core
+
+- [code-infra] Drop unused and now-transitive deps from docs/package.json (#22549) @LukasTy
+- [code-infra] Refresh CI Node pins to 22.22.3 (#22598) @LukasTy
+- [code-infra] Skip empty product sections in changelog (#22541) @rita-codes
+- [code-infra] Stabilize DataGridScrollRestoration visual regression test (#22553) @Janpot
+- [internal] Add license to the `x-data-grid-generator` (#22240) @arminmeh
+- [internal] Express default value for resource_class (#22569) @oliviertassinari
+- [internal] Fix use of ellipsis (#21852) @oliviertassinari
+- [internal] `useLayoutEffect` with `ResizeObserver` (#22428) @romgrk
+
+### Miscellaneous
+
+- [chat-headless] Add built-in chat adapters (#22479) @hasdfa
+- [chat-headless] Harden runtime model and message errors (#22480) @hasdfa
+- [core] Prepare for TypeScript 6 bump (#22551) @LukasTy
+- [core] Use CircleCI Gen2 resource classes (#22610) @LukasTy
+- [infra] Fix broken tag retrieval on `master` during release (#22174) @michelengelen
+- [infra] Group Base UI renovate updates (#22590) @LukasTy
+- [pnpm] Add security settings to pnpm-workspace.yaml (#22611) @Janpot
+- [release] Fix release PR scripts (#22680) @JCQuintas
+- [test] Add a Tree View regression test for lazy loading with getChildrenCount returning -1 (#22605) @mixelburg
+- [test] Disable LCD subpixel antialiasing in regression screenshots (#22602) @Janpot
+- [test] Fix flaky Data Grid Pro data source tree data tests (#22659) @LukasTy
+- [test] Remove stale form-submit TODO from e2e suite (#22564) @LukasTy
+- [x-license] Exclude test keys from the published npm package (#22647) @aemartos
+- [test] Fix flaky WebGL benchmark by polling for canvas content (#22535) @JCQuintas
+
 ## 9.3.0
 
 _May 21, 2026_

package/DataGridPremium/DataGridPremium.js

@@ -51,8 +51,8 @@ const configuration = {
   }
 };
 const packageInfo = {
-  releaseDate: "MTc3OTMyMTYwMDAwMA==",
-  version: "9.3.0",
+  releaseDate: "MTc4MDUzMTIwMDAwMA==",
+  version: "9.4.0",
   name: 'x-data-grid-premium'
 };
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.Watermark, {

package/DataGridPremium/DataGridPremium.mjs

@@ -44,8 +44,8 @@ const configuration = {
   }
 };
 const packageInfo = {
-  releaseDate: "MTc3OTMyMTYwMDAwMA==",
-  version: "9.3.0",
+  releaseDate: "MTc4MDUzMTIwMDAwMA==",
+  version: "9.4.0",
   name: 'x-data-grid-premium'
 };
 const watermark = /*#__PURE__*/_jsx(Watermark, {

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -135,6 +135,7 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridInfiniteLoader)(apiRef, props);
   (0, _internals.useGridLazyLoader)(apiRef, props);
   (0, _internals.useGridDataSourceLazyLoader)(apiRef, props);
+  (0, _internals.useGridDataSourceNestedLazyLoader)(apiRef, props);
   (0, _internals.useGridInfiniteLoadingIntersection)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);
   (0, _internals.useGridCsvExport)(apiRef, props);

package/DataGridPremium/useDataGridPremiumComponent.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer, useFirstRender } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridDataSourceNestedLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer, useFirstRender } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.mjs";
 // Premium-only features
@@ -127,6 +127,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridInfiniteLoader(apiRef, props);
   useGridLazyLoader(apiRef, props);
   useGridDataSourceLazyLoader(apiRef, props);
+  useGridDataSourceNestedLazyLoader(apiRef, props);
   useGridInfiniteLoadingIntersection(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -40,18 +40,24 @@ function GridGroupingCriteriaCellIcon(props) {
   const error = (0, _xDataGridPro.useGridSelector)(apiRef, _internals.gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
-      // always fetch/get from cache the children when the node is expanded
-      apiRef.current.dataSource.fetchRows(id);
+      if (!rootProps.lazyLoading) {
+        // always fetch/get from cache the children when the node is expanded
+        apiRef.current.dataSource.fetchRows(id);
+      } else {
+        apiRef.current.setRowChildrenExpansion(id, true);
+      }
     } else {
       // Collapse the node and remove child rows from the grid
       apiRef.current.setRowChildrenExpansion(id, false);
-      apiRef.current.removeChildrenRows(id);
+      if (!rootProps.lazyLoading) {
+        apiRef.current.removeChildrenRows(id);
+      }
     }
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
   const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
-  if (isDataLoading) {
+  if (isDataLoading && !rootProps.lazyLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.loadingContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCircularProgress, {

package/components/GridDataSourceGroupingCriteriaCell.mjs

@@ -32,18 +32,24 @@ function GridGroupingCriteriaCellIcon(props) {
   const error = useGridSelector(apiRef, gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
-      // always fetch/get from cache the children when the node is expanded
-      apiRef.current.dataSource.fetchRows(id);
+      if (!rootProps.lazyLoading) {
+        // always fetch/get from cache the children when the node is expanded
+        apiRef.current.dataSource.fetchRows(id);
+      } else {
+        apiRef.current.setRowChildrenExpansion(id, true);
+      }
     } else {
       // Collapse the node and remove child rows from the grid
       apiRef.current.setRowChildrenExpansion(id, false);
-      apiRef.current.removeChildrenRows(id);
+      if (!rootProps.lazyLoading) {
+        apiRef.current.removeChildrenRows(id);
+      }
     }
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation();
   };
   const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
-  if (isDataLoading) {
+  if (isDataLoading && !rootProps.lazyLoading) {
     return /*#__PURE__*/_jsx("div", {
       className: classes.loadingContainer,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseCircularProgress, {

package/hooks/features/aggregation/gridAggregationFunctions.js

@@ -24,9 +24,6 @@ const avgAgg = {
   apply: ({
     values
   }) => {
-    if (values.length === 0) {
-      return null;
-    }
     let sum = 0;
     let valuesCount = 0;
     for (let i = 0; i < values.length; i += 1) {
@@ -36,7 +33,7 @@ const avgAgg = {
         sum += value;
       }
     }
-    if (sum === 0) {
+    if (valuesCount === 0) {
       return null;
     }
     return sum / valuesCount;

package/hooks/features/aggregation/gridAggregationFunctions.mjs

@@ -18,9 +18,6 @@ const avgAgg = {
   apply: ({
     values
   }) => {
-    if (values.length === 0) {
-      return null;
-    }
     let sum = 0;
     let valuesCount = 0;
     for (let i = 0; i < values.length; i += 1) {
@@ -30,7 +27,7 @@ const avgAgg = {
         sum += value;
       }
     }
-    if (sum === 0) {
+    if (valuesCount === 0) {
       return null;
     }
     return sum / valuesCount;

package/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -25,14 +25,34 @@ const options = {
     getKey: getKeyPremium
   }
 };
+const getStrategies = (props, groupingModelSize) => {
+  const previousStrategies = new Set([_internals.DataSourceRowsUpdateStrategy.Default, _internals.DataSourceRowsUpdateStrategy.GroupedData, _internals.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData]);
+  let currentStrategy = _internals.DataSourceRowsUpdateStrategy.Default;
+  if (props.treeData || !props.disableRowGrouping && groupingModelSize > 0) {
+    currentStrategy = props.lazyLoading ? _internals.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData : _internals.DataSourceRowsUpdateStrategy.GroupedData;
+  }
+  previousStrategies.delete(currentStrategy);
+  return {
+    currentStrategy,
+    previousStrategies: Array.from(previousStrategies)
+  };
+};
 const useGridDataSourcePremium = (apiRef, props) => {
   const aggregationModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
   const groupingModelSize = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
-    const currentStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? _internals.DataSourceRowsUpdateStrategy.GroupedData : _internals.DataSourceRowsUpdateStrategy.Default;
-    const prevStrategy = currentStrategy === _internals.DataSourceRowsUpdateStrategy.GroupedData ? _internals.DataSourceRowsUpdateStrategy.Default : _internals.DataSourceRowsUpdateStrategy.GroupedData;
-    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, prevStrategy, () => false);
-    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
+    const {
+      currentStrategy,
+      previousStrategies
+    } = getStrategies({
+      treeData: props.treeData,
+      lazyLoading: props.lazyLoading,
+      disableRowGrouping: props.disableRowGrouping
+    }, groupingModelSize);
+    previousStrategies.forEach(strategy => {
+      apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, strategy, () => false);
+    });
+    apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, currentStrategy, props.dataSource ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
   const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
     const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
@@ -50,6 +70,7 @@ const useGridDataSourcePremium = (apiRef, props) => {
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
+    nestedDataStrategyProcessor,
     events,
     stopPolling
   } = (0, _internals.useGridDataSourceBasePro)(apiRef, props, (0, _extends2.default)({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
@@ -105,7 +126,22 @@ See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pi
     return props.dataSource?.getAggregatedValue?.(row, field);
   }, [apiRef, props.dataSource]);
   const handleRowGroupingModelChange = React.useCallback(() => {
+    // Clear the rows on every grouping model change to match the pre-fix behavior on
+    // non-standard strategies (e.g. lazy loading) where `setRows([])` is required to
+    // reset the existing grouping state.
     apiRef.current.setRows([]);
+    // The event listener is wired regardless of the active strategy
+    // (see `runIf(!pivotActive && !!props.dataSource, ...)` below), so we have to gate the
+    // `setLoading(true)` here. `fetchRows` only clears the loading flag when a standard
+    // strategy is active, and we don't want to leave the overlay stuck on lazy-loading or
+    // other non-standard strategies. Order matters too: `setRows([])` above rebuilds
+    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+    // it to survive the rebuild.
+    const currentStrategy = apiRef.current.getActiveStrategy(_internals.GridStrategyGroup.DataSource);
+    const isStandardStrategyActive = currentStrategy === _internals.DataSourceRowsUpdateStrategy.Default || currentStrategy === _internals.DataSourceRowsUpdateStrategy.GroupedData;
+    if (isStandardStrategyActive) {
+      apiRef.current.setLoading(true);
+    }
     stopPolling();
     debouncedFetchRows();
   }, [apiRef, debouncedFetchRows, stopPolling]);
@@ -116,6 +152,7 @@ See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pi
   (0, _xDataGridPro.useGridApiMethod)(apiRef, privateApi, 'private');
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, flatTreeStrategyProcessor.strategyName, flatTreeStrategyProcessor.group, flatTreeStrategyProcessor.processor);
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, groupedDataStrategyProcessor.strategyName, groupedDataStrategyProcessor.group, groupedDataStrategyProcessor.processor);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, nestedDataStrategyProcessor.strategyName, nestedDataStrategyProcessor.group, nestedDataStrategyProcessor.processor);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'processDataSourceRows', processDataSourceRows);
   Object.entries(events).forEach(([event, handler]) => {
     (0, _xDataGridPro.useGridEvent)(apiRef, event, handler);

package/hooks/features/dataSource/useGridDataSourcePremium.mjs

@@ -18,14 +18,34 @@ const options = {
     getKey: getKeyPremium
   }
 };
+const getStrategies = (props, groupingModelSize) => {
+  const previousStrategies = new Set([DataSourceRowsUpdateStrategy.Default, DataSourceRowsUpdateStrategy.GroupedData, DataSourceRowsUpdateStrategy.LazyLoadedGroupedData]);
+  let currentStrategy = DataSourceRowsUpdateStrategy.Default;
+  if (props.treeData || !props.disableRowGrouping && groupingModelSize > 0) {
+    currentStrategy = props.lazyLoading ? DataSourceRowsUpdateStrategy.LazyLoadedGroupedData : DataSourceRowsUpdateStrategy.GroupedData;
+  }
+  previousStrategies.delete(currentStrategy);
+  return {
+    currentStrategy,
+    previousStrategies: Array.from(previousStrategies)
+  };
+};
 export const useGridDataSourcePremium = (apiRef, props) => {
   const aggregationModel = gridAggregationModelSelector(apiRef);
   const groupingModelSize = gridRowGroupingSanitizedModelSelector(apiRef).length;
   const setStrategyAvailability = React.useCallback(() => {
-    const currentStrategy = props.treeData || !props.disableRowGrouping && groupingModelSize > 0 ? DataSourceRowsUpdateStrategy.GroupedData : DataSourceRowsUpdateStrategy.Default;
-    const prevStrategy = currentStrategy === DataSourceRowsUpdateStrategy.GroupedData ? DataSourceRowsUpdateStrategy.Default : DataSourceRowsUpdateStrategy.GroupedData;
-    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, prevStrategy, () => false);
-    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
+    const {
+      currentStrategy,
+      previousStrategies
+    } = getStrategies({
+      treeData: props.treeData,
+      lazyLoading: props.lazyLoading,
+      disableRowGrouping: props.disableRowGrouping
+    }, groupingModelSize);
+    previousStrategies.forEach(strategy => {
+      apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, strategy, () => false);
+    });
+    apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, currentStrategy, props.dataSource ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData, props.disableRowGrouping, groupingModelSize]);
   const handleEditRowWithAggregation = React.useCallback((params, updatedRow) => {
     const rowTree = gridRowTreeSelector(apiRef);
@@ -43,6 +63,7 @@ export const useGridDataSourcePremium = (apiRef, props) => {
     debouncedFetchRows,
     flatTreeStrategyProcessor,
     groupedDataStrategyProcessor,
+    nestedDataStrategyProcessor,
     events,
     stopPolling
   } = useGridDataSourceBasePro(apiRef, props, _extends({}, !props.disableAggregation && Object.keys(aggregationModel).length > 0 ? {
@@ -98,7 +119,22 @@ See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pi
     return props.dataSource?.getAggregatedValue?.(row, field);
   }, [apiRef, props.dataSource]);
   const handleRowGroupingModelChange = React.useCallback(() => {
+    // Clear the rows on every grouping model change to match the pre-fix behavior on
+    // non-standard strategies (e.g. lazy loading) where `setRows([])` is required to
+    // reset the existing grouping state.
     apiRef.current.setRows([]);
+    // The event listener is wired regardless of the active strategy
+    // (see `runIf(!pivotActive && !!props.dataSource, ...)` below), so we have to gate the
+    // `setLoading(true)` here. `fetchRows` only clears the loading flag when a standard
+    // strategy is active, and we don't want to leave the overlay stuck on lazy-loading or
+    // other non-standard strategies. Order matters too: `setRows([])` above rebuilds
+    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+    // it to survive the rebuild.
+    const currentStrategy = apiRef.current.getActiveStrategy(GridStrategyGroup.DataSource);
+    const isStandardStrategyActive = currentStrategy === DataSourceRowsUpdateStrategy.Default || currentStrategy === DataSourceRowsUpdateStrategy.GroupedData;
+    if (isStandardStrategyActive) {
+      apiRef.current.setLoading(true);
+    }
     stopPolling();
     debouncedFetchRows();
   }, [apiRef, debouncedFetchRows, stopPolling]);
@@ -109,6 +145,7 @@ See [server-side pivoting](https://mui.com/x/react-data-grid/server-side-data/pi
   useGridApiMethod(apiRef, privateApi, 'private');
   useGridRegisterStrategyProcessor(apiRef, flatTreeStrategyProcessor.strategyName, flatTreeStrategyProcessor.group, flatTreeStrategyProcessor.processor);
   useGridRegisterStrategyProcessor(apiRef, groupedDataStrategyProcessor.strategyName, groupedDataStrategyProcessor.group, groupedDataStrategyProcessor.processor);
+  useGridRegisterStrategyProcessor(apiRef, nestedDataStrategyProcessor.strategyName, nestedDataStrategyProcessor.group, nestedDataStrategyProcessor.processor);
   useGridRegisterPipeProcessor(apiRef, 'processDataSourceRows', processDataSourceRows);
   Object.entries(events).forEach(([event, handler]) => {
     addEventHandler(apiRef, event, handler);

package/hooks/features/rowGrouping/useGridRowGrouping.d.mts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData" | "isValidRowReorder">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "lazyLoading" | "treeData" | "isValidRowReorder">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData" | "isValidRowReorder">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "lazyLoading" | "treeData" | "isValidRowReorder">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -152,12 +152,16 @@ const useGridRowGrouping = (apiRef, props) => {
         return;
       }
       if (props.dataSource && !params.rowNode.childrenExpanded) {
-        apiRef.current.dataSource.fetchRows(params.id);
+        if (props.lazyLoading) {
+          apiRef.current.setRowChildrenExpansion(params.id, true);
+        } else {
+          apiRef.current.dataSource.fetchRows(params.id);
+        }
         return;
       }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode, props.dataSource]);
+  }, [apiRef, props.rowGroupingColumnMode, props.dataSource, props.lazyLoading]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];

package/hooks/features/rowGrouping/useGridRowGrouping.mjs

@@ -144,12 +144,16 @@ export const useGridRowGrouping = (apiRef, props) => {
         return;
       }
       if (props.dataSource && !params.rowNode.childrenExpanded) {
-        apiRef.current.dataSource.fetchRows(params.id);
+        if (props.lazyLoading) {
+          apiRef.current.setRowChildrenExpansion(params.id, true);
+        } else {
+          apiRef.current.dataSource.fetchRows(params.id);
+        }
         return;
       }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode, props.dataSource]);
+  }, [apiRef, props.rowGroupingColumnMode, props.dataSource, props.lazyLoading]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v9.3.0
+ * @mui/x-data-grid-premium v9.4.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v9.3.0
+ * @mui/x-data-grid-premium v9.4.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "author": "MUI Team",
   "description": "The Premium plan edition of the MUI X Data Grid Components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -33,15 +33,15 @@
     "directory": "packages/x-data-grid-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
+    "@babel/runtime": "^7.29.7",
     "@mui/utils": "9.0.1",
-    "@mui/x-internal-exceljs-fork": "4.4.5",
+    "@mui/x-internal-exceljs-fork": "5.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid-pro": "^9.3.0",
-    "@mui/x-data-grid": "^9.3.0",
+    "@mui/x-data-grid-pro": "^9.4.0",
+    "@mui/x-data-grid": "^9.4.0",
     "@mui/x-internals": "^9.1.0",
-    "@mui/x-license": "^9.2.0"
+    "@mui/x-license": "^9.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -60,7 +60,7 @@
     }
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=14.17.0"
   },
   "type": "commonjs",
   "exports": {