@mui/x-data-grid-pro 7.7.0 → 7.8.0

package/models/dataGridProProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode } from '@mui/x-data-grid';
-import { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue } from '@mui/x-data-grid/internals';
+import type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue, GridDataSourceCache, GridGetRowsParams } from '@mui/x-data-grid/internals';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
 import { GridApiPro } from './gridApiPro';
 import { GridGroupingColDefOverride, GridGroupingColDefOverrideParams } from './gridGroupingColDefOverride';
@@ -99,7 +99,22 @@ export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel =
      */
     keepColumnPositionIfDraggedOutside: boolean;
 }
-export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps'>, DataGridProSharedPropsWithoutDefaultValue {
+interface DataGridProDataSourceProps {
+    unstable_dataSourceCache?: GridDataSourceCache | null;
+    unstable_onDataSourceError?: (error: Error, params: GridGetRowsParams) => void;
+}
+interface DataGridProRegularProps<R extends GridValidRowModel> {
+    /**
+     * Determines the path of a row in the tree data.
+     * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
+     * Note that all paths must contain at least one element.
+     * @template R
+     * @param {R} row The row from which we want the path.
+     * @returns {string[]} The path to the row.
+     */
+    getTreeDataPath?: (row: R) => string[];
+}
+export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any> extends Omit<DataGridPropsWithoutDefaultValue<R>, 'initialState' | 'componentsProps' | 'slotProps'>, DataGridProRegularProps<R>, DataGridProDataSourceProps, DataGridProSharedPropsWithoutDefaultValue {
     /**
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
@@ -115,15 +130,6 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
      * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
      */
     experimentalFeatures?: Partial<GridExperimentalProFeatures>;
-    /**
-     * Determines the path of a row in the tree data.
-     * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
-     * Note that all paths must contain at least one element.
-     * @template R
-     * @param {R} row The row from which we want the path.
-     * @returns {string[]} The path to the row.
-     */
-    getTreeDataPath?: (row: R) => string[];
     /**
      * Callback fired when scrolling to the bottom of the grid viewport.
      * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].

package/models/gridApiPro.d.ts

@@ -1,12 +1,12 @@
 import { GridApiCommon, GridColumnReorderApi, GridRowMultiSelectionApi, GridRowProApi } from '@mui/x-data-grid';
 import { GridPrivateOnlyApiCommon, GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/internals';
 import { GridInitialStatePro, GridStatePro } from './gridStatePro';
-import type { GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi } from '../hooks';
+import type { GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi, GridDataSourceApi, GridDataSourcePrivateApi } from '../hooks';
 import type { DataGridProProcessedProps } from './dataGridProProps';
 /**
  * The api of `DataGridPro`.
  */
-export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridRowMultiSelectionApi, GridColumnReorderApi {
+export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDataSourceApi, GridRowMultiSelectionApi, GridColumnReorderApi {
 }
-export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi {
+export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi, GridDataSourcePrivateApi {
 }

package/models/gridProSlotsComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridSlotsComponent } from '@mui/x-data-grid';
 import { GridProIconSlotsComponent } from './gridProIconSlotsComponent';
 /**

package/models/gridStatePro.d.ts

@@ -1,5 +1,6 @@
 import { GridInitialState as GridInitialStateCommunity, GridState as GridStateCommunity, GridColumnPinningState, GridPinnedColumnFields } from '@mui/x-data-grid';
 import type { GridDetailPanelState, GridDetailPanelInitialState, GridColumnReorderState } from '../hooks';
+import type { GridDataSourceState } from '../hooks/features/dataSource/interfaces';
 /**
  * The state of `DataGridPro`.
  */
@@ -7,6 +8,7 @@ export interface GridStatePro extends GridStateCommunity {
     columnReorder: GridColumnReorderState;
     pinnedColumns: GridColumnPinningState;
     detailPanel: GridDetailPanelState;
+    dataSource: GridDataSourceState;
 }
 /**
  * The initial state of `DataGridPro`.

package/models/index.d.ts

@@ -1,3 +1,4 @@
+export type { GridGetRowsParams, GridGetRowsResponse, GridDataSource, GridDataSourceCache, } from '@mui/x-data-grid/internals';
 export * from './gridApiPro';
 export * from './gridGroupingColDefOverride';
 export * from './gridRowScrollEndParams';

package/modern/DataGridPro/DataGridPro.js

@@ -898,5 +898,17 @@ DataGridProRaw.propTypes = {
    * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
    * @default false
    */
-  treeData: PropTypes.bool
+  treeData: PropTypes.bool,
+  unstable_dataSource: PropTypes.shape({
+    getChildrenCount: PropTypes.func,
+    getGroupKey: PropTypes.func,
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  unstable_dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
+  unstable_onDataSourceError: PropTypes.func
 };

package/modern/DataGridPro/useDataGridProComponent.js

@@ -4,6 +4,7 @@ import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridI
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+import { useGridDataSourceTreeDataPreProcessors } from '../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors';
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
@@ -14,6 +15,7 @@ import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoade
 import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
+import { useGridDataSource, dataSourceStateInitializer } from '../hooks/features/dataSource/useGridDataSource';
 export const useDataGridProComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 
@@ -23,6 +25,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridDataSourceTreeDataPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props);
@@ -55,8 +58,9 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
+  useGridInitializeState(dataSourceStateInitializer, apiRef, props);
   useGridHeaderFiltering(apiRef, props);
-  useGridTreeData(apiRef);
+  useGridTreeData(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
@@ -89,5 +93,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
   useGridVirtualization(apiRef, props);
+  useGridDataSource(apiRef, props);
   return apiRef;
 };

package/modern/DataGridPro/useDataGridProProps.js

@@ -4,6 +4,13 @@ import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 import { computeSlots, useProps } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
+const getDataGridProForcedProps = themedProps => _extends({
+  signature: 'DataGridPro'
+}, themedProps.unstable_dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -38,7 +45,6 @@ export const useDataGridProProps = inProps => {
   }), [themedProps.slots]);
   return React.useMemo(() => _extends({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
     localeText,
-    slots,
-    signature: 'DataGridPro'
-  }), [themedProps, localeText, slots]);
+    slots
+  }, getDataGridProForcedProps(themedProps)), [themedProps, localeText, slots]);
 };

package/modern/components/GridDataSourceTreeDataGroupingCell.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Box from '@mui/material/Box';
+import Badge from '@mui/material/Badge';
+import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle'],
+    loadingContainer: ['treeDataGroupingCellLoadingContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridTreeDataGroupingCellIcon(props) {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const {
+    rowNode,
+    id,
+    field,
+    descendantCount
+  } = props;
+  const loadingSelector = state => state.dataSource.loading[id] ?? false;
+  const errorSelector = state => state.dataSource.errors[id];
+  const isDataLoading = useGridSelector(apiRef, loadingSelector);
+  const error = useGridSelector(apiRef, errorSelector);
+  const handleClick = event => {
+    if (!rowNode.childrenExpanded) {
+      // always fetch/get from cache the children when the node is expanded
+      apiRef.current.unstable_dataSource.fetchRows(id);
+    } else {
+      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    }
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
+  if (isDataLoading) {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/_jsx(CircularProgress, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/_jsx(Badge, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/_jsx(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+export function GridDataSourceTreeDataGroupingCell(props) {
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount,
+    offsetMultiplier = 2
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridPrivateApiContext();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = useGridSelector(apiRef, rowSelector);
+  const classes = useUtilityClasses(rootProps);
+  let descendantCount = 0;
+  if (row) {
+    descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * offsetMultiplier
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/_jsx(GridTreeDataGroupingCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : '']
+    })]
+  });
+}

package/modern/components/GridTreeDataGroupingCell.js

@@ -28,10 +28,7 @@ function GridTreeDataGroupingCell(props) {
   } = props;
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;
   const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;

package/modern/hooks/features/dataSource/cache.js

@@ -0,0 +1,36 @@
+function getKey(params) {
+  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys]);
+}
+export class GridDataSourceCacheDefault {
+  constructor({
+    ttl = 300000
+  }) {
+    this.cache = void 0;
+    this.ttl = void 0;
+    this.cache = {};
+    this.ttl = ttl;
+  }
+  set(key, value) {
+    const keyString = getKey(key);
+    const expiry = Date.now() + this.ttl;
+    this.cache[keyString] = {
+      value,
+      expiry
+    };
+  }
+  get(key) {
+    const keyString = getKey(key);
+    const entry = this.cache[keyString];
+    if (!entry) {
+      return undefined;
+    }
+    if (Date.now() > entry.expiry) {
+      delete this.cache[keyString];
+      return undefined;
+    }
+    return entry.value;
+  }
+  clear() {
+    this.cache = {};
+  }
+}

package/modern/hooks/features/dataSource/gridDataSourceSelector.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector } from '@mui/x-data-grid';
+import { createSelector } from '@mui/x-data-grid/internals';
+const computeStartEnd = paginationModel => {
+  const start = paginationModel.page * paginationModel.pageSize;
+  const end = start + paginationModel.pageSize - 1;
+  return {
+    start,
+    end
+  };
+};
+export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => {
+  return _extends({
+    groupKeys: [],
+    // TODO: Implement with `rowGrouping`
+    groupFields: [],
+    paginationModel,
+    sortModel,
+    filterModel
+  }, computeStartEnd(paginationModel));
+});
+export const gridDataSourceStateSelector = state => state.dataSource;
+export const gridDataSourceLoadingSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.loading);
+export const gridDataSourceErrorsSelector = createSelector(gridDataSourceStateSelector, dataSource => dataSource.errors);

package/modern/hooks/features/dataSource/useGridDataSource.js

@@ -0,0 +1,218 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { useGridApiEventHandler, gridRowsLoadingSelector, useGridApiMethod, useGridSelector } from '@mui/x-data-grid';
+import { gridRowGroupsToFetchSelector } from '@mui/x-data-grid/internals';
+import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from './gridDataSourceSelector';
+import { runIfServerMode, NestedDataManager, RequestStatus } from './utils';
+import { GridDataSourceCacheDefault } from './cache';
+const INITIAL_STATE = {
+  loading: {},
+  errors: {}
+};
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new GridDataSourceCacheDefault({});
+}
+export const dataSourceStateInitializer = state => {
+  return _extends({}, state, {
+    dataSource: INITIAL_STATE
+  });
+};
+export const useGridDataSource = (apiRef, props) => {
+  const nestedDataManager = useLazyRef(() => new NestedDataManager(apiRef)).current;
+  const groupsToAutoFetch = useGridSelector(apiRef, gridRowGroupsToFetchSelector);
+  const scheduledGroups = React.useRef(0);
+  const onError = props.unstable_onDataSourceError;
+  const [cache, setCache] = React.useState(() => getCache(props.unstable_dataSourceCache));
+  const fetchRows = React.useCallback(async parentId => {
+    const getRows = props.unstable_dataSource?.getRows;
+    if (!getRows) {
+      return;
+    }
+    if (parentId) {
+      nestedDataManager.queue([parentId]);
+      return;
+    }
+    nestedDataManager.clear();
+    scheduledGroups.current = 0;
+    const dataSourceState = apiRef.current.state.dataSource;
+    if (dataSourceState !== INITIAL_STATE) {
+      apiRef.current.resetDataSourceState();
+    }
+    const fetchParams = gridGetRowsParamsSelector(apiRef);
+    const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
+    if (cachedData !== undefined) {
+      const rows = cachedData.rows;
+      apiRef.current.setRows(rows);
+      if (cachedData.rowCount) {
+        apiRef.current.setRowCount(cachedData.rowCount);
+      }
+      return;
+    }
+    const isLoading = gridRowsLoadingSelector(apiRef);
+    if (!isLoading) {
+      apiRef.current.setLoading(true);
+    }
+    try {
+      const getRowsResponse = await getRows(fetchParams);
+      apiRef.current.unstable_dataSource.cache.set(fetchParams, getRowsResponse);
+      if (getRowsResponse.rowCount) {
+        apiRef.current.setRowCount(getRowsResponse.rowCount);
+      }
+      apiRef.current.setRows(getRowsResponse.rows);
+      apiRef.current.setLoading(false);
+    } catch (error) {
+      apiRef.current.setRows([]);
+      apiRef.current.setLoading(false);
+      onError?.(error, fetchParams);
+    }
+  }, [nestedDataManager, apiRef, props.unstable_dataSource?.getRows, onError]);
+  const fetchRowChildren = React.useCallback(async id => {
+    if (!props.treeData) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const getRows = props.unstable_dataSource?.getRows;
+    if (!getRows) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const rowNode = apiRef.current.getRowNode(id);
+    if (!rowNode) {
+      nestedDataManager.clearPendingRequest(id);
+      return;
+    }
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), {
+      groupKeys: rowNode.path
+    });
+    const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
+    if (cachedData !== undefined) {
+      const rows = cachedData.rows;
+      nestedDataManager.setRequestSettled(id);
+      apiRef.current.updateServerRows(rows, rowNode.path);
+      if (cachedData.rowCount) {
+        apiRef.current.setRowCount(cachedData.rowCount);
+      }
+      apiRef.current.setRowChildrenExpansion(id, true);
+      apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
+      return;
+    }
+    const existingError = gridDataSourceErrorsSelector(apiRef)[id] ?? null;
+    if (existingError) {
+      apiRef.current.unstable_dataSource.setChildrenFetchError(id, null);
+    }
+    try {
+      const getRowsResponse = await getRows(fetchParams);
+      if (!apiRef.current.getRowNode(id)) {
+        // The row has been removed from the grid
+        nestedDataManager.clearPendingRequest(id);
+        return;
+      }
+      if (nestedDataManager.getRequestStatus(id) === RequestStatus.UNKNOWN) {
+        apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
+        return;
+      }
+      nestedDataManager.setRequestSettled(id);
+      apiRef.current.unstable_dataSource.cache.set(fetchParams, getRowsResponse);
+      if (getRowsResponse.rowCount) {
+        apiRef.current.setRowCount(getRowsResponse.rowCount);
+      }
+      apiRef.current.updateServerRows(getRowsResponse.rows, rowNode.path);
+      apiRef.current.setRowChildrenExpansion(id, true);
+    } catch (error) {
+      const e = error;
+      apiRef.current.unstable_dataSource.setChildrenFetchError(id, e);
+      onError?.(e, fetchParams);
+    } finally {
+      apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
+      nestedDataManager.setRequestSettled(id);
+    }
+  }, [nestedDataManager, onError, apiRef, props.treeData, props.unstable_dataSource?.getRows]);
+  const setChildrenLoading = React.useCallback((parentId, isLoading) => {
+    apiRef.current.setState(state => {
+      if (!state.dataSource.loading[parentId] && isLoading === false) {
+        return state;
+      }
+      const newLoadingState = _extends({}, state.dataSource.loading);
+      if (isLoading === false) {
+        delete newLoadingState[parentId];
+      } else {
+        newLoadingState[parentId] = isLoading;
+      }
+      return _extends({}, state, {
+        dataSource: _extends({}, state.dataSource, {
+          loading: newLoadingState
+        })
+      });
+    });
+  }, [apiRef]);
+  const setChildrenFetchError = React.useCallback((parentId, error) => {
+    apiRef.current.setState(state => {
+      const newErrorsState = _extends({}, state.dataSource.errors);
+      if (error === null && newErrorsState[parentId] !== undefined) {
+        delete newErrorsState[parentId];
+      } else {
+        newErrorsState[parentId] = error;
+      }
+      return _extends({}, state, {
+        dataSource: _extends({}, state.dataSource, {
+          errors: newErrorsState
+        })
+      });
+    });
+  }, [apiRef]);
+  const resetDataSourceState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        dataSource: INITIAL_STATE
+      });
+    });
+  }, [apiRef]);
+  const dataSourceApi = {
+    unstable_dataSource: {
+      setChildrenLoading,
+      setChildrenFetchError,
+      fetchRows,
+      cache
+    }
+  };
+  const dataSourcePrivateApi = {
+    fetchRowChildren,
+    resetDataSourceState
+  };
+  useGridApiMethod(apiRef, dataSourceApi, 'public');
+  useGridApiMethod(apiRef, dataSourcePrivateApi, 'private');
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, fetchRows));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, fetchRows));
+  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, fetchRows));
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    const newCache = getCache(props.unstable_dataSourceCache);
+    setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
+  }, [props.unstable_dataSourceCache]);
+  React.useEffect(() => {
+    if (props.unstable_dataSource) {
+      apiRef.current.unstable_dataSource.cache.clear();
+      apiRef.current.unstable_dataSource.fetchRows();
+    }
+  }, [apiRef, props.unstable_dataSource]);
+  React.useEffect(() => {
+    if (groupsToAutoFetch && groupsToAutoFetch.length && scheduledGroups.current < groupsToAutoFetch.length) {
+      const groupsToSchedule = groupsToAutoFetch.slice(scheduledGroups.current);
+      nestedDataManager.queue(groupsToSchedule);
+      scheduledGroups.current = groupsToAutoFetch.length;
+    }
+  }, [apiRef, nestedDataManager, groupsToAutoFetch]);
+};

package/modern/hooks/features/dataSource/utils.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const MAX_CONCURRENT_REQUESTS = Infinity;
+export const runIfServerMode = (modeProp, fn) => () => {
+  if (modeProp === 'server') {
+    fn();
+  }
+};
+export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
+  RequestStatus[RequestStatus["QUEUED"] = 0] = "QUEUED";
+  RequestStatus[RequestStatus["PENDING"] = 1] = "PENDING";
+  RequestStatus[RequestStatus["SETTLED"] = 2] = "SETTLED";
+  RequestStatus[RequestStatus["UNKNOWN"] = 3] = "UNKNOWN";
+  return RequestStatus;
+}({});
+
+/**
+ * Fetches row children from the server with option to limit the number of concurrent requests
+ * Determines the status of a request based on the enum `RequestStatus`
+ * Uses `GridRowId` to uniquely identify a request
+ */
+export class NestedDataManager {
+  constructor(privateApiRef, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
+    this.pendingRequests = new Set();
+    this.queuedRequests = new Set();
+    this.settledRequests = new Set();
+    this.api = void 0;
+    this.maxConcurrentRequests = void 0;
+    this.processQueue = async () => {
+      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+        return;
+      }
+      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+      if (loopLength === 0) {
+        return;
+      }
+      const fetchQueue = Array.from(this.queuedRequests);
+      for (let i = 0; i < loopLength; i += 1) {
+        const id = fetchQueue[i];
+        this.queuedRequests.delete(id);
+        this.pendingRequests.add(id);
+        this.api.fetchRowChildren(id);
+      }
+    };
+    this.queue = async ids => {
+      const loadingIds = {};
+      ids.forEach(id => {
+        this.queuedRequests.add(id);
+        loadingIds[id] = true;
+      });
+      this.api.setState(state => _extends({}, state, {
+        dataSource: _extends({}, state.dataSource, {
+          loading: _extends({}, state.dataSource.loading, loadingIds)
+        })
+      }));
+      this.processQueue();
+    };
+    this.setRequestSettled = id => {
+      this.pendingRequests.delete(id);
+      this.settledRequests.add(id);
+      this.processQueue();
+    };
+    this.clear = () => {
+      this.queuedRequests.clear();
+      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
+    };
+    this.clearPendingRequest = id => {
+      this.api.unstable_dataSource.setChildrenLoading(id, false);
+      this.pendingRequests.delete(id);
+      this.processQueue();
+    };
+    this.getRequestStatus = id => {
+      if (this.pendingRequests.has(id)) {
+        return RequestStatus.PENDING;
+      }
+      if (this.queuedRequests.has(id)) {
+        return RequestStatus.QUEUED;
+      }
+      if (this.settledRequests.has(id)) {
+        return RequestStatus.SETTLED;
+      }
+      return RequestStatus.UNKNOWN;
+    };
+    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
+    this.api = privateApiRef.current;
+    this.maxConcurrentRequests = maxConcurrentRequests;
+  }
+}