@mui/x-virtualizer 0.2.10 → 0.2.12

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

@@ -11,9 +11,9 @@ import * as platform from '@mui/x-internals/platform';
 import { useRunOnce } from '@mui/x-internals/useRunOnce';
 import { createSelector, useStore, useStoreEffect } from '@mui/x-internals/store';
 import reactMajor from '@mui/x-internals/reactMajor';
-import { PinnedRows, PinnedColumns } from "../models/core.js";
-import { Dimensions, observeRootNode } from "./dimensions.js";
-import { ScrollDirection } from "../models/index.js";
+import { PinnedRows, PinnedColumns } from "../../models/core.js";
+import { Dimensions, observeRootNode } from "../dimensions.js";
+import { ScrollPosition, ScrollDirection } from "../../models/index.js";
 
 /* eslint-disable import/export, @typescript-eslint/no-redeclare */
 
@@ -30,12 +30,18 @@ export const EMPTY_RENDER_CONTEXT = {
   firstColumnIndex: 0,
   lastColumnIndex: 0
 };
-const selectors = {
-  store: createSelector(state => state.virtualization),
-  renderContext: createSelector(state => state.virtualization.renderContext),
-  enabledForRows: createSelector(state => state.virtualization.enabledForRows),
-  enabledForColumns: createSelector(state => state.virtualization.enabledForColumns)
-};
+const selectors = (() => {
+  const firstRowIndexSelector = createSelector(state => state.virtualization.renderContext.firstRowIndex);
+  return {
+    store: createSelector(state => state.virtualization),
+    renderContext: createSelector(state => state.virtualization.renderContext),
+    enabledForRows: createSelector(state => state.virtualization.enabledForRows),
+    enabledForColumns: createSelector(state => state.virtualization.enabledForColumns),
+    offsetTop: createSelector(Dimensions.selectors.rowPositions, firstRowIndexSelector, (rowPositions, firstRowIndex) => rowPositions[firstRowIndex] ?? 0),
+    context: createSelector(state => state.virtualization.context),
+    scrollPosition: createSelector(state => state.virtualization.scrollPosition)
+  };
+})();
 export const Virtualization = {
   initialize: initializeState,
   use: useVirtualization,
@@ -47,7 +53,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: ScrollPosition.EMPTY
+      }
     }, params.initialState?.virtualization),
     // FIXME: refactor once the state shape is settled
     getters: null
@@ -59,10 +70,10 @@ function initializeState(params) {
 
 function useVirtualization(store, params, api) {
   const {
-    refs,
+    layout,
     dimensions: {
       rowHeight,
-      columnsTotalWidth
+      columnsTotalWidth = 0
     },
     virtualization: {
       isRtl = false,
@@ -76,8 +87,6 @@ function useVirtualization(store, params, api) {
     columns,
     pinnedRows = PinnedRows.EMPTY,
     pinnedColumns = PinnedColumns.EMPTY,
-    minimalContentHeight,
-    autoHeight,
     onWheel,
     onTouchMove,
     onRenderContextChange,
@@ -86,7 +95,6 @@ function useVirtualization(store, params, api) {
     renderRow,
     renderInfiniteLoadingTrigger
   } = params;
-  const needsHorizontalScrollbar = useStore(store, Dimensions.selectors.needsHorizontalScrollbar);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isUpdateScheduled = React.useRef(false);
@@ -94,7 +102,6 @@ function useVirtualization(store, params, api) {
   const renderContext = useStore(store, selectors.renderContext);
   const enabledForRows = useStore(store, selectors.enabledForRows);
   const enabledForColumns = useStore(store, selectors.enabledForColumns);
-  const rowsMeta = useStore(store, Dimensions.selectors.rowsMeta);
   const contentHeight = useStore(store, Dimensions.selectors.contentHeight);
 
   /*
@@ -122,7 +129,10 @@ function useVirtualization(store, params, api) {
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (!areRenderContextsEqual(nextRenderContext, store.state.virtualization.renderContext)) {
       store.set('virtualization', _extends({}, store.state.virtualization, {
-        renderContext: nextRenderContext
+        renderContext: nextRenderContext,
+        scrollPosition: {
+          current: _extends({}, scrollPosition.current)
+        }
       }));
     }
 
@@ -138,7 +148,7 @@ function useVirtualization(store, params, api) {
     previousContextScrollPosition.current = scrollPosition.current;
   }, [store, onRenderContextChange]);
   const triggerUpdateRenderContext = useEventCallback(() => {
-    const scroller = refs.scroller.current;
+    const scroller = layout.refs.scroller.current;
     if (!scroller) {
       return undefined;
     }
@@ -166,6 +176,11 @@ function useVirtualization(store, params, api) {
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
+      store.set('virtualization', _extends({}, store.state.virtualization, {
+        scrollPosition: {
+          current: _extends({}, scrollPosition.current)
+        }
+      }));
       return renderContext;
     }
 
@@ -232,9 +247,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
@@ -363,34 +375,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]);
   useEnhancedEffect(() => {
     if (!isRenderContextReady.current) {
       return;
@@ -398,15 +389,15 @@ function useVirtualization(store, params, api) {
     forceUpdateRenderContextCallback();
   }, [enabledForColumns, enabledForRows, forceUpdateRenderContextCallback]);
   useEnhancedEffect(() => {
-    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]);
   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
@@ -449,20 +440,14 @@ function useVirtualization(store, params, api) {
     }
   });
   useStoreEffect(store, Dimensions.selectors.dimensions, forceUpdateRenderContext);
-  const refSetter = name => node => {
-    if (node && refs[name].current !== node) {
-      refs[name].current = node;
+  useEnhancedEffect(() => {
+    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 = useEventCallback(node => {
-    if (!node) {
-      // Cleanup for R18
-      containerCleanup.current?.();
-      return;
-    }
-    refs.container.current = node;
+  const containerRef = useRefCallback(node => {
+    layout.refs.container.current = node;
     const unsubscribe = observeRootNode(node, store, rootSize => {
       if (rootSize.width === 0 && rootSize.height === 0 && store.state.rootSize.height !== 0 && store.state.rootSize.width !== 0) {
         return;
@@ -476,98 +461,58 @@ function useVirtualization(store, params, api) {
         api.debouncedUpdateDimensions();
       }
     });
-    containerCleanup.current = () => {
+    return () => {
       unsubscribe?.();
-      refs.container.current = null;
+      layout.refs.container.current = null;
     };
-    if (reactMajor >= 19) {
-      /* eslint-disable-next-line consistent-return */
-      return containerCleanup.current;
-    }
   });
-  const scrollerCleanup = React.useRef(undefined);
-  const scrollerRef = useEventCallback(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 >= 19) {
-      /* eslint-disable-next-line consistent-return */
-      return scrollerCleanup.current;
-    }
   });
-  const scrollbarVerticalRef = useEventCallback(refSetter('scrollbarVertical'));
-  const scrollbarHorizontalRef = useEventCallback(refSetter('scrollbarHorizontal'));
-  const getters = {
+  const layoutParams = {
+    containerRef,
+    scrollerRef
+  };
+  const layoutAPI = layout.use(store, params, api, layoutParams);
+  const getters = _extends({
     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 _extends({
     getters,
-    useVirtualization: () => useStore(store, state => state),
     setPanels,
     forceUpdateRenderContext,
-    scheduleUpdateRenderContext,
-    getCellColSpanInfo,
-    calculateColSpan,
-    getHiddenCellsOrigin
-  };
+    scheduleUpdateRenderContext
+  }, createSpanningAPI());
+}
+function useRefCallback(fn) {
+  const refCleanup = React.useRef(undefined);
+  const refCallback = useEventCallback(node => {
+    if (!node) {
+      // Cleanup for R18
+      refCleanup.current?.();
+      return;
+    }
+    refCleanup.current = fn(node);
+    if (reactMajor >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return refCleanup.current;
+    }
+  });
+  return refCallback;
 }
 function inputsSelector(store, params, api, enabledForRows, enabledForColumns) {
   const dimensions = Dimensions.selectors.dimensions(store.state);
@@ -581,7 +526,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,
@@ -886,6 +831,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
+  };
+}
 export function roundToDecimalPlaces(value, decimals) {
   return Math.round(value * 10 ** decimals) / 10 ** decimals;
 }

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

package/esm/index.js

@@ -1,9 +1,10 @@
 /**
- * @mui/x-virtualizer v0.2.10
+ * @mui/x-virtualizer v0.2.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 export * from "./useVirtualizer.js";
-export * from "./features/index.js";
+export * from "./features/index.js";
+export * from "./constants.js";

package/esm/models/core.d.ts

@@ -62,6 +62,13 @@ export type ScrollPosition = {
   top: number;
   left: number;
 };
+export declare const ScrollPosition: {
+  EMPTY: {
+    top: number;
+    left: number;
+  };
+  equals: (a: ScrollPosition, b: ScrollPosition) => boolean;
+};
 export declare enum ScrollDirection {
   NONE = 0,
   UP = 1,

package/esm/models/core.js

@@ -22,6 +22,13 @@ export const PinnedColumns = {
     right: []
   }
 };
+export const ScrollPosition = {
+  EMPTY: {
+    top: 0,
+    left: 0
+  },
+  equals: (a, b) => a.top === b.top && a.left === b.left
+};
 export let ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
   ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
   ScrollDirection[ScrollDirection["UP"] = 1] = "UP";

package/esm/models/dimensions.d.ts

@@ -65,6 +65,14 @@ export interface DimensionsState {
    * Size of the bottom container.
    */
   bottomContainerHeight: number;
+  /**
+   * Indicates that the container takes the height of its content.
+   */
+  autoHeight: boolean;
+  /**
+   * Minimal height to display the content area.
+   */
+  minimalContentHeight: string | number | undefined;
 }
 /**
  * The rows total height and positions.

package/esm/useVirtualizer.d.ts

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { integer, RefObject } from '@mui/x-internals/types';
+import { integer } from '@mui/x-internals/types';
 import { Store } from '@mui/x-internals/store';
 import { Colspan } from "./features/colspan.js";
 import { Dimensions } from "./features/dimensions.js";
 import { Rowspan } from "./features/rowspan.js";
-import { Virtualization } from "./features/virtualization.js";
+import { Virtualization } from "./features/virtualization/index.js";
+import type { Layout } from "./features/virtualization/layout.js";
 import type { HeightEntry, RowSpacing } from "./models/dimensions.js";
 import type { ColspanParams } from "./features/colspan.js";
 import type { DimensionsParams } from "./features/dimensions.js";
-import type { VirtualizationParams } from "./features/virtualization.js";
+import type { VirtualizationParams } from "./features/virtualization/index.js";
 import { ColumnWithWidth, FocusedCell, Size, PinnedRows, PinnedColumns, RenderContext, Row, RowEntry } from "./models/index.js";
 export type Virtualizer = ReturnType<typeof useVirtualizer>;
-export type VirtualScrollerCompat = Virtualization.State['getters'];
-export type BaseState = Virtualization.State & Dimensions.State;
-export type VirtualizerParams = {
-  refs: {
-    container: RefObject<HTMLDivElement | null>;
-    scroller: RefObject<HTMLDivElement | null>;
-    scrollbarVertical: RefObject<HTMLDivElement | null>;
-    scrollbarHorizontal: RefObject<HTMLDivElement | null>;
-  };
+export type VirtualScrollerCompat<L extends Layout = Layout> = Virtualization.State<L>['getters'];
+export type BaseState<L extends Layout = Layout> = Virtualization.State<L> & Dimensions.State;
+export type VirtualizerParams<L extends Layout = Layout> = {
+  layout: L;
   dimensions: DimensionsParams;
   virtualization: VirtualizationParams;
   colspan?: ColspanParams;
@@ -29,7 +25,7 @@ export type VirtualizerParams = {
       left: number;
     };
     rowSpanning?: Rowspan.State['rowSpanning'];
-    virtualization?: Partial<Virtualization.State['virtualization']>;
+    virtualization?: Partial<Virtualization.State<L>['virtualization']>;
   };
   /** current page rows */
   rows: RowEntry[];
@@ -39,13 +35,11 @@ export type VirtualizerParams = {
     lastRowIndex: integer;
   } | null;
   rowCount: integer;
-  columns: ColumnWithWidth[];
+  columns?: ColumnWithWidth[];
   pinnedRows?: PinnedRows;
   pinnedColumns?: PinnedColumns;
-  autoHeight: boolean;
   disableHorizontalScroll?: boolean;
   disableVerticalScroll?: boolean;
-  minimalContentHeight?: number | string;
   getRowHeight?: (row: RowEntry) => number | null | undefined | 'auto';
   /**
    * Function that returns the estimated height for a row.
@@ -68,7 +62,7 @@ export type VirtualizerParams = {
    */
   applyRowHeight?: (entry: HeightEntry, rowEntry: RowEntry) => void;
   virtualizeColumnsWithAutoRowHeight?: boolean;
-  resizeThrottleMs: number;
+  resizeThrottleMs?: number;
   onResize?: (lastSize: Size) => void;
   onWheel?: (event: React.WheelEvent) => void;
   onTouchMove?: (event: React.TouchEvent) => void;
@@ -94,10 +88,15 @@ export type VirtualizerParams = {
     isVirtualFocusRow: boolean;
     showBottomBorder: boolean;
   }) => React.ReactElement;
-  renderInfiniteLoadingTrigger: (id: any) => React.ReactElement;
+  renderInfiniteLoadingTrigger?: (id: any) => React.ReactElement;
+};
+type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
+export type ParamsWithDefaults = RequiredFields<VirtualizerParams, 'resizeThrottleMs' | 'columns'> & {
+  dimensions: RequiredFields<VirtualizerParams['dimensions'], 'columnsTotalWidth' | 'leftPinnedWidth' | 'rightPinnedWidth' | 'topPinnedHeight' | 'bottomPinnedHeight' | 'autoHeight'>;
+  virtualization: RequiredFields<VirtualizerParams['virtualization'], 'isRtl' | 'rowBufferPx' | 'columnBufferPx'>;
 };
-export declare const useVirtualizer: (params: VirtualizerParams) => {
-  store: Store<Dimensions.State & Virtualization.State & Colspan.State & Rowspan.State>;
+export declare const useVirtualizer: <L extends Layout = Layout>(params: VirtualizerParams<L>) => {
+  store: Store<Dimensions.State & Virtualization.State<L> & Colspan.State & Rowspan.State>;
   api: {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -113,57 +112,13 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
       resetRowHeights: () => void;
     };
   } & {
-    getters: {
-      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-      getOffsetTop: () => number;
-      getRows: (rowParams?: {
-        rows?: RowEntry[];
-        position?: import("./models/index.js").PinnedRowPosition;
-        renderContext?: RenderContext;
-      }, unstable_rowTree?: Record<import("./models/index.js").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;
     getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
     calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("./models/index.js").RowId, Record<number, number>>;
+    getters: any;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
     getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo | undefined;
@@ -173,4 +128,5 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
   } & {
     getViewportPageSize: () => number;
   };
-};
+};
+export {};

package/esm/useVirtualizer.js

@@ -1,10 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import useLazyRef from '@mui/utils/useLazyRef';
 import { Store } from '@mui/x-internals/store';
 import { Colspan } from "./features/colspan.js";
 import { Dimensions } from "./features/dimensions.js";
 import { Keyboard } from "./features/keyboard.js";
 import { Rowspan } from "./features/rowspan.js";
-import { Virtualization } from "./features/virtualization.js";
+import { Virtualization } from "./features/virtualization/index.js";
+import { DEFAULT_PARAMS } from "./constants.js";
 
 /* eslint-disable jsdoc/require-param-type */
 /* eslint-disable jsdoc/require-param-description */
@@ -12,15 +14,30 @@ import { Virtualization } from "./features/virtualization.js";
 
 const FEATURES = [Dimensions, Virtualization, Colspan, Rowspan, Keyboard];
 export const useVirtualizer = params => {
+  const paramsWithDefault = mergeDefaults(params, DEFAULT_PARAMS);
   const store = useLazyRef(() => {
-    return new Store(FEATURES.map(f => f.initialize(params)).reduce((state, partial) => Object.assign(state, partial), {}));
+    return new Store(FEATURES.map(f => f.initialize(paramsWithDefault)).reduce((state, partial) => Object.assign(state, partial), {}));
   }).current;
   const api = {};
   for (const feature of FEATURES) {
-    Object.assign(api, feature.use(store, params, api));
+    Object.assign(api, feature.use(store, paramsWithDefault, api));
   }
   return {
     store,
     api
   };
-};
+};
+function mergeDefaults(params, defaults) {
+  const result = _extends({}, params);
+  for (const key in defaults) {
+    if (Object.hasOwn(defaults, key)) {
+      const value = defaults[key];
+      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        result[key] = mergeDefaults(params[key] ?? {}, value);
+      } else {
+        result[key] = params[key] ?? value;
+      }
+    }
+  }
+  return result;
+}

package/features/colspan.d.ts

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