@mui/x-data-grid 7.17.0 → 7.18.0

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
-import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
@@ -10,50 +10,12 @@ import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
-function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
-const getLeftColumnIndex = ({
-  currentColIndex,
-  firstColIndex,
-  lastColIndex,
-  isRtl
-}) => {
-  if (isRtl) {
-    if (currentColIndex < lastColIndex) {
-      return currentColIndex + 1;
-    }
-  } else if (!isRtl) {
-    if (currentColIndex > firstColIndex) {
-      return currentColIndex - 1;
-    }
-  }
-  return null;
-};
-const getRightColumnIndex = ({
-  currentColIndex,
-  firstColIndex,
-  lastColIndex,
-  isRtl
-}) => {
-  if (isRtl) {
-    if (currentColIndex > firstColIndex) {
-      return currentColIndex - 1;
-    }
-  } else if (!isRtl) {
-    if (currentColIndex < lastColIndex) {
-      return currentColIndex + 1;
-    }
-  }
-  return null;
-};
+import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -73,11 +35,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
   /**
    * @param {number} colIndex Index of the column to focus
-   * @param {number} rowIndex index of the row to focus
+   * @param {GridRowId} rowId index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   * @param {string} rowSpanScanDirection Which direction to search to find the next cell not hidden by `rowSpan`.
    * TODO replace with apiRef.current.moveFocusToRelativeCell()
    */
-  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left') => {
+  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left', rowSpanScanDirection = 'up') => {
     const visibleSortedRows = gridExpandedSortedRowEntriesSelector(apiRef);
     const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -87,16 +50,17 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
+    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
-    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === rowId);
+    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === nonRowSpannedRowId);
     logger.debug(`Navigating to cell row ${rowIndexRelativeToAllRows}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex: rowIndexRelativeToAllRows
     });
-    const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    apiRef.current.setCellFocus(rowId, field);
+    apiRef.current.setCellFocus(nonRowSpannedRowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -432,7 +396,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1), isRtl ? 'right' : 'left', 'down');
           }
           break;
         }

package/hooks/features/keyboardNavigation/utils.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridColDef, GridRowEntry, GridRowId } from '../../../models';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+export declare function enrichPageRowsWithPinnedRows(apiRef: React.MutableRefObject<GridApiCommunity>, rows: GridRowEntry[]): GridRowEntry<import("../../../models").GridValidRowModel>[];
+export declare const getLeftColumnIndex: ({ currentColIndex, firstColIndex, lastColIndex, isRtl, }: {
+    currentColIndex: number;
+    firstColIndex: number;
+    lastColIndex: number;
+    isRtl: boolean;
+}) => number | null;
+export declare const getRightColumnIndex: ({ currentColIndex, firstColIndex, lastColIndex, isRtl, }: {
+    currentColIndex: number;
+    firstColIndex: number;
+    lastColIndex: number;
+    isRtl: boolean;
+}) => number | null;
+export declare function findNonRowSpannedCell(apiRef: React.MutableRefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;

package/hooks/features/keyboardNavigation/utils.js

@@ -0,0 +1,58 @@
+import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
+import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+export function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
+  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
+}
+export const getLeftColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  }
+  return null;
+};
+export const getRightColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  }
+  return null;
+};
+export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
+  const rowSpanHiddenCells = gridRowSpanningHiddenCellsSelector(apiRef);
+  if (!rowSpanHiddenCells[rowId]?.[field]) {
+    return rowId;
+  }
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  // find closest non row spanned cell in the given `rowSpanScanDirection`
+  let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
+  while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
+    const nextRowId = filteredSortedRowIds[nextRowIndex];
+    if (!rowSpanHiddenCells[nextRowId]?.[field]) {
+      return nextRowId;
+    }
+    nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;
+  }
+  return rowId;
+}

package/hooks/features/rows/gridRowSpanningSelectors.d.ts

@@ -0,0 +1,4 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+export declare const gridRowSpanningHiddenCellsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, boolean>>>;
+export declare const gridRowSpanningSpannedCellsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<import("../../..").GridRowId, Record<string, number>>>;
+export declare const gridRowSpanningHiddenCellsOriginMapSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<number, Record<string, number>>>;

package/hooks/features/rows/gridRowSpanningSelectors.js

@@ -0,0 +1,5 @@
+import { createSelector } from "../../../utils/createSelector.js";
+const gridRowSpanningStateSelector = state => state.rowSpanning;
+export const gridRowSpanningHiddenCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCells);
+export const gridRowSpanningSpannedCellsSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.spannedCells);
+export const gridRowSpanningHiddenCellsOriginMapSelector = createSelector(gridRowSpanningStateSelector, rowSpanning => rowSpanning.hiddenCellOriginMap);

package/hooks/features/rows/gridRowSpanningUtils.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridRenderContext } from '../../../models';
+import type { GridValidRowModel } from '../../../models/gridRows';
+import type { GridColDef } from '../../../models/colDef';
+import type { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { RowRange } from './useGridRowSpanning';
+export declare function getUnprocessedRange(testRange: RowRange, processedRange: RowRange): RowRange | null;
+export declare function isRowContextInitialized(renderContext: GridRenderContext): boolean;
+export declare function isRowRangeUpdated(range1: RowRange, range2: RowRange): boolean;
+export declare const getCellValue: (row: GridValidRowModel, colDef: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => any;

package/hooks/features/rows/gridRowSpanningUtils.js

@@ -0,0 +1,42 @@
+export function getUnprocessedRange(testRange, processedRange) {
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return null;
+  }
+  // Overflowing at the end
+  // Example: testRange={ firstRowIndex: 10, lastRowIndex: 20 }, processedRange={ firstRowIndex: 0, lastRowIndex: 15 }
+  // Unprocessed Range={ firstRowIndex: 16, lastRowIndex: 20 }
+  if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex > processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: processedRange.lastRowIndex,
+      lastRowIndex: testRange.lastRowIndex
+    };
+  }
+  // Overflowing at the beginning
+  // Example: testRange={ firstRowIndex: 0, lastRowIndex: 20 }, processedRange={ firstRowIndex: 16, lastRowIndex: 30 }
+  // Unprocessed Range={ firstRowIndex: 0, lastRowIndex: 15 }
+  if (testRange.firstRowIndex < processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
+    return {
+      firstRowIndex: testRange.firstRowIndex,
+      lastRowIndex: processedRange.firstRowIndex - 1
+    };
+  }
+  // TODO: Should return two ranges handle overflowing at both ends ?
+  return testRange;
+}
+export function isRowContextInitialized(renderContext) {
+  return renderContext.firstRowIndex !== 0 || renderContext.lastRowIndex !== 0;
+}
+export function isRowRangeUpdated(range1, range2) {
+  return range1.firstRowIndex !== range2.firstRowIndex || range1.lastRowIndex !== range2.lastRowIndex;
+}
+export const getCellValue = (row, colDef, apiRef) => {
+  if (!row) {
+    return null;
+  }
+  let cellValue = row[colDef.field];
+  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
+  if (valueGetter) {
+    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  }
+  return cellValue;
+};

package/hooks/features/rows/useGridRowSpanning.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { GridColDef } from '../../../models/colDef';
+import type { GridRowId } from '../../../models/gridRows';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { GridStateInitializer } from '../../utils/useGridInitializeState';
+export interface GridRowSpanningState {
+    spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
+    hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
+    /**
+     * For each hidden cell, it contains the row index corresponding to the cell that is
+     * the origin of the hidden cell. i.e. the cell which is spanned.
+     * Used by the virtualization to properly keep the spanned cells in view.
+     */
+    hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
+}
+export type RowRange = {
+    firstRowIndex: number;
+    lastRowIndex: number;
+};
+/**
+ * @requires columnsStateInitializer (method) - should be initialized before
+ * @requires rowsStateInitializer (method) - should be initialized before
+ * @requires filterStateInitializer (method) - should be initialized before
+ */
+export declare const rowSpanningStateInitializer: GridStateInitializer;
+export declare const useGridRowSpanning: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "unstable_rowSpanning" | "pagination" | "paginationMode">) => void;

package/hooks/features/rows/useGridRowSpanning.js

@@ -0,0 +1,257 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
+import { useGridSelector } from "../../utils/useGridSelector.js";
+import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+const EMPTY_STATE = {
+  spannedCells: {},
+  hiddenCells: {},
+  hiddenCellOriginMap: {}
+};
+const EMPTY_RANGE = {
+  firstRowIndex: 0,
+  lastRowIndex: 0
+};
+const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+/**
+ * Default number of rows to process during state initialization to avoid flickering.
+ * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without
+ * compromising performance.
+ */
+const DEFAULT_ROWS_TO_PROCESS = 20;
+const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange) => {
+  const spannedCells = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.spannedCells);
+  const hiddenCells = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.hiddenCells);
+  const hiddenCellOriginMap = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.hiddenCellOriginMap);
+  if (resetState) {
+    processedRange = EMPTY_RANGE;
+  }
+  colDefs.forEach(colDef => {
+    if (skippedFields.has(colDef.field)) {
+      return;
+    }
+    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+      const row = visibleRows[index];
+      if (hiddenCells[row.id]?.[colDef.field]) {
+        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;
+        const prevRowEntry = visibleRows[prevIndex];
+        while (prevIndex >= range.firstRowIndex && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
+          const currentRow = visibleRows[prevIndex + 1];
+          if (hiddenCells[currentRow.id]) {
+            hiddenCells[currentRow.id][colDef.field] = true;
+          } else {
+            hiddenCells[currentRow.id] = {
+              [colDef.field]: true
+            };
+          }
+          backwardsHiddenCells.push(index);
+          rowSpan += 1;
+          spannedRowId = prevRowEntry.id;
+          spannedRowIndex = prevIndex;
+          prevIndex -= 1;
+        }
+      }
+      backwardsHiddenCells.forEach(hiddenCellIndex => {
+        if (hiddenCellOriginMap[hiddenCellIndex]) {
+          hiddenCellOriginMap[hiddenCellIndex][colDef.field] = spannedRowIndex;
+        } else {
+          hiddenCellOriginMap[hiddenCellIndex] = {
+            [colDef.field]: 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][colDef.field] = true;
+        } else {
+          hiddenCells[currentRow.id] = {
+            [colDef.field]: true
+          };
+        }
+        if (hiddenCellOriginMap[relativeIndex]) {
+          hiddenCellOriginMap[relativeIndex][colDef.field] = spannedRowIndex;
+        } else {
+          hiddenCellOriginMap[relativeIndex] = {
+            [colDef.field]: spannedRowIndex
+          };
+        }
+        relativeIndex += 1;
+        rowSpan += 1;
+      }
+      if (rowSpan > 0) {
+        if (spannedCells[spannedRowId]) {
+          spannedCells[spannedRowId][colDef.field] = rowSpan + 1;
+        } else {
+          spannedCells[spannedRowId] = {
+            [colDef.field]: rowSpan + 1
+          };
+        }
+      }
+    }
+    processedRange = {
+      firstRowIndex: Math.min(processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
+      lastRowIndex: Math.max(processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
+    };
+  });
+  return {
+    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, 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 _extends({}, state, {
+        rowSpanning: EMPTY_STATE
+      });
+    }
+    const rangeToProcess = {
+      firstRowIndex: 0,
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 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);
+    return _extends({}, state, {
+      rowSpanning: {
+        spannedCells,
+        hiddenCells,
+        hiddenCellOriginMap
+      }
+    });
+  }
+  return _extends({}, state, {
+    rowSpanning: EMPTY_STATE
+  });
+};
+export const useGridRowSpanning = (apiRef, props) => {
+  const {
+    range,
+    rows: visibleRows
+  } = useGridVisibleRows(apiRef, props);
+  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
+  const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const processedRange = useLazyRef(() => {
+    return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
+      firstRowIndex: 0,
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
+    } : 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 => _extends({}, state, {
+          rowSpanning: EMPTY_STATE
+        }));
+      }
+      return;
+    }
+    if (range === null || !isRowContextInitialized(renderContext)) {
+      return;
+    }
+    if (resetState) {
+      processedRange.current = EMPTY_RANGE;
+    }
+    const rangeToProcess = getUnprocessedRange({
+      firstRowIndex: renderContext.firstRowIndex,
+      lastRowIndex: renderContext.lastRowIndex - 1
+    }, processedRange.current);
+    if (rangeToProcess === null) {
+      return;
+    }
+    const {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap,
+      processedRange: newProcessedRange
+    } = computeRowSpanningState(apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange.current);
+    processedRange.current = newProcessedRange;
+    const newSpannedCellsCount = Object.keys(spannedCells).length;
+    const newHiddenCellsCount = Object.keys(hiddenCells).length;
+    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) {
+      return;
+    }
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        rowSpanning: {
+          spannedCells,
+          hiddenCells,
+          hiddenCellOriginMap
+        }
+      });
+    });
+  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
+  const prevRenderContext = React.useRef(renderContext);
+  const isFirstRender = React.useRef(true);
+  const shouldResetState = React.useRef(false);
+  React.useEffect(() => {
+    const firstRender = isFirstRender.current;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+    if (range && lastRange.current && isRowRangeUpdated(range, lastRange.current)) {
+      lastRange.current = range;
+      shouldResetState.current = true;
+    }
+    if (!firstRender && prevRenderContext.current !== renderContext) {
+      if (isRowRangeUpdated(prevRenderContext.current, renderContext)) {
+        updateRowSpanningState(shouldResetState.current);
+        shouldResetState.current = false;
+      }
+      prevRenderContext.current = renderContext;
+      return;
+    }
+    updateRowSpanningState();
+  }, [updateRowSpanningState, renderContext, range, lastRange]);
+};

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -40,4 +40,4 @@ export declare const useGridVirtualScroller: () => {
     };
 };
 export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
-export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, isRtl: boolean, pinnedLeftLength: number): number;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, pinnedLeftLength: number): number;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -24,6 +24,7 @@ import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js
 import { getMinimalContentHeight } from "../rows/gridRowsUtils.js";
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
 import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
+import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -325,7 +326,7 @@ export const useGridVirtualScroller = () => {
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, isRtl, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
       rows.push(/*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
@@ -353,7 +354,7 @@ export const useGridVirtualScroller = () => {
       if (panel) {
         rows.push(panel);
       }
-      if (isLastVisible) {
+      if (params.position === undefined && isLastVisibleInSection) {
         rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({
           lastRowId: id
         }));
@@ -447,6 +448,7 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
   const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+  const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
   return {
@@ -467,7 +469,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     rows: currentPage.rows,
     range: currentPage.range,
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
-    visibleColumns
+    visibleColumns,
+    hiddenCellsOriginMap
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -485,10 +488,18 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
   if (inputs.enabledForRows) {
     // Clamp the value because the search may return an index out of bounds.
     // In the last index, this is not needed because Array.slice doesn't include it.
-    const firstRowIndex = Math.min(getNearestIndexToRender(inputs, top, {
+    let firstRowIndex = Math.min(getNearestIndexToRender(inputs, top, {
       atStart: true,
       lastPosition: inputs.rowsMeta.positions[inputs.rowsMeta.positions.length - 1] + inputs.lastRowHeight
     }), inputs.rowsMeta.positions.length - 1);
+
+    // If any of the cells in the `firstRowIndex` is hidden due to an extended row span,
+    // Make sure the row from where the rowSpan is originated is visible.
+    const rowSpanHiddenCellOrigin = inputs.hiddenCellsOriginMap[firstRowIndex];
+    if (rowSpanHiddenCellOrigin) {
+      const minSpannedRowIndex = Math.min(...Object.values(rowSpanHiddenCellOrigin));
+      firstRowIndex = Math.min(firstRowIndex, minSpannedRowIndex);
+    }
     const lastRowIndex = inputs.autoHeight ? firstRowIndex + inputs.rows.length : getNearestIndexToRender(inputs, top + inputs.viewportInnerHeight);
     renderContext.firstRowIndex = firstRowIndex;
     renderContext.lastRowIndex = lastRowIndex;
@@ -642,9 +653,8 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-export function computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedLeftLength) {
-  const factor = isRtl ? -1 : 1;
-  const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
+export function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
+  const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
 function directionForDelta(dx, dy) {

package/hooks/utils/useGridApiEventHandler.js

@@ -90,7 +90,6 @@ const optionsSubscriberOptions = {
   isFirst: true
 };
 export function useGridApiOptionHandler(apiRef, eventName, handler) {
-  // Validate that only one per event name?
   useGridApiEventHandler(apiRef, eventName, handler, optionsSubscriberOptions);
 }
 export { GridSignature };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.17.0
+ * @mui/x-data-grid v7.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -41,6 +41,7 @@ export { useGridPreferencesPanel, preferencePanelStateInitializer, } from '../ho
 export { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 export { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+export { useGridRowSpanning, rowSpanningStateInitializer, } from '../hooks/features/rows/useGridRowSpanning';
 export { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
 export { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';

package/internals/index.js

@@ -32,6 +32,7 @@ export { useGridPreferencesPanel, preferencePanelStateInitializer } from "../hoo
 export { useGridEditing, editingStateInitializer } from "../hooks/features/editing/useGridEditing.js";
 export { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGridRows.js";
+export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";

package/models/colDef/gridColDef.d.ts

@@ -129,6 +129,10 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
      * Function that allows to get a specific data instead of field to render in the cell.
      */
     valueGetter?: GridValueGetter<R, V, F>;
+    /**
+     * Function that allows to provide a specific value to be used in row spanning.
+     */
+    rowSpanValueGetter?: GridValueGetter<R, V, F>;
     /**
      * Function that allows to customize how the entered value is stored in the row.
      * It only works with cell/row editing.