@mui/x-data-grid 8.8.0 → 8.9.2

package/esm/hooks/features/rows/gridRowsMetaInterfaces.d.ts

@@ -1,12 +1,6 @@
+import type { HeightEntry } from '@mui/x-virtualizer/models';
 import { GridRowId } from "../../../models/gridRows.js";
-export type HeightEntry = {
-  content: number;
-  spacingTop: number;
-  spacingBottom: number;
-  detail: number;
-  autoHeight: boolean;
-  needsFirstMeasurement: boolean;
-};
+export type { HeightEntry } from '@mui/x-virtualizer/models';
 export type HeightCache = Map<GridRowId, HeightEntry>;
 export interface GridRowsMetaInternalCache {
   /**

package/esm/hooks/features/rows/gridRowsMetaState.d.ts

@@ -1,21 +1,5 @@
+import { RowsMetaState } from '@mui/x-virtualizer/models';
 /**
  * The grid rows total height and row positions.
  */
-export interface GridRowsMetaState {
-  /**
-   * The sum of all visible grid rows in the current rows.
-   */
-  currentPageTotalHeight: number;
-  /**
-   * The grid rows positions.
-   */
-  positions: number[];
-  /**
-   * The total height of the pinned top rows.
-   */
-  pinnedTopRowsTotalHeight: number;
-  /**
-   * The total height of the pinned bottom rows.
-   */
-  pinnedBottomRowsTotalHeight: number;
-}
+export interface GridRowsMetaState extends RowsMetaState {}

package/esm/hooks/features/rows/gridRowsUtils.d.ts

@@ -42,7 +42,7 @@ export declare const getRowsStateFromCache: ({
 }) => GridRowsState;
 export declare const isAutogeneratedRow: (row: GridRowModel) => boolean;
 export declare const isAutogeneratedRowNode: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
-export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];
+export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean, directChildrenOnly?: boolean) => GridRowId[];
 export declare const updateCacheWithNewRows: ({
   previousCache,
   getRowId,

package/esm/hooks/features/rows/gridRowsUtils.js

@@ -127,7 +127,7 @@ export const getRowsStateFromCache = ({
 };
 export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
-export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
     return [];
@@ -138,7 +138,10 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
     if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[child])) {
       validDescendants.push(child);
     }
-    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);
+    if (directChildrenOnly) {
+      continue;
+    }
+    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows, directChildrenOnly);
     for (let j = 0; j < childDescendants.length; j += 1) {
       validDescendants.push(childDescendants[j]);
     }

package/esm/hooks/features/rows/useGridRowAriaAttributes.js

@@ -9,7 +9,9 @@ export const useGridRowAriaAttributes = () => {
     const ariaAttributes = {};
     const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
     ariaAttributes['aria-rowindex'] = ariaRowIndex;
-    if (apiRef.current.isRowSelectable(rowNode.id)) {
+
+    // XXX: fix this properly
+    if (rowNode && apiRef.current.isRowSelectable(rowNode.id)) {
       ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
     }
     return ariaAttributes;

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

@@ -1,19 +1,9 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridColDef } from "../../../models/colDef/index.js";
-import type { GridRowId } from "../../../models/gridRows.js";
+import { RowSpanningState } from '@mui/x-virtualizer/models';
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-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 interface GridRowSpanningState extends RowSpanningState {}
 export type RowRange = {
   firstRowIndex: number;
   lastRowIndex: number;

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

@@ -2,18 +2,16 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { Rowspan } from '@mui/x-virtualizer/features';
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
-import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";
 import { runIf } from "../../../utils/utils.js";
 import { gridPageSizeSelector } from "../pagination/index.js";
 import { gridDataRowIdsSelector } from "./gridRowsSelector.js";
-const EMPTY_STATE = {
+const EMPTY_CACHES = {
   spannedCells: {},
   hiddenCells: {},
   hiddenCellOriginMap: {}
@@ -22,27 +20,31 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+const EMPTY_STATE = {
+  caches: EMPTY_CACHES,
+  processedRange: EMPTY_RANGE
+};
+
 /**
  * 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;
-    }
+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]?.[colDef.field]) {
+      if (hiddenCells[row.id]?.[columnIndex]) {
         continue;
       }
       const cellValue = getCellValue(row.model, colDef, apiRef);
@@ -61,10 +63,10 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
         while (prevIndex >= range.firstRowIndex && prevRowEntry && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
           const currentRow = visibleRows[prevIndex + 1];
           if (hiddenCells[currentRow.id]) {
-            hiddenCells[currentRow.id][colDef.field] = true;
+            hiddenCells[currentRow.id][columnIndex] = true;
           } else {
             hiddenCells[currentRow.id] = {
-              [colDef.field]: true
+              [columnIndex]: true
             };
           }
           backwardsHiddenCells.push(index);
@@ -77,10 +79,10 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
         if (hiddenCellOriginMap[hiddenCellIndex]) {
-          hiddenCellOriginMap[hiddenCellIndex][colDef.field] = spannedRowIndex;
+          hiddenCellOriginMap[hiddenCellIndex][columnIndex] = spannedRowIndex;
         } else {
           hiddenCellOriginMap[hiddenCellIndex] = {
-            [colDef.field]: spannedRowIndex
+            [columnIndex]: spannedRowIndex
           };
         }
       });
@@ -90,17 +92,17 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       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;
+          hiddenCells[currentRow.id][columnIndex] = true;
         } else {
           hiddenCells[currentRow.id] = {
-            [colDef.field]: true
+            [columnIndex]: true
           };
         }
         if (hiddenCellOriginMap[relativeIndex]) {
-          hiddenCellOriginMap[relativeIndex][colDef.field] = spannedRowIndex;
+          hiddenCellOriginMap[relativeIndex][columnIndex] = spannedRowIndex;
         } else {
           hiddenCellOriginMap[relativeIndex] = {
-            [colDef.field]: spannedRowIndex
+            [columnIndex]: spannedRowIndex
           };
         }
         relativeIndex += 1;
@@ -108,23 +110,21 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       }
       if (rowSpan > 0) {
         if (spannedCells[spannedRowId]) {
-          spannedCells[spannedRowId][colDef.field] = rowSpan + 1;
+          spannedCells[spannedRowId][columnIndex] = rowSpan + 1;
         } else {
           spannedCells[spannedRowId] = {
-            [colDef.field]: rowSpan + 1
+            [columnIndex]: rowSpan + 1
           };
         }
       }
     }
-    processedRange = {
-      firstRowIndex: Math.min(processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
-      lastRowIndex: Math.max(processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
-    };
   });
   return {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap,
+    caches: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    },
     processedRange
   };
 };
@@ -174,71 +174,42 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
     model: dataRowIdToModelLookup[id]
   }));
   const colDefs = orderedFields.map(field => columnsLookup[field]);
-  const {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap
-  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
+  const rowSpanning = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true);
   return _extends({}, state, {
-    rowSpanning: {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    }
+    rowSpanning
   });
 };
 export const useGridRowSpanning = (apiRef, props) => {
-  const processedRange = useLazyRef(() => {
-    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
-  });
+  const store = apiRef.current.virtualizer.store;
   const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
     const {
       range,
       rows: visibleRows
-    } = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    } = getVisibleRows(apiRef);
     if (range === null || !isRowContextInitialized(renderContext)) {
       return;
     }
-    if (resetState) {
-      processedRange.current = EMPTY_RANGE;
-    }
+    const previousState = resetState ? EMPTY_STATE : Rowspan.selectors.state(store.state);
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
-    }, processedRange.current);
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex - range.firstRowIndex + 1)
+    }, previousState.processedRange);
     if (rangeToProcess === null) {
       return;
     }
     const colDefs = gridVisibleColumnDefinitionsSelector(apiRef);
-    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;
-    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    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;
     }
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        rowSpanning: {
-          spannedCells,
-          hiddenCells,
-          hiddenCellOriginMap
-        }
-      });
-    });
-  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
+    store.set('rowSpanning', newState);
+  }, [apiRef, store]);
 
   // Reset events trigger a full re-computation of the row spanning state:
   // - The `unstable_rowSpanning` prop is updated (feature flag)
@@ -260,13 +231,11 @@ export const useGridRowSpanning = (apiRef, props) => {
   useGridEvent(apiRef, 'columnsChange', runIf(props.rowSpanning, resetRowSpanningState));
   React.useEffect(() => {
     if (!props.rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => _extends({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
+      if (store.state.rowSpanning !== EMPTY_STATE) {
+        store.set('rowSpanning', EMPTY_STATE);
       }
-    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+    } else if (store.state.rowSpanning.caches === EMPTY_CACHES) {
       resetRowSpanningState();
     }
-  }, [apiRef, resetRowSpanningState, props.rowSpanning]);
+  }, [apiRef, store, resetRowSpanningState, props.rowSpanning]);
 };

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

@@ -198,7 +198,8 @@ export const useGridRows = (apiRef, props) => {
     skipAutoGeneratedRows = true,
     groupId,
     applySorting,
-    applyFiltering
+    applyFiltering,
+    directChildrenOnly = false
   }) => {
     const tree = gridRowTreeSelector(apiRef);
     let children;
@@ -210,14 +211,14 @@ export const useGridRows = (apiRef, props) => {
       const sortedRowIds = gridSortedRowIdsSelector(apiRef);
       children = [];
       const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-      for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 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);
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows, directChildrenOnly);
     }
     if (applyFiltering) {
       const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);

package/esm/hooks/features/rows/useGridRowsMeta.d.ts

@@ -7,4 +7,4 @@ export declare const rowsMetaStateInitializer: GridStateInitializer;
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export declare const useGridRowsMeta: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "getRowHeight" | "getEstimatedRowHeight" | "getRowSpacing" | "pagination" | "paginationMode" | "rowHeight">) => void;
+export declare const useGridRowsMeta: (apiRef: RefObject<GridPrivateApiCommunity>, _props: Pick<DataGridProcessedProps, "getRowHeight" | "getEstimatedRowHeight" | "getRowSpacing" | "pagination" | "paginationMode" | "rowHeight">) => void;

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

@@ -1,25 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { ResizeObserver } from "../../../utils/ResizeObserver.js";
-import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { eslintUseValue } from "../../../utils/utils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridDensityFactorSelector } from "../density/densitySelector.js";
 import { gridPaginationSelector } from "../pagination/gridPaginationSelector.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
-import { gridPinnedRowsSelector, gridRowCountSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector, gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
-import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
-import { gridFocusedVirtualCellSelector } from "../virtualization/gridFocusedVirtualCellSelector.js";
-/* eslint-disable no-underscore-dangle */
-
+import { gridRowCountSelector } from "./gridRowsSelector.js";
+import { gridRowHeightSelector } from "../dimensions/gridDimensionsSelectors.js";
 export const rowsMetaStateInitializer = (state, props, apiRef) => {
-  apiRef.current.caches.rowsMeta = {
-    heights: new Map()
-  };
+  // FIXME: This should be handled in the virtualizer eventually, but there are interdependencies
+  // between state initializers that need to be untangled carefully.
+
   const baseRowHeight = gridRowHeightSelector(apiRef);
   const dataRowCount = gridRowCountSelector(apiRef);
   const pagination = gridPaginationSelector(apiRef);
@@ -40,178 +28,20 @@ export const rowsMetaStateInitializer = (state, props, apiRef) => {
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export const useGridRowsMeta = (apiRef, props) => {
+export const useGridRowsMeta = (apiRef, _props) => {
+  const virtualizer = apiRef.current.virtualizer;
   const {
-    getRowHeight: getRowHeightProp,
-    getRowSpacing,
-    getEstimatedRowHeight
-  } = props;
-  const heightCache = apiRef.current.caches.rowsMeta.heights;
-  const lastMeasuredRowIndex = React.useRef(-1);
-  const hasRowWithAutoHeight = React.useRef(false);
-  const isHeightMetaValid = React.useRef(false);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const currentPage = useGridVisibleRows(apiRef, props);
-  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
-  const getRowHeightEntry = rowId => {
-    let entry = heightCache.get(rowId);
-    if (entry === undefined) {
-      entry = {
-        content: rowHeight,
-        spacingTop: 0,
-        spacingBottom: 0,
-        detail: 0,
-        autoHeight: false,
-        needsFirstMeasurement: true
-      };
-      heightCache.set(rowId, entry);
-    }
-    return entry;
-  };
-  const processHeightEntry = React.useCallback(row => {
-    // HACK: rowHeight trails behind the most up-to-date value just enough to
-    // mess the initial rowsMeta hydration :/
-    const baseRowHeight = gridDimensionsSelector(apiRef).rowHeight;
-    eslintUseValue(rowHeight);
-    const entry = apiRef.current.getRowHeightEntry(row.id);
-    if (!getRowHeightProp) {
-      entry.content = baseRowHeight;
-      entry.needsFirstMeasurement = false;
-    } else {
-      const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
-        densityFactor
-      }));
-      if (rowHeightFromUser === 'auto') {
-        if (entry.needsFirstMeasurement) {
-          const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
-            densityFactor
-          })) : baseRowHeight;
-
-          // If the row was not measured yet use the estimated row height
-          entry.content = estimatedRowHeight ?? baseRowHeight;
-        }
-        hasRowWithAutoHeight.current = true;
-        entry.autoHeight = true;
-      } else {
-        // Default back to base rowHeight if getRowHeight returns invalid value.
-        entry.content = getValidRowHeight(rowHeightFromUser, baseRowHeight, getRowHeightWarning);
-        entry.needsFirstMeasurement = false;
-        entry.autoHeight = false;
-      }
-    }
-    if (getRowSpacing) {
-      const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-      const spacing = getRowSpacing(_extends({}, row, {
-        isFirstVisible: indexRelativeToCurrentPage === 0,
-        isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-        indexRelativeToCurrentPage
-      }));
-      entry.spacingTop = spacing.top ?? 0;
-      entry.spacingBottom = spacing.bottom ?? 0;
-    } else {
-      entry.spacingTop = 0;
-      entry.spacingBottom = 0;
-    }
-    apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
-    return entry;
-  }, [apiRef, currentPage.rows, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
-  const hydrateRowsMeta = React.useCallback(() => {
-    hasRowWithAutoHeight.current = false;
-    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
-      const entry = processHeightEntry(row);
-      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-    }, 0);
-    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
-      const entry = processHeightEntry(row);
-      return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-    }, 0);
-    const positions = [];
-    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-      positions.push(acc);
-      const entry = processHeightEntry(row);
-      const total = entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-      return acc + total;
-    }, 0);
-    if (!hasRowWithAutoHeight.current) {
-      // No row has height=auto, so all rows are already measured
-      lastMeasuredRowIndex.current = Infinity;
-    }
-    const didHeightsChange = pinnedTopRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== apiRef.current.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== apiRef.current.state.rowsMeta.currentPageTotalHeight;
-    const rowsMeta = {
-      currentPageTotalHeight,
-      positions,
-      pinnedTopRowsTotalHeight,
-      pinnedBottomRowsTotalHeight
-    };
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        rowsMeta
-      });
-    });
-    if (didHeightsChange) {
-      apiRef.current.updateDimensions();
-    }
-    isHeightMetaValid.current = true;
-  }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
-  const getRowHeight = rowId => {
-    return heightCache.get(rowId)?.content ?? rowHeight;
-  };
-  const storeRowHeightMeasurement = (id, height) => {
-    const entry = apiRef.current.getRowHeightEntry(id);
-    const didChange = entry.content !== height;
-    entry.needsFirstMeasurement = false;
-    entry.content = height;
-    isHeightMetaValid.current &&= !didChange;
-  };
-  const rowHasAutoHeight = id => {
-    return heightCache.get(id)?.autoHeight ?? false;
-  };
-  const getLastMeasuredRowIndex = () => {
-    return lastMeasuredRowIndex.current;
-  };
-  const setLastMeasuredRowIndex = index => {
-    if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
-      lastMeasuredRowIndex.current = index;
-    }
-  };
-  const resetRowHeights = () => {
-    heightCache.clear();
-    hydrateRowsMeta();
-  };
-  const resizeObserver = useLazyRef(() => new ResizeObserver(entries => {
-    for (let i = 0; i < entries.length; i += 1) {
-      const entry = entries[i];
-      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      const rowId = entry.target.__mui_id;
-      const focusedVirtualRowId = gridFocusedVirtualCellSelector(apiRef)?.id;
-      if (focusedVirtualRowId === rowId && height === 0) {
-        // Focused virtual row has 0 height.
-        // We don't want to store it to avoid scroll jumping.
-        // https://github.com/mui/mui-x/issues/14726
-        return;
-      }
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
-    }
-    if (!isHeightMetaValid.current) {
-      // Avoids "ResizeObserver loop completed with undelivered notifications" error
-      requestAnimationFrame(() => {
-        apiRef.current.requestPipeProcessorsApplication('rowHeight');
-      });
-    }
-  })).current;
-  const observeRowHeight = (element, rowId) => {
-    element.__mui_id = rowId;
-    resizeObserver.observe(element);
-    return () => resizeObserver.unobserve(element);
-  };
+    getRowHeight,
+    setLastMeasuredRowIndex,
+    storeRowHeightMeasurement,
+    resetRowHeights,
+    hydrateRowsMeta,
+    observeRowHeight,
+    rowHasAutoHeight,
+    getRowHeightEntry,
+    getLastMeasuredRowIndex
+  } = virtualizer.api.rowsMeta;
   useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
-
-  // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
-  // Because of variable row height this is needed for the virtualization
-  useEnhancedEffect(() => {
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

package/esm/hooks/features/scroll/useGridScroll.d.ts

@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "listView">) => void;
+export declare const useGridScroll: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination">) => void;

package/esm/hooks/features/scroll/useGridScroll.js

@@ -9,7 +9,6 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
@@ -52,7 +51,7 @@ export const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef);
     const totalRowCount = gridRowCountSelector(apiRef);
-    const visibleColumns = props.listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -99,7 +98,7 @@ export const useGridScroll = (apiRef, props) => {
       return true;
     }
     return false;
-  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.listView]);
+  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;

package/esm/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -34,7 +34,7 @@ export declare const gridVirtualizationRowEnabledSelector: (args_0: import("reac
  */
 export declare const gridRenderContextSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => import("@mui/x-data-grid").GridRenderContext;
+} | null>) => import("@mui/x-virtualizer/models").RenderContext;
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.