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

package/modern/hooks/features/index.js

@@ -4,4 +4,6 @@ export * from './columnReorder';
 export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';
-export * from './rowPinning';
+export * from './rowPinning';
+export * from './dataSource/interfaces';
+export * from './dataSource/cache';

package/modern/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -0,0 +1,148 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["hideDescendantCount"];
+import * as React from 'react';
+import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from '../treeData/gridTreeDataGroupColDef';
+import { skipFiltering, skipSorting } from './utils';
+import { GridDataSourceTreeDataGroupingCell } from '../../../components/GridDataSourceTreeDataGroupingCell';
+import { createRowTree } from '../../../utils/tree/createRowTree';
+import { updateRowTree } from '../../../utils/tree/updateRowTree';
+import { getVisibleRowsLookup } from '../../../utils/tree/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DATA_SOURCE_TREE_DATA_STRATEGY = 'dataSourceTreeData';
+export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
+  const setStrategyAvailability = React.useCallback(() => {
+    privateApiRef.current.setStrategyAvailability('rowTree', DATA_SOURCE_TREE_DATA_STRATEGY, props.treeData && props.unstable_dataSource ? () => true : () => false);
+  }, [privateApiRef, props.treeData, props.unstable_dataSource]);
+  const getGroupingColDef = React.useCallback(() => {
+    const groupingColDefProp = props.groupingColDef;
+    let colDefOverride;
+    if (typeof groupingColDefProp === 'function') {
+      const params = {
+        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        fields: []
+      };
+      colDefOverride = groupingColDefProp(params);
+    } else {
+      colDefOverride = groupingColDefProp;
+    }
+    const _ref = colDefOverride ?? {},
+      {
+        hideDescendantCount
+      } = _ref,
+      colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const commonProperties = _extends({}, GRID_TREE_DATA_GROUPING_COL_DEF, {
+      renderCell: params => /*#__PURE__*/_jsx(GridDataSourceTreeDataGroupingCell, _extends({}, params, {
+        hideDescendantCount: hideDescendantCount
+      })),
+      headerName: privateApiRef.current.getLocaleText('treeDataGroupingHeaderName')
+    });
+    return _extends({}, commonProperties, colDefOverrideProperties, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, [privateApiRef, props.groupingColDef]);
+  const updateGroupingColumn = React.useCallback(columnsState => {
+    if (!props.unstable_dataSource) {
+      return columnsState;
+    }
+    const groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field;
+    const shouldHaveGroupingColumn = props.treeData;
+    const prevGroupingColumn = columnsState.lookup[groupingColDefField];
+    if (shouldHaveGroupingColumn) {
+      const newGroupingColumn = getGroupingColDef();
+      if (prevGroupingColumn) {
+        newGroupingColumn.width = prevGroupingColumn.width;
+        newGroupingColumn.flex = prevGroupingColumn.flex;
+      }
+      columnsState.lookup[groupingColDefField] = newGroupingColumn;
+      if (prevGroupingColumn == null) {
+        const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
+        columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
+      }
+    } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
+      delete columnsState.lookup[groupingColDefField];
+      columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== groupingColDefField);
+    }
+    return columnsState;
+  }, [props.treeData, props.unstable_dataSource, getGroupingColDef]);
+  const createRowTreeForTreeData = React.useCallback(params => {
+    const getGroupKey = props.unstable_dataSource?.getGroupKey;
+    if (!getGroupKey) {
+      throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.');
+    }
+    const getChildrenCount = props.unstable_dataSource?.getChildrenCount;
+    if (!getChildrenCount) {
+      throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
+    }
+    const parentPath = params.updates.groupKeys ?? [];
+    const getRowTreeBuilderNode = rowId => {
+      const count = getChildrenCount(params.dataRowIdToModelLookup[rowId]);
+      return {
+        id: rowId,
+        path: [...parentPath, getGroupKey(params.dataRowIdToModelLookup[rowId])].map(key => ({
+          key,
+          field: null
+        })),
+        hasServerChildren: !!count && count !== 0
+      };
+    };
+    const onDuplicatePath = (firstId, secondId, path) => {
+      throw new Error(['MUI X: The values returned by `getGroupKey` for all the sibling rows should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
+    };
+    if (params.updates.type === 'full') {
+      return createRowTree({
+        previousTree: params.previousTree,
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        onDuplicatePath
+      });
+    }
+    return updateRowTree({
+      nodes: {
+        inserted: params.updates.actions.insert.map(getRowTreeBuilderNode),
+        modified: params.updates.actions.modify.map(getRowTreeBuilderNode),
+        removed: params.updates.actions.remove
+      },
+      previousTree: params.previousTree,
+      previousGroupsToFetch: params.previousGroupsToFetch,
+      previousTreeDepth: params.previousTreeDepths,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: DATA_SOURCE_TREE_DATA_STRATEGY
+    });
+  }, [props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(() => {
+    const rowTree = gridRowTreeSelector(privateApiRef);
+    return skipFiltering(rowTree);
+  }, [privateApiRef]);
+  const sortRows = React.useCallback(() => {
+    const rowTree = gridRowTreeSelector(privateApiRef);
+    return skipSorting(rowTree);
+  }, [privateApiRef]);
+  useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
+  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+
+  /**
+   * 1ST RENDER
+   */
+  useFirstRender(() => {
+    setStrategyAvailability();
+  });
+
+  /**
+   * EFFECTS
+   */
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (!isFirstRender.current) {
+      setStrategyAvailability();
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [setStrategyAvailability]);
+};

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

@@ -0,0 +1,18 @@
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { getTreeNodeDescendants } from '@mui/x-data-grid/internals';
+export function skipFiltering(rowTree) {
+  const filteredRowsLookup = {};
+  const filteredDescendantCountLookup = {};
+  const nodes = Object.values(rowTree);
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i];
+    filteredRowsLookup[node.id] = true;
+  }
+  return {
+    filteredRowsLookup,
+    filteredDescendantCountLookup
+  };
+}
+export function skipSorting(rowTree) {
+  return getTreeNodeDescendants(rowTree, GRID_ROOT_GROUP_ID, false);
+}

package/modern/hooks/features/treeData/useGridTreeData.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useGridApiEventHandler } from '@mui/x-data-grid';
 import { GRID_TREE_DATA_GROUPING_FIELD } from './gridTreeDataGroupColDef';
-export const useGridTreeData = apiRef => {
+export const useGridTreeData = (apiRef, props) => {
   /**
    * EVENTS
    */
@@ -11,8 +11,12 @@ export const useGridTreeData = apiRef => {
       if (params.rowNode.type !== 'group') {
         return;
       }
+      if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
+        apiRef.current.unstable_dataSource.fetchRows(params.id);
+        return;
+      }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef]);
+  }, [apiRef, props.unstable_dataSource]);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -14,8 +14,8 @@ import { getVisibleRowsLookup } from '../../../utils/tree/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', TREE_DATA_STRATEGY, props.treeData ? () => true : () => false);
-  }, [privateApiRef, props.treeData]);
+    privateApiRef.current.setStrategyAvailability('rowTree', TREE_DATA_STRATEGY, props.treeData && !props.unstable_dataSource ? () => true : () => false);
+  }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
@@ -42,6 +42,9 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
     return _extends({}, commonProperties, colDefOverrideProperties, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES);
   }, [privateApiRef, props.groupingColDef]);
   const updateGroupingColumn = React.useCallback(columnsState => {
+    if (props.unstable_dataSource) {
+      return columnsState;
+    }
     const groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field;
     const shouldHaveGroupingColumn = props.treeData;
     const prevGroupingColumn = columnsState.lookup[groupingColDefField];
@@ -61,7 +64,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== groupingColDefField);
     }
     return columnsState;
-  }, [props.treeData, getGroupingColDef]);
+  }, [props.treeData, props.unstable_dataSource, getGroupingColDef]);
   const createRowTreeForTreeData = React.useCallback(params => {
     if (!props.getTreeDataPath) {
       throw new Error('MUI X: No getTreeDataPath given.');

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.7.0
+ * @mui/x-data-grid-pro v7.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/index.js

@@ -8,6 +8,7 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 export { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
+export { useGridDataSourceTreeDataPreProcessors } from '../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors';
 export { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
 export { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
@@ -20,6 +21,7 @@ export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features
 export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
 export { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
+export { useGridDataSource, dataSourceStateInitializer } from '../hooks/features/dataSource/useGridDataSource';
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/modern/internals/propValidation.js

@@ -1,2 +1,2 @@
 import { GridSignature, isNumber, propValidatorsDataGrid } from '@mui/x-data-grid/internals';
-export const propValidatorsDataGridPro = [...propValidatorsDataGrid, props => props.pagination && props.hideFooterRowCount && 'MUI X: The `hideFooterRowCount` prop has no effect when the pagination is enabled.' || undefined, props => props.treeData && props.filterMode === 'server' && 'MUI X: The `filterMode="server"` prop is not available when the `treeData` is enabled.' || undefined, props => !props.pagination && props.checkboxSelectionVisibleOnly && 'MUI X: The `checkboxSelectionVisibleOnly` prop has no effect when the pagination is not enabled.' || undefined, props => props.signature !== GridSignature.DataGrid && props.paginationMode === 'client' && props.rowsLoadingMode !== 'server' && isNumber(props.rowCount) && 'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.' || undefined];
+export const propValidatorsDataGridPro = [...propValidatorsDataGrid, props => props.pagination && props.hideFooterRowCount && 'MUI X: The `hideFooterRowCount` prop has no effect when the pagination is enabled.' || undefined, props => props.treeData && props.filterMode === 'server' && !props.unstable_dataSource && 'MUI X: The `filterMode="server"` prop is not available when the `treeData` is enabled.' || undefined, props => !props.pagination && props.checkboxSelectionVisibleOnly && 'MUI X: The `checkboxSelectionVisibleOnly` prop has no effect when the pagination is not enabled.' || undefined, props => props.signature !== GridSignature.DataGrid && props.paginationMode === 'client' && props.rowsLoadingMode !== 'server' && isNumber(props.rowCount) && 'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.' || undefined];

package/modern/models/index.js

@@ -4,4 +4,5 @@ export * from './gridRowScrollEndParams';
 export * from './gridRowOrderChangeParams';
 export * from './gridFetchRowsParams';
 export * from './gridProSlotsComponent';
-export * from './gridProIconSlotsComponent';
+export * from './gridProIconSlotsComponent';
+export {};

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcxODIyNjAwMDAwMA==";
+  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/utils/tree/createRowTree.js

@@ -10,6 +10,7 @@ export const createRowTree = params => {
     [GRID_ROOT_GROUP_ID]: buildRootGroup()
   };
   const treeDepths = {};
+  const groupsToFetch = new Set();
   for (let i = 0; i < params.nodes.length; i += 1) {
     const node = params.nodes[i];
     dataRowIds.push(node.id);
@@ -18,16 +19,19 @@ export const createRowTree = params => {
       previousTree: params.previousTree,
       id: node.id,
       path: node.path,
+      hasServerChildren: node.hasServerChildren,
       onDuplicatePath: params.onDuplicatePath,
       treeDepths,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,
-      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
+      groupsToFetch
     });
   }
   return {
     tree,
     treeDepths,
     groupingName: params.groupingName,
-    dataRowIds
+    dataRowIds,
+    groupsToFetch: Array.from(groupsToFetch)
   };
 };

package/modern/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/modern/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/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8",
-    "@mui/x-data-grid": "7.7.0",
-    "@mui/x-license": "7.7.0"
+    "@mui/x-data-grid": "7.8.0",
+    "@mui/x-license": "7.8.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.15.14",

package/typeOverloads/modules.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridRowId, GridPinnedColumnFields } from '@mui/x-data-grid';
 import type { GridRowScrollEndParams, GridRowOrderChangeParams, GridFetchRowsParams } from '../models';
 import type { GridRenderHeaderFilterProps } from '../components/headerFiltering/GridHeaderFilterCell';

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcxODIyNjAwMDAwMA==";
+  const releaseInfo = "MTcxOTUyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/utils/tree/createRowTree.js

@@ -16,6 +16,7 @@ const createRowTree = params => {
     [_xDataGrid.GRID_ROOT_GROUP_ID]: (0, _internals.buildRootGroup)()
   };
   const treeDepths = {};
+  const groupsToFetch = new Set();
   for (let i = 0; i < params.nodes.length; i += 1) {
     const node = params.nodes[i];
     dataRowIds.push(node.id);
@@ -24,17 +25,20 @@ const createRowTree = params => {
       previousTree: params.previousTree,
       id: node.id,
       path: node.path,
+      hasServerChildren: node.hasServerChildren,
       onDuplicatePath: params.onDuplicatePath,
       treeDepths,
       isGroupExpandedByDefault: params.isGroupExpandedByDefault,
-      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth,
+      groupsToFetch
     });
   }
   return {
     tree,
     treeDepths,
     groupingName: params.groupingName,
-    dataRowIds
+    dataRowIds,
+    groupsToFetch: Array.from(groupsToFetch)
   };
 };
 exports.createRowTree = createRowTree;

package/utils/tree/insertDataRowInTree.d.ts

@@ -44,6 +44,8 @@ interface InsertDataRowInTreeParams {
     onDuplicatePath?: GridTreePathDuplicateHandler;
     isGroupExpandedByDefault?: DataGridProProps['isGroupExpandedByDefault'];
     defaultGroupingExpansionDepth: number;
+    hasServerChildren?: boolean;
+    groupsToFetch?: Set<GridRowId>;
 }
 /**
  * Inserts a data row in a tree.
@@ -51,5 +53,5 @@ interface InsertDataRowInTreeParams {
  * - if a node exists with the same partial path, it will register this node as the ancestor of the data row.
  * - if not, it will create an auto-generated node and register it as ancestor of the data row.
  */
-export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, previousTree, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, }: InsertDataRowInTreeParams) => void;
+export declare const insertDataRowInTree: ({ id, path, updatedGroupsManager, previousTree, tree, treeDepths, onDuplicatePath, isGroupExpandedByDefault, defaultGroupingExpansionDepth, hasServerChildren, groupsToFetch, }: InsertDataRowInTreeParams) => void;
 export {};

package/utils/tree/insertDataRowInTree.js

@@ -21,7 +21,9 @@ const insertDataRowInTree = ({
   treeDepths,
   onDuplicatePath,
   isGroupExpandedByDefault,
-  defaultGroupingExpansionDepth
+  defaultGroupingExpansionDepth,
+  hasServerChildren,
+  groupsToFetch
 }) => {
   let parentNodeId = _xDataGrid.GRID_ROOT_GROUP_ID;
   for (let depth = 0; depth < path.length; depth += 1) {
@@ -39,15 +41,37 @@ 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 = (0, _utils.checkGroupChildrenExpansion)(node, defaultGroupingExpansionDepth, isGroupExpandedByDefault);
+          if (shouldFetchChildren) {
+            groupsToFetch?.add(id);
+          }
+        } else {
+          node = {
+            type: 'leaf',
+            id,
+            depth,
+            parent: parentNodeId,
+            groupingKey: key
+          };
+        }
         updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
-        (0, _utils.insertNodeInTree)(leafNode, tree, treeDepths, previousTree);
+        (0, _utils.insertNodeInTree)(node, tree, treeDepths, previousTree);
       } else {
         const existingNodeWithPartialPath = tree[existingNodeIdWithPartialPath];
 

package/utils/tree/models.d.ts

@@ -6,6 +6,7 @@ export interface RowTreeBuilderGroupingCriterion {
 export interface RowTreeBuilderNode {
     id: GridRowId;
     path: RowTreeBuilderGroupingCriterion[];
+    hasServerChildren?: boolean;
 }
 /**
  * Callback called when trying to insert a data row in the tree in place of an already existing data row.

package/utils/tree/updateRowTree.d.ts

@@ -14,6 +14,7 @@ interface UpdateRowTreeParams {
     isGroupExpandedByDefault?: (node: GridGroupNode) => boolean;
     groupingName: string;
     onDuplicatePath?: GridTreePathDuplicateHandler;
+    previousGroupsToFetch?: GridRowId[];
 }
 export declare const updateRowTree: (params: UpdateRowTreeParams) => GridRowTreeCreationValue;
 export {};