@mui/x-virtualizer 0.2.10 → 0.2.12

package/esm/features/virtualization/layout.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Store } from '@mui/x-internals/store';
+import { Dimensions } from "../dimensions.js";
+import { Virtualization, type VirtualizationLayoutParams } from "./virtualization.js";
+import type { BaseState, ParamsWithDefaults } from "../../useVirtualizer.js";
+type RequiredAPI = Dimensions.API;
+type BaseElements = {
+  scroller: React.RefObject<HTMLElement | null>;
+  container: React.RefObject<HTMLElement | null>;
+};
+type AnyElements = BaseElements & Record<string, React.RefObject<HTMLElement | null>>;
+export declare abstract class Layout<E extends AnyElements = AnyElements> {
+  static elements: readonly (keyof AnyElements)[];
+  refs: E;
+  constructor(refs: E);
+  abstract use(store: Store<BaseState>, params: ParamsWithDefaults, api: RequiredAPI, layoutParams: VirtualizationLayoutParams): any;
+  refSetter(name: keyof E): (node: HTMLDivElement | null) => void;
+}
+type DataGridElements = BaseElements & {
+  scrollbarVertical: React.RefObject<HTMLElement | null>;
+  scrollbarHorizontal: React.RefObject<HTMLElement | null>;
+};
+export declare class LayoutDataGrid extends Layout<DataGridElements> {
+  static elements: readonly ["scroller", "container", "content", "positioner", "scrollbarVertical", "scrollbarHorizontal"];
+  use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): void;
+  static selectors: {
+    containerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      ref: any;
+    };
+    scrollerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      ref: any;
+      style: {
+        overflowX: string | undefined;
+        overflowY: string | undefined;
+      };
+      role: string;
+      tabIndex: number | undefined;
+    };
+    contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: React.CSSProperties;
+      role: string;
+    };
+    positionerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: {
+        transform: string;
+      };
+    };
+    scrollbarHorizontalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      ref: any;
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+    scrollbarVerticalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      ref: any;
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+    scrollAreaProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+  };
+}
+export declare class LayoutDataGridLegacy extends LayoutDataGrid {
+  use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): {
+    getContainerProps: () => {
+      ref: any;
+    };
+    getScrollerProps: () => {
+      ref: any;
+      style: {
+        overflowX: string | undefined;
+        overflowY: string | undefined;
+      };
+      role: string;
+      tabIndex: number | undefined;
+    };
+    getContentProps: () => {
+      style: React.CSSProperties;
+      role: string;
+    };
+    getPositionerProps: () => {
+      style: {
+        transform: string;
+      };
+    };
+    getScrollbarVerticalProps: () => {
+      ref: any;
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+    getScrollbarHorizontalProps: () => {
+      ref: any;
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+    getScrollAreaProps: () => {
+      scrollPosition: {
+        current: import("../../models/index.js").ScrollPosition;
+      };
+    };
+  };
+}
+type ListElements = BaseElements;
+export declare class LayoutList extends Layout<ListElements> {
+  static elements: readonly ["scroller", "container", "content", "positioner"];
+  use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): void;
+  static selectors: {
+    containerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      ref: any;
+      style: React.CSSProperties;
+      role: string;
+      tabIndex: number | undefined;
+    };
+    contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: React.CSSProperties;
+      role: string;
+    };
+    positionerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: React.CSSProperties;
+    };
+  };
+}
+export {};

package/esm/features/virtualization/layout.js

@@ -0,0 +1,152 @@
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import * as platform from '@mui/x-internals/platform';
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { Dimensions } from "../dimensions.js";
+import { Virtualization } from "./virtualization.js";
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+export 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;
+      }
+    };
+  }
+}
+export class LayoutDataGrid extends Layout {
+  static elements = (() => ['scroller', 'container', 'content', 'positioner', 'scrollbarVertical', 'scrollbarHorizontal'])();
+  use(store, _params, _api, layoutParams) {
+    const {
+      scrollerRef,
+      containerRef
+    } = layoutParams;
+    const scrollbarVerticalRef = useEventCallback(this.refSetter('scrollbarVertical'));
+    const scrollbarHorizontalRef = useEventCallback(this.refSetter('scrollbarHorizontal'));
+    store.state.virtualization.context = {
+      scrollerRef,
+      containerRef,
+      scrollbarVerticalRef,
+      scrollbarHorizontalRef
+    };
+  }
+  static selectors = (() => ({
+    containerProps: createSelectorMemoized(Virtualization.selectors.context, context => ({
+      ref: context.containerRef
+    })),
+    scrollerProps: createSelectorMemoized(Virtualization.selectors.context, Dimensions.selectors.autoHeight, 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: createSelectorMemoized(Dimensions.selectors.contentHeight, Dimensions.selectors.minimalContentHeight, Dimensions.selectors.columnsTotalWidth, Dimensions.selectors.needsHorizontalScrollbar, (contentHeight, minimalContentHeight, columnsTotalWidth, needsHorizontalScrollbar) => ({
+      style: {
+        width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
+        flexBasis: contentHeight === 0 ? minimalContentHeight : contentHeight,
+        flexShrink: 0
+      },
+      role: 'presentation'
+    })),
+    positionerProps: createSelectorMemoized(Virtualization.selectors.offsetTop, offsetTop => ({
+      style: {
+        transform: `translate3d(0, ${offsetTop}px, 0)`
+      }
+    })),
+    scrollbarHorizontalProps: createSelectorMemoized(Virtualization.selectors.context, Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
+      ref: context.scrollbarHorizontalRef,
+      scrollPosition
+    })),
+    scrollbarVerticalProps: createSelectorMemoized(Virtualization.selectors.context, Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
+      ref: context.scrollbarVerticalRef,
+      scrollPosition
+    })),
+    scrollAreaProps: createSelectorMemoized(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.
+export 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
+    };
+  }
+}
+export class LayoutList extends Layout {
+  static elements = (() => ['scroller', 'container', 'content', 'positioner'])();
+  use(store, _params, _api, layoutParams) {
+    const {
+      scrollerRef,
+      containerRef
+    } = layoutParams;
+    const mergedRef = useForkRef(scrollerRef, containerRef);
+    store.state.virtualization.context = {
+      mergedRef
+    };
+  }
+  static selectors = (() => ({
+    containerProps: createSelectorMemoized(Virtualization.selectors.context, Dimensions.selectors.autoHeight, 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: createSelectorMemoized(Dimensions.selectors.contentHeight, contentHeight => {
+      return {
+        style: {
+          position: 'absolute',
+          display: 'inline-block',
+          width: '100%',
+          height: contentHeight,
+          top: 0,
+          left: 0,
+          zIndex: -1
+        },
+        role: 'presentation'
+      };
+    }),
+    positionerProps: createSelectorMemoized(Virtualization.selectors.offsetTop, offsetTop => ({
+      style: {
+        height: offsetTop
+      }
+    }))
+  }))();
+}

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