@mui/x-data-grid 9.2.0 → 9.4.0

package/components/virtualization/GridMainContainer.js

@@ -56,7 +56,7 @@ const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef
   }, ariaAttributes, rootProps.slotProps?.main, {
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelAnchor, {
-      role: "presentation",
+      role: "none",
       "data-id": "gridPanelAnchor"
     }), props.children]
   }));

package/components/virtualization/GridMainContainer.mjs

@@ -49,7 +49,7 @@ export const GridMainContainer = forwardRef((props, ref) => {
   }, ariaAttributes, rootProps.slotProps?.main, {
     ref: ref,
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
-      role: "presentation",
+      role: "none",
       "data-id": "gridPanelAnchor"
     }), props.children]
   }));

package/components/virtualization/GridTopContainer.js

@@ -31,6 +31,6 @@ function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
     className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--top']),
-    role: "presentation"
+    role: "none"
   }));
 }

package/components/virtualization/GridTopContainer.mjs

@@ -23,6 +23,6 @@ export function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(Element, _extends({}, props, {
     className: clsx(classes.root, gridClasses['container--top']),
-    role: "presentation"
+    role: "none"
   }));
 }

package/components/virtualization/GridVirtualScroller.js

@@ -55,9 +55,7 @@ const Scroller = (0, _styles.styled)('div', {
     } = props;
     return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
-})(({
-  ownerState
-}) => ({
+})({
   position: 'relative',
   height: '100%',
   flexGrow: 1,
@@ -72,10 +70,8 @@ const Scroller = (0, _styles.styled)('div', {
     overflow: 'hidden'
   },
   // See https://github.com/mui/mui-x/issues/10547
-  zIndex: 0,
-  // Prevent overscroll bounce from revealing content behind pinned column shadows on macOS.
-  overscrollBehaviorX: ownerState.hasPinnedColumns ? 'none' : undefined
-}));
+  zIndex: 0
+});
 const Viewport = (0, _styles.styled)('div', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -90,26 +86,22 @@ const Viewport = (0, _styles.styled)('div', {
   }
 });
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
-const hasPinnedLeftSelector = apiRef => apiRef.current.state.dimensions.leftPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const hasScrollY = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
   const hasScrollX = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
   const hasPinnedRight = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedRightSelector);
-  const hasPinnedLeft = (0, _useGridSelector.useGridSelector)(apiRef, hasPinnedLeftSelector);
   const hasBottomFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasBottomFillerSelector);
   const {
     overlayType,
     loadingOverlayVariant
   } = (0, _useGridOverlays.useGridOverlays)(apiRef, rootProps);
   const Overlay = rootProps.slots?.[overlayType];
-  const hasPinnedColumns = hasPinnedRight || hasPinnedLeft;
   const ownerState = {
     classes: rootProps.classes,
     hasScrollX,
     hasPinnedRight,
-    hasPinnedColumns,
     overlayType,
     loadingOverlayVariant
   };

package/components/virtualization/GridVirtualScroller.mjs

@@ -47,9 +47,7 @@ const Scroller = styled('div', {
     } = props;
     return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
   }
-})(({
-  ownerState
-}) => ({
+})({
   position: 'relative',
   height: '100%',
   flexGrow: 1,
@@ -64,10 +62,8 @@ const Scroller = styled('div', {
     overflow: 'hidden'
   },
   // See https://github.com/mui/mui-x/issues/10547
-  zIndex: 0,
-  // Prevent overscroll bounce from revealing content behind pinned column shadows on macOS.
-  overscrollBehaviorX: ownerState.hasPinnedColumns ? 'none' : undefined
-}));
+  zIndex: 0
+});
 const Viewport = styled('div', {
   slot: 'internal',
   shouldForwardProp: undefined
@@ -82,26 +78,22 @@ const Viewport = styled('div', {
   }
 });
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
-const hasPinnedLeftSelector = apiRef => apiRef.current.state.dimensions.leftPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
   const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
   const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
-  const hasPinnedLeft = useGridSelector(apiRef, hasPinnedLeftSelector);
   const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
   const {
     overlayType,
     loadingOverlayVariant
   } = useGridOverlays(apiRef, rootProps);
   const Overlay = rootProps.slots?.[overlayType];
-  const hasPinnedColumns = hasPinnedRight || hasPinnedLeft;
   const ownerState = {
     classes: rootProps.classes,
     hasScrollX,
     hasPinnedRight,
-    hasPinnedColumns,
     overlayType,
     loadingOverlayVariant
   };

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -70,7 +70,7 @@ function GridVirtualScrollerFiller({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Filler, {
     className: _constants.gridClasses.filler,
-    role: "presentation",
+    role: "none",
     style: {
       height,
       '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'

package/components/virtualization/GridVirtualScrollerFiller.mjs

@@ -63,7 +63,7 @@ function GridVirtualScrollerFiller({
   }
   return /*#__PURE__*/_jsxs(Filler, {
     className: gridClasses.filler,
-    role: "presentation",
+    role: "none",
     style: {
       height,
       '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.mts

@@ -2,6 +2,7 @@ import type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState
 import type { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.mjs";
 import type { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.mjs";
 import type { GridGetRowsParams, GridGetRowsResponse, GridGetRowsOptions } from "../../../models/gridDataSource.mjs";
+import type { GridRowId } from "../../../models/gridRows.mjs";
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export declare enum GridStrategyGroup {
   DataSource = "dataSource",
@@ -9,7 +10,7 @@ export declare enum GridStrategyGroup {
 }
 export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
-  dataSourceRowsUpdate: {
+  dataSourceRootRowsUpdate: {
     group: GridStrategyGroup.DataSource;
     params: {
       response: GridGetRowsResponse;
@@ -22,6 +23,21 @@ export interface GridStrategyProcessingLookup {
     };
     value: void;
   };
+  dataSourceNestedRowsUpdate: {
+    group: GridStrategyGroup.DataSource;
+    params: {
+      parentId: GridRowId;
+      path: string[];
+      response: GridGetRowsResponse;
+      fetchParams: GridGetRowsParams;
+    } | {
+      parentId: GridRowId;
+      path: string[];
+      error: Error;
+      fetchParams: GridGetRowsParams;
+    };
+    value: void;
+  };
   rowTreeCreation: {
     group: GridStrategyGroup.RowTree;
     params: GridRowTreeCreationParams;

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -2,6 +2,7 @@ import type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState
 import type { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.js";
 import type { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.js";
 import type { GridGetRowsParams, GridGetRowsResponse, GridGetRowsOptions } from "../../../models/gridDataSource.js";
+import type { GridRowId } from "../../../models/gridRows.js";
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export declare enum GridStrategyGroup {
   DataSource = "dataSource",
@@ -9,7 +10,7 @@ export declare enum GridStrategyGroup {
 }
 export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
-  dataSourceRowsUpdate: {
+  dataSourceRootRowsUpdate: {
     group: GridStrategyGroup.DataSource;
     params: {
       response: GridGetRowsResponse;
@@ -22,6 +23,21 @@ export interface GridStrategyProcessingLookup {
     };
     value: void;
   };
+  dataSourceNestedRowsUpdate: {
+    group: GridStrategyGroup.DataSource;
+    params: {
+      parentId: GridRowId;
+      path: string[];
+      response: GridGetRowsResponse;
+      fetchParams: GridGetRowsParams;
+    } | {
+      parentId: GridRowId;
+      path: string[];
+      error: Error;
+      fetchParams: GridGetRowsParams;
+    };
+    value: void;
+  };
   rowTreeCreation: {
     group: GridStrategyGroup.RowTree;
     params: GridRowTreeCreationParams;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -15,7 +15,8 @@ var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 const GRID_DEFAULT_STRATEGY = exports.GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = {
-  dataSourceRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  dataSourceRootRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  dataSourceNestedRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
   rowTreeCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
   filtering: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
   sorting: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,

package/hooks/core/strategyProcessing/useGridStrategyProcessing.mjs

@@ -8,7 +8,8 @@ import { GridStrategyGroup } from "./gridStrategyProcessingApi.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 export const GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = {
-  dataSourceRowsUpdate: GridStrategyGroup.DataSource,
+  dataSourceRootRowsUpdate: GridStrategyGroup.DataSource,
+  dataSourceNestedRowsUpdate: GridStrategyGroup.DataSource,
   rowTreeCreation: GridStrategyGroup.RowTree,
   filtering: GridStrategyGroup.RowTree,
   sorting: GridStrategyGroup.RowTree,

package/hooks/core/useGridVirtualizer.d.mts

@@ -9,28 +9,28 @@ export declare function useGridVirtualizer(): {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
-      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeight: (rowId: import("@mui/x-virtualizer").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
-      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer").RowId, height: number) => void;
       hydrateRowsMeta: () => void;
-      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
-      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
-      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer").RowId) => any;
       getLastMeasuredRowIndex: () => number;
       resetRowHeights: () => void;
     };
   } & {
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
-    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer").RowId, Record<number, number>>;
     getters: any;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
     scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
   } & {
     getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
   } & {

package/hooks/core/useGridVirtualizer.d.ts

@@ -9,28 +9,28 @@ export declare function useGridVirtualizer(): {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
-      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeight: (rowId: import("@mui/x-virtualizer").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
-      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer").RowId, height: number) => void;
       hydrateRowsMeta: () => void;
-      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
-      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
-      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer").RowId) => any;
       getLastMeasuredRowIndex: () => number;
       resetRowHeights: () => void;
     };
   } & {
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
-    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer").RowId, Record<number, number>>;
     getters: any;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
     scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
-    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
-    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer").ColumnWithWidth[]) => void;
   } & {
     getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
   } & {

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -110,12 +110,12 @@ const useGridColumnHeaders = props => {
     const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        role: "presentation",
+        role: "none",
         style: {
           width: leftOffsetWidth
         }
       }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        role: "presentation",
+        role: "none",
         className: (0, _clsx.default)(_gridClasses.gridClasses.filler, _gridClasses.gridClasses['filler--horizontal'], borderBottom && _gridClasses.gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         pinnedRight: isPinnedRight

package/hooks/features/columnHeaders/useGridColumnHeaders.mjs

@@ -103,12 +103,12 @@ export const useGridColumnHeaders = props => {
     const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/_jsx("div", {
-        role: "presentation",
+        role: "none",
         style: {
           width: leftOffsetWidth
         }
       }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
-        role: "presentation",
+        role: "none",
         className: clsx(gridClasses.filler, gridClasses['filler--horizontal'], borderBottom && gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         pinnedRight: isPinnedRight

package/hooks/features/dataSource/models.d.mts

@@ -41,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
+  fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/hooks/features/dataSource/models.d.ts

@@ -41,7 +41,7 @@ export interface GridDataSourceApiBase {
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
-  fetchRowChildren?: (parents: GridRowId[], options?: GridDataSourceFetchRowChildrenOptions) => void;
+  fetchRowChildren?: (parents: GridRowId[], fetchParams: GridGetRowsParams[], showChildrenLoading?: boolean) => void;
   clearDataSourceState?: () => void;
   handleEditRow?: (params: GridUpdateRowParams, updatedRow: GridRowModel) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBase.d.mts

@@ -14,8 +14,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.mjs").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
-    group: "dataSourceRowsUpdate";
-    processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
+    group: "dataSourceRootRowsUpdate";
+    processor: GridStrategyProcessor<"dataSourceRootRowsUpdate">;
   };
   setStrategyAvailability: () => void;
   startPolling: () => void;

package/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -14,8 +14,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   debouncedFetchRows: ((parentId?: GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
-    group: "dataSourceRowsUpdate";
-    processor: GridStrategyProcessor<"dataSourceRowsUpdate">;
+    group: "dataSourceRootRowsUpdate";
+    processor: GridStrategyProcessor<"dataSourceRootRowsUpdate">;
   };
   setStrategyAvailability: () => void;
   startPolling: () => void;

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -25,7 +25,7 @@ var _gridDataSourceSelector = require("./gridDataSourceSelector");
 var _utils2 = require("./utils");
 var _cache = require("./cache");
 var _gridDataSourceError = require("./gridDataSourceError");
-const _excluded = ["skipCache", "keepChildrenExpanded"];
+const _excluded = ["skipCache", "keepChildrenExpanded", "showChildrenLoading"];
 const noopCache = {
   clear: () => {},
   get: () => undefined,
@@ -64,22 +64,26 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     if (!getRows) {
       return;
     }
-    if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
-      options.fetchRowChildren?.([parentId]);
-      return;
-    }
-    options.clearDataSourceState?.();
     const _ref = params || {},
       {
         skipCache,
-        keepChildrenExpanded
+        keepChildrenExpanded,
+        showChildrenLoading
       } = _ref,
       getRowsParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}), getRowsParams);
+    if (parentId && parentId !== _gridRowsUtils.GRID_ROOT_GROUP_ID && props.signature !== 'DataGrid') {
+      options.fetchRowChildren?.([parentId], [fetchParams], showChildrenLoading);
+      return;
+    }
+    options.clearDataSourceState?.();
     const cacheKeys = cacheChunkManager.getCacheKeys(fetchParams);
     const responses = cacheKeys.map(cacheKey => cache.get(cacheKey));
     if (!skipCache && responses.every(response => response !== undefined)) {
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      // Bump the request id so any cache-miss request still in flight is treated as
+      // stale and won't override the cached data we're about to apply.
+      lastRequestId.current += 1;
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response: _utils2.CacheChunkManager.mergeResponses(responses),
         fetchParams,
         options: {
@@ -87,6 +91,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           keepChildrenExpanded
         }
       });
+      if (standardRowsUpdateStrategyActive) {
+        apiRef.current.setLoading(false);
+      }
       return;
     }
 
@@ -101,7 +108,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, getRowsResponse);
       cacheResponses.forEach((response, key) => cache.set(key, response));
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           response: getRowsResponse,
           fetchParams,
           options: {
@@ -112,7 +119,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
     } catch (originalError) {
       if (lastRequestId.current === requestId) {
-        apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+        apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
           error: originalError,
           fetchParams,
           options: {
@@ -159,9 +166,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
         return acc;
       }, []);
       if (expandedGroupIds.length > 0) {
-        fetchRowChildrenOption(expandedGroupIds, {
-          showChildrenLoading: false
-        });
+        fetchRowChildrenOption(expandedGroupIds, [], false);
       }
     };
     const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
@@ -179,7 +184,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       }
       const cacheResponses = cacheChunkManager.splitResponse(fetchParams, response);
       cacheResponses.forEach((cacheResponse, key) => cache.set(key, cacheResponse));
-      apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
+      apiRef.current.applyStrategyProcessor('dataSourceRootRowsUpdate', {
         response,
         fetchParams,
         options: {}
@@ -260,10 +265,17 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   };
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
   const handleFetchRowsOnParamsChange = React.useCallback(() => {
+    // Clear the rows first and immediately mark the grid as loading so the overlay
+    // selector never observes the intermediate `rows=[] && loading=false` state that
+    // would otherwise pick `noRowsOverlay`. Order matters: `setRows([])` rebuilds
+    // `state.rows` from `props.loading`, so the `setLoading(true)` call must come after
+    // it to survive the rebuild. This handler is only wired up when a standard strategy
+    // is active via the `runIf` guards on the returned `events` object.
     apiRef.current.setRows([]);
+    apiRef.current.setLoading(true);
     stopPolling();
     debouncedFetchRows();
-  }, [stopPolling, debouncedFetchRows, apiRef]);
+  }, [apiRef, stopPolling, debouncedFetchRows]);
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {
@@ -290,7 +302,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   React.useEffect(() => {
     // Return early if the proper strategy isn't set yet
     // Context: https://github.com/mui/mui-x/issues/19650
-    if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData) {
+    if (currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.Default && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.GroupedData && currentStrategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoadedGroupedData) {
       return undefined;
     }
     if (props.dataSource) {
@@ -311,7 +323,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     debouncedFetchRows,
     strategyProcessor: {
       strategyName: _utils2.DataSourceRowsUpdateStrategy.Default,
-      group: 'dataSourceRowsUpdate',
+      group: 'dataSourceRootRowsUpdate',
       processor: handleDataUpdate
     },
     setStrategyAvailability,