@mui/x-virtualizer 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# x-virtualizer
+
+Virtualization engine

package/esm/features/colspan.d.ts

@@ -0,0 +1,28 @@
+import { Store } from '@mui/x-internals/store';
+import type { integer } from '@mui/x-internals/types';
+import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
+import type { ColumnWithWidth, RowId } from "../models/index.js";
+import type { CellColSpanInfo } from "../models/colspan.js";
+import { Virtualization } from "./virtualization.js";
+type ColumnIndex = number;
+type ColspanMap = Map<RowId, Record<ColumnIndex, CellColSpanInfo>>;
+export declare const Colspan: {
+  initialize: typeof initializeState;
+  use: typeof useColspan;
+  selectors: {};
+};
+export declare namespace Colspan {
+  type State = {
+    colspanMap: ColspanMap;
+  };
+  type API = ReturnType<typeof useColspan>;
+}
+declare function initializeState(_params: VirtualizerParams): {
+  colspanMap: Map<any, any>;
+};
+declare function useColspan(store: Store<BaseState & Colspan.State>, params: VirtualizerParams, api: Virtualization.API): {
+  resetColSpan: () => void;
+  getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo | undefined;
+  calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
+};
+export {};

package/esm/features/colspan.js

@@ -0,0 +1,88 @@
+import useEventCallback from '@mui/utils/useEventCallback';
+
+/* eslint-disable import/export, @typescript-eslint/no-redeclare */
+
+const selectors = {};
+export const Colspan = {
+  initialize: initializeState,
+  use: useColspan,
+  selectors
+};
+function initializeState(_params) {
+  return {
+    colspanMap: new Map()
+  };
+}
+function useColspan(store, params, api) {
+  const resetColSpan = () => {
+    store.state.colspanMap = new Map();
+  };
+  const getCellColSpanInfo = (rowId, columnIndex) => {
+    return store.state.colspanMap.get(rowId)?.[columnIndex];
+  };
+
+  // Calculate `colSpan` for each cell in the row
+  const calculateColSpan = useEventCallback((rowId, minFirstColumn, maxLastColumn, columns) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan(store.state.colspanMap, i, rowId, minFirstColumn, maxLastColumn, columns, params.getColspan);
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  });
+  api.calculateColSpan = calculateColSpan;
+  return {
+    resetColSpan,
+    getCellColSpanInfo,
+    calculateColSpan
+  };
+}
+function calculateCellColSpan(lookup, columnIndex, rowId, minFirstColumnIndex, maxLastColumnIndex, columns, getColspan) {
+  const columnsLength = columns.length;
+  const column = columns[columnIndex];
+  const colSpan = getColspan(rowId, column, columnIndex);
+  if (!colSpan || colSpan === 1) {
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan: 1,
+        width: column.computedWidth
+      }
+    });
+    return {
+      colSpan: 1
+    };
+  }
+  let width = column.computedWidth;
+  for (let j = 1; j < colSpan; j += 1) {
+    const nextColumnIndex = columnIndex + j;
+    // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+    if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+      const nextColumn = columns[nextColumnIndex];
+      width += nextColumn.computedWidth;
+      setCellColSpanInfo(lookup, rowId, columnIndex + j, {
+        spannedByColSpan: true,
+        rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+        leftVisibleCellIndex: columnIndex
+      });
+    }
+    setCellColSpanInfo(lookup, rowId, columnIndex, {
+      spannedByColSpan: false,
+      cellProps: {
+        colSpan,
+        width
+      }
+    });
+  }
+  return {
+    colSpan
+  };
+}
+function setCellColSpanInfo(colspanMap, rowId, columnIndex, cellColSpanInfo) {
+  let columnInfo = colspanMap.get(rowId);
+  if (!columnInfo) {
+    columnInfo = {};
+    colspanMap.set(rowId, columnInfo);
+  }
+  columnInfo[columnIndex] = cellColSpanInfo;
+}

package/esm/features/dimensions.d.ts

@@ -0,0 +1,41 @@
+import { Store } from '@mui/x-internals/store';
+import { ColumnWithWidth, DimensionsState, RowId, RowsMetaState, Size } from "../models/index.js";
+import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
+export declare const Dimensions: {
+  initialize: typeof initializeState;
+  use: typeof useDimensions;
+  selectors: {
+    rootSize: (state: BaseState) => Size;
+    dimensions: (state: BaseState) => DimensionsState;
+    rowHeight: (state: BaseState) => number;
+    rowsMeta: (state: BaseState) => RowsMetaState;
+    columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
+    needsHorizontalScrollbar: (state: BaseState) => boolean;
+  };
+};
+export declare namespace Dimensions {
+  type State = {
+    rootSize: Size;
+    dimensions: DimensionsState;
+    rowsMeta: RowsMetaState;
+    rowHeights: Map<any, any>;
+  };
+  type API = ReturnType<typeof useDimensions>;
+}
+declare function initializeState(params: VirtualizerParams): Dimensions.State;
+declare function useDimensions(store: Store<BaseState>, params: VirtualizerParams, _api: {}): {
+  updateDimensions: () => void;
+  debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle/throttle").Cancelable) | undefined;
+  rowsMeta: {
+    getRowHeight: (rowId: RowId) => any;
+    setLastMeasuredRowIndex: (index: number) => void;
+    storeRowHeightMeasurement: (id: RowId, height: number) => void;
+    hydrateRowsMeta: () => void;
+    observeRowHeight: (element: Element, rowId: RowId) => () => void | undefined;
+    rowHasAutoHeight: (id: RowId) => any;
+    getRowHeightEntry: (rowId: RowId) => any;
+    getLastMeasuredRowIndex: () => number;
+    resetRowHeights: () => void;
+  };
+};
+export {};

package/esm/features/dimensions.js

@@ -0,0 +1,465 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import ownerDocument from '@mui/utils/ownerDocument';
+import useLazyRef from '@mui/utils/useLazyRef';
+import useLayoutEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { throttle } from '@mui/x-internals/throttle';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { roundToDecimalPlaces } from '@mui/x-internals/math';
+import { useStore, useStoreEffect, createSelectorMemoized } from '@mui/x-internals/store';
+import { Size } from "../models/index.js";
+/* eslint-disable import/export, @typescript-eslint/no-redeclare */
+/* eslint-disable no-underscore-dangle */
+
+const EMPTY_DIMENSIONS = {
+  isReady: false,
+  root: Size.EMPTY,
+  viewportOuterSize: Size.EMPTY,
+  viewportInnerSize: Size.EMPTY,
+  contentSize: Size.EMPTY,
+  minimumSize: Size.EMPTY,
+  hasScrollX: false,
+  hasScrollY: false,
+  scrollbarSize: 0,
+  headerHeight: 0,
+  groupHeaderHeight: 0,
+  headerFilterHeight: 0,
+  rowWidth: 0,
+  rowHeight: 0,
+  columnsTotalWidth: 0,
+  leftPinnedWidth: 0,
+  rightPinnedWidth: 0,
+  headersTotalHeight: 0,
+  topContainerHeight: 0,
+  bottomContainerHeight: 0
+};
+const selectors = {
+  rootSize: state => state.rootSize,
+  dimensions: state => state.dimensions,
+  rowHeight: state => state.dimensions.rowHeight,
+  rowsMeta: state => state.rowsMeta,
+  columnPositions: createSelectorMemoized((_, columns) => {
+    const positions = [];
+    let currentPosition = 0;
+    for (let i = 0; i < columns.length; i += 1) {
+      positions.push(currentPosition);
+      currentPosition += columns[i].computedWidth;
+    }
+    return positions;
+  }),
+  needsHorizontalScrollbar: state => state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width
+};
+export const Dimensions = {
+  initialize: initializeState,
+  use: useDimensions,
+  selectors
+};
+function initializeState(params) {
+  const dimensions = _extends({}, EMPTY_DIMENSIONS, params.dimensions);
+  const {
+    rowCount
+  } = params;
+  const {
+    rowHeight
+  } = dimensions;
+  const rowsMeta = {
+    currentPageTotalHeight: rowCount * rowHeight,
+    positions: Array.from({
+      length: rowCount
+    }, (_, i) => i * rowHeight),
+    pinnedTopRowsTotalHeight: 0,
+    pinnedBottomRowsTotalHeight: 0
+  };
+  const rowHeights = new Map();
+  return {
+    rootSize: Size.EMPTY,
+    dimensions,
+    rowsMeta,
+    rowHeights
+  };
+}
+function useDimensions(store, params, _api) {
+  const isFirstSizing = React.useRef(true);
+  const {
+    refs,
+    dimensions: {
+      rowHeight,
+      headerHeight,
+      columnsTotalWidth,
+      groupHeaderHeight,
+      headerFilterHeight,
+      headersTotalHeight,
+      leftPinnedWidth,
+      rightPinnedWidth
+    }
+  } = params;
+  const updateDimensions = React.useCallback(() => {
+    if (isFirstSizing.current) {
+      return;
+    }
+    const rootSize = selectors.rootSize(store.state);
+    const rowsMeta = selectors.rowsMeta(store.state);
+
+    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
+    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
+    // https://github.com/mui/mui-x/issues/15721
+    const scrollbarSize = measureScrollbarSize(params.refs.container.current, params.scrollbarSize);
+    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
+    const contentSize = {
+      width: columnsTotalWidth,
+      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
+    };
+    let viewportOuterSize;
+    let viewportInnerSize;
+    let hasScrollX = false;
+    let hasScrollY = false;
+    if (params.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootSize.width);
+      viewportOuterSize = {
+        width: rootSize.width,
+        height: topContainerHeight + bottomContainerHeight + contentSize.height
+      };
+      viewportInnerSize = {
+        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
+        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootSize.width,
+        height: rootSize.height
+      };
+      viewportInnerSize = {
+        width: Math.max(0, viewportOuterSize.width),
+        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
+      };
+      const content = contentSize;
+      const container = viewportInnerSize;
+      const hasScrollXIfNoYScrollBar = content.width > container.width;
+      const hasScrollYIfNoXScrollBar = content.height > container.height;
+      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
+        hasScrollY = hasScrollYIfNoXScrollBar;
+        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
+
+        // We recalculate the scroll y to consider the size of the x scrollbar.
+        if (hasScrollX) {
+          hasScrollY = content.height + scrollbarSize > container.height;
+        }
+      }
+      if (hasScrollY) {
+        viewportInnerSize.width -= scrollbarSize;
+      }
+      if (hasScrollX) {
+        viewportInnerSize.height -= scrollbarSize;
+      }
+    }
+    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
+    const minimumSize = {
+      width: columnsTotalWidth,
+      height: topContainerHeight + contentSize.height + bottomContainerHeight
+    };
+    const newDimensions = {
+      isReady: true,
+      root: rootSize,
+      viewportOuterSize,
+      viewportInnerSize,
+      contentSize,
+      minimumSize,
+      hasScrollX,
+      hasScrollY,
+      scrollbarSize,
+      headerHeight,
+      groupHeaderHeight,
+      headerFilterHeight,
+      rowWidth,
+      rowHeight,
+      columnsTotalWidth,
+      leftPinnedWidth,
+      rightPinnedWidth,
+      headersTotalHeight,
+      topContainerHeight,
+      bottomContainerHeight
+    };
+    const prevDimensions = store.state.dimensions;
+    if (isDeepEqual(prevDimensions, newDimensions)) {
+      return;
+    }
+    store.update({
+      dimensions: newDimensions
+    });
+  }, [store, params.refs.container, params.scrollbarSize, params.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  const {
+    resizeThrottleMs,
+    onResize
+  } = params;
+  const updateDimensionCallback = useEventCallback(updateDimensions);
+  const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? throttle(() => {
+    updateDimensionCallback();
+    onResize?.(store.state.rootSize);
+  }, resizeThrottleMs) : undefined, [resizeThrottleMs, onResize, store, updateDimensionCallback]);
+  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
+  useLayoutEffect(() => observeRootNode(refs.container.current, store), [refs, store]);
+  useLayoutEffect(updateDimensions, [updateDimensions]);
+  useStoreEffect(store, selectors.rootSize, (_, size) => {
+    params.onResize?.(size);
+    if (isFirstSizing.current || !debouncedUpdateDimensions) {
+      // We want to initialize the grid dimensions as soon as possible to avoid flickering
+      isFirstSizing.current = false;
+      updateDimensions();
+    } else {
+      debouncedUpdateDimensions();
+    }
+  });
+  const rowsMeta = useRowsMeta(store, params, updateDimensions);
+  return {
+    updateDimensions,
+    debouncedUpdateDimensions,
+    rowsMeta
+  };
+}
+function useRowsMeta(store, params, updateDimensions) {
+  const heightCache = store.state.rowHeights;
+  const {
+    rows,
+    getRowHeight: getRowHeightProp,
+    getRowSpacing,
+    getEstimatedRowHeight
+  } = params;
+  const lastMeasuredRowIndex = React.useRef(-1);
+  const hasRowWithAutoHeight = React.useRef(false);
+  const isHeightMetaValid = React.useRef(false);
+  const pinnedRows = params.pinnedRows;
+  const rowHeight = useStore(store, selectors.rowHeight);
+  const getRowHeightEntry = useEventCallback(rowId => {
+    let entry = heightCache.get(rowId);
+    if (entry === undefined) {
+      entry = {
+        content: store.state.dimensions.rowHeight,
+        spacingTop: 0,
+        spacingBottom: 0,
+        detail: 0,
+        autoHeight: false,
+        needsFirstMeasurement: true
+      };
+      heightCache.set(rowId, entry);
+    }
+    return entry;
+  });
+  const {
+    rowIdToIndexMap,
+    applyRowHeight
+  } = params;
+  const processHeightEntry = React.useCallback(row => {
+    // HACK: rowHeight trails behind the most up-to-date value just enough to
+    // mess the initial rowsMeta hydration :/
+    eslintUseValue(rowHeight);
+    const dimensions = selectors.dimensions(store.state);
+    const baseRowHeight = dimensions.rowHeight;
+    const entry = getRowHeightEntry(row.id);
+    if (!getRowHeightProp) {
+      entry.content = baseRowHeight;
+      entry.needsFirstMeasurement = false;
+    } else {
+      const rowHeightFromUser = getRowHeightProp(row);
+      if (rowHeightFromUser === 'auto') {
+        if (entry.needsFirstMeasurement) {
+          const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(row) : 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 null value.
+        entry.content = rowHeightFromUser ?? dimensions.rowHeight;
+        entry.needsFirstMeasurement = false;
+        entry.autoHeight = false;
+      }
+    }
+    if (getRowSpacing) {
+      const indexRelativeToCurrentPage = rowIdToIndexMap.get(row.id) ?? -1;
+      const spacing = getRowSpacing(row, {
+        isFirstVisible: indexRelativeToCurrentPage === 0,
+        isLastVisible: indexRelativeToCurrentPage === rows.length - 1,
+        indexRelativeToCurrentPage
+      });
+      entry.spacingTop = spacing.top ?? 0;
+      entry.spacingBottom = spacing.bottom ?? 0;
+    } else {
+      entry.spacingTop = 0;
+      entry.spacingBottom = 0;
+    }
+    applyRowHeight?.(entry, row);
+    return entry;
+  }, [store, rows, getRowHeightProp, getRowHeightEntry, getEstimatedRowHeight, rowHeight, getRowSpacing, rowIdToIndexMap, applyRowHeight]);
+  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 = 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 !== store.state.rowsMeta.pinnedTopRowsTotalHeight || pinnedBottomRowsTotalHeight !== store.state.rowsMeta.pinnedBottomRowsTotalHeight || currentPageTotalHeight !== store.state.rowsMeta.currentPageTotalHeight;
+    const rowsMeta = {
+      currentPageTotalHeight,
+      positions,
+      pinnedTopRowsTotalHeight,
+      pinnedBottomRowsTotalHeight
+    };
+    store.set('rowsMeta', rowsMeta);
+    if (didHeightsChange) {
+      updateDimensions();
+    }
+    isHeightMetaValid.current = true;
+  }, [store, pinnedRows, rows, processHeightEntry, updateDimensions]);
+  const hydrateRowsMetaLatest = useEventCallback(hydrateRowsMeta);
+  const getRowHeight = rowId => {
+    return heightCache.get(rowId)?.content ?? selectors.rowHeight(store.state);
+  };
+  const storeRowHeightMeasurement = (id, height) => {
+    const entry = 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(() => typeof ResizeObserver === 'undefined' ? undefined : 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 = params.focusedVirtualCell()?.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;
+      }
+      storeRowHeightMeasurement(rowId, height);
+    }
+    if (!isHeightMetaValid.current) {
+      // Avoids "ResizeObserver loop completed with undelivered notifications" error
+      requestAnimationFrame(() => {
+        hydrateRowsMetaLatest();
+      });
+    }
+  })).current;
+  const observeRowHeight = (element, rowId) => {
+    element.__mui_id = rowId;
+    resizeObserver?.observe(element);
+    return () => resizeObserver?.unobserve(element);
+  };
+
+  // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  // Because of variable row height this is needed for the virtualization
+  useLayoutEffect(() => {
+    hydrateRowsMeta();
+  }, [hydrateRowsMeta]);
+  return {
+    getRowHeight,
+    setLastMeasuredRowIndex,
+    storeRowHeightMeasurement,
+    hydrateRowsMeta,
+    observeRowHeight,
+    rowHasAutoHeight,
+    getRowHeightEntry,
+    getLastMeasuredRowIndex,
+    resetRowHeights
+  };
+}
+function observeRootNode(node, store) {
+  if (!node) {
+    return undefined;
+  }
+  const bounds = node.getBoundingClientRect();
+  const initialSize = {
+    width: roundToDecimalPlaces(bounds.width, 1),
+    height: roundToDecimalPlaces(bounds.height, 1)
+  };
+  if (store.state.rootSize === Size.EMPTY || !Size.equals(initialSize, store.state.rootSize)) {
+    store.update({
+      rootSize: initialSize
+    });
+  }
+  if (typeof ResizeObserver === 'undefined') {
+    return undefined;
+  }
+  const observer = new ResizeObserver(([entry]) => {
+    if (!entry) {
+      return;
+    }
+    const rootSize = {
+      width: roundToDecimalPlaces(entry.contentRect.width, 1),
+      height: roundToDecimalPlaces(entry.contentRect.height, 1)
+    };
+    if (!Size.equals(rootSize, store.state.rootSize)) {
+      store.update({
+        rootSize
+      });
+    }
+  });
+  observer.observe(node);
+  return () => {
+    observer.disconnect();
+  };
+}
+const scrollbarSizeCache = new WeakMap();
+function measureScrollbarSize(element, scrollbarSize) {
+  if (scrollbarSize !== undefined) {
+    return scrollbarSize;
+  }
+  if (element === null) {
+    return 0;
+  }
+  const cachedSize = scrollbarSizeCache.get(element);
+  if (cachedSize !== undefined) {
+    return cachedSize;
+  }
+  const doc = ownerDocument(element);
+  const scrollDiv = doc.createElement('div');
+  scrollDiv.style.width = '99px';
+  scrollDiv.style.height = '99px';
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.overflow = 'scroll';
+  scrollDiv.className = 'scrollDiv';
+  element.appendChild(scrollDiv);
+  const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  element.removeChild(scrollDiv);
+  scrollbarSizeCache.set(element, size);
+  return size;
+}
+function eslintUseValue(_) {}

package/esm/features/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./colspan.js";
+export * from "./dimensions.js";
+export * from "./keyboard.js";
+export * from "./rowspan.js";
+export * from "./virtualization.js";

package/esm/features/index.js

@@ -0,0 +1,5 @@
+export * from "./colspan.js";
+export * from "./dimensions.js";
+export * from "./keyboard.js";
+export * from "./rowspan.js";
+export * from "./virtualization.js";

package/esm/features/keyboard.d.ts

@@ -0,0 +1,16 @@
+import { Store } from '@mui/x-internals/store';
+import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
+export declare const Keyboard: {
+  initialize: typeof initializeState;
+  use: typeof useKeyboard;
+  selectors: {};
+};
+export declare namespace Keyboard {
+  type State = {};
+  type API = ReturnType<typeof useKeyboard>;
+}
+declare function initializeState(_params: VirtualizerParams): Keyboard.State;
+declare function useKeyboard(store: Store<BaseState & Keyboard.State>, params: VirtualizerParams, _api: {}): {
+  getViewportPageSize: () => number;
+};
+export {};

package/esm/features/keyboard.js

@@ -0,0 +1,35 @@
+import { Dimensions } from "./dimensions.js";
+import { Virtualization } from "./virtualization.js";
+
+/* eslint-disable import/export, @typescript-eslint/no-redeclare */
+
+const selectors = {};
+export const Keyboard = {
+  initialize: initializeState,
+  use: useKeyboard,
+  selectors
+};
+function initializeState(_params) {
+  return {};
+}
+function useKeyboard(store, params, _api) {
+  const getViewportPageSize = () => {
+    const dimensions = Dimensions.selectors.dimensions(store.state);
+    if (!dimensions.isReady) {
+      return 0;
+    }
+
+    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
+    // to find out the maximum number of rows that can fit in the visible part of the grid
+    if (params.getRowHeight) {
+      const renderContext = Virtualization.selectors.renderContext(store.state);
+      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
+      return Math.min(viewportPageSize - 1, params.rows.length);
+    }
+    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / dimensions.rowHeight);
+    return Math.min(maximumPageSizeWithoutScrollBar, params.rows.length);
+  };
+  return {
+    getViewportPageSize
+  };
+}