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

package/modern/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -14,7 +14,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
-  rowsLoadingMode: GridFeatureModeConstant.client,
+  rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

package/modern/components/DataGridProVirtualScroller.js

@@ -4,7 +4,7 @@ const _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -297,7 +297,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }
 
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
       ownerState: {
         position: 'top'

package/modern/components/GridDetailPanelToggleCell.js

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

package/modern/components/GridRowReorderCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -22,7 +22,7 @@ const GridRowReorderCell = params => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const editRowsState = useGridSelector(apiRef, 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
@@ -58,7 +58,7 @@ const GridRowReorderCell = params => {
     onDragEnd: publish('rowDragEnd')
   } : null;
 
-  if ((params.rowNode.position ?? 'body') !== 'body') {
+  if (params.rowNode.type === 'footer') {
     return null;
   }
 
@@ -75,7 +75,7 @@ const GridRowReorderCell = params => {
 
 export { GridRowReorderCell };
 export const renderRowReorderCell = params => {
-  if (params.rowNode.isPinned) {
+  if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;
   }
 

package/modern/components/GridTreeDataGroupingCell.js

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

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

@@ -1,6 +1,6 @@
 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';
@@ -20,7 +20,7 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   // only call getDetailPanelContent when asked for an id
 
 
-  const rowIds = gridRowIdsSelector(apiRef);
+  const rowIds = gridDataRowIdsSelector(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/modern/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
 
 
-  const rowIds = gridRowIdsSelector(apiRef);
+  const rowIds = gridDataRowIdsSelector(apiRef);
   const contentCache = rowIds.reduce((acc, id) => {
     const params = apiRef.current.getRowParams(id);
     acc[id] = getDetailPanelContent(params);

package/modern/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 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 !== GridFeatureModeConstant.client) {
+    if (!dimensions || props.rowsLoadingMode !== 'client') {
       return;
     }
 

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

@@ -1,8 +1,12 @@
 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({
+  apiRef,
+  visibleRows,
+  range
+}) {
   let {
     firstRowIndex,
     lastRowIndex
@@ -13,16 +17,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;
     }
@@ -43,7 +50,7 @@ function isLazyLoadingDisabled({
     return true;
   }
 
-  if (rowsLoadingMode !== GridFeatureModeConstant.server) {
+  if (rowsLoadingMode !== 'server') {
     return true;
   }
 
@@ -105,9 +112,13 @@ export 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/modern/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -1,7 +1,7 @@
 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 const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
 
 const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
@@ -11,19 +11,33 @@ export const useGridLazyLoaderPreProcessors = (apiRef, props) => {
     lazyLoading
   } = props.experimentalFeatures ?? {};
   const addSkeletonRows = React.useCallback(groupingParams => {
-    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+    const tree = _extends({}, groupingParams.tree);
+
+    const rootGroup = tree[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: GRID_ROOT_GROUP_ID,
+        depth: 0
+      };
+      tree[skeletonId] = skeletonRowNode;
     }
 
+    tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+      children: rootGroupChildren
+    });
     return _extends({}, groupingParams, {
-      ids: newRowsIds
+      tree
     });
   }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);

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

@@ -1,40 +1,66 @@
 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({
   groupingParams,
   rowModel,
   rowId,
   position,
-  apiRef
+  apiRef,
+  isAutoGenerated
 }) {
-  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+  const dataRowIdToModelLookup = _extends({}, groupingParams.dataRowIdToModelLookup);
 
-  const tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+  const dataRowIdToIdLookup = _extends({}, groupingParams.dataRowIdToIdLookup);
 
+  const 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);
+  const treeDepths = _extends({}, groupingParams.treeDepths); // TODO: warn if id is already present in `props.rows`
 
-  tree[rowId] = {
+
+  const node = {
+    type: 'pinnedRow',
     id: rowId,
-    isAutoGenerated: false,
-    parent: null,
     depth: 0,
-    groupingKey: null,
-    groupingField: null,
-    isPinned: true
+    parent: GRID_ROOT_GROUP_ID,
+    isAutoGenerated
   };
-  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
-  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  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] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.dataRowIdToIdLookup[rowId] = rowId;
   const previousPinnedRows = groupingParams.additionalRowGroups?.pinnedRows || {};
   const newPinnedRow = {
     id: rowId,
     model: rowModel
   };
+
+  if (groupingParams.additionalRowGroups?.pinnedRows?.[position]?.includes(newPinnedRow)) {
+    return _extends({}, groupingParams, {
+      dataRowIdToModelLookup,
+      dataRowIdToIdLookup,
+      tree,
+      treeDepths
+    });
+  }
+
   return _extends({}, groupingParams, {
-    idRowsLookup,
+    dataRowIdToModelLookup,
+    dataRowIdToIdLookup,
     tree,
+    treeDepths,
     additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
       pinnedRows: _extends({}, previousPinnedRows, {
         [position]: [...(previousPinnedRows[position] || []), newPinnedRow]
@@ -59,7 +85,8 @@ export const useGridRowPinningPreProcessors = apiRef => {
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId,
         position: 'top',
-        apiRef
+        apiRef,
+        isAutoGenerated: false
       });
     });
     pinnedRowsCache.bottomIds?.forEach(rowId => {
@@ -68,17 +95,27 @@ export 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.bottomIds?.length || pinnedRowsCache.topIds?.length) {
+      const shouldKeepRow = rowId => {
+        if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].type === 'pinnedRow') {
+          return false;
+        }
+
+        return true;
+      };
+
+      const 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/modern/hooks/features/rowReorder/useGridRowReorder.js

@@ -1,6 +1,6 @@
 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';
 
 const useUtilityClasses = ownerState => {
   const {
@@ -20,7 +20,7 @@ const useUtilityClasses = ownerState => {
 export const useGridRowReorder = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowReorder');
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef();
@@ -64,7 +64,9 @@ export const useGridRowReorder = (apiRef, props) => {
       return;
     }
 
-    if (apiRef.current.getRowNode(params.id)?.isPinned) {
+    const rowNode = apiRef.current.getRowNode(params.id);
+
+    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
       return;
     }
 

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

@@ -12,7 +12,7 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF,
   disableReorder: true,
   align: 'left',
   width: 200,
-  valueGetter: params => params.rowNode.groupingKey
+  valueGetter: params => params.rowNode.type === 'group' ? params.rowNode.groupingKey : undefined
 });
 export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
 export const GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES = {

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

@@ -22,7 +22,7 @@ export const filterRowTreeFromTreeData = params => {
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters || node.position === 'footer') {
+    } else if (!isRowMatchingFilters || node.type === 'footer') {
       isMatchingFilters = true;
     } else {
       const {
@@ -33,11 +33,15 @@ export const filterRowTreeFromTreeData = params => {
     }
 
     let filteredDescendantCount = 0;
-    node.children?.forEach(childId => {
-      const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, isMatchingFilters ?? isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
-      filteredDescendantCount += childSubTreeSize;
-    });
+
+    if (node.type === 'group') {
+      node.children.forEach(childId => {
+        const childNode = rowTree[childId];
+        const childSubTreeSize = filterTreeNode(childNode, isMatchingFilters ?? isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+        filteredDescendantCount += childSubTreeSize;
+      });
+    }
+
     let shouldPassFilters;
 
     switch (isMatchingFilters) {
@@ -61,9 +65,9 @@ export 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;
     }
 
@@ -73,7 +77,7 @@ export const filterRowTreeFromTreeData = params => {
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (node.position === 'footer') {
+    if (node.type === 'footer') {
       return filteredDescendantCount;
     }
 

package/modern/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 const useGridTreeData = apiRef => {
   /**
    * EVENTS
@@ -8,9 +8,7 @@ export const useGridTreeData = apiRef => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
-      const filteredDescendantCount = gridFilteredDescendantCountLookupSelector(apiRef)[params.id] ?? 0;
-
-      if (filteredDescendantCount === 0) {
+      if (params.rowNode.type !== 'group') {
         return;
       }
 

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

@@ -2,13 +2,14 @@ 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 { 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 const useGridTreeDataPreProcessors = (apiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
@@ -69,28 +70,45 @@ export 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 buildRowTree(_extends({
-      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 createRowTree({
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: 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,
+      previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: 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: TREE_DATA_STRATEGY
+    });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
@@ -104,16 +122,15 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
-    const rowIds = gridRowIdsSelector(apiRef);
     return sortRowTree({
       rowTree,
-      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/modern/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/modern/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/modern/utils/tree/createRowTree.js

@@ -0,0 +1,35 @@
+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 const createRowTree = params => {
+  const dataRowIds = [];
+  const tree = {
+    [GRID_ROOT_GROUP_ID]: buildRootGroup()
+  };
+  const treeDepths = {};
+
+  for (let i = 0; i < params.nodes.length; i += 1) {
+    const node = params.nodes[i];
+    dataRowIds.push(node.id);
+    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
+  };
+};

package/modern/utils/tree/index.js

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