@mui/x-data-grid-pro 7.7.1 → 7.9.0

package/esm/utils/tree/insertDataRowInTree.js

@@ -1,5 +1,5 @@
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
-import { updateGroupDefaultExpansion, getGroupRowIdFromPath, insertNodeInTree, updateGroupNodeIdAndAutoGenerated } from './utils';
+import { updateGroupDefaultExpansion, checkGroupChildrenExpansion, getGroupRowIdFromPath, insertNodeInTree, updateGroupNodeIdAndAutoGenerated } from './utils';
 /**
  * Inserts a data row in a tree.
  * For each steps of its path:
@@ -15,7 +15,9 @@ export const insertDataRowInTree = ({
   treeDepths,
   onDuplicatePath,
   isGroupExpandedByDefault,
-  defaultGroupingExpansionDepth
+  defaultGroupingExpansionDepth,
+  hasServerChildren,
+  groupsToFetch
 }) => {
   let parentNodeId = GRID_ROOT_GROUP_ID;
   for (let depth = 0; depth < path.length; depth += 1) {
@@ -33,15 +35,37 @@ export const insertDataRowInTree = ({
       // If no node matches the full path,
       // We create a leaf node for the data row.
       if (existingNodeIdWithPartialPath == null) {
-        const leafNode = {
-          type: 'leaf',
-          id,
-          depth,
-          parent: parentNodeId,
-          groupingKey: key
-        };
+        let node;
+        if (hasServerChildren) {
+          node = {
+            type: 'group',
+            id,
+            parent: parentNodeId,
+            path: path.map(step => step.key),
+            depth,
+            isAutoGenerated: false,
+            groupingKey: key,
+            groupingField: field,
+            children: [],
+            childrenFromPath: {},
+            childrenExpanded: false,
+            hasServerChildren: true
+          };
+          const shouldFetchChildren = checkGroupChildrenExpansion(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
+          if (shouldFetchChildren) {
+            groupsToFetch?.add(id);
+          }
+        } else {
+          node = {
+            type: 'leaf',
+            id,
+            depth,
+            parent: parentNodeId,
+            groupingKey: key
+          };
+        }
         updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
-        insertNodeInTree(leafNode, tree, treeDepths, previousTree);
+        insertNodeInTree(node, tree, treeDepths, previousTree);
       } else {
         const existingNodeWithPartialPath = tree[existingNodeIdWithPartialPath];
 

package/esm/utils/tree/updateRowTree.js

@@ -8,10 +8,12 @@ export const updateRowTree = params => {
   const tree = _extends({}, params.previousTree);
   const treeDepths = _extends({}, params.previousTreeDepth);
   const updatedGroupsManager = createUpdatedGroupsManager();
+  const groupsToFetch = params.previousGroupsToFetch ? new Set([...params.previousGroupsToFetch]) : new Set([]);
   for (let i = 0; i < params.nodes.inserted.length; i += 1) {
     const {
       id,
-      path
+      path,
+      hasServerChildren
     } = params.nodes.inserted[i];
     insertDataRowInTree({
       previousTree: params.previousTree,
@@ -20,9 +22,11 @@ export const updateRowTree = params => {
       updatedGroupsManager,
       id,
       path,
+      hasServerChildren,
       onDuplicatePath: params.onDuplicatePath,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,
-      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
+      groupsToFetch
     });
   }
   for (let i = 0; i < params.nodes.removed.length; i += 1) {
@@ -37,7 +41,8 @@ export const updateRowTree = params => {
   for (let i = 0; i < params.nodes.modified.length; i += 1) {
     const {
       id,
-      path
+      path,
+      hasServerChildren
     } = params.nodes.modified[i];
     const pathInPreviousTree = getNodePathInTree({
       tree,
@@ -58,9 +63,11 @@ export const updateRowTree = params => {
         updatedGroupsManager,
         id,
         path,
+        hasServerChildren,
         onDuplicatePath: params.onDuplicatePath,
         isGroupExpandedByDefault: params.isGroupExpandedByDefault,
-        defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+        defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
+        groupsToFetch
       });
     } else {
       updatedGroupsManager?.addAction(tree[id].parent, 'modifyChildren');
@@ -74,6 +81,7 @@ export const updateRowTree = params => {
     treeDepths,
     groupingName: params.groupingName,
     dataRowIds,
-    updatedGroupsManager
+    updatedGroupsManager,
+    groupsToFetch: Array.from(groupsToFetch)
   };
 };

package/esm/utils/tree/utils.js

@@ -20,7 +20,7 @@ export const getNodePathInTree = ({
   path.reverse();
   return path;
 };
-export const updateGroupDefaultExpansion = (node, defaultGroupingExpansionDepth, isGroupExpandedByDefault) => {
+export const checkGroupChildrenExpansion = (node, defaultGroupingExpansionDepth, isGroupExpandedByDefault) => {
   let childrenExpanded;
   if (node.id === GRID_ROOT_GROUP_ID) {
     childrenExpanded = true;
@@ -29,6 +29,10 @@ export const updateGroupDefaultExpansion = (node, defaultGroupingExpansionDepth,
   } else {
     childrenExpanded = defaultGroupingExpansionDepth === -1 || defaultGroupingExpansionDepth > node.depth;
   }
+  return childrenExpanded;
+};
+export const updateGroupDefaultExpansion = (node, defaultGroupingExpansionDepth, isGroupExpandedByDefault) => {
+  const childrenExpanded = checkGroupChildrenExpansion(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
   node.childrenExpanded = childrenExpanded;
   return node;
 };

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
     getColumnFiltersRow: () => React.JSX.Element | null;
-    getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean | undefined) => React.JSX.Element;
+    getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean) => React.JSX.Element;
     getColumnHeadersRow: () => React.JSX.Element;
     getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
     isDragging: boolean;

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange' | 'slotProps' | 'slots'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;

package/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -6,4 +6,4 @@ export declare const columnReorderStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method)
  */
-export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'classes' | 'onColumnOrderChange'>) => void;
+export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnReorder" | "keepColumnPositionIfDraggedOutside" | "classes" | "onColumnOrderChange">) => void;

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

@@ -0,0 +1,18 @@
+import { GridGetRowsParams, GridGetRowsResponse } from '../../../models';
+type GridDataSourceCacheDefaultConfig = {
+    /**
+     * Time To Live for each cache entry in milliseconds.
+     * After this time the cache entry will become stale and the next query will result in cache miss.
+     * @default 300000 (5 minutes)
+     */
+    ttl?: number;
+};
+export declare class GridDataSourceCacheDefault {
+    private cache;
+    private ttl;
+    constructor({ ttl }: GridDataSourceCacheDefaultConfig);
+    set(key: GridGetRowsParams, value: GridGetRowsResponse): void;
+    get(key: GridGetRowsParams): GridGetRowsResponse | undefined;
+    clear(): void;
+}
+export {};

package/hooks/features/dataSource/cache.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDataSourceCacheDefault = void 0;
+function getKey(params) {
+  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys]);
+}
+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 = {};
+  }
+}
+exports.GridDataSourceCacheDefault = GridDataSourceCacheDefault;

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

@@ -0,0 +1,14 @@
+import { GridPaginationModel } from '@mui/x-data-grid';
+import { GridStatePro } from '../../../models/gridStatePro';
+export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").OutputSelector<import("@mui/x-data-grid/models/gridStateCommunity").GridStateCommunity, {
+    start: number;
+    end: number;
+    groupKeys: never[];
+    groupFields: never[];
+    paginationModel: GridPaginationModel;
+    sortModel: import("@mui/x-data-grid").GridSortModel;
+    filterModel: import("@mui/x-data-grid").GridFilterModel;
+}>;
+export declare const gridDataSourceStateSelector: (state: GridStatePro) => import("./interfaces").GridDataSourceState;
+export declare const gridDataSourceLoadingSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, boolean>>;
+export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<import("@mui/x-data-grid").GridRowId, any>>;

package/hooks/features/dataSource/gridDataSourceSelector.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridGetRowsParamsSelector = exports.gridDataSourceStateSelector = exports.gridDataSourceLoadingSelector = exports.gridDataSourceErrorsSelector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+const computeStartEnd = paginationModel => {
+  const start = paginationModel.page * paginationModel.pageSize;
+  const end = start + paginationModel.pageSize - 1;
+  return {
+    start,
+    end
+  };
+};
+const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _internals.createSelector)(_xDataGrid.gridFilterModelSelector, _xDataGrid.gridSortModelSelector, _xDataGrid.gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => {
+  return (0, _extends2.default)({
+    groupKeys: [],
+    // TODO: Implement with `rowGrouping`
+    groupFields: [],
+    paginationModel,
+    sortModel,
+    filterModel
+  }, computeStartEnd(paginationModel));
+});
+const gridDataSourceStateSelector = state => state.dataSource;
+exports.gridDataSourceStateSelector = gridDataSourceStateSelector;
+const gridDataSourceLoadingSelector = exports.gridDataSourceLoadingSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.loading);
+const gridDataSourceErrorsSelector = exports.gridDataSourceErrorsSelector = (0, _internals.createSelector)(gridDataSourceStateSelector, dataSource => dataSource.errors);

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

@@ -0,0 +1,50 @@
+import { GridRowId } from '@mui/x-data-grid';
+import { GridDataSourceCache } from '../../../models';
+export interface GridDataSourceState {
+    loading: Record<GridRowId, boolean>;
+    errors: Record<GridRowId, any>;
+}
+/**
+ * The base data source API interface that is available in the grid [[apiRef]].
+ */
+export interface GridDataSourceApiBase {
+    /**
+     * Set the loading state of a parent row.
+     * @param {string} parentId The id of the parent node.
+     * @param {boolean} loading The loading state to set.
+     */
+    setChildrenLoading: (parentId: GridRowId, loading: boolean) => void;
+    /**
+     * Set error occured while fetching the children of a row.
+     * @param {string} parentId The id of the parent node.
+     * @param {Error} error The error of type `Error` or `null`.
+     */
+    setChildrenFetchError: (parentId: GridRowId, error: Error | null) => void;
+    /**
+     * Fetches the rows from the server for a given `parentId`.
+     * If no `parentId` is provided, it fetches the root rows.
+     * @param {string} parentId The id of the group to be fetched.
+     */
+    fetchRows: (parentId?: GridRowId) => void;
+    /**
+     * The data source cache object.
+     */
+    cache: GridDataSourceCache;
+}
+export interface GridDataSourceApi {
+    /**
+     * The data source API.
+     */
+    unstable_dataSource: GridDataSourceApiBase;
+}
+export interface GridDataSourcePrivateApi {
+    /**
+     * Initiates the fetch of the children of a row.
+     * @param {string} id The id of the group to be fetched.
+     */
+    fetchRowChildren: (id: GridRowId) => void;
+    /**
+     * Resets the data source state.
+     */
+    resetDataSourceState: () => void;
+}

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const dataSourceStateInitializer: GridStateInitializer;
+export declare const useGridDataSource: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "sortingMode" | "filterMode" | "paginationMode" | "treeData">) => void;

package/hooks/features/dataSource/useGridDataSource.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSource = exports.dataSourceStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _gridDataSourceSelector = require("./gridDataSourceSelector");
+var _utils = require("./utils");
+var _cache = require("./cache");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const INITIAL_STATE = {
+  loading: {},
+  errors: {}
+};
+const noopCache = {
+  clear: () => {},
+  get: () => undefined,
+  set: () => {}
+};
+function getCache(cacheProp) {
+  if (cacheProp === null) {
+    return noopCache;
+  }
+  return cacheProp ?? new _cache.GridDataSourceCacheDefault({});
+}
+const dataSourceStateInitializer = state => {
+  return (0, _extends2.default)({}, state, {
+    dataSource: INITIAL_STATE
+  });
+};
+exports.dataSourceStateInitializer = dataSourceStateInitializer;
+const useGridDataSource = (apiRef, props) => {
+  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils.NestedDataManager(apiRef)).current;
+  const groupsToAutoFetch = (0, _xDataGrid.useGridSelector)(apiRef, _internals.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 = (0, _gridDataSourceSelector.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 = (0, _xDataGrid.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 = (0, _extends2.default)({}, (0, _gridDataSourceSelector.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 = (0, _gridDataSourceSelector.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) === _utils.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 = (0, _extends2.default)({}, state.dataSource.loading);
+      if (isLoading === false) {
+        delete newLoadingState[parentId];
+      } else {
+        newLoadingState[parentId] = isLoading;
+      }
+      return (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
+          loading: newLoadingState
+        })
+      });
+    });
+  }, [apiRef]);
+  const setChildrenFetchError = React.useCallback((parentId, error) => {
+    apiRef.current.setState(state => {
+      const newErrorsState = (0, _extends2.default)({}, state.dataSource.errors);
+      if (error === null && newErrorsState[parentId] !== undefined) {
+        delete newErrorsState[parentId];
+      } else {
+        newErrorsState[parentId] = error;
+      }
+      return (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
+          errors: newErrorsState
+        })
+      });
+    });
+  }, [apiRef]);
+  const resetDataSourceState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        dataSource: INITIAL_STATE
+      });
+    });
+  }, [apiRef]);
+  const dataSourceApi = {
+    unstable_dataSource: {
+      setChildrenLoading,
+      setChildrenFetchError,
+      fetchRows,
+      cache
+    }
+  };
+  const dataSourcePrivateApi = {
+    fetchRowChildren,
+    resetDataSourceState
+  };
+  (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourceApi, 'public');
+  (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourcePrivateApi, 'private');
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortModelChange', (0, _utils.runIfServerMode)(props.sortingMode, fetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'filterModelChange', (0, _utils.runIfServerMode)(props.filterMode, fetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils.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]);
+};
+exports.useGridDataSource = useGridDataSource;

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

@@ -0,0 +1,29 @@
+import { GridRowId } from '@mui/x-data-grid';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
+export declare const runIfServerMode: (modeProp: "server" | "client", fn: Function) => () => void;
+export declare enum RequestStatus {
+    QUEUED = 0,
+    PENDING = 1,
+    SETTLED = 2,
+    UNKNOWN = 3
+}
+/**
+ * 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 declare class NestedDataManager {
+    private pendingRequests;
+    private queuedRequests;
+    private settledRequests;
+    private api;
+    private maxConcurrentRequests;
+    constructor(privateApiRef: React.MutableRefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
+    private processQueue;
+    queue: (ids: GridRowId[]) => Promise<void>;
+    setRequestSettled: (id: GridRowId) => void;
+    clear: () => void;
+    clearPendingRequest: (id: GridRowId) => void;
+    getRequestStatus: (id: GridRowId) => RequestStatus;
+    getActiveRequestsCount: () => number;
+}