@mui/x-data-grid 8.9.1 → 8.10.0

package/hooks/features/rows/useGridRowSpanning.js

@@ -9,18 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowSpanning = exports.rowSpanningStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _constants = require("../../../internals/constants");
+var _features = require("@mui/x-virtualizer/features");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
-var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _utils = require("../../../utils/utils");
 var _pagination = require("../pagination");
 var _gridRowsSelector = require("./gridRowsSelector");
-const EMPTY_STATE = {
+const EMPTY_CACHES = {
   spannedCells: {},
   hiddenCells: {},
   hiddenCellOriginMap: {}
@@ -29,27 +27,31 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set([_gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', _constants.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 ? {} : (0, _extends2.default)({}, apiRef.current.state.rowSpanning.spannedCells);
-  const hiddenCells = resetState ? {} : (0, _extends2.default)({}, apiRef.current.state.rowSpanning.hiddenCells);
-  const hiddenCellOriginMap = resetState ? {} : (0, _extends2.default)({}, 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 : _features.Rowspan.selectors.state(virtualizer.store.state);
+  const spannedCells = (0, _extends2.default)({}, previousState.caches.spannedCells);
+  const hiddenCells = (0, _extends2.default)({}, previousState.caches.hiddenCells);
+  const hiddenCellOriginMap = (0, _extends2.default)({}, 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 = (0, _gridRowSpanningUtils.getCellValue)(row.model, colDef, apiRef);
@@ -68,10 +70,10 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
         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;
+            hiddenCells[currentRow.id][columnIndex] = true;
           } else {
             hiddenCells[currentRow.id] = {
-              [colDef.field]: true
+              [columnIndex]: true
             };
           }
           backwardsHiddenCells.push(index);
@@ -84,10 +86,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
           };
         }
       });
@@ -97,17 +99,17 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       while (relativeIndex <= range.lastRowIndex && visibleRows[relativeIndex] && (0, _gridRowSpanningUtils.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;
@@ -115,23 +117,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
   };
 };
@@ -181,72 +181,43 @@ 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 (0, _extends2.default)({}, state, {
-    rowSpanning: {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    }
+    rowSpanning
   });
 };
 exports.rowSpanningStateInitializer = rowSpanningStateInitializer;
 const useGridRowSpanning = (apiRef, props) => {
-  const processedRange = (0, _useLazyRef.default)(() => {
-    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
-    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    } = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
     if (range === null || !(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
       return;
     }
-    if (resetState) {
-      processedRange.current = EMPTY_RANGE;
-    }
+    const previousState = resetState ? EMPTY_STATE : _features.Rowspan.selectors.state(store.state);
     const rangeToProcess = (0, _gridRowSpanningUtils.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 = (0, _gridColumnsSelector.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 (0, _extends2.default)({}, 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)
@@ -268,14 +239,12 @@ const useGridRowSpanning = (apiRef, props) => {
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', (0, _utils.runIf)(props.rowSpanning, resetRowSpanningState));
   React.useEffect(() => {
     if (!props.rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => (0, _extends2.default)({}, 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]);
 };
 exports.useGridRowSpanning = useGridRowSpanning;

package/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/hooks/features/rows/useGridRowsMeta.js

@@ -1,33 +1,20 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _ResizeObserver = require("../../../utils/ResizeObserver");
-var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _utils = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _useGridSelector = require("../../utils/useGridSelector");
-var _densitySelector = require("../density/densitySelector");
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridRowsSelector = require("./gridRowsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
-var _gridRowsUtils = require("./gridRowsUtils");
-var _gridFocusedVirtualCellSelector = require("../virtualization/gridFocusedVirtualCellSelector");
-/* eslint-disable no-underscore-dangle */
-
 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 = (0, _gridDimensionsSelectors.gridRowHeightSelector)(apiRef);
   const dataRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
   const pagination = (0, _gridPaginationSelector.gridPaginationSelector)(apiRef);
@@ -49,178 +36,20 @@ const rowsMetaStateInitializer = (state, props, apiRef) => {
  * @requires useGridPage (method)
  */
 exports.rowsMetaStateInitializer = rowsMetaStateInitializer;
-const useGridRowsMeta = (apiRef, props) => {
+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 = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.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 = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef).rowHeight;
-    (0, _utils.eslintUseValue)(rowHeight);
-    const entry = apiRef.current.getRowHeightEntry(row.id);
-    if (!getRowHeightProp) {
-      entry.content = baseRowHeight;
-      entry.needsFirstMeasurement = false;
-    } else {
-      const rowHeightFromUser = getRowHeightProp((0, _extends2.default)({}, row, {
-        densityFactor
-      }));
-      if (rowHeightFromUser === 'auto') {
-        if (entry.needsFirstMeasurement) {
-          const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight((0, _extends2.default)({}, 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 = (0, _gridRowsUtils.getValidRowHeight)(rowHeightFromUser, baseRowHeight, _gridRowsUtils.getRowHeightWarning);
-        entry.needsFirstMeasurement = false;
-        entry.autoHeight = false;
-      }
-    }
-    if (getRowSpacing) {
-      const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-      const spacing = getRowSpacing((0, _extends2.default)({}, 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 (0, _extends2.default)({}, 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 && (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 = (0, _useLazyRef.default)(() => new _ResizeObserver.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 = (0, _gridFocusedVirtualCellSelector.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;
   (0, _pipeProcessing.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
-  (0, _useEnhancedEffect.default)(() => {
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
   const rowsMetaApi = {
     unstable_getRowHeight: getRowHeight,
     unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,

package/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.

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

@@ -1,2 +1,3 @@
+export { EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
 export * from "./useGridVirtualization.js";
 export * from "./gridVirtualizationSelectors.js";

package/hooks/features/virtualization/index.js

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  EMPTY_RENDER_CONTEXT: true
+};
+Object.defineProperty(exports, "EMPTY_RENDER_CONTEXT", {
+  enumerable: true,
+  get: function () {
+    return _xVirtualizer.EMPTY_RENDER_CONTEXT;
+  }
+});
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _useGridVirtualization = require("./useGridVirtualization");
 Object.keys(_useGridVirtualization).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useGridVirtualization[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_useGridVirtualization).forEach(function (key) {
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 Object.keys(_gridVirtualizationSelectors).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridVirtualizationSelectors[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

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

@@ -1,21 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridRenderContext } from "../../../models/index.js";
+import { Virtualization } from '@mui/x-virtualizer';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
-import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-type RootProps = Pick<DataGridProcessedProps, 'disableVirtualization' | 'autoHeight'>;
-export type GridVirtualizationState = {
-  enabled: boolean;
-  enabledForColumns: boolean;
-  enabledForRows: boolean;
-  renderContext: GridRenderContext;
-};
-export declare const EMPTY_RENDER_CONTEXT: {
-  firstRowIndex: number;
-  lastRowIndex: number;
-  firstColumnIndex: number;
-  lastColumnIndex: number;
-};
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+type RootProps = DataGridProcessedProps;
+export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
-export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
 export {};