@mui/x-data-grid 8.9.1 → 8.10.0

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/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/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/esm/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/esm/hooks/features/virtualization/index.js

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

package/esm/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 {};

package/esm/hooks/features/virtualization/useGridVirtualization.js

@@ -2,47 +2,58 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
+import { isJSDOM } from "../../../utils/isJSDOM.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-export const EMPTY_RENDER_CONTEXT = {
-  firstRowIndex: 0,
-  lastRowIndex: 0,
-  firstColumnIndex: 0,
-  lastColumnIndex: 0
-};
+import { useGridEventPriority } from "../../utils/index.js";
+const HAS_LAYOUT = !isJSDOM;
+
+// HACK: Typescript doesn't use the alias name ("GridVirtualizationState") and changes
+// the autogenerated docs result, but this would otherwise be just:
+//   export type GridVirtualizationState = VirtualizationState;
+
+// XXX: We want to use the virtualizer as the source of truth for its state, but this needs to
+// stay because some parts of the grid require the `virtualization` state during initialization.
 export const virtualizationStateInitializer = (state, props) => {
   const {
     disableVirtualization,
     autoHeight
   } = props;
   const virtualization = {
-    enabled: !disableVirtualization,
-    enabledForColumns: !disableVirtualization,
-    enabledForRows: !disableVirtualization && !autoHeight,
+    enabled: !disableVirtualization && HAS_LAYOUT,
+    enabledForColumns: !disableVirtualization && HAS_LAYOUT,
+    enabledForRows: !disableVirtualization && !autoHeight && HAS_LAYOUT,
     renderContext: EMPTY_RENDER_CONTEXT
   };
   return _extends({}, state, {
     virtualization
   });
 };
-export function useGridVirtualization(apiRef, props) {
+export function useGridVirtualization(apiRef, rootProps) {
+  const {
+    virtualizer
+  } = apiRef.current;
+  const {
+    autoHeight,
+    disableVirtualization
+  } = rootProps;
+
   /*
    * API METHODS
    */
 
   const setVirtualization = enabled => {
-    apiRef.current.setState(state => _extends({}, state, {
-      virtualization: _extends({}, state.virtualization, {
-        enabled,
-        enabledForColumns: enabled,
-        enabledForRows: enabled && !props.autoHeight
-      })
+    enabled &&= HAS_LAYOUT;
+    virtualizer.store.set('virtualization', _extends({}, virtualizer.store.state.virtualization, {
+      enabled,
+      enabledForColumns: enabled,
+      enabledForRows: enabled && !autoHeight
     }));
   };
   const setColumnVirtualization = enabled => {
-    apiRef.current.setState(state => _extends({}, state, {
-      virtualization: _extends({}, state.virtualization, {
-        enabledForColumns: enabled
-      })
+    enabled &&= HAS_LAYOUT;
+    virtualizer.store.set('virtualization', _extends({}, virtualizer.store.state.virtualization, {
+      enabledForColumns: enabled
     }));
   };
   const api = {
@@ -50,14 +61,22 @@ export function useGridVirtualization(apiRef, props) {
     unstable_setColumnVirtualization: setColumnVirtualization
   };
   useGridApiMethod(apiRef, api, 'public');
+  const forceUpdateRenderContext = virtualizer.api.forceUpdateRenderContext;
+  apiRef.current.register('private', {
+    updateRenderContext: forceUpdateRenderContext
+  });
 
   /*
    * EFFECTS
    */
 
+  useGridEventPriority(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  useGridEventPriority(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  useGridEventPriority(apiRef, 'columnsChange', forceUpdateRenderContext);
+
   /* eslint-disable react-hooks/exhaustive-deps */
   React.useEffect(() => {
-    setVirtualization(!props.disableVirtualization);
-  }, [props.disableVirtualization, props.autoHeight]);
+    setVirtualization(!rootProps.disableVirtualization);
+  }, [disableVirtualization, autoHeight]);
   /* eslint-enable react-hooks/exhaustive-deps */
 }

package/esm/hooks/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from '@mui/x-internals/useRunOnce';
 export { useGridEvent, useGridEventPriority, unstable_resetCleanupTracking } from "./useGridEvent.js";
 export * from "./useGridApiMethod.js";
 export * from "./useGridLogger.js";
@@ -5,6 +6,5 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
 export * from "./useRunOncePerLoop.js";
 export type { RenderProp } from '@mui/x-internals/useComponentRenderer';

package/esm/hooks/utils/index.js

@@ -1,3 +1,4 @@
+export * from '@mui/x-internals/useRunOnce';
 export { useGridEvent, useGridEventPriority, unstable_resetCleanupTracking } from "./useGridEvent.js";
 export * from "./useGridApiMethod.js";
 export * from "./useGridLogger.js";
@@ -5,5 +6,4 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
 export * from "./useRunOncePerLoop.js";

package/esm/hooks/utils/useFirstRender.d.ts

@@ -1 +1 @@
-export declare const useFirstRender: (callback: () => void) => void;
+export * from '@mui/x-internals/useFirstRender';