@mui/x-data-grid 7.24.1 → 7.25.0

package/node/hooks/features/editing/useGridRowEditing.js

@@ -243,8 +243,7 @@ const useGridRowEditing = (apiRef, props) => {
     if (props.editMode === _gridEditRowModel.GridEditModes.Cell) {
       return _gridEditRowModel.GridRowModes.View;
     }
-    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef, id);
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
@@ -579,7 +578,7 @@ const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -591,7 +590,7 @@ const useGridRowEditing = (apiRef, props) => {
         mode: _gridEditRowModel.GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
       if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
         updateStateToStartRowEditMode((0, _extends2.default)({
           id: originalId

package/node/hooks/features/focus/useGridFocus.js

@@ -335,10 +335,11 @@ const useGridFocus = (apiRef, props) => {
     // If the focused cell is in a row which does not exist anymore,
     // focus previous row or remove the focus
     if (cell && !apiRef.current.getRow(cell.id)) {
-      const lastFocusedRowId = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef)?.id;
+      const lastFocusedRowId = cell.id;
       let nextRowId = null;
       if (typeof lastFocusedRowId !== 'undefined') {
-        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const rowEl = apiRef.current.getRowElement(lastFocusedRowId);
+        const lastFocusedRowIndex = rowEl?.dataset.rowindex ? Number(rowEl?.dataset.rowindex) : 0;
         const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
           pagination: props.pagination,
           paginationMode: props.paginationMode

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -13,7 +13,6 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
@@ -25,6 +24,13 @@ var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _createSelector = require("../../../utils/createSelector");
+var _pagination = require("../pagination");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+const gridVisibleRowsWithPinnedRowsSelector = (0, _createSelector.createSelectorMemoized)(_pagination.gridVisibleRowsSelector, _gridRowsSelector.gridPinnedRowsSelector, (visibleRows, pinnedRows) => {
+  return (pinnedRows.top || []).concat(visibleRows.rows, pinnedRows.bottom || []);
+});
+
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -36,10 +42,11 @@ var _gridListViewSelectors = require("../listView/gridListViewSelectors");
  */
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
-  const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
   const isRtl = (0, _RtlProvider.useRtl)();
   const listView = props.unstable_listView;
-  const currentPageRows = React.useMemo(() => (0, _utils.enrichPageRowsWithPinnedRows)(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
+  const getCurrentPageRows = React.useCallback(() => {
+    return gridVisibleRowsWithPinnedRowsSelector(apiRef);
+  }, [apiRef]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
@@ -98,8 +105,8 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     apiRef.current.setColumnGroupHeaderFocus(field, depth, event);
   }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
-    return currentPageRows[rowIndex]?.id;
-  }, [currentPageRows]);
+    return getCurrentPageRows()[rowIndex]?.id;
+  }, [getCurrentPageRows]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
     const isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
@@ -108,6 +115,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
@@ -119,12 +127,10 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     switch (event.key) {
       case 'ArrowDown':
         {
-          if (firstRowIndexInPage !== null) {
-            if (headerFilteringEnabled) {
-              goToHeaderFilter(colIndexBefore, event);
-            } else {
-              goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
-            }
+          if (headerFilteringEnabled) {
+            goToHeaderFilter(colIndexBefore, event);
+          } else if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
           break;
         }
@@ -198,13 +204,14 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
+  }, [apiRef, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
     const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
     if (isEditing || isHeaderMenuOpen || !(0, _keyboardUtils.isNavigationKey)(event.key)) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = 0;
@@ -284,7 +291,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = (0, _focus.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
@@ -299,6 +306,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const currentColIndex = apiRef.current.getColumnIndex(currentField);
     const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
@@ -370,7 +378,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -389,6 +397,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (!canUpdateFocus) {
       return;
     }
+    const currentPageRows = getCurrentPageRows();
     if (currentPageRows.length === 0) {
       return;
     }
@@ -517,7 +526,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
+  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/node/hooks/features/keyboardNavigation/utils.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.enrichPageRowsWithPinnedRows = enrichPageRowsWithPinnedRows;
 exports.findNonRowSpannedCell = findNonRowSpannedCell;
 exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
-var _gridRowsSelector = require("../rows/gridRowsSelector");
-function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
 const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,

package/node/hooks/features/listView/useGridListView.js

@@ -9,6 +9,7 @@ exports.listViewStateInitializer = void 0;
 exports.useGridListView = useGridListView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _warning = require("@mui/x-internals/warning");
 var _dimensions = require("../dimensions");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -47,7 +48,7 @@ function useGridListView(apiRef, props) {
   /*
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     const listColumn = props.unstable_listColumn;
     if (listColumn) {
       apiRef.current.setState(state => {

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -73,7 +73,6 @@ const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
-  const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const isNestedData = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
@@ -421,6 +420,7 @@ const useGridRowSelection = (apiRef, props) => {
             end = previousRowIndex;
           }
         }
+        const visibleRows = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
         const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
         apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
         return;
@@ -435,7 +435,7 @@ const useGridRowSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  }, [apiRef, handleSingleRowSelection, selectRows, canHaveMultipleSelection]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(removeOutdatedSelection));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));

package/node/hooks/features/rows/useGridParamsApi.js

@@ -39,37 +39,52 @@ function useGridParamsApi(apiRef, props) {
     };
     return params;
   }, [apiRef]);
-  const getCellParams = React.useCallback((id, field) => {
-    const colDef = props.unstable_listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    const rowNode = apiRef.current.getRowNode(id);
-    if (!row || !rowNode) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
+  const getCellParamsForRow = React.useCallback((id, field, row, {
+    cellMode,
+    colDef,
+    hasFocus,
+    rowNode,
+    tabIndex
+  }) => {
     const rawValue = row[field];
     const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
-    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
-    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
     const params = {
       id,
       field,
       row,
       rowNode,
       colDef,
-      cellMode: apiRef.current.getCellMode(id, field),
-      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
-      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode,
+      hasFocus,
+      tabIndex,
       value,
       formattedValue: value,
       isEditable: false,
-      api: {}
+      api: null
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef, props.unstable_listView]);
+  }, [apiRef]);
+  const getCellParams = React.useCallback((id, field) => {
+    const row = apiRef.current.getRow(id);
+    const rowNode = apiRef.current.getRowNode(id);
+    if (!row || !rowNode) {
+      throw new MissingRowIdError(`No row with id #${id} found`);
+    }
+    const cellFocus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+    const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+    const cellMode = apiRef.current.getCellMode(id, field);
+    return apiRef.current.getCellParamsForRow(id, field, row, {
+      colDef: props.unstable_listView && props.unstable_listColumn?.field === field ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state) : apiRef.current.getColumn(field),
+      rowNode,
+      hasFocus: cellFocus !== null && cellFocus.field === field && cellFocus.id === id,
+      tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
+      cellMode
+    });
+  }, [apiRef, props.unstable_listView, props.unstable_listColumn?.field]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
@@ -128,5 +143,9 @@ function useGridParamsApi(apiRef, props) {
     getColumnHeaderParams,
     getColumnHeaderElement
   };
+  const paramsPrivateApi = {
+    getCellParamsForRow
+  };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, paramsPrivateApi, 'private');
 }

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -13,10 +13,12 @@ var _constants = require("../../../internals/constants");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
-var _useGridSelector = require("../../utils/useGridSelector");
-var _gridRowsSelector = require("./gridRowsSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
 var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _utils = require("../../../utils/utils");
+var _pagination = require("../pagination");
+var _gridRowsSelector = require("./gridRowsSelector");
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -61,8 +63,8 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       const backwardsHiddenCells = [];
       if (index === rangeToProcess.firstRowIndex) {
         let prevIndex = index - 1;
-        const prevRowEntry = visibleRows[prevIndex];
-        while (prevIndex >= range.firstRowIndex && (0, _gridRowSpanningUtils.getCellValue)(prevRowEntry.model, colDef, apiRef) === cellValue) {
+        let prevRowEntry = visibleRows[prevIndex];
+        while (prevIndex >= range.firstRowIndex && prevRowEntry && (0, _gridRowSpanningUtils.getCellValue)(prevRowEntry.model, colDef, apiRef) === cellValue) {
           const currentRow = visibleRows[prevIndex + 1];
           if (hiddenCells[currentRow.id]) {
             hiddenCells[currentRow.id][colDef.field] = true;
@@ -76,6 +78,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
           spannedRowId = prevRowEntry.id;
           spannedRowIndex = prevIndex;
           prevIndex -= 1;
+          prevRowEntry = visibleRows[prevIndex];
         }
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
@@ -131,6 +134,24 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     processedRange
   };
 };
+const getInitialRangeToProcess = (props, apiRef) => {
+  const rowCount = (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef).length;
+  if (props.pagination) {
+    const pageSize = (0, _pagination.gridPageSizeSelector)(apiRef);
+    let paginationLastRowIndex = DEFAULT_ROWS_TO_PROCESS;
+    if (pageSize > 0) {
+      paginationLastRowIndex = pageSize - 1;
+    }
+    return {
+      firstRowIndex: 0,
+      lastRowIndex: Math.min(paginationLastRowIndex, rowCount)
+    };
+  }
+  return {
+    firstRowIndex: 0,
+    lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, rowCount)
+  };
+};
 
 /**
  * @requires columnsStateInitializer (method) - should be initialized before
@@ -138,75 +159,53 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
-    const rowIds = state.rows.dataRowIds || [];
-    const orderedFields = state.columns.orderedFields || [];
-    const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
-    const columnsLookup = state.columns.lookup;
-    const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
-    if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
-      return (0, _extends2.default)({}, state, {
-        rowSpanning: EMPTY_STATE
-      });
-    }
-    const rangeToProcess = {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
-    };
-    const rows = rowIds.map(id => ({
-      id,
-      model: dataRowIdToModelLookup[id]
-    }));
-    const colDefs = orderedFields.map(field => columnsLookup[field]);
-    const {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
+  if (!props.unstable_rowSpanning) {
     return (0, _extends2.default)({}, state, {
-      rowSpanning: {
-        spannedCells,
-        hiddenCells,
-        hiddenCellOriginMap
-      }
+      rowSpanning: EMPTY_STATE
+    });
+  }
+  const rowIds = state.rows.dataRowIds || [];
+  const orderedFields = state.columns.orderedFields || [];
+  const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
+  const columnsLookup = state.columns.lookup;
+  const isFilteringPending = Boolean(state.filter.filterModel.items.length) || Boolean(state.filter.filterModel.quickFilterValues?.length);
+  if (!rowIds.length || !orderedFields.length || !dataRowIdToModelLookup || !columnsLookup || isFilteringPending) {
+    return (0, _extends2.default)({}, state, {
+      rowSpanning: EMPTY_STATE
     });
   }
+  const rangeToProcess = getInitialRangeToProcess(props, apiRef);
+  const rows = rowIds.map(id => ({
+    id,
+    model: dataRowIdToModelLookup[id]
+  }));
+  const colDefs = orderedFields.map(field => columnsLookup[field]);
+  const {
+    spannedCells,
+    hiddenCells,
+    hiddenCellOriginMap
+  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
   return (0, _extends2.default)({}, state, {
-    rowSpanning: EMPTY_STATE
+    rowSpanning: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    }
   });
 };
 exports.rowSpanningStateInitializer = rowSpanningStateInitializer;
 const useGridRowSpanning = (apiRef, props) => {
-  const {
-    range,
-    rows: visibleRows
-  } = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
-  const colDefs = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
-  const tree = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeSelector);
   const processedRange = (0, _useLazyRef.default)(() => {
-    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
-      firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
-    } : EMPTY_RANGE;
+    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
   });
-  const lastRange = React.useRef(EMPTY_RANGE);
-  const updateRowSpanningState = React.useCallback(
-  // A reset needs to occur when:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
-  // - The filtering is applied
-  // - The sorting is applied
-  // - The `paginationModel` is updated
-  // - The rows are updated
-  (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
-      }
-      return;
-    }
+  const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
+    const {
+      range,
+      rows: visibleRows
+    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
     if (range === null || !(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
       return;
     }
@@ -220,6 +219,7 @@ const useGridRowSpanning = (apiRef, props) => {
     if (rangeToProcess === null) {
       return;
     }
+    const colDefs = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const {
       spannedCells,
       hiddenCells,
@@ -232,7 +232,8 @@ const useGridRowSpanning = (apiRef, props) => {
     const currentSpannedCellsCount = Object.keys(apiRef.current.state.rowSpanning.spannedCells).length;
     const currentHiddenCellsCount = Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length;
     const shouldUpdateState = resetState || newSpannedCellsCount !== currentSpannedCellsCount || newHiddenCellsCount !== currentHiddenCellsCount;
-    if (!shouldUpdateState) {
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    if (!shouldUpdateState || hasNoSpannedCells) {
       return;
     }
     apiRef.current.setState(state => {
@@ -244,34 +245,36 @@ const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
-  const prevRenderContext = React.useRef(renderContext);
-  const isFirstRender = React.useRef(true);
-  const shouldResetState = React.useRef(false);
-  const previousTree = React.useRef(tree);
-  React.useEffect(() => {
-    const firstRender = isFirstRender.current;
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-    if (tree !== previousTree.current) {
-      previousTree.current = tree;
-      updateRowSpanningState(true);
+  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
+
+  // Reset events trigger a full re-computation of the row spanning state:
+  // - The `unstable_rowSpanning` prop is updated (feature flag)
+  // - The filtering is applied
+  // - The sorting is applied
+  // - The `paginationModel` is updated
+  // - The rows are updated
+  const resetRowSpanningState = React.useCallback(() => {
+    const renderContext = (0, _gridVirtualizationSelectors.gridRenderContextSelector)(apiRef);
+    if (!(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
       return;
     }
-    if (range && lastRange.current && (0, _gridRowSpanningUtils.isRowRangeUpdated)(range, lastRange.current)) {
-      lastRange.current = range;
-      shouldResetState.current = true;
-    }
-    if (!firstRender && prevRenderContext.current !== renderContext) {
-      if ((0, _gridRowSpanningUtils.isRowRangeUpdated)(prevRenderContext.current, renderContext)) {
-        updateRowSpanningState(shouldResetState.current);
-        shouldResetState.current = false;
+    updateRowSpanningState(renderContext, true);
+  }, [apiRef, updateRowSpanningState]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'renderedRowsIntervalChange', (0, _utils.runIf)(props.unstable_rowSpanning, updateRowSpanningState));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'sortedRowsSet', (0, _utils.runIf)(props.unstable_rowSpanning, resetRowSpanningState));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils.runIf)(props.unstable_rowSpanning, resetRowSpanningState));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'filteredRowsSet', (0, _utils.runIf)(props.unstable_rowSpanning, resetRowSpanningState));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', (0, _utils.runIf)(props.unstable_rowSpanning, resetRowSpanningState));
+  React.useEffect(() => {
+    if (!props.unstable_rowSpanning) {
+      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rowSpanning: EMPTY_STATE
+        }));
       }
-      prevRenderContext.current = renderContext;
-      return;
+    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+      resetRowSpanningState();
     }
-    updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
+  }, [apiRef, resetRowSpanningState, props.unstable_rowSpanning]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

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

@@ -48,7 +48,6 @@ const useGridRows = (apiRef, props) => {
     }
   }
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = (0, _useTimeout.useTimeout)();
@@ -75,12 +74,6 @@ const useGridRows = (apiRef, props) => {
     }
     return row.id;
   }, [getRowIdProp]);
-  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
-    id
-  }, index) => {
-    acc[id] = index;
-    return acc;
-  }, {}), [currentPage.rows]);
   const throttledRowsChange = React.useCallback(({
     cache,
     throttle
@@ -179,7 +172,13 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => (0, _gridRowsSelector.gridRowCountSelector)(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => (0, _gridRowsSelector.gridDataRowIdsSelector)(apiRef), [apiRef]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => {
+    const row = apiRef.current.getRow(id);
+    const {
+      rowToIndexMap
+    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
+    return rowToIndexMap.get(row);
+  }, [apiRef]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
     if (!currentNode) {

package/node/hooks/features/rows/useGridRowsMeta.js

@@ -9,9 +9,10 @@ exports.useGridRowsMeta = exports.rowsMetaStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _utils = require("@mui/utils");
 var _ResizeObserver = require("../../../utils/ResizeObserver");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _densitySelector = require("../density/densitySelector");
@@ -77,7 +78,7 @@ const useGridRowsMeta = (apiRef, props) => {
     // HACK: rowHeight trails behind the most up-to-date value just enough to
     // mess the initial rowsMeta hydration :/
     const baseRowHeight = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).rowHeight;
-    (0, _utils.eslintUseValue)(rowHeight);
+    (0, _utils2.eslintUseValue)(rowHeight);
     const entry = apiRef.current.getRowHeightEntry(row.id);
     if (!getRowHeightProp) {
       entry.content = baseRowHeight;
@@ -119,7 +120,7 @@ const useGridRowsMeta = (apiRef, props) => {
     }
     apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
     return entry;
-  }, [apiRef, currentPage.rows.length, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
+  }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
     pinnedRows.top.forEach(processHeightEntry);
@@ -190,7 +191,7 @@ const useGridRowsMeta = (apiRef, props) => {
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     hydrateRowsMeta();
   }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
   const rowsMetaApi = {