@mui/x-virtualizer 0.2.10 → 0.2.11

package/features/virtualization/layout.js

@@ -0,0 +1,163 @@
+"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.LayoutList = exports.LayoutDataGridLegacy = exports.LayoutDataGrid = exports.Layout = void 0;
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var platform = _interopRequireWildcard(require("@mui/x-internals/platform"));
+var _store = require("@mui/x-internals/store");
+var _dimensions = require("../../features/dimensions");
+var _virtualization = require("./virtualization");
+/* eslint-disable react-hooks/rules-of-hooks */
+
+class Layout {
+  static elements = ['scroller', 'container'];
+  constructor(refs) {
+    this.refs = refs;
+  }
+  refSetter(name) {
+    return node => {
+      if (node && this.refs[name].current !== node) {
+        this.refs[name].current = node;
+      }
+    };
+  }
+}
+exports.Layout = Layout;
+class LayoutDataGrid extends Layout {
+  static elements = ['scroller', 'container', 'content', 'positioner', 'scrollbarVertical', 'scrollbarHorizontal'];
+  use(store, _params, _api, layoutParams) {
+    const {
+      scrollerRef,
+      containerRef
+    } = layoutParams;
+    const scrollbarVerticalRef = (0, _useEventCallback.default)(this.refSetter('scrollbarVertical'));
+    const scrollbarHorizontalRef = (0, _useEventCallback.default)(this.refSetter('scrollbarHorizontal'));
+    store.state.virtualization.context = {
+      scrollerRef,
+      containerRef,
+      scrollbarVerticalRef,
+      scrollbarHorizontalRef
+    };
+  }
+  static selectors = {
+    containerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, context => ({
+      ref: context.containerRef
+    })),
+    scrollerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, _dimensions.Dimensions.selectors.autoHeight, _dimensions.Dimensions.selectors.needsHorizontalScrollbar, (context, autoHeight, needsHorizontalScrollbar) => ({
+      ref: context.scrollerRef,
+      style: {
+        overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+        overflowY: autoHeight ? 'hidden' : undefined
+      },
+      role: 'presentation',
+      // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
+      // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
+      tabIndex: platform.isFirefox ? -1 : undefined
+    })),
+    contentProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.contentHeight, _dimensions.Dimensions.selectors.minimalContentHeight, _dimensions.Dimensions.selectors.columnsTotalWidth, _dimensions.Dimensions.selectors.needsHorizontalScrollbar, (contentHeight, minimalContentHeight, columnsTotalWidth, needsHorizontalScrollbar) => ({
+      style: {
+        width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
+        flexBasis: contentHeight === 0 ? minimalContentHeight : contentHeight,
+        flexShrink: 0
+      },
+      role: 'presentation'
+    })),
+    positionerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.offsetTop, offsetTop => ({
+      style: {
+        transform: `translate3d(0, ${offsetTop}px, 0)`
+      }
+    })),
+    scrollbarHorizontalProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, _virtualization.Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
+      ref: context.scrollbarHorizontalRef,
+      scrollPosition
+    })),
+    scrollbarVerticalProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, _virtualization.Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
+      ref: context.scrollbarVerticalRef,
+      scrollPosition
+    })),
+    scrollAreaProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.scrollPosition, scrollPosition => ({
+      scrollPosition
+    }))
+  };
+}
+
+// The current virtualizer API is exposed on one of the DataGrid slots, so we need to keep
+// the old API for backward compatibility. This API prevents using fine-grained reactivity
+// as all props are returned in a single object, so everything re-renders on any change.
+//
+// TODO(v9): Remove the legacy API.
+exports.LayoutDataGrid = LayoutDataGrid;
+class LayoutDataGridLegacy extends LayoutDataGrid {
+  use(store, _params, _api, layoutParams) {
+    super.use(store, _params, _api, layoutParams);
+    const containerProps = store.use(LayoutDataGrid.selectors.containerProps);
+    const scrollerProps = store.use(LayoutDataGrid.selectors.scrollerProps);
+    const contentProps = store.use(LayoutDataGrid.selectors.contentProps);
+    const positionerProps = store.use(LayoutDataGrid.selectors.positionerProps);
+    const scrollbarVerticalProps = store.use(LayoutDataGrid.selectors.scrollbarVerticalProps);
+    const scrollbarHorizontalProps = store.use(LayoutDataGrid.selectors.scrollbarHorizontalProps);
+    const scrollAreaProps = store.use(LayoutDataGrid.selectors.scrollAreaProps);
+    return {
+      getContainerProps: () => containerProps,
+      getScrollerProps: () => scrollerProps,
+      getContentProps: () => contentProps,
+      getPositionerProps: () => positionerProps,
+      getScrollbarVerticalProps: () => scrollbarVerticalProps,
+      getScrollbarHorizontalProps: () => scrollbarHorizontalProps,
+      getScrollAreaProps: () => scrollAreaProps
+    };
+  }
+}
+exports.LayoutDataGridLegacy = LayoutDataGridLegacy;
+class LayoutList extends Layout {
+  static elements = ['scroller', 'container', 'content', 'positioner'];
+  use(store, _params, _api, layoutParams) {
+    const {
+      scrollerRef,
+      containerRef
+    } = layoutParams;
+    const mergedRef = (0, _useForkRef.default)(scrollerRef, containerRef);
+    store.state.virtualization.context = {
+      mergedRef
+    };
+  }
+  static selectors = {
+    containerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, _dimensions.Dimensions.selectors.autoHeight, _dimensions.Dimensions.selectors.needsHorizontalScrollbar, (context, autoHeight, needsHorizontalScrollbar) => ({
+      ref: context.mergedRef,
+      style: {
+        overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+        overflowY: autoHeight ? 'hidden' : undefined,
+        position: 'relative'
+      },
+      role: 'presentation',
+      // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
+      // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
+      tabIndex: platform.isFirefox ? -1 : undefined
+    })),
+    contentProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.contentHeight, contentHeight => {
+      return {
+        style: {
+          position: 'absolute',
+          display: 'inline-block',
+          width: '100%',
+          height: contentHeight,
+          top: 0,
+          left: 0,
+          zIndex: -1
+        },
+        role: 'presentation'
+      };
+    }),
+    positionerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.offsetTop, offsetTop => ({
+      style: {
+        height: offsetTop
+      }
+    }))
+  };
+}
+exports.LayoutList = LayoutList;

package/features/{virtualization.d.ts → virtualization/virtualization.d.ts}

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import type { integer } from '@mui/x-internals/types';
 import { Store } from '@mui/x-internals/store';
-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";
+import type { CellColSpanInfo } from "../../models/colspan.js";
+import { Dimensions } from "../dimensions.js";
+import type { BaseState, ParamsWithDefaults } from "../../useVirtualizer.js";
+import type { Layout } from "./layout.js";
+import { RenderContext, ColumnsRenderContext, ColumnWithWidth, RowId, ScrollPosition } from "../../models/index.js";
 export type VirtualizationParams = {
   /** @default false */
   isRtl?: boolean;
@@ -15,11 +16,16 @@ export type VirtualizationParams = {
    * @default 150 */
   columnBufferPx?: number;
 };
-export type VirtualizationState = {
+export type VirtualizationState<K extends string = string> = {
   enabled: boolean;
   enabledForRows: boolean;
   enabledForColumns: boolean;
   renderContext: RenderContext;
+  props: Record<K, Record<string, any>>;
+  context: Record<string, any>;
+  scrollPosition: {
+    current: ScrollPosition;
+  };
 };
 export declare const EMPTY_RENDER_CONTEXT: {
   firstRowIndex: number;
@@ -31,20 +37,31 @@ export declare const Virtualization: {
   initialize: typeof initializeState;
   use: typeof useVirtualization;
   selectors: {
-    store: (state: BaseState) => VirtualizationState;
+    store: (state: BaseState) => VirtualizationState<string>;
     renderContext: (state: BaseState) => RenderContext;
     enabledForRows: (state: BaseState) => boolean;
     enabledForColumns: (state: BaseState) => boolean;
+    offsetTop: (args_0: Virtualization.State<Layout<{
+      scroller: React.RefObject<HTMLElement | null>;
+      container: React.RefObject<HTMLElement | null>;
+    } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
+    context: (state: BaseState) => Record<string, any>;
+    scrollPosition: (state: BaseState) => {
+      current: ScrollPosition;
+    };
   };
 };
 export declare namespace Virtualization {
-  type State = {
-    virtualization: VirtualizationState;
+  type State<L extends Layout> = {
+    virtualization: VirtualizationState<L extends Layout<infer E> ? keyof E : string>;
     getters: ReturnType<typeof useVirtualization>['getters'];
   };
   type API = ReturnType<typeof useVirtualization>;
 }
-declare function initializeState(params: VirtualizerParams): Virtualization.State;
+declare function initializeState(params: ParamsWithDefaults): Virtualization.State<Layout<{
+  scroller: React.RefObject<HTMLElement | null>;
+  container: React.RefObject<HTMLElement | null>;
+} & Record<string, React.RefObject<HTMLElement | null>>>>;
 /** APIs to override for colspan/rowspan */
 type AbstractAPI = {
   getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo;
@@ -52,58 +69,18 @@ type AbstractAPI = {
   getHiddenCellsOrigin: () => Record<RowId, Record<number, number>>;
 };
 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>>>>;
-    getOffsetTop: () => number;
-    getRows: (rowParams?: {
-      rows?: RowEntry[];
-      position?: PinnedRowPosition;
-      renderContext?: RenderContext;
-    }, unstable_rowTree?: Record<RowId, any>) => React.ReactNode[];
-    rows: RowEntry[];
-    getContainerProps: () => {
-      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-    };
-    getScrollerProps: () => {
-      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-      style: React.CSSProperties;
-      role: string;
-      tabIndex: number | undefined;
-    };
-    getContentProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
-      style: React.CSSProperties;
-      role: string;
-    };
-    getScrollbarVerticalProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
-      scrollPosition: React.RefObject<{
-        top: number;
-        left: number;
-      }>;
-    };
-    getScrollbarHorizontalProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
-      scrollPosition: React.RefObject<{
-        top: number;
-        left: number;
-      }>;
-    };
-    getScrollAreaProps: () => {
-      scrollPosition: React.RefObject<{
-        top: number;
-        left: number;
-      }>;
-    };
-  };
-  useVirtualization: () => BaseState;
-  setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-  forceUpdateRenderContext: () => void;
-  scheduleUpdateRenderContext: () => void;
+export type VirtualizationLayoutParams = {
+  containerRef: (node: HTMLDivElement | null) => void;
+  scrollerRef: (node: HTMLDivElement | null) => void;
+};
+declare function useVirtualization(store: Store<BaseState>, params: ParamsWithDefaults, api: RequiredAPI): {
   getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo;
   calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
   getHiddenCellsOrigin: () => Record<RowId, Record<number, number>>;
+  getters: any;
+  setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+  forceUpdateRenderContext: () => void;
+  scheduleUpdateRenderContext: () => void;
 };
 export declare function areRenderContextsEqual(context1: RenderContext, context2: RenderContext): boolean;
 export declare function computeOffsetLeft(columnPositions: number[], renderContext: ColumnsRenderContext, pinnedLeftLength: number): number;

package/features/{virtualization.js → virtualization/virtualization.js}

@@ -21,9 +21,9 @@ var platform = _interopRequireWildcard(require("@mui/x-internals/platform"));
 var _useRunOnce = require("@mui/x-internals/useRunOnce");
 var _store = require("@mui/x-internals/store");
 var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
-var _core = require("../models/core");
-var _dimensions = require("./dimensions");
-var _models = require("../models");
+var _core = require("../../models/core");
+var _dimensions = require("../dimensions");
+var _models = require("../../models");
 /* eslint-disable import/export, @typescript-eslint/no-redeclare */
 
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
@@ -39,12 +39,18 @@ const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
   firstColumnIndex: 0,
   lastColumnIndex: 0
 };
-const selectors = {
-  store: (0, _store.createSelector)(state => state.virtualization),
-  renderContext: (0, _store.createSelector)(state => state.virtualization.renderContext),
-  enabledForRows: (0, _store.createSelector)(state => state.virtualization.enabledForRows),
-  enabledForColumns: (0, _store.createSelector)(state => state.virtualization.enabledForColumns)
-};
+const selectors = (() => {
+  const firstRowIndexSelector = (0, _store.createSelector)(state => state.virtualization.renderContext.firstRowIndex);
+  return {
+    store: (0, _store.createSelector)(state => state.virtualization),
+    renderContext: (0, _store.createSelector)(state => state.virtualization.renderContext),
+    enabledForRows: (0, _store.createSelector)(state => state.virtualization.enabledForRows),
+    enabledForColumns: (0, _store.createSelector)(state => state.virtualization.enabledForColumns),
+    offsetTop: (0, _store.createSelector)(_dimensions.Dimensions.selectors.rowPositions, firstRowIndexSelector, (rowPositions, firstRowIndex) => rowPositions[firstRowIndex] ?? 0),
+    context: (0, _store.createSelector)(state => state.virtualization.context),
+    scrollPosition: (0, _store.createSelector)(state => state.virtualization.scrollPosition)
+  };
+})();
 const Virtualization = exports.Virtualization = {
   initialize: initializeState,
   use: useVirtualization,
@@ -56,7 +62,12 @@ function initializeState(params) {
       enabled: !platform.isJSDOM,
       enabledForRows: !platform.isJSDOM,
       enabledForColumns: !platform.isJSDOM,
-      renderContext: EMPTY_RENDER_CONTEXT
+      renderContext: EMPTY_RENDER_CONTEXT,
+      props: params.layout.constructor.elements.reduce((acc, key) => (acc[key], acc), {}),
+      context: {},
+      scrollPosition: {
+        current: _models.ScrollPosition.EMPTY
+      }
     }, params.initialState?.virtualization),
     // FIXME: refactor once the state shape is settled
     getters: null
@@ -68,10 +79,10 @@ function initializeState(params) {
 
 function useVirtualization(store, params, api) {
   const {
-    refs,
+    layout,
     dimensions: {
       rowHeight,
-      columnsTotalWidth
+      columnsTotalWidth = 0
     },
     virtualization: {
       isRtl = false,
@@ -85,8 +96,6 @@ function useVirtualization(store, params, api) {
     columns,
     pinnedRows = _core.PinnedRows.EMPTY,
     pinnedColumns = _core.PinnedColumns.EMPTY,
-    minimalContentHeight,
-    autoHeight,
     onWheel,
     onTouchMove,
     onRenderContextChange,
@@ -95,7 +104,6 @@ function useVirtualization(store, params, api) {
     renderRow,
     renderInfiniteLoadingTrigger
   } = params;
-  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 isUpdateScheduled = React.useRef(false);
@@ -103,7 +111,6 @@ function useVirtualization(store, params, api) {
   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 rowsMeta = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.rowsMeta);
   const contentHeight = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.contentHeight);
 
   /*
@@ -131,7 +138,10 @@ function useVirtualization(store, params, api) {
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (!areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
       store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
-        renderContext: nextRenderContext
+        renderContext: nextRenderContext,
+        scrollPosition: {
+          current: (0, _extends2.default)({}, scrollPosition.current)
+        }
       }));
     }
 
@@ -147,7 +157,7 @@ function useVirtualization(store, params, api) {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [store, onRenderContextChange]);
   const triggerUpdateRenderContext = (0, _useEventCallback.default)(() => {
-    const scroller = refs.scroller.current;
+    const scroller = layout.refs.scroller.current;
     if (!scroller) {
       return undefined;
     }
@@ -175,6 +185,11 @@ function useVirtualization(store, params, api) {
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
+      store.set('virtualization', (0, _extends2.default)({}, store.state.virtualization, {
+        scrollPosition: {
+          current: (0, _extends2.default)({}, scrollPosition.current)
+        }
+      }));
       return renderContext;
     }
 
@@ -241,9 +256,6 @@ function useVirtualization(store, params, api) {
       onScrollChange?.(scrollPosition.current, nextRenderContext);
     }
   });
-  const getOffsetTop = () => {
-    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
-  };
 
   /**
    * HACK: unstable_rowTree fixes the issue described below, but does it by tightly coupling this
@@ -372,34 +384,13 @@ function useVirtualization(store, params, api) {
       if (panel) {
         rowElements.push(panel);
       }
-      if (rowParams.position === undefined && isLastVisibleInSection) {
+      if (rowParams.position === undefined && isLastVisibleInSection && renderInfiniteLoadingTrigger) {
         rowElements.push(renderInfiniteLoadingTrigger(id));
       }
     });
     return rowElements;
   };
-  const scrollerStyle = React.useMemo(() => ({
-    overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
-    overflowY: autoHeight ? 'hidden' : undefined
-  }), [needsHorizontalScrollbar, autoHeight]);
-  const contentSize = React.useMemo(() => {
-    const size = {
-      width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      flexBasis: contentHeight,
-      flexShrink: 0
-    };
-    if (size.flexBasis === 0) {
-      size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows.
-    }
-    return size;
-  }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar, minimalContentHeight]);
   const scrollRestoreCallback = React.useRef(null);
-  const contentNodeRef = React.useCallback(node => {
-    if (!node) {
-      return;
-    }
-    scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
-  }, [columnsTotalWidth, contentHeight]);
   (0, _useEnhancedEffect.default)(() => {
     if (!isRenderContextReady.current) {
       return;
@@ -407,15 +398,15 @@ function useVirtualization(store, params, api) {
     forceUpdateRenderContextCallback();
   }, [enabledForColumns, enabledForRows, forceUpdateRenderContextCallback]);
   (0, _useEnhancedEffect.default)(() => {
-    if (refs.scroller.current) {
-      refs.scroller.current.scrollLeft = 0;
+    if (layout.refs.scroller.current) {
+      layout.refs.scroller.current.scrollLeft = 0;
     }
-  }, [refs.scroller, scrollReset]);
+  }, [layout.refs.scroller, scrollReset]);
   (0, _useRunOnce.useRunOnce)(renderContext !== EMPTY_RENDER_CONTEXT, () => {
     onScrollChange?.(scrollPosition.current, renderContext);
     isRenderContextReady.current = true;
-    if (initialState?.scroll && refs.scroller.current) {
-      const scroller = refs.scroller.current;
+    if (initialState?.scroll && layout.refs.scroller.current) {
+      const scroller = layout.refs.scroller.current;
       const {
         top,
         left
@@ -458,20 +449,14 @@ function useVirtualization(store, params, api) {
     }
   });
   (0, _store.useStoreEffect)(store, _dimensions.Dimensions.selectors.dimensions, forceUpdateRenderContext);
-  const refSetter = name => node => {
-    if (node && refs[name].current !== node) {
-      refs[name].current = node;
+  (0, _useEnhancedEffect.default)(() => {
+    if (layout.refs.scroller) {
+      scrollRestoreCallback.current?.(columnsTotalWidth, contentHeight);
     }
-  };
+  }, [layout.refs.scroller, columnsTotalWidth, contentHeight]);
   const isFirstSizing = React.useRef(true);
-  const containerCleanup = React.useRef(undefined);
-  const containerRef = (0, _useEventCallback.default)(node => {
-    if (!node) {
-      // Cleanup for R18
-      containerCleanup.current?.();
-      return;
-    }
-    refs.container.current = node;
+  const containerRef = useRefCallback(node => {
+    layout.refs.container.current = node;
     const unsubscribe = (0, _dimensions.observeRootNode)(node, store, rootSize => {
       if (rootSize.width === 0 && rootSize.height === 0 && store.state.rootSize.height !== 0 && store.state.rootSize.width !== 0) {
         return;
@@ -485,98 +470,58 @@ function useVirtualization(store, params, api) {
         api.debouncedUpdateDimensions();
       }
     });
-    containerCleanup.current = () => {
+    return () => {
       unsubscribe?.();
-      refs.container.current = null;
+      layout.refs.container.current = null;
     };
-    if (_reactMajor.default >= 19) {
-      /* eslint-disable-next-line consistent-return */
-      return containerCleanup.current;
-    }
   });
-  const scrollerCleanup = React.useRef(undefined);
-  const scrollerRef = (0, _useEventCallback.default)(node => {
-    if (!node) {
-      // Cleanup for R18
-      scrollerCleanup.current?.();
-      return;
-    }
-    scrollerCleanup.current?.();
-    refs.scroller.current = node;
+  const scrollerRef = useRefCallback(node => {
+    layout.refs.scroller.current = node;
     const opts = {
       passive: true
     };
     node.addEventListener('scroll', handleScroll, opts);
     node.addEventListener('wheel', onWheel, opts);
     node.addEventListener('touchmove', onTouchMove, opts);
-    scrollerCleanup.current = () => {
+    return () => {
       node.removeEventListener('scroll', handleScroll, opts);
       node.removeEventListener('wheel', onWheel, opts);
       node.removeEventListener('touchmove', onTouchMove, opts);
-      refs.scroller.current = null;
+      layout.refs.scroller.current = null;
     };
-    if (_reactMajor.default >= 19) {
-      /* eslint-disable-next-line consistent-return */
-      return scrollerCleanup.current;
-    }
   });
-  const scrollbarVerticalRef = (0, _useEventCallback.default)(refSetter('scrollbarVertical'));
-  const scrollbarHorizontalRef = (0, _useEventCallback.default)(refSetter('scrollbarHorizontal'));
-  const getters = {
+  const layoutParams = {
+    containerRef,
+    scrollerRef
+  };
+  const layoutAPI = layout.use(store, params, api, layoutParams);
+  const getters = (0, _extends2.default)({
     setPanels,
-    getOffsetTop,
     getRows,
-    rows: params.rows,
-    getContainerProps: () => ({
-      ref: containerRef
-    }),
-    getScrollerProps: () => ({
-      ref: scrollerRef,
-      style: scrollerStyle,
-      role: 'presentation',
-      // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
-      // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
-      tabIndex: platform.isFirefox ? -1 : undefined
-    }),
-    getContentProps: () => ({
-      ref: contentNodeRef,
-      style: contentSize,
-      role: 'presentation'
-    }),
-    getScrollbarVerticalProps: () => ({
-      ref: scrollbarVerticalRef,
-      scrollPosition
-    }),
-    getScrollbarHorizontalProps: () => ({
-      ref: scrollbarHorizontalRef,
-      scrollPosition
-    }),
-    getScrollAreaProps: () => ({
-      scrollPosition
-    })
-  };
-
-  /* Placeholder API functions for colspan & rowspan to re-implement */
-
-  const getCellColSpanInfo = () => {
-    throw new Error('Unimplemented: colspan feature is required');
-  };
-  const calculateColSpan = () => {
-    throw new Error('Unimplemented: colspan feature is required');
-  };
-  const getHiddenCellsOrigin = () => {
-    throw new Error('Unimplemented: rowspan feature is required');
-  };
-  return {
+    rows: params.rows
+  }, layoutAPI);
+  return (0, _extends2.default)({
     getters,
-    useVirtualization: () => (0, _store.useStore)(store, state => state),
     setPanels,
     forceUpdateRenderContext,
-    scheduleUpdateRenderContext,
-    getCellColSpanInfo,
-    calculateColSpan,
-    getHiddenCellsOrigin
-  };
+    scheduleUpdateRenderContext
+  }, createSpanningAPI());
+}
+function useRefCallback(fn) {
+  const refCleanup = React.useRef(undefined);
+  const refCallback = (0, _useEventCallback.default)(node => {
+    if (!node) {
+      // Cleanup for R18
+      refCleanup.current?.();
+      return;
+    }
+    refCleanup.current = fn(node);
+    if (_reactMajor.default >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return refCleanup.current;
+    }
+  });
+  return refCallback;
 }
 function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
   const dimensions = _dimensions.Dimensions.selectors.dimensions(store.state);
@@ -590,7 +535,7 @@ function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
     api,
     enabledForRows,
     enabledForColumns,
-    autoHeight: params.autoHeight,
+    autoHeight: dimensions.autoHeight,
     rowBufferPx: params.virtualization.rowBufferPx,
     columnBufferPx: params.virtualization.columnBufferPx,
     leftPinnedWidth: dimensions.leftPinnedWidth,
@@ -895,6 +840,24 @@ function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
+
+/** Placeholder API functions for colspan & rowspan to re-implement */
+function createSpanningAPI() {
+  const getCellColSpanInfo = () => {
+    throw new Error('Unimplemented: colspan feature is required');
+  };
+  const calculateColSpan = () => {
+    throw new Error('Unimplemented: colspan feature is required');
+  };
+  const getHiddenCellsOrigin = () => {
+    throw new Error('Unimplemented: rowspan feature is required');
+  };
+  return {
+    getCellColSpanInfo,
+    calculateColSpan,
+    getHiddenCellsOrigin
+  };
+}
 function roundToDecimalPlaces(value, decimals) {
   return Math.round(value * 10 ** decimals) / 10 ** decimals;
 }

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./useVirtualizer.js";
-export * from "./features/index.js";
+export * from "./features/index.js";
+export * from "./constants.js";