@mui/x-data-grid 8.28.7 → 8.29.0

package/hooks/features/rows/useGridRowSpanning.mjs

@@ -0,0 +1,208 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { Rowspan } from '@mui/x-virtualizer/features';
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.mjs";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.mjs";
+import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.mjs";
+import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+import { runIf } from "../../../utils/utils.mjs";
+import { useRunOncePerLoop } from "../../utils/useRunOncePerLoop.mjs";
+const EMPTY_CACHES = {
+  spannedCells: {},
+  hiddenCells: {},
+  hiddenCellOriginMap: {}
+};
+const EMPTY_RANGE = {
+  firstRowIndex: 0,
+  lastRowIndex: 0
+};
+const EMPTY_STATE = {
+  caches: EMPTY_CACHES,
+  processedRange: EMPTY_RANGE
+};
+const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState) => {
+  const virtualizer = apiRef.current.virtualizer;
+  const previousState = resetState ? EMPTY_STATE : Rowspan.selectors.state(virtualizer.store.state);
+  const spannedCells = _extends({}, previousState.caches.spannedCells);
+  const hiddenCells = _extends({}, previousState.caches.hiddenCells);
+  const hiddenCellOriginMap = _extends({}, previousState.caches.hiddenCellOriginMap);
+  const processedRange = {
+    firstRowIndex: Math.min(previousState.processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
+    lastRowIndex: Math.max(previousState.processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
+  };
+  colDefs.forEach((colDef, columnIndex) => {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
+      const row = visibleRows[index];
+      if (hiddenCells[row.id]?.[columnIndex]) {
+        continue;
+      }
+      const cellValue = getCellValue(row.model, colDef, apiRef);
+      if (cellValue == null) {
+        continue;
+      }
+      let spannedRowId = row.id;
+      let spannedRowIndex = index;
+      let rowSpan = 0;
+
+      // For first index, also scan in the previous rows to handle the reset state case e.g by sorting
+      const backwardsHiddenCells = [];
+      if (index === rangeToProcess.firstRowIndex) {
+        let prevIndex = index - 1;
+        let prevRowEntry = visibleRows[prevIndex];
+        while (prevIndex >= range.firstRowIndex && prevRowEntry && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
+          const currentRow = visibleRows[prevIndex + 1];
+          if (hiddenCells[currentRow.id]) {
+            hiddenCells[currentRow.id][columnIndex] = true;
+          } else {
+            hiddenCells[currentRow.id] = {
+              [columnIndex]: true
+            };
+          }
+          backwardsHiddenCells.push(index);
+          rowSpan += 1;
+          spannedRowId = prevRowEntry.id;
+          spannedRowIndex = prevIndex;
+          prevIndex -= 1;
+          prevRowEntry = visibleRows[prevIndex];
+        }
+      }
+      backwardsHiddenCells.forEach(hiddenCellIndex => {
+        if (hiddenCellOriginMap[hiddenCellIndex]) {
+          hiddenCellOriginMap[hiddenCellIndex][columnIndex] = spannedRowIndex;
+        } else {
+          hiddenCellOriginMap[hiddenCellIndex] = {
+            [columnIndex]: spannedRowIndex
+          };
+        }
+      });
+
+      // Scan the next rows
+      let relativeIndex = index + 1;
+      while (relativeIndex <= range.lastRowIndex && visibleRows[relativeIndex] && getCellValue(visibleRows[relativeIndex].model, colDef, apiRef) === cellValue) {
+        const currentRow = visibleRows[relativeIndex];
+        if (hiddenCells[currentRow.id]) {
+          hiddenCells[currentRow.id][columnIndex] = true;
+        } else {
+          hiddenCells[currentRow.id] = {
+            [columnIndex]: true
+          };
+        }
+        if (hiddenCellOriginMap[relativeIndex]) {
+          hiddenCellOriginMap[relativeIndex][columnIndex] = spannedRowIndex;
+        } else {
+          hiddenCellOriginMap[relativeIndex] = {
+            [columnIndex]: spannedRowIndex
+          };
+        }
+        relativeIndex += 1;
+        rowSpan += 1;
+      }
+      if (rowSpan > 0) {
+        if (spannedCells[spannedRowId]) {
+          spannedCells[spannedRowId][columnIndex] = rowSpan + 1;
+        } else {
+          spannedCells[spannedRowId] = {
+            [columnIndex]: rowSpan + 1
+          };
+        }
+      }
+    }
+  });
+  return {
+    caches: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    },
+    processedRange
+  };
+};
+
+/**
+ * @requires columnsStateInitializer (method) - should be initialized before
+ * @requires rowsStateInitializer (method) - should be initialized before
+ * @requires filterStateInitializer (method) - should be initialized before
+ */
+export const rowSpanningStateInitializer = state => {
+  return _extends({}, state, {
+    rowSpanning: EMPTY_STATE
+  });
+};
+export const useGridRowSpanning = (apiRef, props) => {
+  const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
+    const store = apiRef.current.virtualizer.store;
+    const {
+      range,
+      rows: visibleRows
+    } = getVisibleRows(apiRef);
+    if (resetState) {
+      store.set('rowSpanning', EMPTY_STATE);
+    }
+    if (range === null || !isRowContextInitialized(renderContext)) {
+      return;
+    }
+    const previousState = resetState ? EMPTY_STATE : Rowspan.selectors.state(store.state);
+    const rangeToProcess = getUnprocessedRange({
+      firstRowIndex: renderContext.firstRowIndex,
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex - range.firstRowIndex + 1)
+    }, previousState.processedRange);
+    if (rangeToProcess === null) {
+      return;
+    }
+    const colDefs = gridVisibleColumnDefinitionsSelector(apiRef);
+    const newState = computeRowSpanningState(apiRef, colDefs, visibleRows, range, rangeToProcess, resetState);
+    const newSpannedCellsCount = Object.keys(newState.caches.spannedCells).length;
+    const newHiddenCellsCount = Object.keys(newState.caches.hiddenCells).length;
+    const previousSpannedCellsCount = Object.keys(previousState.caches.spannedCells).length;
+    const previousHiddenCellsCount = Object.keys(previousState.caches.hiddenCells).length;
+    const shouldUpdateState = resetState || newSpannedCellsCount !== previousSpannedCellsCount || newHiddenCellsCount !== previousHiddenCellsCount;
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && previousSpannedCellsCount === 0;
+    if (!shouldUpdateState || hasNoSpannedCells) {
+      return;
+    }
+    store.set('rowSpanning', newState);
+  }, [apiRef]);
+
+  // Reset events trigger a full re-computation of the row spanning state:
+  // - The `rowSpanning` prop is updated (feature flag)
+  // - The filtering is applied
+  // - The sorting is applied
+  // - The `paginationModel` is updated
+  // - The rows are updated
+  const {
+    schedule: deferredUpdateRowSpanningState,
+    cancel
+  } = useRunOncePerLoop(updateRowSpanningState);
+  const resetRowSpanningState = React.useCallback(() => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    if (!isRowContextInitialized(renderContext)) {
+      return;
+    }
+    deferredUpdateRowSpanningState(renderContext, true);
+  }, [apiRef, deferredUpdateRowSpanningState]);
+  useGridEvent(apiRef, 'renderedRowsIntervalChange', runIf(props.rowSpanning, renderContext => {
+    const didHavePendingReset = cancel();
+    updateRowSpanningState(renderContext, didHavePendingReset);
+  }));
+  useGridEvent(apiRef, 'sortedRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridEvent(apiRef, 'paginationModelChange', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridEvent(apiRef, 'filteredRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridEvent(apiRef, 'columnsChange', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridEvent(apiRef, 'rowExpansionChange', runIf(props.rowSpanning, resetRowSpanningState));
+  React.useEffect(() => {
+    const store = apiRef.current.virtualizer?.store;
+    if (!store) {
+      return;
+    }
+    if (!props.rowSpanning) {
+      if (store.state.rowSpanning !== EMPTY_STATE) {
+        store.set('rowSpanning', EMPTY_STATE);
+      }
+    } else if (store.state.rowSpanning === EMPTY_STATE) {
+      updateRowSpanningState(gridRenderContextSelector(apiRef));
+    }
+  }, [apiRef, props.rowSpanning, updateRowSpanningState]);
+};

package/hooks/features/rows/useGridRows.d.mts

@@ -0,0 +1,7 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.mjs";
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading" | "dataSource" | "processRowUpdate" | "onProcessRowUpdateError">, configuration: GridConfiguration) => void;

package/hooks/features/rows/useGridRows.mjs

@@ -0,0 +1,482 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
+import { useGridLogger } from "../../utils/useGridLogger.mjs";
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector, gridRowNodeSelector, gridDataRowsSelector } from "./gridRowsSelector.mjs";
+import { gridRowIdSelector } from "../../core/gridPropsSelectors.mjs";
+import { useTimeout } from "../../utils/useTimeout.mjs";
+import { GridSignature } from "../../../constants/signature.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.mjs";
+import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.mjs";
+import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.mjs";
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutogeneratedRowNode, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from "./gridRowsUtils.mjs";
+import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.mjs";
+import { GridStrategyGroup } from "../../core/strategyProcessing/index.mjs";
+import { gridPivotActiveSelector } from "../pivoting/index.mjs";
+export const rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.dataSource;
+  apiRef.current.caches.rows = createRowsInternalCache({
+    rows: isDataSourceAvailable ? [] : props.rows,
+    getRowId: props.getRowId,
+    loading: props.loading,
+    rowCount: props.rowCount
+  });
+  return _extends({}, state, {
+    rows: getRowsStateFromCache({
+      apiRef,
+      rowCountProp: props.rowCount,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
+      previousTree: null,
+      previousTreeDepths: null
+    })
+  });
+};
+export const useGridRows = (apiRef, props, configuration) => {
+  if (process.env.NODE_ENV !== 'production') {
+    try {
+      // Freeze the `rows` prop so developers have a fast failure if they try to use Array.prototype.push().
+      Object.freeze(props.rows);
+    } catch (error) {
+      // Sometimes, it's impossible to freeze, so we give up on it.
+    }
+  }
+  const logger = useGridLogger(apiRef, 'useGridRows');
+  const lastUpdateMs = React.useRef(Date.now());
+  const lastRowCount = React.useRef(props.rowCount);
+  const timeout = useTimeout();
+
+  // Get overridable methods from configuration
+  const {
+    setRowIndex,
+    setRowPosition
+  } = configuration.hooks.useGridRowsOverridableMethods(apiRef, props);
+  const getRow = React.useCallback(id => {
+    const model = gridRowsLookupSelector(apiRef)[id];
+    if (model) {
+      return model;
+    }
+    const node = gridRowNodeSelector(apiRef, id);
+    if (node && isAutogeneratedRowNode(node)) {
+      return {
+        [GRID_ID_AUTOGENERATED]: id
+      };
+    }
+    return null;
+  }, [apiRef]);
+  const getRowId = React.useCallback(row => gridRowIdSelector(apiRef, row), [apiRef]);
+  const throttledRowsChange = React.useCallback(({
+    cache,
+    throttle
+  }) => {
+    const run = () => {
+      lastUpdateMs.current = Date.now();
+      apiRef.current.setState(state => _extends({}, state, {
+        rows: getRowsStateFromCache({
+          apiRef,
+          rowCountProp: props.rowCount,
+          loadingProp: props.loading,
+          previousTree: gridRowTreeSelector(apiRef),
+          previousTreeDepths: gridRowTreeDepthsSelector(apiRef),
+          previousGroupsToFetch: gridRowGroupsToFetchSelector(apiRef)
+        })
+      }));
+      apiRef.current.publishEvent('rowsSet');
+    };
+    timeout.clear();
+    apiRef.current.caches.rows = cache;
+    if (!throttle) {
+      run();
+      return;
+    }
+    const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
+    if (throttleRemainingTimeMs > 0) {
+      timeout.start(throttleRemainingTimeMs, run);
+      return;
+    }
+    run();
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef, timeout]);
+
+  /**
+   * API METHODS
+   */
+  const setRows = React.useCallback(rows => {
+    logger.debug(`Updating all rows, new length ${rows.length}`);
+    if (!props.dataSource && gridPivotActiveSelector(apiRef)) {
+      apiRef.current.updateNonPivotRows(rows, false);
+      return;
+    }
+    const cache = createRowsInternalCache({
+      rows,
+      getRowId: props.getRowId,
+      loading: props.loading,
+      rowCount: props.rowCount
+    });
+    const prevCache = apiRef.current.caches.rows;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    throttledRowsChange({
+      cache,
+      throttle: true
+    });
+  }, [logger, props.getRowId, props.dataSource, props.loading, props.rowCount, throttledRowsChange, apiRef]);
+  const updateRows = React.useCallback(updates => {
+    if (props.signature === GridSignature.DataGrid && updates.length > 1) {
+      throw new Error(['MUI X: You cannot 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'));
+    }
+    if (!props.dataSource && gridPivotActiveSelector(apiRef)) {
+      apiRef.current.updateNonPivotRows(updates);
+      return;
+    }
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
+    const cache = updateCacheWithNewRows({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows
+    });
+    throttledRowsChange({
+      cache,
+      throttle: true
+    });
+  }, [props.signature, props.dataSource, props.getRowId, throttledRowsChange, apiRef]);
+  const updateNestedRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
+    const cache = updateCacheWithNewRows({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows,
+      groupKeys: groupKeys ?? []
+    });
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [props.getRowId, throttledRowsChange, apiRef]);
+  const setLoading = React.useCallback(loading => {
+    logger.debug(`Setting loading to ${loading}`);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [apiRef, logger]);
+  const getRowModels = React.useCallback(() => {
+    const dataRows = gridDataRowIdsSelector(apiRef);
+    const idRowsLookup = gridRowsLookupSelector(apiRef);
+    return new Map(dataRows.map(id => [id, idRowsLookup[id] ?? {}]));
+  }, [apiRef]);
+  const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
+  const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const {
+      rowIdToIndexMap
+    } = getVisibleRows(apiRef);
+    return rowIdToIndexMap.get(id);
+  }, [apiRef]);
+  const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
+    const currentNode = gridRowNodeSelector(apiRef, id);
+    if (!currentNode) {
+      throw new Error(`MUI X: No row with id #${id} found.`);
+    }
+    if (currentNode.type !== 'group') {
+      throw new Error('MUI X: Only group nodes can be expanded or collapsed.');
+    }
+    const newNode = _extends({}, currentNode, {
+      childrenExpanded: isExpanded
+    });
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          tree: _extends({}, state.rows.tree, {
+            [id]: newNode
+          })
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowExpansionChange', newNode);
+  }, [apiRef]);
+  const expandAllRows = React.useCallback(() => {
+    const tree = _extends({}, gridRowTreeSelector(apiRef));
+    const traverse = nodeId => {
+      const node = tree[nodeId];
+      if (node?.type === 'group') {
+        tree[nodeId] = _extends({}, node, {
+          childrenExpanded: true
+        });
+        node.children.forEach(traverse);
+      }
+    };
+    traverse(GRID_ROOT_GROUP_ID);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        tree
+      })
+    }));
+    apiRef.current.publishEvent('rowExpansionChange', tree[GRID_ROOT_GROUP_ID]);
+  }, [apiRef]);
+  const collapseAllRows = React.useCallback(() => {
+    const tree = _extends({}, gridRowTreeSelector(apiRef));
+    const traverse = nodeId => {
+      const node = tree[nodeId];
+      if (node?.type === 'group') {
+        tree[nodeId] = _extends({}, node, {
+          childrenExpanded: false
+        });
+        node.children.forEach(traverse);
+      }
+    };
+    traverse(GRID_ROOT_GROUP_ID);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        tree
+      })
+    }));
+    apiRef.current.publishEvent('rowExpansionChange', tree[GRID_ROOT_GROUP_ID]);
+  }, [apiRef]);
+  const getRowNode = React.useCallback(id => gridRowNodeSelector(apiRef, id) ?? null, [apiRef]);
+  const getRowGroupChildren = React.useCallback(({
+    skipAutoGeneratedRows = true,
+    groupId,
+    applySorting,
+    applyFiltering,
+    directChildrenOnly = false
+  }) => {
+    const tree = gridRowTreeSelector(apiRef);
+    let children;
+    if (applySorting) {
+      const groupNode = tree[groupId];
+      if (!groupNode) {
+        return [];
+      }
+      const sortedRowIds = gridSortedRowIdsSelector(apiRef);
+      children = [];
+      const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
+      for (let index = startIndex; index < sortedRowIds.length && (directChildrenOnly ? tree[sortedRowIds[index]].depth === groupNode.depth + 1 : tree[sortedRowIds[index]].depth > groupNode.depth); index += 1) {
+        const id = sortedRowIds[index];
+        if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[id])) {
+          children.push(id);
+        }
+      }
+    } else {
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows, directChildrenOnly);
+    }
+    if (applyFiltering) {
+      const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+      children = isObjectEmpty(filteredRowsLookup) ? children : children.filter(childId => filteredRowsLookup[childId] !== false);
+    }
+    return children;
+  }, [apiRef]);
+  const replaceRows = React.useCallback((firstRowToRender, newRows) => {
+    if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
+      throw new Error(['MUI X: You cannot replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+    }
+    if (newRows.length === 0) {
+      return;
+    }
+    const treeDepth = gridRowMaximumTreeDepthSelector(apiRef);
+    if (treeDepth > 1) {
+      throw new Error('`apiRef.current.unstable_replaceRows` is not compatible with tree data and row grouping');
+    }
+    const tree = _extends({}, gridRowTreeSelector(apiRef));
+    const dataRowIdToModelLookup = _extends({}, gridRowsLookupSelector(apiRef));
+    const rootGroup = tree[GRID_ROOT_GROUP_ID];
+    const rootGroupChildren = [...rootGroup.children];
+    const seenIds = new Set();
+    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 [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      if (!seenIds.has(removedRowId)) {
+        delete dataRowIdToModelLookup[removedRowId];
+        delete tree[removedRowId];
+      }
+      const rowTreeNodeConfig = {
+        id: rowId,
+        depth: 0,
+        parent: GRID_ROOT_GROUP_ID,
+        type: 'leaf',
+        groupingKey: null
+      };
+      dataRowIdToModelLookup[rowId] = rowModel;
+      tree[rowId] = rowTreeNodeConfig;
+      seenIds.add(rowId);
+    }
+    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.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup;
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        loading: props.loading,
+        totalRowCount: Math.max(props.rowCount || 0, rootGroupChildren.length),
+        dataRowIdToModelLookup,
+        dataRowIds,
+        tree
+      })
+    }));
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.signature, props.getRowId, props.loading, props.rowCount]);
+  const rowApi = {
+    getRow,
+    setLoading,
+    getRowId,
+    getRowModels,
+    getRowsCount,
+    getAllRowIds,
+    setRows,
+    updateRows,
+    getRowNode,
+    getRowIndexRelativeToVisibleRows,
+    unstable_replaceRows: replaceRows
+  };
+  const rowProApi = {
+    setRowIndex,
+    setRowPosition,
+    setRowChildrenExpansion,
+    getRowGroupChildren,
+    expandAllRows,
+    collapseAllRows
+  };
+  const rowProPrivateApi = {
+    updateNestedRows
+  };
+
+  /**
+   * EVENTS
+   */
+  const groupRows = React.useCallback(() => {
+    logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
+    let cache;
+    if (apiRef.current.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 = _extends({}, apiRef.current.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
+      // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
+      cache = createRowsInternalCache({
+        rows: props.rows,
+        getRowId: props.getRowId,
+        loading: props.loading,
+        rowCount: props.rowCount
+      });
+    }
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+  const previousDataSource = useLazyRef(() => props.dataSource);
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (props.dataSource && props.dataSource !== previousDataSource.current) {
+      previousDataSource.current = props.dataSource;
+      return;
+    }
+    if (methodName === 'rowTreeCreation') {
+      groupRows();
+    }
+  }, [groupRows, previousDataSource, props.dataSource]);
+  const handleStrategyActivityChange = React.useCallback(() => {
+    // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
+    // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.
+    if (apiRef.current.getActiveStrategy(GridStrategyGroup.RowTree) !== gridRowGroupingNameSelector(apiRef)) {
+      groupRows();
+    }
+  }, [apiRef, groupRows]);
+  useGridEvent(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  useGridEvent(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
+
+  /**
+   * APPLIERS
+   */
+  const applyHydrateRowsProcessor = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
+        tree: gridRowTreeSelector(apiRef),
+        treeDepths: gridRowTreeDepthsSelector(apiRef),
+        dataRowIds: gridDataRowIdsSelector(apiRef),
+        dataRowIdToModelLookup: gridRowsLookupSelector(apiRef)
+      });
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, response, {
+          totalTopLevelRowCount: getTopLevelRowCount({
+            tree: response.tree,
+            rowCountProp: props.rowCount
+          })
+        })
+      });
+    });
+    apiRef.current.publishEvent('rowsSet');
+  }, [apiRef, props.rowCount]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
+  useGridApiMethod(apiRef, rowApi, 'public');
+  useGridApiMethod(apiRef, rowProApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
+  useGridApiMethod(apiRef, rowProPrivateApi, 'private');
+
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    let isRowCountPropUpdated = false;
+    if (props.rowCount !== lastRowCount.current) {
+      isRowCountPropUpdated = true;
+      lastRowCount.current = props.rowCount;
+    }
+    const currentRows = props.dataSource ? gridDataRowsSelector(apiRef) : props.rows;
+    const areNewRowsAlreadyInState = apiRef.current.caches.rows.rowsBeforePartialUpdates === currentRows;
+    const isNewLoadingAlreadyInState = apiRef.current.caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    const isNewRowCountAlreadyInState = apiRef.current.caches.rows.rowCountPropBeforePartialUpdates === props.rowCount;
+
+    // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    if (areNewRowsAlreadyInState) {
+      // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
+      if (!isNewLoadingAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            loading: props.loading
+          })
+        }));
+        apiRef.current.caches.rows.loadingPropBeforePartialUpdates = props.loading;
+      }
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+            totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+          })
+        }));
+        apiRef.current.caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+      }
+      if (!isRowCountPropUpdated) {
+        return;
+      }
+    }
+    logger.debug(`Updating all rows, new length ${currentRows?.length}`);
+    throttledRowsChange({
+      cache: createRowsInternalCache({
+        rows: currentRows,
+        getRowId: props.getRowId,
+        loading: props.loading,
+        rowCount: props.rowCount
+      }),
+      throttle: false
+    });
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, props.dataSource, logger, throttledRowsChange, apiRef]);
+};