@mui/x-virtualizer 0.1.0 → 0.1.2

package/features/dimensions.d.ts

@@ -1,6 +1,15 @@
 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 type DimensionsParams = {
+  rowHeight: number;
+  columnsTotalWidth: number;
+  leftPinnedWidth: number;
+  rightPinnedWidth: number;
+  topPinnedHeight: number;
+  bottomPinnedHeight: number;
+  scrollbarSize?: number;
+};
 export declare const Dimensions: {
   initialize: typeof initializeState;
   use: typeof useDimensions;
@@ -8,6 +17,7 @@ export declare const Dimensions: {
     rootSize: (state: BaseState) => Size;
     dimensions: (state: BaseState) => DimensionsState;
     rowHeight: (state: BaseState) => number;
+    contentHeight: (state: BaseState) => number;
     rowsMeta: (state: BaseState) => RowsMetaState;
     columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
     needsHorizontalScrollbar: (state: BaseState) => boolean;

package/features/dimensions.js

@@ -31,15 +31,11 @@ const EMPTY_DIMENSIONS = {
   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
 };
@@ -47,6 +43,7 @@ const selectors = {
   rootSize: state => state.rootSize,
   dimensions: state => state.dimensions,
   rowHeight: state => state.dimensions.rowHeight,
+  contentHeight: state => state.dimensions.contentSize.height,
   rowsMeta: state => state.rowsMeta,
   columnPositions: (0, _store.createSelectorMemoized)((_, columns) => {
     const positions = [];
@@ -94,15 +91,15 @@ function useDimensions(store, params, _api) {
     refs,
     dimensions: {
       rowHeight,
-      headerHeight,
       columnsTotalWidth,
-      groupHeaderHeight,
-      headerFilterHeight,
-      headersTotalHeight,
       leftPinnedWidth,
-      rightPinnedWidth
-    }
+      rightPinnedWidth,
+      topPinnedHeight,
+      bottomPinnedHeight
+    },
+    onResize
   } = params;
+  const containerNode = refs.container.current;
   const updateDimensions = React.useCallback(() => {
     if (isFirstSizing.current) {
       return;
@@ -113,9 +110,9 @@ function useDimensions(store, params, _api) {
     // 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 scrollbarSize = measureScrollbarSize(containerNode, params.dimensions.scrollbarSize);
+    const topContainerHeight = topPinnedHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = bottomPinnedHeight + rowsMeta.pinnedBottomRowsTotalHeight;
     const contentSize = {
       width: columnsTotalWidth,
       height: (0, _math.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
@@ -179,15 +176,11 @@ function useDimensions(store, params, _api) {
       hasScrollX,
       hasScrollY,
       scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
       rowWidth,
       rowHeight,
       columnsTotalWidth,
       leftPinnedWidth,
       rightPinnedWidth,
-      headersTotalHeight,
       topContainerHeight,
       bottomContainerHeight
     };
@@ -198,21 +191,16 @@ function useDimensions(store, params, _api) {
     store.update({
       dimensions: newDimensions
     });
-  }, [store, params.refs.container, params.scrollbarSize, params.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+    onResize?.(newDimensions.root);
+  }, [store, containerNode, params.dimensions.scrollbarSize, params.autoHeight, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
   const {
-    resizeThrottleMs,
-    onResize
+    resizeThrottleMs
   } = params;
   const updateDimensionCallback = (0, _useEventCallback.default)(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
-    updateDimensionCallback();
-    onResize?.(store.state.rootSize);
-  }, resizeThrottleMs) : undefined, [resizeThrottleMs, onResize, store, updateDimensionCallback]);
+  const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? (0, _throttle.throttle)(updateDimensionCallback, resizeThrottleMs) : undefined, [resizeThrottleMs, updateDimensionCallback]);
   React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
-  (0, _useEnhancedEffect.default)(() => observeRootNode(refs.container.current, store), [refs, store]);
-  (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
-  (0, _store.useStoreEffect)(store, selectors.rootSize, (_, size) => {
-    params.onResize?.(size);
+  const setRootSize = (0, _useEventCallback.default)(rootSize => {
+    store.state.rootSize = rootSize;
     if (isFirstSizing.current || !debouncedUpdateDimensions) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
       isFirstSizing.current = false;
@@ -221,6 +209,8 @@ function useDimensions(store, params, _api) {
       debouncedUpdateDimensions();
     }
   });
+  (0, _useEnhancedEffect.default)(() => observeRootNode(containerNode, store, setRootSize), [containerNode, store, setRootSize]);
+  (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
   const rowsMeta = useRowsMeta(store, params, updateDimensions);
   return {
     updateDimensions,
@@ -257,7 +247,6 @@ function useRowsMeta(store, params, updateDimensions) {
     return entry;
   });
   const {
-    rowIdToIndexMap,
     applyRowHeight
   } = params;
   const processHeightEntry = React.useCallback(row => {
@@ -289,12 +278,7 @@ function useRowsMeta(store, params, updateDimensions) {
       }
     }
     if (getRowSpacing) {
-      const indexRelativeToCurrentPage = rowIdToIndexMap.get(row.id) ?? -1;
-      const spacing = getRowSpacing(row, {
-        isFirstVisible: indexRelativeToCurrentPage === 0,
-        isLastVisible: indexRelativeToCurrentPage === rows.length - 1,
-        indexRelativeToCurrentPage
-      });
+      const spacing = getRowSpacing(row);
       entry.spacingTop = spacing.top ?? 0;
       entry.spacingBottom = spacing.bottom ?? 0;
     } else {
@@ -303,17 +287,17 @@ function useRowsMeta(store, params, updateDimensions) {
     }
     applyRowHeight?.(entry, row);
     return entry;
-  }, [store, rows, getRowHeightProp, getRowHeightEntry, getEstimatedRowHeight, rowHeight, getRowSpacing, rowIdToIndexMap, applyRowHeight]);
+  }, [store, getRowHeightProp, getRowHeightEntry, getEstimatedRowHeight, rowHeight, getRowSpacing, applyRowHeight]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+    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) => {
+    }, 0) ?? 0;
+    const pinnedBottomRowsTotalHeight = pinnedRows?.bottom.reduce((acc, row) => {
       const entry = processHeightEntry(row);
       return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-    }, 0);
+    }, 0) ?? 0;
     const positions = [];
     const currentPageTotalHeight = rows.reduce((acc, row) => {
       positions.push(acc);
@@ -369,7 +353,7 @@ function useRowsMeta(store, params, updateDimensions) {
       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;
+      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.
@@ -408,7 +392,7 @@ function useRowsMeta(store, params, updateDimensions) {
     resetRowHeights
   };
 }
-function observeRootNode(node, store) {
+function observeRootNode(node, store, setRootSize) {
   if (!node) {
     return undefined;
   }
@@ -418,9 +402,7 @@ function observeRootNode(node, store) {
     height: (0, _math.roundToDecimalPlaces)(bounds.height, 1)
   };
   if (store.state.rootSize === _models.Size.EMPTY || !_models.Size.equals(initialSize, store.state.rootSize)) {
-    store.update({
-      rootSize: initialSize
-    });
+    setRootSize(initialSize);
   }
   if (typeof ResizeObserver === 'undefined') {
     return undefined;
@@ -434,9 +416,7 @@ function observeRootNode(node, store) {
       height: (0, _math.roundToDecimalPlaces)(entry.contentRect.height, 1)
     };
     if (!_models.Size.equals(rootSize, store.state.rootSize)) {
-      store.update({
-        rootSize
-      });
+      setRootSize(rootSize);
     }
   });
   observer.observe(node);

package/features/virtualization.d.ts

@@ -5,6 +5,16 @@ import type { CellColSpanInfo } from "../models/colspan.js";
 import { Dimensions } from "./dimensions.js";
 import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
 import { PinnedRowPosition, RenderContext, ColumnsRenderContext, ColumnWithWidth, RowId, RowEntry } from "../models/index.js";
+export type VirtualizationParams = {
+  /** @default false */
+  isRtl?: boolean;
+  /** The row buffer in pixels to render before and after the viewport.
+   * @default 150 */
+  rowBufferPx?: number;
+  /** The column buffer in pixels to render before and after the viewport.
+   * @default 150 */
+  columnBufferPx?: number;
+};
 export type VirtualizationState = {
   enabled: boolean;
   enabledForRows: boolean;
@@ -44,16 +54,16 @@ type RequiredAPI = Dimensions.API & AbstractAPI;
 declare function useVirtualization(store: Store<BaseState>, params: VirtualizerParams, api: RequiredAPI): {
   getters: {
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-    getRows: (rowParams: {
+    getRows: (rowParams?: {
       rows?: RowEntry[];
       position?: PinnedRowPosition;
       renderContext?: RenderContext;
-    } | undefined, unstable_rowTree: Record<RowId, any>) => React.ReactNode[];
+    }, unstable_rowTree?: Record<RowId, any>) => React.ReactNode[];
     getContainerProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
     };
     getScrollerProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       onScroll: () => void;
       onWheel: ((event: React.WheelEvent) => void) | undefined;
       onTouchMove: ((event: React.TouchEvent) => void) | undefined;
@@ -62,22 +72,19 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
       tabIndex: number | undefined;
     };
     getContentProps: () => {
-      style: React.CSSProperties;
-      role: string;
       ref: (node: HTMLDivElement | null) => void;
-    };
-    getRenderZoneProps: () => {
+      style: React.CSSProperties;
       role: string;
     };
     getScrollbarVerticalProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       scrollPosition: React.RefObject<{
         top: number;
         left: number;
       }>;
     };
     getScrollbarHorizontalProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       scrollPosition: React.RefObject<{
         top: number;
         left: number;

package/features/virtualization.js

@@ -21,6 +21,7 @@ var platform = _interopRequireWildcard(require("@mui/x-internals/platform"));
 var _useRunOnce = require("@mui/x-internals/useRunOnce");
 var _useFirstRender = require("@mui/x-internals/useFirstRender");
 var _store = require("@mui/x-internals/store");
+var _core = require("../models/core");
 var _dimensions = require("./dimensions");
 var _models = require("../models");
 /* eslint-disable import/export, @typescript-eslint/no-redeclare */
@@ -66,28 +67,29 @@ function initializeState(params) {
 
 function useVirtualization(store, params, api) {
   const {
-    initialState,
-    isRtl,
-    rows,
-    range,
-    columns,
-    pinnedRows,
-    pinnedColumns,
     refs,
-    hasColSpan,
     dimensions: {
       rowHeight,
       columnsTotalWidth
     },
-    contentHeight,
+    virtualization: {
+      isRtl = false,
+      rowBufferPx = 150,
+      columnBufferPx = 150
+    },
+    colspan,
+    initialState,
+    rows,
+    range,
+    columns,
+    pinnedRows = _core.PinnedRows.EMPTY,
+    pinnedColumns = _core.PinnedColumns.EMPTY,
     minimalContentHeight,
     autoHeight,
     onWheel,
     onTouchMove,
     onRenderContextChange,
     onScrollChange,
-    rowBufferPx,
-    columnBufferPx,
     scrollReset,
     renderRow,
     renderInfiniteLoadingTrigger
@@ -95,10 +97,12 @@ function useVirtualization(store, params, api) {
   const needsHorizontalScrollbar = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.needsHorizontalScrollbar);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
+  const [, setRefTick] = React.useState(0);
   const isRenderContextReady = React.useRef(false);
   const renderContext = (0, _store.useStore)(store, selectors.renderContext);
   const enabledForRows = (0, _store.useStore)(store, selectors.enabledForRows);
   const enabledForColumns = (0, _store.useStore)(store, selectors.enabledForColumns);
+  const contentHeight = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.contentHeight);
 
   /*
    * Scroll context logic
@@ -123,18 +127,17 @@ function useVirtualization(store, params, api) {
   const frozenContext = React.useRef(undefined);
   const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(isRtl, rowBufferPx, columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
-    if (areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
-      return;
+    if (!areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
+      store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
+        renderContext: nextRenderContext
+      }));
     }
-    const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
-    store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
-      renderContext: nextRenderContext
-    }));
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
     // but only does something if we already have a render context, because
     // otherwise we would call an update directly on mount
     const isReady = _dimensions.Dimensions.selectors.dimensions(store.state).isReady;
+    const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
     if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       onRenderContextChange?.(nextRenderContext);
@@ -159,7 +162,7 @@ function useVirtualization(store, params, api) {
     const dy = newScroll.top - scrollPosition.current.top;
     const isScrolling = dx !== 0 || dy !== 0;
     scrollPosition.current = newScroll;
-    const direction = isScrolling ? directionForDelta(dx, dy) : _models.ScrollDirection.NONE;
+    const direction = isScrolling ? _models.ScrollDirection.forDelta(dx, dy) : _models.ScrollDirection.NONE;
 
     // Since previous render, we have scrolled...
     const rowScroll = Math.abs(scrollPosition.current.top - previousContextScrollPosition.current.top);
@@ -227,9 +230,7 @@ function useVirtualization(store, params, api) {
    * section of code to the DataGrid's rowTree model. The `unstable_rowTree` param is a temporary
    * solution to decouple the code.
    */
-  const getRows = (
-  // eslint-disable-next-line @typescript-eslint/default-param-last
-  rowParams = {}, unstable_rowTree) => {
+  const getRows = (rowParams = {}, unstable_rowTree) => {
     if (!rowParams.rows && !range) {
       return [];
     }
@@ -259,7 +260,7 @@ function useVirtualization(store, params, api) {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = rowParams.rows ? createRange(0, rowParams.rows.length) : createRange(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
-    const focusedVirtualCell = params.focusedVirtualCell();
+    const focusedVirtualCell = params.focusedVirtualCell?.();
     if (!isPinnedSection && focusedVirtualCell) {
       if (focusedVirtualCell.rowIndex < firstRowToRender) {
         rowIndexes.unshift(focusedVirtualCell.rowIndex);
@@ -284,13 +285,13 @@ function useVirtualization(store, params, api) {
       // See:
       // - https://github.com/mui/mui-x/issues/16638
       // - https://github.com/mui/mui-x/issues/17022
-      if (!unstable_rowTree[id]) {
+      if (unstable_rowTree && !unstable_rowTree[id]) {
         return;
       }
       const rowIndex = (range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.
-      if (hasColSpan) {
+      if (colspan?.enabled) {
         const minFirstColumn = pinnedColumns.left.length;
         const maxLastColumn = columns.length - pinnedColumns.right.length;
         api.calculateColSpan(id, minFirstColumn, maxLastColumn, columns);
@@ -336,7 +337,6 @@ function useVirtualization(store, params, api) {
         offsetLeft,
         columnsTotalWidth,
         baseRowHeight,
-        columns,
         firstColumnIndex,
         lastColumnIndex,
         focusedColumnIndex: isVirtualFocusColumn ? focusedVirtualCell.columnIndex : undefined,
@@ -373,12 +373,12 @@ function useVirtualization(store, params, api) {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar, minimalContentHeight]);
-  const verticalScrollRestoreCallback = React.useRef(null);
-  const onContentSizeApplied = React.useCallback(node => {
+  const scrollRestoreCallback = React.useRef(null);
+  const contentNodeRef = React.useCallback(node => {
     if (!node) {
       return;
     }
-    verticalScrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
+    scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
   }, [columnsTotalWidth, contentHeight]);
   (0, _useEnhancedEffect.default)(() => {
     if (!isRenderContextReady.current) {
@@ -400,54 +400,58 @@ function useVirtualization(store, params, api) {
         top,
         left
       } = initialState.scroll;
-
-      // On initial mount, if we have columns available, we can restore the horizontal scroll immediately, but we need to skip the resulting scroll event, otherwise we would recalculate the render context at position top=0, left=restoredValue, but the initial render context is already calculated based on the initial value of scrollPosition ref.
       const isScrollRestored = {
         top: !(top > 0),
         left: !(left > 0)
       };
       if (!isScrollRestored.left && columnsTotalWidth) {
         scroller.scrollLeft = left;
-        ignoreNextScrollEvent.current = true;
         isScrollRestored.left = true;
+        ignoreNextScrollEvent.current = true;
       }
 
-      // For the sake of completeness, but I'm not sure if contentHeight is ever available at this point. Maybe when virtualisation is disabled?
+      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise
+      // there's nowhere to scroll). We still set the scrollTop to the initial value at this point in case
+      // there already are rows rendered in the DOM, but we only confirm `isScrollRestored.top = true` in the
+      // asynchronous callback below.
       if (!isScrollRestored.top && contentHeight) {
         scroller.scrollTop = top;
         ignoreNextScrollEvent.current = true;
-        isScrollRestored.top = true;
       }
-
-      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise there's nowhere to scroll), but before paint to avoid reflows
       if (!isScrollRestored.top || !isScrollRestored.left) {
-        verticalScrollRestoreCallback.current = (columnsTotalWidthCurrent, contentHeightCurrent) => {
+        scrollRestoreCallback.current = (columnsTotalWidthCurrent, contentHeightCurrent) => {
           if (!isScrollRestored.left && columnsTotalWidthCurrent) {
             scroller.scrollLeft = left;
-            ignoreNextScrollEvent.current = true;
             isScrollRestored.left = true;
+            ignoreNextScrollEvent.current = true;
           }
           if (!isScrollRestored.top && contentHeightCurrent) {
             scroller.scrollTop = top;
-            ignoreNextScrollEvent.current = true;
             isScrollRestored.top = true;
+            ignoreNextScrollEvent.current = true;
           }
           if (isScrollRestored.left && isScrollRestored.top) {
-            verticalScrollRestoreCallback.current = null;
+            scrollRestoreCallback.current = null;
           }
         };
       }
     }
   });
   (0, _store.useStoreEffect)(store, _dimensions.Dimensions.selectors.dimensions, forceUpdateRenderContext);
+  const refSetter = name => node => {
+    if (node && refs[name].current !== node) {
+      refs[name].current = node;
+      setRefTick(tick => tick + 1);
+    }
+  };
   const getters = {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: params.refs.container
+      ref: refSetter('container')
     }),
     getScrollerProps: () => ({
-      ref: refs.scroller,
+      ref: refSetter('scroller'),
       onScroll: handleScroll,
       onWheel,
       onTouchMove,
@@ -458,19 +462,16 @@ function useVirtualization(store, params, api) {
       tabIndex: platform.isFirefox ? -1 : undefined
     }),
     getContentProps: () => ({
+      ref: contentNodeRef,
       style: contentSize,
-      role: 'presentation',
-      ref: onContentSizeApplied
-    }),
-    getRenderZoneProps: () => ({
-      role: 'rowgroup'
+      role: 'presentation'
     }),
     getScrollbarVerticalProps: () => ({
-      ref: refs.scrollbarVertical,
+      ref: refSetter('scrollbarVertical'),
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
-      ref: refs.scrollbarHorizontal,
+      ref: refSetter('scrollbarHorizontal'),
       scrollPosition
     }),
     getScrollAreaProps: () => ({
@@ -483,9 +484,9 @@ function useVirtualization(store, params, api) {
     });
   });
   React.useEffect(() => {
-    store.update((0, _extends2.default)({}, store.state, {
+    store.update({
       getters
-    }));
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, Object.values(getters));
 
@@ -523,8 +524,8 @@ function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
     enabledForRows,
     enabledForColumns,
     autoHeight: params.autoHeight,
-    rowBufferPx: params.rowBufferPx,
-    columnBufferPx: params.columnBufferPx,
+    rowBufferPx: params.virtualization.rowBufferPx,
+    columnBufferPx: params.virtualization.columnBufferPx,
     leftPinnedWidth: dimensions.leftPinnedWidth,
     columnsTotalWidth: dimensions.columnsTotalWidth,
     viewportInnerWidth: dimensions.viewportInnerSize.width,
@@ -654,8 +655,8 @@ function deriveRenderContext(inputs, nextRenderContext, scrollCache) {
   const [initialFirstColumnToRender, lastColumnToRender] = getIndexesToRender({
     firstIndex: nextRenderContext.firstColumnIndex,
     lastIndex: nextRenderContext.lastColumnIndex,
-    minFirstIndex: inputs.pinnedColumns.left.length,
-    maxLastIndex: inputs.columns.length - inputs.pinnedColumns.right.length,
+    minFirstIndex: inputs.pinnedColumns?.left.length ?? 0,
+    maxLastIndex: inputs.columns.length - (inputs.pinnedColumns?.right.length ?? 0),
     bufferBefore: scrollCache.buffer.columnBefore,
     bufferAfter: scrollCache.buffer.columnAfter,
     positions: inputs.columnPositions,
@@ -736,26 +737,6 @@ function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
   const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
-function directionForDelta(dx, dy) {
-  if (dx === 0 && dy === 0) {
-    return _models.ScrollDirection.NONE;
-  }
-  /* eslint-disable */
-  if (Math.abs(dy) >= Math.abs(dx)) {
-    if (dy > 0) {
-      return _models.ScrollDirection.DOWN;
-    } else {
-      return _models.ScrollDirection.UP;
-    }
-  } else {
-    if (dx > 0) {
-      return _models.ScrollDirection.RIGHT;
-    } else {
-      return _models.ScrollDirection.LEFT;
-    }
-  }
-  /* eslint-enable */
-}
 function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
   if (isRtl) {
     switch (direction) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v0.1.0
+ * @mui/x-virtualizer v0.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/models/core.d.ts

@@ -2,13 +2,13 @@ export type Size = {
   width: number;
   height: number;
 };
-export declare namespace Size {
-  const EMPTY: {
+export declare const Size: {
+  EMPTY: {
     width: number;
     height: number;
   };
-  function equals(a: Size, b: Size): boolean;
-}
+  equals: (a: Size, b: Size) => boolean;
+};
 export type Row = {
   [key: string | symbol]: any;
 };
@@ -27,10 +27,16 @@ export type PinnedRows = {
   top: RowEntry[];
   bottom: RowEntry[];
 };
+export declare const PinnedRows: {
+  EMPTY: PinnedRows;
+};
 export type PinnedColumns = {
   left: Column[];
   right: Column[];
 };
+export declare const PinnedColumns: {
+  EMPTY: PinnedColumns;
+};
 export type FocusedCell = {
   rowIndex: number;
   columnIndex: number;

package/models/core.js

@@ -3,19 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Size = exports.ScrollDirection = void 0;
+exports.Size = exports.ScrollDirection = exports.PinnedRows = exports.PinnedColumns = void 0;
 /* eslint-disable @typescript-eslint/no-redeclare */
-let Size = exports.Size = void 0;
-(function (_Size) {
-  const EMPTY = _Size.EMPTY = {
+
+const Size = exports.Size = {
+  EMPTY: {
     width: 0,
     height: 0
-  };
-  function equals(a, b) {
-    return a.width === b.width && a.height === b.height;
+  },
+  equals: (a, b) => a.width === b.width && a.height === b.height
+};
+
+// TODO
+
+const PinnedRows = exports.PinnedRows = {
+  EMPTY: {
+    top: [],
+    bottom: []
+  }
+};
+const PinnedColumns = exports.PinnedColumns = {
+  EMPTY: {
+    left: [],
+    right: []
   }
-  _Size.equals = equals;
-})(Size || (exports.Size = Size = {})); // TODO
+};
 let ScrollDirection = exports.ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
   ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
   ScrollDirection[ScrollDirection["UP"] = 1] = "UP";