@mui/x-data-grid-pro 5.17.5 → 6.0.0-alpha.1

package/node/components/GridRowReorderCell.js

@@ -36,12 +36,10 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
-  var _params$rowNode$posit;
-
   const apiRef = (0, _xDataGrid.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
-  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowTreeDepthSelector);
+  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowMaximumTreeDepthSelector);
   const editRowsState = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
 
   const cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
@@ -77,7 +75,7 @@ const GridRowReorderCell = params => {
     onDragEnd: publish('rowDragEnd')
   } : null;
 
-  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+  if (params.rowNode.type === 'footer') {
     return null;
   }
 
@@ -95,7 +93,7 @@ const GridRowReorderCell = params => {
 exports.GridRowReorderCell = GridRowReorderCell;
 
 const renderRowReorderCell = params => {
-  if (params.rowNode.isPinned) {
+  if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;
   }
 

package/node/components/GridTreeDataGroupingCell.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/hooks/features/detailPanel/useGridDetailPanel.js

@@ -43,7 +43,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
+  const rowIds = (0, _xDataGrid.gridDataRowIdsSelector)(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/node/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -24,7 +24,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
+  const rowIds = (0, _xDataGrid.gridDataRowIdsSelector)(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/node/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -29,7 +29,7 @@ const useGridInfiniteLoader = (apiRef, props) => {
   const handleRowsScrollEnd = React.useCallback(scrollPosition => {
     const dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions || props.rowsLoadingMode !== _xDataGrid.GridFeatureModeConstant.client) {
+    if (!dimensions || props.rowsLoadingMode !== 'client') {
       return;
     }
 

package/node/hooks/features/lazyLoader/useGridLazyLoader.js

@@ -15,7 +15,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function findSkeletonRowsSection(visibleRows, range) {
+function findSkeletonRowsSection({
+  apiRef,
+  visibleRows,
+  range
+}) {
   let {
     firstRowIndex,
     lastRowIndex
@@ -26,16 +30,19 @@ function findSkeletonRowsSection(visibleRows, range) {
   let isSkeletonSectionFound = false;
 
   while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
-    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+    const isStartingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[startIndex].id).type === 'skeletonRow';
+    const isEndingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[endIndex].id).type === 'skeletonRow';
+
+    if (isStartingWithASkeletonRow && isEndingWithASkeletonRow) {
       isSkeletonSectionFound = true;
     }
 
-    if (visibleRowsSection[startIndex].model) {
+    if (!isStartingWithASkeletonRow) {
       startIndex += 1;
       firstRowIndex += 1;
     }
 
-    if (visibleRowsSection[endIndex].model) {
+    if (!isEndingWithASkeletonRow) {
       endIndex -= 1;
       lastRowIndex -= 1;
     }
@@ -56,7 +63,7 @@ function isLazyLoadingDisabled({
     return true;
   }
 
-  if (rowsLoadingMode !== _xDataGrid.GridFeatureModeConstant.server) {
+  if (rowsLoadingMode !== 'server') {
     return true;
   }
 
@@ -120,9 +127,13 @@ const useGridLazyLoader = (apiRef, props) => {
     }
 
     if (sortModel.length === 0 && filterModel.items.length === 0) {
-      const skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
-        firstRowIndex: params.firstRowToRender,
-        lastRowIndex: params.lastRowToRender
+      const skeletonRowsSection = findSkeletonRowsSection({
+        apiRef,
+        visibleRows: visibleRows.rows,
+        range: {
+          firstRowIndex: params.firstRowToRender,
+          lastRowIndex: params.lastRowToRender
+        }
       });
 
       if (!skeletonRowsSection) {

package/node/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -31,19 +31,32 @@ const useGridLazyLoaderPreProcessors = (apiRef, props) => {
     lazyLoading
   } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
   const addSkeletonRows = React.useCallback(groupingParams => {
-    if (!lazyLoading || props.rowsLoadingMode !== _xDataGrid.GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+    const tree = (0, _extends2.default)({}, groupingParams.tree);
+    const rootGroup = tree[_xDataGrid.GRID_ROOT_GROUP_ID];
+
+    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
     }
 
-    const newRowsIds = [...groupingParams.ids];
+    const rootGroupChildren = [...rootGroup.children];
 
-    for (let i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+    for (let i = 0; i < props.rowCount - rootGroup.children.length; i += 1) {
       const skeletonId = getSkeletonRowId(i);
-      newRowsIds.push(skeletonId);
+      rootGroupChildren.push(skeletonId);
+      const skeletonRowNode = {
+        type: 'skeletonRow',
+        id: skeletonId,
+        parent: _xDataGrid.GRID_ROOT_GROUP_ID,
+        depth: 0
+      };
+      tree[skeletonId] = skeletonRowNode;
     }
 
+    tree[_xDataGrid.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
+      children: rootGroupChildren
+    });
     return (0, _extends2.default)({}, groupingParams, {
-      ids: newRowsIds
+      tree
     });
   }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateRows', addSkeletonRows);

package/node/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -14,6 +14,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _internals = require("@mui/x-data-grid/internals");
 
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _utils = require("../../../utils/tree/utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,35 +27,57 @@ function addPinnedRow({
   rowModel,
   rowId,
   position,
-  apiRef
+  apiRef,
+  isAutoGenerated
 }) {
-  var _groupingParams$addit;
+  var _groupingParams$addit, _groupingParams$addit2, _groupingParams$addit3, _groupingParams$addit4;
 
-  const idRowsLookup = (0, _extends2.default)({}, groupingParams.idRowsLookup);
-  const tree = (0, _extends2.default)({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+  const dataRowIdToModelLookup = (0, _extends2.default)({}, groupingParams.dataRowIdToModelLookup);
+  const dataRowIdToIdLookup = (0, _extends2.default)({}, groupingParams.dataRowIdToIdLookup);
+  const tree = (0, _extends2.default)({}, groupingParams.tree);
+  const treeDepths = (0, _extends2.default)({}, groupingParams.treeDepths); // TODO: warn if id is already present in `props.rows`
 
-  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
-  // ids.push(rowId);
-
-  tree[rowId] = {
+  const node = {
+    type: 'pinnedRow',
     id: rowId,
-    isAutoGenerated: false,
-    parent: null,
     depth: 0,
-    groupingKey: null,
-    groupingField: null,
-    isPinned: true
+    parent: _xDataGrid.GRID_ROOT_GROUP_ID,
+    isAutoGenerated
   };
-  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = (0, _extends2.default)({}, rowModel);
-  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  (0, _utils.insertNodeInTree)({
+    node,
+    tree,
+    treeDepths
+  });
+
+  if (!isAutoGenerated) {
+    dataRowIdToModelLookup[rowId] = rowModel;
+    dataRowIdToIdLookup[rowId] = rowId;
+  } // Do not push it to ids list so that pagination is not affected by pinned rows
+
+
+  apiRef.current.unstable_caches.rows.dataRowIdToModelLookup[rowId] = (0, _extends2.default)({}, rowModel);
+  apiRef.current.unstable_caches.rows.dataRowIdToIdLookup[rowId] = rowId;
   const previousPinnedRows = ((_groupingParams$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.pinnedRows) || {};
   const newPinnedRow = {
     id: rowId,
     model: rowModel
   };
+
+  if ((_groupingParams$addit2 = groupingParams.additionalRowGroups) != null && (_groupingParams$addit3 = _groupingParams$addit2.pinnedRows) != null && (_groupingParams$addit4 = _groupingParams$addit3[position]) != null && _groupingParams$addit4.includes(newPinnedRow)) {
+    return (0, _extends2.default)({}, groupingParams, {
+      dataRowIdToModelLookup,
+      dataRowIdToIdLookup,
+      tree,
+      treeDepths
+    });
+  }
+
   return (0, _extends2.default)({}, groupingParams, {
-    idRowsLookup,
+    dataRowIdToModelLookup,
+    dataRowIdToIdLookup,
     tree,
+    treeDepths,
     additionalRowGroups: (0, _extends2.default)({}, groupingParams.additionalRowGroups, {
       pinnedRows: (0, _extends2.default)({}, previousPinnedRows, {
         [position]: [...(previousPinnedRows[position] || []), newPinnedRow]
@@ -62,7 +88,7 @@ function addPinnedRow({
 
 const useGridRowPinningPreProcessors = apiRef => {
   const addPinnedRows = React.useCallback(groupingParams => {
-    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott, _pinnedRowsCache$bott2, _pinnedRowsCache$topI2;
 
     const pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
     let newGroupingParams = (0, _extends2.default)({}, groupingParams, {
@@ -77,7 +103,8 @@ const useGridRowPinningPreProcessors = apiRef => {
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId,
         position: 'top',
-        apiRef
+        apiRef,
+        isAutoGenerated: false
       });
     });
     (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.forEach(rowId => {
@@ -86,17 +113,27 @@ const useGridRowPinningPreProcessors = apiRef => {
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId,
         position: 'bottom',
-        apiRef
+        apiRef,
+        isAutoGenerated: false
       });
-    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from `ids`
+    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from the root group children
 
-    newGroupingParams.ids = newGroupingParams.ids.filter(rowId => {
-      if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].isPinned) {
-        return false;
-      }
+    if ((_pinnedRowsCache$bott2 = pinnedRowsCache.bottomIds) != null && _pinnedRowsCache$bott2.length || (_pinnedRowsCache$topI2 = pinnedRowsCache.topIds) != null && _pinnedRowsCache$topI2.length) {
+      const shouldKeepRow = rowId => {
+        if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].type === 'pinnedRow') {
+          return false;
+        }
+
+        return true;
+      };
+
+      const rootGroupNode = newGroupingParams.tree[_xDataGrid.GRID_ROOT_GROUP_ID];
+      newGroupingParams.tree[_xDataGrid.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroupNode, {
+        children: rootGroupNode.children.filter(shouldKeepRow)
+      });
+      newGroupingParams.dataRowIds = newGroupingParams.dataRowIds.filter(shouldKeepRow);
+    }
 
-      return true;
-    });
     return newGroupingParams;
   }, [apiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateRows', addPinnedRows);

package/node/hooks/features/rowReorder/useGridRowReorder.js

@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
 const useGridRowReorder = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridRowReorder');
   const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
-  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowTreeDepthSelector);
+  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef();
@@ -73,13 +73,13 @@ const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
-    var _apiRef$current$getRo;
-
     if (dragRowId === '') {
       return;
     }
 
-    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.isPinned) {
+    const rowNode = apiRef.current.getRowNode(params.id);
+
+    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
       return;
     }
 

package/node/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -22,7 +22,7 @@ const GRID_TREE_DATA_GROUPING_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GR
   disableReorder: true,
   align: 'left',
   width: 200,
-  valueGetter: params => params.rowNode.groupingKey
+  valueGetter: params => params.rowNode.type === 'group' ? params.rowNode.groupingKey : undefined
 });
 exports.GRID_TREE_DATA_GROUPING_COL_DEF = GRID_TREE_DATA_GROUPING_COL_DEF;
 const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';

package/node/hooks/features/treeData/gridTreeDataUtils.js

@@ -27,14 +27,12 @@ const filterRowTreeFromTreeData = params => {
   const filteredDescendantCountLookup = {};
 
   const filterTreeNode = (node, isParentMatchingFilters, areAncestorsExpanded) => {
-    var _node$children;
-
     const shouldSkipFilters = disableChildrenFiltering && node.depth > 0;
     let isMatchingFilters;
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters || node.position === 'footer') {
+    } else if (!isRowMatchingFilters || node.type === 'footer') {
       isMatchingFilters = true;
     } else {
       const {
@@ -45,13 +43,17 @@ const filterRowTreeFromTreeData = params => {
     }
 
     let filteredDescendantCount = 0;
-    (_node$children = node.children) == null ? void 0 : _node$children.forEach(childId => {
-      var _isMatchingFilters;
 
-      const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
-      filteredDescendantCount += childSubTreeSize;
-    });
+    if (node.type === 'group') {
+      node.children.forEach(childId => {
+        var _isMatchingFilters;
+
+        const childNode = rowTree[childId];
+        const childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+        filteredDescendantCount += childSubTreeSize;
+      });
+    }
+
     let shouldPassFilters;
 
     switch (isMatchingFilters) {
@@ -75,9 +77,9 @@ const filterRowTreeFromTreeData = params => {
     }
 
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    filteredRowsLookup[node.id] = shouldPassFilters; // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
 
-    if (node.footerId != null) {
+    if (node.type === 'group' && node.footerId != null) {
       visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
@@ -87,7 +89,7 @@ const filterRowTreeFromTreeData = params => {
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (node.position === 'footer') {
+    if (node.type === 'footer') {
       return filteredDescendantCount;
     }
 

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

@@ -21,11 +21,7 @@ const useGridTreeData = apiRef => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
-      var _gridFilteredDescenda;
-
-      const filteredDescendantCount = (_gridFilteredDescenda = (0, _xDataGrid.gridFilteredDescendantCountLookupSelector)(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
-
-      if (filteredDescendantCount === 0) {
+      if (params.rowNode.type !== 'group') {
         return;
       }
 

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

@@ -23,10 +23,12 @@ var _gridTreeDataUtils = require("./gridTreeDataUtils");
 
 var _components = require("../../../components");
 
-var _buildRowTree = require("../../../utils/tree/buildRowTree");
+var _createRowTree = require("../../../utils/tree/createRowTree");
 
 var _sortRowTree = require("../../../utils/tree/sortRowTree");
 
+var _updateRowTree = require("../../../utils/tree/updateRowTree");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["hideDescendantCount"];
@@ -95,28 +97,45 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [props.treeData, getGroupingColDef]);
-  const createRowTree = React.useCallback(params => {
+  const createRowTreeForTreeData = React.useCallback(params => {
     if (!props.getTreeDataPath) {
       throw new Error('MUI: No getTreeDataPath given.');
     }
 
-    const rows = params.ids.map(rowId => ({
+    const getRowTreeBuilderNode = rowId => ({
       id: rowId,
-      path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
+      path: props.getTreeDataPath(params.dataRowIdToModelLookup[rowId]).map(key => ({
         key,
         field: null
       }))
-    })).sort((a, b) => a.path.length - b.path.length);
-    return (0, _buildRowTree.buildRowTree)((0, _extends2.default)({
-      rows
-    }, params, {
+    });
+
+    const onDuplicatePath = (firstId, secondId, path) => {
+      throw new Error(['MUI: The path returned by `getTreeDataPath` 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 (0, _createRowTree.createRowTree)({
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
+        onDuplicatePath
+      });
+    }
+
+    return (0, _updateRowTree.updateRowTree)({
+      nodes: {
+        inserted: params.updates.actions.insert.map(getRowTreeBuilderNode),
+        modified: params.updates.actions.modify.map(getRowTreeBuilderNode),
+        removed: params.updates.actions.remove
+      },
+      previousTree: params.previousTree,
+      previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
-      onDuplicatePath: (firstId, secondId, path) => {
-        throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
-      }
-    }));
+      groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY
+    });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
     const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
@@ -130,16 +149,15 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {
     const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
-    const rowIds = (0, _xDataGrid.gridRowIdsSelector)(apiRef);
     return (0, _sortRowTree.sortRowTree)({
       rowTree,
-      rowIds,
       sortRowList: params.sortRowList,
-      disableChildrenSorting: props.disableChildrenSorting
+      disableChildrenSorting: props.disableChildrenSorting,
+      shouldRenderGroupBelowLeaves: false
     });
   }, [apiRef, props.disableChildrenSorting]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateGroupingColumn);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'filtering', filterRows);
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'sorting', sortRows);
   /**

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.5
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/internals/index.js

@@ -26,8 +26,11 @@ var _exportNames = {
   rowPinningStateInitializer: true,
   useGridRowPinningPreProcessors: true,
   addPinnedRow: true,
-  buildRowTree: true,
-  sortRowTree: true
+  createRowTree: true,
+  updateRowTree: true,
+  sortRowTree: true,
+  insertNodeInTree: true,
+  removeNodeFromTree: true
 };
 Object.defineProperty(exports, "DataGridProColumnHeaders", {
   enumerable: true,
@@ -53,12 +56,6 @@ Object.defineProperty(exports, "addPinnedRow", {
     return _useGridRowPinningPreProcessors.addPinnedRow;
   }
 });
-Object.defineProperty(exports, "buildRowTree", {
-  enumerable: true,
-  get: function () {
-    return _buildRowTree.buildRowTree;
-  }
-});
 Object.defineProperty(exports, "columnPinningStateInitializer", {
   enumerable: true,
   get: function () {
@@ -77,12 +74,30 @@ Object.defineProperty(exports, "columnResizeStateInitializer", {
     return _useGridColumnResize.columnResizeStateInitializer;
   }
 });
+Object.defineProperty(exports, "createRowTree", {
+  enumerable: true,
+  get: function () {
+    return _createRowTree.createRowTree;
+  }
+});
 Object.defineProperty(exports, "detailPanelStateInitializer", {
   enumerable: true,
   get: function () {
     return _useGridDetailPanel.detailPanelStateInitializer;
   }
 });
+Object.defineProperty(exports, "insertNodeInTree", {
+  enumerable: true,
+  get: function () {
+    return _utils.insertNodeInTree;
+  }
+});
+Object.defineProperty(exports, "removeNodeFromTree", {
+  enumerable: true,
+  get: function () {
+    return _utils.removeNodeFromTree;
+  }
+});
 Object.defineProperty(exports, "rowPinningStateInitializer", {
   enumerable: true,
   get: function () {
@@ -95,6 +110,12 @@ Object.defineProperty(exports, "sortRowTree", {
     return _sortRowTree.sortRowTree;
   }
 });
+Object.defineProperty(exports, "updateRowTree", {
+  enumerable: true,
+  get: function () {
+    return _updateRowTree.updateRowTree;
+  }
+});
 Object.defineProperty(exports, "useGridColumnPinning", {
   enumerable: true,
   get: function () {
@@ -220,6 +241,10 @@ var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning
 
 var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
 
-var _buildRowTree = require("../utils/tree/buildRowTree");
+var _createRowTree = require("../utils/tree/createRowTree");
+
+var _updateRowTree = require("../utils/tree/updateRowTree");
+
+var _sortRowTree = require("../utils/tree/sortRowTree");
 
-var _sortRowTree = require("../utils/tree/sortRowTree");
+var _utils = require("../utils/tree/utils");

package/node/utils/tree/createRowTree.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createRowTree = void 0;
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+var _insertDataRowInTree = require("./insertDataRowInTree");
+
+/**
+ * Transform a list of rows into a tree structure where each row references its parent and children.
+ */
+const createRowTree = params => {
+  const dataRowIds = [];
+  const tree = {
+    [_xDataGrid.GRID_ROOT_GROUP_ID]: (0, _internals.buildRootGroup)()
+  };
+  const treeDepths = {};
+
+  for (let i = 0; i < params.nodes.length; i += 1) {
+    const node = params.nodes[i];
+    dataRowIds.push(node.id);
+    (0, _insertDataRowInTree.insertDataRowInTree)({
+      tree,
+      id: node.id,
+      path: node.path,
+      onDuplicatePath: params.onDuplicatePath,
+      treeDepths,
+      isGroupExpandedByDefault: params.isGroupExpandedByDefault,
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+    });
+  }
+
+  return {
+    tree,
+    treeDepths,
+    groupingName: params.groupingName,
+    dataRowIds
+  };
+};
+
+exports.createRowTree = createRowTree;