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

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridRowIdsSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelRawHeightCacheSelector } from './gridDetailPanelSelector';
@@ -24,7 +24,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  var rowIds = gridRowIdsSelector(apiRef);
+  var rowIds = gridDataRowIdsSelector(apiRef);
   var contentCache = rowIds.reduce(function (acc, id) {
     var params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiEventHandler, gridRowIdsSelector } from '@mui/x-data-grid';
+import { useGridApiEventHandler, gridDataRowIdsSelector } from '@mui/x-data-grid';
 
 function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
@@ -9,7 +9,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  var rowIds = gridRowIdsSelector(apiRef);
+  var rowIds = gridDataRowIdsSelector(apiRef);
   var contentCache = rowIds.reduce(function (acc, id) {
     var params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector, GridFeatureModeConstant } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
@@ -16,7 +16,7 @@ export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props)
   var handleRowsScrollEnd = React.useCallback(function (scrollPosition) {
     var dimensions = apiRef.current.getRootDimensions(); // Prevent the infite loading working in combination with lazy loading
 
-    if (!dimensions || props.rowsLoadingMode !== GridFeatureModeConstant.client) {
+    if (!dimensions || props.rowsLoadingMode !== 'client') {
       return;
     }
 

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

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { useGridApiEventHandler, GridFeatureModeConstant, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
+import { useGridApiEventHandler, useGridSelector, gridSortModelSelector, gridFilterModelSelector, useGridApiOptionHandler } from '@mui/x-data-grid';
 import { useGridVisibleRows, getRenderableIndexes } from '@mui/x-data-grid/internals';
 
-function findSkeletonRowsSection(visibleRows, range) {
+function findSkeletonRowsSection(_ref) {
+  var apiRef = _ref.apiRef,
+      visibleRows = _ref.visibleRows,
+      range = _ref.range;
   var firstRowIndex = range.firstRowIndex,
       lastRowIndex = range.lastRowIndex;
   var visibleRowsSection = visibleRows.slice(range.firstRowIndex, range.lastRowIndex);
@@ -12,16 +15,19 @@ function findSkeletonRowsSection(visibleRows, range) {
   var isSkeletonSectionFound = false;
 
   while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
-    if (!visibleRowsSection[startIndex].model && !visibleRowsSection[endIndex].model) {
+    var isStartingWithASkeletonRow = apiRef.current.getRowNode(visibleRowsSection[startIndex].id).type === 'skeletonRow';
+    var 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;
     }
@@ -33,16 +39,16 @@ function findSkeletonRowsSection(visibleRows, range) {
   } : undefined;
 }
 
-function isLazyLoadingDisabled(_ref) {
-  var lazyLoadingFeatureFlag = _ref.lazyLoadingFeatureFlag,
-      rowsLoadingMode = _ref.rowsLoadingMode,
-      gridDimensions = _ref.gridDimensions;
+function isLazyLoadingDisabled(_ref2) {
+  var lazyLoadingFeatureFlag = _ref2.lazyLoadingFeatureFlag,
+      rowsLoadingMode = _ref2.rowsLoadingMode,
+      gridDimensions = _ref2.gridDimensions;
 
   if (!lazyLoadingFeatureFlag || !gridDimensions) {
     return true;
   }
 
-  if (rowsLoadingMode !== GridFeatureModeConstant.server) {
+  if (rowsLoadingMode !== 'server') {
     return true;
   }
 
@@ -67,8 +73,8 @@ export var useGridLazyLoader = function useGridLazyLoader(apiRef, props) {
     lastRowToRender: 0
   });
 
-  var _ref2 = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {},
-      lazyLoading = _ref2.lazyLoading;
+  var _ref3 = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {},
+      lazyLoading = _ref3.lazyLoading;
 
   var getCurrentIntervalToRender = React.useCallback(function () {
     var currentRenderContext = apiRef.current.unstable_getRenderContext();
@@ -112,9 +118,13 @@ export var useGridLazyLoader = function useGridLazyLoader(apiRef, props) {
     }
 
     if (sortModel.length === 0 && filterModel.items.length === 0) {
-      var skeletonRowsSection = findSkeletonRowsSection(visibleRows.rows, {
-        firstRowIndex: params.firstRowToRender,
-        lastRowIndex: params.lastRowToRender
+      var skeletonRowsSection = findSkeletonRowsSection({
+        apiRef: apiRef,
+        visibleRows: visibleRows.rows,
+        range: {
+          firstRowIndex: params.firstRowToRender,
+          lastRowIndex: params.lastRowToRender
+        }
       });
 
       if (!skeletonRowsSection) {

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

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
-import { GridFeatureModeConstant } from '@mui/x-data-grid';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export var GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
 
 var getSkeletonRowId = function getSkeletonRowId(index) {
@@ -16,19 +16,33 @@ export var useGridLazyLoaderPreProcessors = function useGridLazyLoaderPreProcess
       lazyLoading = _ref.lazyLoading;
 
   var addSkeletonRows = React.useCallback(function (groupingParams) {
-    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+    var tree = _extends({}, groupingParams.tree);
+
+    var rootGroup = tree[GRID_ROOT_GROUP_ID];
+
+    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
     }
 
-    var newRowsIds = _toConsumableArray(groupingParams.ids);
+    var rootGroupChildren = _toConsumableArray(rootGroup.children);
 
-    for (var i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+    for (var i = 0; i < props.rowCount - rootGroup.children.length; i += 1) {
       var skeletonId = getSkeletonRowId(i);
-      newRowsIds.push(skeletonId);
+      rootGroupChildren.push(skeletonId);
+      var skeletonRowNode = {
+        type: 'skeletonRow',
+        id: skeletonId,
+        parent: GRID_ROOT_GROUP_ID,
+        depth: 0
+      };
+      tree[skeletonId] = skeletonRowNode;
     }
 
+    tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+      children: rootGroupChildren
+    });
     return _extends({}, groupingParams, {
-      ids: newRowsIds
+      tree: tree
     });
   }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);

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

@@ -3,42 +3,68 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { insertNodeInTree } from '../../../utils/tree/utils';
 export function addPinnedRow(_ref) {
-  var _groupingParams$addit;
+  var _groupingParams$addit, _groupingParams$addit2, _groupingParams$addit3, _groupingParams$addit4;
 
   var groupingParams = _ref.groupingParams,
       rowModel = _ref.rowModel,
       rowId = _ref.rowId,
       position = _ref.position,
-      apiRef = _ref.apiRef;
+      apiRef = _ref.apiRef,
+      isAutoGenerated = _ref.isAutoGenerated;
 
-  var idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+  var dataRowIdToModelLookup = _extends({}, groupingParams.dataRowIdToModelLookup);
 
-  var tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+  var dataRowIdToIdLookup = _extends({}, groupingParams.dataRowIdToIdLookup);
 
+  var tree = _extends({}, groupingParams.tree);
 
-  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
-  // ids.push(rowId);
+  var treeDepths = _extends({}, groupingParams.treeDepths); // TODO: warn if id is already present in `props.rows`
 
-  tree[rowId] = {
+
+  var node = {
+    type: 'pinnedRow',
     id: rowId,
-    isAutoGenerated: false,
-    parent: null,
     depth: 0,
-    groupingKey: null,
-    groupingField: null,
-    isPinned: true
+    parent: GRID_ROOT_GROUP_ID,
+    isAutoGenerated: isAutoGenerated
   };
-  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
-  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  insertNodeInTree({
+    node: node,
+    tree: tree,
+    treeDepths: 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] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.dataRowIdToIdLookup[rowId] = rowId;
   var previousPinnedRows = ((_groupingParams$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.pinnedRows) || {};
   var 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 _extends({}, groupingParams, {
+      dataRowIdToModelLookup: dataRowIdToModelLookup,
+      dataRowIdToIdLookup: dataRowIdToIdLookup,
+      tree: tree,
+      treeDepths: treeDepths
+    });
+  }
+
   return _extends({}, groupingParams, {
-    idRowsLookup: idRowsLookup,
+    dataRowIdToModelLookup: dataRowIdToModelLookup,
+    dataRowIdToIdLookup: dataRowIdToIdLookup,
     tree: tree,
+    treeDepths: treeDepths,
     additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
       pinnedRows: _extends({}, previousPinnedRows, _defineProperty({}, position, [].concat(_toConsumableArray(previousPinnedRows[position] || []), [newPinnedRow])))
     })
@@ -46,7 +72,7 @@ export function addPinnedRow(_ref) {
 }
 export var useGridRowPinningPreProcessors = function useGridRowPinningPreProcessors(apiRef) {
   var addPinnedRows = React.useCallback(function (groupingParams) {
-    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott, _pinnedRowsCache$bott2, _pinnedRowsCache$topI2;
 
     var pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
 
@@ -63,7 +89,8 @@ export var useGridRowPinningPreProcessors = function useGridRowPinningPreProcess
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId: rowId,
         position: 'top',
-        apiRef: apiRef
+        apiRef: apiRef,
+        isAutoGenerated: false
       });
     });
     (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.forEach(function (rowId) {
@@ -72,17 +99,27 @@ export var useGridRowPinningPreProcessors = function useGridRowPinningPreProcess
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId: rowId,
         position: 'bottom',
-        apiRef: apiRef
+        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(function (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) {
+      var shouldKeepRow = function shouldKeepRow(rowId) {
+        if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].type === 'pinnedRow') {
+          return false;
+        }
+
+        return true;
+      };
+
+      var rootGroupNode = newGroupingParams.tree[GRID_ROOT_GROUP_ID];
+      newGroupingParams.tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroupNode, {
+        children: rootGroupNode.children.filter(shouldKeepRow)
+      });
+      newGroupingParams.dataRowIds = newGroupingParams.dataRowIds.filter(shouldKeepRow);
+    }
 
-      return true;
-    });
     return newGroupingParams;
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addPinnedRows);

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -19,7 +19,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 export var useGridRowReorder = function useGridRowReorder(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridRowReorder');
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   var dragRowNode = React.useRef(null);
   var originRowIndex = React.useRef(null);
   var removeDnDStylesTimeout = React.useRef();
@@ -64,13 +64,13 @@ export var useGridRowReorder = function useGridRowReorder(apiRef, props) {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   var handleDragOver = React.useCallback(function (params, event) {
-    var _apiRef$current$getRo;
-
     if (dragRowId === '') {
       return;
     }
 
-    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.isPinned) {
+    var rowNode = apiRef.current.getRowNode(params.id);
+
+    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
       return;
     }
 

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

@@ -13,7 +13,7 @@ export var GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   align: 'left',
   width: 200,
   valueGetter: function valueGetter(params) {
-    return params.rowNode.groupingKey;
+    return params.rowNode.type === 'group' ? params.rowNode.groupingKey : undefined;
   }
 });
 export var GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';

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

@@ -15,14 +15,12 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
   var filteredDescendantCountLookup = {};
 
   var filterTreeNode = function filterTreeNode(node, isParentMatchingFilters, areAncestorsExpanded) {
-    var _node$children;
-
     var shouldSkipFilters = disableChildrenFiltering && node.depth > 0;
     var isMatchingFilters;
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters || node.position === 'footer') {
+    } else if (!isRowMatchingFilters || node.type === 'footer') {
       isMatchingFilters = true;
     } else {
       var _isRowMatchingFilters = isRowMatchingFilters(node.id),
@@ -33,13 +31,17 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
     }
 
     var filteredDescendantCount = 0;
-    (_node$children = node.children) == null ? void 0 : _node$children.forEach(function (childId) {
-      var _isMatchingFilters;
 
-      var childNode = rowTree[childId];
-      var childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
-      filteredDescendantCount += childSubTreeSize;
-    });
+    if (node.type === 'group') {
+      node.children.forEach(function (childId) {
+        var _isMatchingFilters;
+
+        var childNode = rowTree[childId];
+        var childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+        filteredDescendantCount += childSubTreeSize;
+      });
+    }
+
     var shouldPassFilters;
 
     switch (isMatchingFilters) {
@@ -63,9 +65,9 @@ export var filterRowTreeFromTreeData = function 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;
     }
 
@@ -75,7 +77,7 @@ export var filterRowTreeFromTreeData = function filterRowTreeFromTreeData(params
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (node.position === 'footer') {
+    if (node.type === 'footer') {
       return filteredDescendantCount;
     }
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridApiEventHandler, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+import { useGridApiEventHandler } from '@mui/x-data-grid';
 export var useGridTreeData = function useGridTreeData(apiRef) {
   /**
    * EVENTS
@@ -8,11 +8,7 @@ export var useGridTreeData = function useGridTreeData(apiRef) {
     var cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
-      var _gridFilteredDescenda;
-
-      var filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
-
-      if (filteredDescendantCount === 0) {
+      if (params.rowNode.type !== 'group') {
         return;
       }
 

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

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+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 './gridTreeDataGroupColDef';
 import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
 import { GridTreeDataGroupingCell } from '../../../components';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { createRowTree } from '../../../utils/tree/createRowTree';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { updateRowTree } from '../../../utils/tree/updateRowTree';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(apiRef, props) {
   var setStrategyAvailability = React.useCallback(function () {
@@ -78,36 +79,51 @@ export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(
 
     return columnsState;
   }, [props.treeData, getGroupingColDef]);
-  var createRowTree = React.useCallback(function (params) {
+  var createRowTreeForTreeData = React.useCallback(function (params) {
     if (!props.getTreeDataPath) {
       throw new Error('MUI: No getTreeDataPath given.');
     }
 
-    var rows = params.ids.map(function (rowId) {
+    var getRowTreeBuilderNode = function getRowTreeBuilderNode(rowId) {
       return {
         id: rowId,
-        path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(function (key) {
+        path: props.getTreeDataPath(params.dataRowIdToModelLookup[rowId]).map(function (key) {
           return {
             key: key,
             field: null
           };
         })
       };
-    }).sort(function (a, b) {
-      return a.path.length - b.path.length;
-    });
-    return buildRowTree(_extends({
-      rows: rows
-    }, params, {
+    };
+
+    var onDuplicatePath = function onDuplicatePath(firstId, secondId, path) {
+      throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', "The rows with id #".concat(firstId, " and #").concat(secondId, " have the same."), "Path: ".concat(JSON.stringify(path.map(function (step) {
+        return step.key;
+      })), ".")].join('\n'));
+    };
+
+    if (params.updates.type === 'full') {
+      return createRowTree({
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: TREE_DATA_STRATEGY,
+        onDuplicatePath: 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,
+      previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: TREE_DATA_STRATEGY,
-      onDuplicatePath: function onDuplicatePath(firstId, secondId, path) {
-        throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', "The rows with id #".concat(firstId, " and #").concat(secondId, " have the same."), "Path: ".concat(JSON.stringify(path.map(function (step) {
-          return step.key;
-        })), ".")].join('\n'));
-      }
-    }));
+      groupingName: TREE_DATA_STRATEGY
+    });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   var filterRows = React.useCallback(function (params) {
     var rowTree = gridRowTreeSelector(apiRef);
@@ -121,16 +137,15 @@ export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(
   }, [apiRef, props.disableChildrenFiltering]);
   var sortRows = React.useCallback(function (params) {
     var rowTree = gridRowTreeSelector(apiRef);
-    var rowIds = gridRowIdsSelector(apiRef);
     return sortRowTree({
       rowTree: rowTree,
-      rowIds: rowIds,
       sortRowList: params.sortRowList,
-      disableChildrenSorting: props.disableChildrenSorting
+      disableChildrenSorting: props.disableChildrenSorting,
+      shouldRenderGroupBelowLeaves: false
     });
   }, [apiRef, props.disableChildrenSorting]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
+  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
   /**

package/legacy/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/legacy/internals/index.js

@@ -15,5 +15,7 @@ export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGrid
 export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
 export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
-export { buildRowTree } from '../utils/tree/buildRowTree';
-export { sortRowTree } from '../utils/tree/sortRowTree';
+export { createRowTree } from '../utils/tree/createRowTree';
+export { updateRowTree } from '../utils/tree/updateRowTree';
+export { sortRowTree } from '../utils/tree/sortRowTree';
+export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';

package/legacy/utils/tree/createRowTree.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { buildRootGroup } from '@mui/x-data-grid/internals';
+import { insertDataRowInTree } from './insertDataRowInTree';
+
+/**
+ * Transform a list of rows into a tree structure where each row references its parent and children.
+ */
+export var createRowTree = function createRowTree(params) {
+  var dataRowIds = [];
+
+  var tree = _defineProperty({}, GRID_ROOT_GROUP_ID, buildRootGroup());
+
+  var treeDepths = {};
+
+  for (var i = 0; i < params.nodes.length; i += 1) {
+    var node = params.nodes[i];
+    dataRowIds.push(node.id);
+    insertDataRowInTree({
+      tree: tree,
+      id: node.id,
+      path: node.path,
+      onDuplicatePath: params.onDuplicatePath,
+      treeDepths: treeDepths,
+      isGroupExpandedByDefault: params.isGroupExpandedByDefault,
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+    });
+  }
+
+  return {
+    tree: tree,
+    treeDepths: treeDepths,
+    groupingName: params.groupingName,
+    dataRowIds: dataRowIds
+  };
+};

package/legacy/utils/tree/index.js

@@ -1 +1 @@
-export { getGroupRowIdFromPath } from './buildRowTree';
+export { getGroupRowIdFromPath } from './utils';