virtua 0.4.4 → 0.5.0

package/lib/react/VList.d.ts

@@ -2,12 +2,17 @@ import { ReactNode } from "react";
 import { WindowComponentAttributes } from "..";
 import { CustomWindowComponent } from "./Window";
 import { CustomItemComponent } from "./ListItem";
+import { CacheSnapshot } from "../core/types";
 export type ScrollMode = "reverse" | "rtl";
 type CustomItemComponentOrElement = keyof JSX.IntrinsicElements | CustomItemComponent;
 /**
  * Methods of {@link VList}.
  */
 export interface VListHandle {
+    /**
+     * Get current {@link CacheSnapshot}.
+     */
+    readonly cache: CacheSnapshot;
     /**
      * Get current scrollTop or scrollLeft.
      */
@@ -71,6 +76,10 @@ export interface VListProps extends WindowComponentAttributes {
      * - `rtl`: You have to set this mode if you use this component under `direction: rtl` style.
      */
     mode?: ScrollMode;
+    /**
+     * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link VListHandle.cache}.
+     */
+    cache?: CacheSnapshot;
     /**
      * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
      * @defaultValue {@link Window}
@@ -93,20 +102,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/WVList.d.ts

@@ -1,8 +1,17 @@
-import { ReactElement, ReactNode } from "react";
-import { WindowComponentAttributes } from "..";
+import { ReactNode } from "react";
+import { CacheSnapshot, WindowComponentAttributes } from "..";
 import { CustomWindowComponent } from "./Window";
 import { CustomItemComponent } from "./ListItem";
 type CustomItemComponentOrElement = keyof JSX.IntrinsicElements | CustomItemComponent;
+/**
+ * Methods of {@link WVList}.
+ */
+export interface WVListHandle {
+    /**
+     * Get current {@link CacheSnapshot}.
+     */
+    readonly cache: CacheSnapshot;
+}
 /**
  * Props of {@link WVList}.
  */
@@ -31,6 +40,10 @@ export interface WVListProps extends WindowComponentAttributes {
      * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
      */
     horizontal?: boolean;
+    /**
+     * You can restore cache by passing a {@link CacheSnapshot} on mount. This is useful when you want to restore scroll position after navigation. The snapshot can be obtained from {@link WVListHandle.cache}.
+     */
+    cache?: CacheSnapshot;
     /**
      * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
      * @defaultValue {@link Window}
@@ -48,23 +61,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: ({ children, overscan, initialItemSize, initialItemCount, horizontal: horizontalProp, element: Window, itemElement, onScrollStop: onScrollStopProp, onRangeChange: onRangeChangeProp, ...windowAttrs }: WVListProps) => ReactElement;
+export declare const WVList: import("react").ForwardRefExoticComponent<WVListProps & import("react").RefAttributes<WVListHandle>>;
 export {};

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,3 +1,6 @@
 import { ReactElement, ReactFragment, ReactNode } from "react";
 export declare const refKey = "current";
 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.4",
+  "version": "0.5.0",
   "description": "A zero-config, fast and small (~3kB) virtual list and grid component for React.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -23,28 +23,28 @@
     "prepublishOnly": "npm run typedoc && rimraf lib && npm run build"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-pure-annotations": "7.18.6",
+    "@babel/plugin-transform-react-pure-annotations": "7.22.5",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@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",
+    "@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.14",
+    "@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.0",
-    "rollup": "3.23.0",
+    "rimraf": "5.0.1",
+    "rollup": "3.26.3",
     "rollup-plugin-banner2": "1.2.2",
     "size-limit": "^8.2.6",
-    "storybook": "^7.1.0",
-    "ts-jest": "29.1.0",
-    "typedoc": "0.24.7",
-    "typedoc-plugin-markdown": "3.15.3",
+    "storybook": "^7.1.1",
+    "ts-jest": "29.1.1",
+    "typedoc": "0.24.8",
+    "typedoc-plugin-markdown": "3.15.4",
     "typescript": "5.1.6",
-    "virtua": "^0.4.3",
-    "vite": "4.4.4",
+    "virtua": "^0.4.5",
+    "vite": "4.4.7",
     "wait-on": "7.0.1"
   },
   "peerDependencies": {
@@ -92,6 +92,7 @@
     "grid",
     "table",
     "flex",
+    "scroller",
     "scrolling",
     "virtual",
     "virtualized",