@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

package/modern/hooks/features/rows/useGridRows.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector, gridRowsIdToIdLookupSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, getRowIdFromRowModel } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rows = createRowsInternalCache({
@@ -18,9 +18,10 @@ export const rowsStateInitializer = (state, props, apiRef) => {
   return _extends({}, state, {
     rows: getRowsStateFromCache({
       apiRef,
-      previousTree: null,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading
+      loadingProp: props.loading,
+      previousTree: null,
+      previousTreeDepths: null
     })
   });
 };
@@ -37,23 +38,42 @@ export const useGridRows = (apiRef, props) => {
   const currentPage = useGridVisibleRows(apiRef, props);
   const lastUpdateMs = React.useRef(Date.now());
   const timeout = React.useRef(null);
-  const getRow = React.useCallback(id => gridRowsLookupSelector(apiRef)[id] ?? null, [apiRef]);
+  const getRow = React.useCallback(id => {
+    const model = gridRowsLookupSelector(apiRef)[id];
+
+    if (model) {
+      return model;
+    }
+
+    const node = apiRef.current.getRowNode(id);
+
+    if (node && isAutoGeneratedRow(node)) {
+      // TODO rows v6: Is it the best approach ?
+      return {};
+    }
+
+    return null;
+  }, [apiRef]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
   }, index) => {
     acc[id] = index;
     return acc;
   }, {}), [currentPage.rows]);
-  const throttledRowsChange = React.useCallback((newCache, throttle) => {
+  const throttledRowsChange = React.useCallback(({
+    cache,
+    throttle
+  }) => {
     const run = () => {
       timeout.current = null;
       lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => _extends({}, state, {
         rows: getRowsStateFromCache({
           apiRef,
-          previousTree: gridRowTreeSelector(apiRef),
           rowCountProp: props.rowCount,
-          loadingProp: props.loading
+          loadingProp: props.loading,
+          previousTree: gridRowTreeSelector(apiRef),
+          previousTreeDepths: gridRowTreeDepthsSelector(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -65,7 +85,7 @@ export const useGridRows = (apiRef, props) => {
       timeout.current = null;
     }
 
-    apiRef.current.unstable_caches.rows = newCache;
+    apiRef.current.unstable_caches.rows = cache;
 
     if (!throttle) {
       run();
@@ -87,72 +107,38 @@ export const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(createRowsInternalCache({
-      rows,
-      getRowId: props.getRowId,
-      loading: props.loading
-    }), true);
+    throttledRowsChange({
+      cache: createRowsInternalCache({
+        rows,
+        getRowId: props.getRowId,
+        loading: props.loading
+      }),
+      throttle: true
+    });
   }, [logger, props.getRowId, props.loading, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
       throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
-    } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
-
-
-    const uniqueUpdates = new Map();
-    updates.forEach(update => {
-      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+    }
 
-      if (uniqueUpdates.has(id)) {
-        uniqueUpdates.set(id, _extends({}, uniqueUpdates.get(id), update));
-      } else {
-        uniqueUpdates.set(id, update);
-      }
+    const cache = updateCacheWithNewRows({
+      updates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.unstable_caches.rows
     });
-    const deletedRowIds = [];
-    const prevCache = apiRef.current.unstable_caches.rows;
-    const newCache = {
-      rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
-      loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
-      idRowsLookup: _extends({}, prevCache.idRowsLookup),
-      idToIdLookup: _extends({}, prevCache.idToIdLookup),
-      ids: [...prevCache.ids]
-    };
-    uniqueUpdates.forEach((partialRow, id) => {
-      // eslint-disable-next-line no-underscore-dangle
-      if (partialRow._action === 'delete') {
-        delete newCache.idRowsLookup[id];
-        delete newCache.idToIdLookup[id];
-        deletedRowIds.push(id);
-        return;
-      }
-
-      const oldRow = apiRef.current.getRow(id);
-
-      if (!oldRow) {
-        newCache.idRowsLookup[id] = partialRow;
-        newCache.idToIdLookup[id] = id;
-        newCache.ids.push(id);
-        return;
-      }
-
-      newCache.idRowsLookup[id] = _extends({}, apiRef.current.getRow(id), partialRow);
+    throttledRowsChange({
+      cache,
+      throttle: true
     });
-
-    if (deletedRowIds.length > 0) {
-      newCache.ids = newCache.ids.filter(id => !deletedRowIds.includes(id));
-    }
-
-    throttledRowsChange(newCache, true);
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
-    const allRows = gridRowIdsSelector(apiRef);
+    const dataRows = gridDataRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
-    return new Map(allRows.map(id => [id, idRowsLookup[id]]));
+    return new Map(dataRows.map(id => [id, idRowsLookup[id] ?? {}]));
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
-  const getAllRowIds = React.useCallback(() => gridRowIdsSelector(apiRef), [apiRef]);
+  const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
   const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
@@ -161,6 +147,10 @@ export const useGridRows = (apiRef, props) => {
       throw new Error(`MUI: No row with id #${id} found`);
     }
 
+    if (currentNode.type !== 'group') {
+      throw new Error('MUI: Only group nodes can be expanded or collapsed');
+    }
+
     const newNode = _extends({}, currentNode, {
       childrenExpanded: isExpanded
     });
@@ -200,9 +190,8 @@ export const useGridRows = (apiRef, props) => {
 
       for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
         const id = sortedRowIds[index];
-        const node = tree[id];
 
-        if (!skipAutoGeneratedRows || !node.isAutoGenerated) {
+        if (!skipAutoGeneratedRows || !isAutoGeneratedRow(tree[id])) {
           children.push(id);
         }
       }
@@ -218,21 +207,42 @@ export const useGridRows = (apiRef, props) => {
     return children;
   }, [apiRef]);
   const setRowIndex = React.useCallback((rowId, targetIndex) => {
-    const allRows = gridRowIdsSelector(apiRef);
-    const oldIndex = allRows.findIndex(row => row === rowId);
+    const node = apiRef.current.getRowNode(rowId);
 
-    if (oldIndex === -1 || oldIndex === targetIndex) {
-      return;
+    if (!node) {
+      throw new Error(`MUI: No row with id #${rowId} found`);
     }
 
-    logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
-    const updatedRows = [...allRows];
-    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, {
-        ids: updatedRows
-      })
-    }));
+    if (node.parent !== GRID_ROOT_GROUP_ID) {
+      throw new Error(`MUI: The row reordering do not support reordering of grouped rows yet`);
+    }
+
+    if (node.type !== 'leaf') {
+      throw new Error(`MUI: The row reordering do not support reordering of footer or grouping rows`);
+    }
+
+    apiRef.current.setState(state => {
+      const group = gridRowTreeSelector(state, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
+      const allRows = group.children;
+      const oldIndex = allRows.findIndex(row => row === rowId);
+
+      if (oldIndex === -1 || oldIndex === targetIndex) {
+        return state;
+      }
+
+      logger.debug(`Moving row ${rowId} to index ${targetIndex}`);
+      const updatedRows = [...allRows];
+      updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, {
+            [GRID_ROOT_GROUP_ID]: _extends({}, group, {
+              children: updatedRows
+            })
+          })
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
@@ -244,49 +254,51 @@ export const useGridRows = (apiRef, props) => {
       return;
     }
 
-    const allRows = gridRowIdsSelector(apiRef);
-    const updatedRows = [...allRows];
-    const idRowsLookup = gridRowsLookupSelector(apiRef);
-    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
-    const tree = gridRowTreeSelector(apiRef);
+    const treeDepth = gridRowMaximumTreeDepthSelector(apiRef);
 
-    const updatedIdRowsLookup = _extends({}, idRowsLookup);
+    if (treeDepth > 1) {
+      throw new Error('`apiRef.current.unstable_replaceRows` is not compatible with tree data and row grouping');
+    }
 
-    const updatedIdToIdLookup = _extends({}, idToIdLookup);
+    const tree = _extends({}, gridRowTreeSelector(apiRef));
 
-    const updatedTree = _extends({}, tree);
+    const dataRowIdToModelLookup = _extends({}, gridRowsLookupSelector(apiRef));
 
-    const newRowEntries = newRows.map(newRowModel => {
-      const rowId = getRowIdFromRowModel(newRowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
-      return {
-        id: rowId,
-        model: newRowModel
-      };
-    });
-    newRowEntries.forEach((row, index) => {
-      const [replacedRowId] = updatedRows.splice(firstRowToRender + index, 1, row.id);
-      delete updatedIdRowsLookup[replacedRowId];
-      delete updatedIdToIdLookup[replacedRowId];
-      delete updatedTree[replacedRowId];
-    });
-    newRowEntries.forEach(row => {
+    const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
+
+    const rootGroup = tree[GRID_ROOT_GROUP_ID];
+    const rootGroupChildren = [...rootGroup.children];
+
+    for (let i = 0; i < newRows.length; i += 1) {
+      const rowModel = newRows[i];
+      const rowId = getRowIdFromRowModel(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
+      const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      delete dataRowIdToModelLookup[replacedRowId];
+      delete dataRowIdToIdLookup[replacedRowId];
+      delete tree[replacedRowId];
       const rowTreeNodeConfig = {
-        id: row.id,
-        parent: null,
+        id: rowId,
         depth: 0,
-        groupingKey: null,
-        groupingField: null
+        parent: GRID_ROOT_GROUP_ID,
+        type: 'leaf',
+        groupingKey: null
       };
-      updatedIdRowsLookup[row.id] = row.model;
-      updatedIdToIdLookup[row.id] = row.id;
-      updatedTree[row.id] = rowTreeNodeConfig;
-    });
+      dataRowIdToModelLookup[rowId] = rowModel;
+      dataRowIdToIdLookup[rowId] = rowId;
+      tree[rowId] = rowTreeNodeConfig;
+    }
+
+    tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+      children: rootGroupChildren
+    }); // Removes potential remaining skeleton rows from the dataRowIds.
+
+    const dataRowIds = rootGroupChildren.filter(childId => tree[childId].type === 'leaf');
     apiRef.current.setState(state => _extends({}, state, {
       rows: _extends({}, state.rows, {
-        idRowsLookup: updatedIdRowsLookup,
-        idToIdLookup: updatedIdToIdLookup,
-        tree: updatedTree,
-        ids: updatedRows
+        dataRowIdToModelLookup,
+        dataRowIdToIdLookup,
+        dataRowIds,
+        tree
       })
     }));
     apiRef.current.publishEvent('rowsSet');
@@ -316,7 +328,12 @@ export const useGridRows = (apiRef, props) => {
     if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
       // The `props.rows` did not change since the last row grouping
       // We can use the current rows cache which contains the partial updates done recently.
-      cache = apiRef.current.unstable_caches.rows;
+      cache = _extends({}, apiRef.current.unstable_caches.rows, {
+        updates: {
+          type: 'full',
+          rows: gridDataRowIdsSelector(apiRef)
+        }
+      });
     } else {
       // The `props.rows` has changed since the last row grouping
       // We must use the new `props.rows` on the new grouping
@@ -328,7 +345,10 @@ export const useGridRows = (apiRef, props) => {
       });
     }
 
-    throttledRowsChange(cache, false);
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
   }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
@@ -349,12 +369,26 @@ export const useGridRows = (apiRef, props) => {
    */
 
   const applyHydrateRowsProcessor = React.useCallback(() => {
-    apiRef.current.setState(state => _extends({}, state, {
-      rows: _extends({}, state.rows, apiRef.current.unstable_applyPipeProcessors('hydrateRows', state.rows.groupingResponseBeforeRowHydration))
-    }));
+    apiRef.current.setState(state => {
+      const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
+        tree: gridRowTreeSelector(state, apiRef.current.instanceId),
+        treeDepths: gridRowTreeDepthsSelector(state, apiRef.current.instanceId),
+        dataRowIds: gridDataRowIdsSelector(state, apiRef.current.instanceId),
+        dataRowIdToModelLookup: gridRowsLookupSelector(state, apiRef.current.instanceId),
+        dataRowIdToIdLookup: gridRowsDataRowIdToIdLookupSelector(state, apiRef.current.instanceId)
+      });
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, response, {
+          totalTopLevelRowCount: getTopLevelRowCount({
+            tree: response.tree,
+            rowCountProp: props.rowCount
+          })
+        })
+      });
+    });
     apiRef.current.publishEvent('rowsSet');
     apiRef.current.forceUpdate();
-  }, [apiRef]);
+  }, [apiRef, props.rowCount]);
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
   /**
@@ -396,10 +430,13 @@ export const useGridRows = (apiRef, props) => {
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
-    throttledRowsChange(createRowsInternalCache({
-      rows: props.rows,
-      getRowId: props.getRowId,
-      loading: props.loading
-    }), false);
+    throttledRowsChange({
+      cache: createRowsInternalCache({
+        rows: props.rows,
+        getRowId: props.getRowId,
+        loading: props.loading
+      }),
+      throttle: false
+    });
   }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };

package/modern/hooks/features/rows/useGridRowsPreProcessors.js

@@ -1,40 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+import { buildRootGroup, GRID_ROOT_GROUP_ID } from './gridRowsUtils';
 
-const flatRowTreeCreationMethod = ({
-  ids,
-  idRowsLookup,
-  idToIdLookup,
-  previousTree
+const createFlatRowTree = rows => {
+  const tree = {
+    [GRID_ROOT_GROUP_ID]: _extends({}, buildRootGroup(), {
+      children: rows
+    })
+  };
+
+  for (let i = 0; i < rows.length; i += 1) {
+    const rowId = rows[i];
+    tree[rowId] = {
+      id: rowId,
+      depth: 0,
+      parent: GRID_ROOT_GROUP_ID,
+      type: 'leaf',
+      groupingKey: null
+    };
+  }
+
+  return {
+    groupingName: GRID_DEFAULT_STRATEGY,
+    tree,
+    treeDepths: {
+      0: rows.length
+    },
+    dataRowIds: rows
+  };
+};
+
+const updateFlatRowTree = ({
+  previousTree,
+  actions
 }) => {
-  const tree = {};
-
-  for (let i = 0; i < ids.length; i += 1) {
-    const rowId = ids[i];
-
-    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null && // pinned row can be unpinned
-    !previousTree[rowId].isPinned) {
-      tree[rowId] = previousTree[rowId];
-    } else {
-      tree[rowId] = {
-        id: rowId,
-        depth: 0,
-        parent: null,
-        groupingKey: '',
-        groupingField: null
-      };
-    }
+  const tree = _extends({}, previousTree);
+
+  const idsToRemoveFromRootGroup = {};
+
+  for (let i = 0; i < actions.remove.length; i += 1) {
+    const idToDelete = actions.remove[i];
+    idsToRemoveFromRootGroup[idToDelete] = true;
+    delete tree[idToDelete];
+  }
+
+  for (let i = 0; i < actions.insert.length; i += 1) {
+    const idToInsert = actions.insert[i];
+    tree[idToInsert] = {
+      id: idToInsert,
+      depth: 0,
+      parent: GRID_ROOT_GROUP_ID,
+      type: 'leaf',
+      groupingKey: null
+    };
+  } // TODO rows v6: Support row unpinning
+
+
+  const rootGroup = tree[GRID_ROOT_GROUP_ID];
+  let rootGroupChildren = [...rootGroup.children, ...actions.insert];
+
+  if (Object.values(idsToRemoveFromRootGroup).length) {
+    rootGroupChildren = rootGroupChildren.filter(id => !idsToRemoveFromRootGroup[id]);
   }
 
+  tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+    children: rootGroupChildren
+  });
   return {
     groupingName: GRID_DEFAULT_STRATEGY,
     tree,
-    treeDepth: 1,
-    idRowsLookup,
-    idToIdLookup,
-    ids
+    treeDepths: {
+      0: rootGroupChildren.length
+    },
+    dataRowIds: rootGroupChildren
   };
 };
 
+const flatRowTreeCreationMethod = params => {
+  if (params.updates.type === 'full') {
+    return createFlatRowTree(params.updates.rows);
+  }
+
+  return updateFlatRowTree({
+    previousTree: params.previousTree,
+    actions: params.updates.actions
+  });
+};
+
 export const useGridRowsPreProcessors = apiRef => {
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
 };

package/modern/hooks/features/selection/useGridSelection.js

@@ -113,7 +113,7 @@ export const useGridSelection = (apiRef, props) => {
 
     const rowNode = apiRef.current.getRowNode(id);
 
-    if (rowNode?.position === 'footer' || rowNode?.isPinned) {
+    if (rowNode?.type === 'footer' || rowNode?.type === 'pinnedRow') {
       return false;
     }
 
@@ -265,7 +265,7 @@ export const useGridSelection = (apiRef, props) => {
       }
     }
 
-    if (params.rowNode.isPinned) {
+    if (params.rowNode.type === 'pinnedRow') {
       return;
     }
 

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -17,9 +17,10 @@ export const gridSortedRowIdsSelector = createSelector(gridSortingStateSelector,
  * @category Sorting
  */
 
-export const gridSortedRowEntriesSelector = createSelector(gridSortedRowIdsSelector, gridRowsLookupSelector, (sortedIds, idRowsLookup) => sortedIds.map(id => ({
+export const gridSortedRowEntriesSelector = createSelector(gridSortedRowIdsSelector, gridRowsLookupSelector, // TODO rows v6: Is this the best approach ?
+(sortedIds, idRowsLookup) => sortedIds.map(id => ({
   id,
-  model: idRowsLookup[id]
+  model: idRowsLookup[id] ?? {}
 })));
 /**
  * Get the current sorting model.

package/modern/hooks/features/sorting/useGridSorting.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
-import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
+import { GRID_ROOT_GROUP_ID, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { getTreeNodeDescendants } from '../rows/gridRowsUtils';
 export const sortingStateInitializer = (state, props) => {
   const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
   return _extends({}, state, {
@@ -74,11 +74,11 @@ export const useGridSorting = (apiRef, props) => {
 
   const applySorting = React.useCallback(() => {
     apiRef.current.setState(state => {
-      if (props.sortingMode === GridFeatureModeConstant.server) {
+      if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
         return _extends({}, state, {
           sorting: _extends({}, state.sorting, {
-            sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
+            sortedRows: getTreeNodeDescendants(gridRowTreeSelector(apiRef), GRID_ROOT_GROUP_ID, false)
           })
         });
       }
@@ -178,38 +178,14 @@ export const useGridSorting = (apiRef, props) => {
   }, [apiRef, props.disableMultipleColumnsSorting]);
   const flatSortingMethod = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
+    const rootGroupNode = rowTree[GRID_ROOT_GROUP_ID];
+    const sortedChildren = params.sortRowList ? params.sortRowList(rootGroupNode.children.map(childId => rowTree[childId])) : [...rootGroupNode.children];
 
-    if (!params.sortRowList) {
-      const bodyRowIds = [];
-      const footerRowIds = [];
-      gridRowIdsSelector(apiRef).forEach(rowId => {
-        if (rowTree[rowId].isPinned) {
-          return;
-        }
-
-        if (rowTree[rowId].position === 'footer') {
-          footerRowIds.push(rowId);
-        } else {
-          bodyRowIds.push(rowId);
-        }
-      });
-      return [...bodyRowIds, ...footerRowIds];
+    if (rootGroupNode.footerId != null) {
+      sortedChildren.push(rootGroupNode.footerId);
     }
 
-    const bodyRows = [];
-    const footerRowIds = [];
-    Object.values(rowTree).forEach(rowNode => {
-      if (rowNode.isPinned) {
-        return;
-      }
-
-      if (rowNode.position === 'footer') {
-        footerRowIds.push(rowNode.id);
-      } else {
-        bodyRows.push(rowNode);
-      }
-    });
-    return [...params.sortRowList(bodyRows), ...footerRowIds];
+    return sortedChildren;
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);