virtua 0.4.5 → 0.6.0

package/lib/react/VGrid.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from "react";
-import { CustomWindowComponent, WindowComponentAttributes } from "..";
+import { CustomViewportComponent, ViewportComponentAttributes } from "..";
 /**
  * Props of customized cell component for {@link VGrid}.
  */
@@ -47,7 +47,7 @@ export interface VGridHandle {
 /**
  * Props of {@link VGrid}.
  */
-export interface VGridProps extends WindowComponentAttributes {
+export interface VGridProps extends ViewportComponentAttributes {
     /**
      * A function to create elements rendered by this component.
      */
@@ -97,15 +97,20 @@ export interface VGridProps extends WindowComponentAttributes {
      */
     rtl?: boolean;
     /**
-     * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
-     * @defaultValue {@link Window}
+     * Customized components for advanced usage.
      */
-    element?: CustomWindowComponent;
-    /**
-     * Customized element type for cell element. This element will get {@link CustomCellComponentProps} as props.
-     * @defaultValue "div"
-     */
-    cellElement?: CustomCellComponentOrElement;
+    components?: {
+        /**
+         * Component for scrollable element. This component will get {@link CustomViewportComponentProps} as props.
+         * @defaultValue {@link DefaultViewport}
+         */
+        Root?: CustomViewportComponent;
+        /**
+         * Component or element type for cell element. This component will get {@link CustomCellComponentProps} as props.
+         * @defaultValue "div"
+         */
+        Cell?: CustomCellComponentOrElement;
+    };
 }
 /**
  * Virtualized grid component. See {@link VGridProps} and {@link VGridHandle}.

package/lib/react/VList.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { WindowComponentAttributes } from "..";
-import { CustomWindowComponent } from "./Window";
+import { ViewportComponentAttributes } from "..";
+import { CustomViewportComponent } from "./Viewport";
 import { CustomItemComponent } from "./ListItem";
 import { CacheSnapshot } from "../core/types";
 export type ScrollMode = "reverse" | "rtl";
@@ -44,7 +44,7 @@ export interface VListHandle {
 /**
  * Props of {@link VList}.
  */
-export interface VListProps extends WindowComponentAttributes {
+export interface VListProps extends ViewportComponentAttributes {
     /**
      * Elements rendered by this component.
      */
@@ -81,15 +81,20 @@ export interface VListProps extends WindowComponentAttributes {
      */
     cache?: CacheSnapshot;
     /**
-     * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
-     * @defaultValue {@link Window}
+     * Customized components for advanced usage.
      */
-    element?: CustomWindowComponent;
-    /**
-     * Customized element type for item element. This element will get {@link CustomItemComponentProps} as props.
-     * @defaultValue "div"
-     */
-    itemElement?: CustomItemComponentOrElement;
+    components?: {
+        /**
+         * Component for scrollable element. This component will get {@link CustomViewportComponentProps} as props.
+         * @defaultValue {@link DefaultViewport}
+         */
+        Root?: CustomViewportComponent;
+        /**
+         * Component or element type for item element. This component will get {@link CustomItemComponentProps} as props.
+         * @defaultValue "div"
+         */
+        Item?: CustomItemComponentOrElement;
+    };
     /**
      * Callback invoked whenever scroll offset changes.
      * @param offset Current scrollTop or scrollLeft.
@@ -102,20 +107,15 @@ export interface VListProps extends WindowComponentAttributes {
     /**
      * Callback invoked when visible items range changes.
      */
-    onRangeChange?: (payload: {
-        /**
-         * The start index of viewable items.
-         */
-        start: number;
-        /**
-         * The end index of viewable items.
-         */
-        end: number;
-        /**
-         * The total count of items.
-         */
-        count: number;
-    }) => void;
+    onRangeChange?: (
+    /**
+     * The start index of viewable items.
+     */
+    startIndex: number, 
+    /**
+     * The end index of viewable items.
+     */
+    endIndex: number) => void;
 }
 /**
  * Virtualized list component. See {@link VListProps} and {@link VListHandle}.

package/lib/react/{Window.d.ts → Viewport.d.ts}

@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
-export type WindowComponentAttributes = Pick<React.HTMLAttributes<HTMLElement>, "className" | "style" | "id" | "role" | "tabIndex"> & React.AriaAttributes;
+export type ViewportComponentAttributes = Pick<React.HTMLAttributes<HTMLElement>, "className" | "style" | "id" | "role" | "tabIndex"> & React.AriaAttributes;
 /**
  * Props of customized scrollable component.
  */
-export interface CustomWindowComponentProps {
+export interface CustomViewportComponentProps {
     /**
      * Renderable item elements.
      */
@@ -11,7 +11,7 @@ export interface CustomWindowComponentProps {
     /**
      * Attributes that should be passed to the scrollable element.
      */
-    attrs: WindowComponentAttributes;
+    attrs: ViewportComponentAttributes;
     /**
      * Total height of items. It's undefined if component is not vertically scrollable.
      */
@@ -25,5 +25,5 @@ export interface CustomWindowComponentProps {
      */
     scrolling: boolean;
 }
-export declare const Window: import("react").ForwardRefExoticComponent<CustomWindowComponentProps & import("react").RefAttributes<any>>;
-export type CustomWindowComponent = typeof Window;
+export declare const Viewport: import("react").ForwardRefExoticComponent<CustomViewportComponentProps & import("react").RefAttributes<any>>;
+export type CustomViewportComponent = typeof Viewport;

package/lib/react/WVList.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { CacheSnapshot, WindowComponentAttributes } from "..";
-import { CustomWindowComponent } from "./Window";
+import { CacheSnapshot, ViewportComponentAttributes } from "..";
+import { CustomViewportComponent } from "./Viewport";
 import { CustomItemComponent } from "./ListItem";
 type CustomItemComponentOrElement = keyof JSX.IntrinsicElements | CustomItemComponent;
 /**
@@ -15,7 +15,7 @@ export interface WVListHandle {
 /**
  * Props of {@link WVList}.
  */
-export interface WVListProps extends WindowComponentAttributes {
+export interface WVListProps extends ViewportComponentAttributes {
     /**
      * Elements rendered by this component.
      */
@@ -45,15 +45,20 @@ export interface WVListProps extends WindowComponentAttributes {
      */
     cache?: CacheSnapshot;
     /**
-     * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
-     * @defaultValue {@link Window}
+     * Customized components for advanced usage.
      */
-    element?: CustomWindowComponent;
-    /**
-     * Customized element type for item element. This element will get {@link CustomItemComponentProps} as props.
-     * @defaultValue "div"
-     */
-    itemElement?: CustomItemComponentOrElement;
+    components?: {
+        /**
+         * Component for scrollable element. This component will get {@link CustomViewportComponentProps} as props.
+         * @defaultValue {@link DefaultViewport}
+         */
+        Root?: CustomViewportComponent;
+        /**
+         * Component or element type for item element. This component will get {@link CustomItemComponentProps} as props.
+         * @defaultValue "div"
+         */
+        Item?: CustomItemComponentOrElement;
+    };
     /**
      * Callback invoked when scrolling stops.
      */
@@ -61,23 +66,18 @@ export interface WVListProps extends WindowComponentAttributes {
     /**
      * Callback invoked when visible items range changes.
      */
-    onRangeChange?: (payload: {
-        /**
-         * The start index of viewable items.
-         */
-        start: number;
-        /**
-         * The end index of viewable items.
-         */
-        end: number;
-        /**
-         * The total count of items.
-         */
-        count: number;
-    }) => void;
+    onRangeChange?: (
+    /**
+     * The start index of viewable items.
+     */
+    startIndex: number, 
+    /**
+     * The end index of viewable items.
+     */
+    endIndex: number) => void;
 }
 /**
- * Virtualized list component controlled by the window scrolling. See {@link WVListProps}.
+ * Virtualized list component controlled by the window scrolling. See {@link WVListProps} and {@link WVListHandle}.
  */
 export declare const WVList: import("react").ForwardRefExoticComponent<WVListProps & import("react").RefAttributes<WVListHandle>>;
 export {};

package/lib/react/index.d.ts

@@ -0,0 +1,8 @@
+export { VList } from "./VList";
+export type { VListProps, VListHandle, ScrollMode } from "./VList";
+export { VGrid } from "./VGrid";
+export type { VGridProps, VGridHandle, CustomCellComponent, CustomCellComponentProps, } from "./VGrid";
+export { WVList } from "./WVList";
+export type { WVListProps, WVListHandle } from "./WVList";
+export type { ViewportComponentAttributes, CustomViewportComponent, CustomViewportComponentProps, } from "./Viewport";
+export type { CustomItemComponent, CustomItemComponentProps } from "./ListItem";

package/lib/react/useSelector.d.ts

@@ -1,2 +1,7 @@
 import { VirtualStore } from "../core/store";
-export declare const useSelector: <T>(store: VirtualStore, getSnapShot: () => T, shouldGetLatest?: boolean) => T;
+export declare const SELECT_RANGE: number;
+export declare const SELECT_SCROLL_SIZE = 2;
+export declare const SELECT_JUMP_COUNT = 4;
+export declare const SELECT_IS_SCROLLING = 8;
+export declare const SELECT_ITEM = 2;
+export declare const useSelector: <T>(store: VirtualStore, getSnapShot: () => T, target: number, shouldGetLatest?: boolean) => T;

package/lib/react/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement, ReactFragment, ReactNode } from "react";
 export declare const refKey = "current";
+export declare const emptyComponents: {};
 export declare const flattenChildren: (children: ReactNode) => (string | number | ReactElement<any, string | import("react").JSXElementConstructor<any>> | ReactFragment)[];
 export type MayHaveKey = {
     key?: React.Key;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.4.5",
+  "version": "0.6.0",
   "description": "A zero-config, fast and small (~3kB) virtual list and grid component for React.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -29,22 +29,22 @@
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.8",
     "@faker-js/faker": "8.0.2",
-    "@mui/material": "5.12.3",
-    "@playwright/test": "^1.36.1",
+    "@mui/material": "5.14.2",
+    "@playwright/test": "^1.36.2",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.2",
     "@size-limit/preset-small-lib": "^8.2.6",
-    "@storybook/addon-docs": "7.1.0",
-    "@storybook/react": "7.1.0",
-    "@storybook/react-vite": "^7.1.0",
-    "@storybook/test-runner": "0.11.0",
+    "@storybook/addon-storysource": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "^7.1.1",
+    "@storybook/test-runner": "0.12.0",
     "@tanstack/react-virtual": "3.0.0-alpha.0",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.15",
+    "@types/react": "18.2.17",
     "@types/react-virtualized": "9.21.22",
     "@types/react-window": "1.8.5",
-    "@typescript-eslint/parser": "6.1.0",
+    "@typescript-eslint/parser": "6.2.0",
     "concurrently": "8.2.0",
     "eslint": "8.45.0",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -58,21 +58,21 @@
     "react-is": "18.2.0",
     "react-merge-refs": "2.0.2",
     "react-pull-to-refresh": "2.0.1",
-    "react-select": "5.7.3",
+    "react-select": "5.7.4",
     "react-virtualized": "9.22.5",
-    "react-virtuoso": "4.4.1",
+    "react-virtuoso": "4.4.2",
     "react-window": "1.8.9",
     "rimraf": "5.0.1",
     "rollup": "3.26.3",
     "rollup-plugin-banner2": "1.2.2",
     "size-limit": "^8.2.6",
-    "storybook": "^7.1.0",
+    "storybook": "^7.1.1",
     "ts-jest": "29.1.1",
-    "typedoc": "0.24.7",
-    "typedoc-plugin-markdown": "3.15.3",
+    "typedoc": "0.24.8",
+    "typedoc-plugin-markdown": "3.15.4",
     "typescript": "5.1.6",
-    "virtua": "^0.4.4",
-    "vite": "4.4.6",
+    "virtua": "^0.4.5",
+    "vite": "4.4.7",
     "wait-on": "7.0.1"
   },
   "peerDependencies": {