virtua 0.4.0 → 0.4.2

package/lib/react/ListItem.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { VirtualStore } from "../core/store";
+import { ListResizer } from "../core/resizer";
+/**
+ * Props of customized item component for {@link VList}.
+ */
+export interface CustomItemComponentProps {
+    style: CSSProperties;
+    children: ReactNode;
+}
+export type CustomItemComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<CustomItemComponentProps> & React.RefAttributes<any>>;
+type ListItemProps = {
+    _children: ReactNode;
+    _resizer: ListResizer;
+    _store: VirtualStore;
+    _index: number;
+    _element: "div";
+    _isHorizontal: boolean;
+    _isRtl: boolean;
+};
+export declare const ListItem: import("react").MemoExoticComponent<({ _children: children, _resizer: resizer, _store: store, _index: index, _element: Element, _isHorizontal: isHorizontal, _isRtl: isRtl, }: ListItemProps) => ReactElement>;
+export {};

package/lib/react/VList.d.ts

@@ -1,15 +1,8 @@
-import { CSSProperties, ReactNode } from "react";
+import { ReactNode } from "react";
 import { WindowComponentAttributes } from "..";
 import { CustomWindowComponent } from "./DefaultWindow";
+import { CustomItemComponent } from "./ListItem";
 export type ScrollMode = "reverse" | "rtl";
-/**
- * Props of customized item component for {@link VList}.
- */
-export interface CustomItemComponentProps {
-    style: CSSProperties;
-    children: ReactNode;
-}
-export type CustomItemComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<CustomItemComponentProps> & React.RefAttributes<any>>;
 type CustomItemComponentOrElement = keyof JSX.IntrinsicElements | CustomItemComponent;
 /**
  * Methods of {@link VList}.
@@ -74,7 +67,7 @@ export interface VListProps extends WindowComponentAttributes {
     /**
      * Scroll modes that should be set in certain situations.
      *
-     * - `reverse`: This mode will Adjust some styles to be suitable for bottom-to-top scrolling.
+     * - `reverse`: This mode will adjust some styles to be suitable for bottom-to-top scrolling.
      * - `rtl`: You have to set this mode if you use this component under `direction: rtl` style.
      */
     mode?: ScrollMode;

package/lib/react/WVList.d.ts

@@ -0,0 +1,75 @@
+import { ReactElement, ReactNode } from "react";
+import { WindowComponentAttributes } from "..";
+import { CustomWindowComponent } from "./DefaultWindow";
+import { CustomItemComponent } from "./ListItem";
+type CustomItemComponentOrElement = keyof JSX.IntrinsicElements | CustomItemComponent;
+/**
+ * Props of {@link WVList}.
+ */
+export interface WVListProps extends WindowComponentAttributes {
+    /**
+     * Elements rendered by this component.
+     */
+    children: ReactNode;
+    /**
+     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
+     * @defaultValue 4
+     */
+    overscan?: number;
+    /**
+     * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
+     *
+     * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
+     * - If set, you can opt out estimation and use the value as initial item size.
+     */
+    initialItemSize?: number;
+    /**
+     * If set, the specified amount of items will be mounted in the initial rendering regardless of the container size. This prop is mostly for SSR.
+     */
+    initialItemCount?: number;
+    /**
+     * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
+     */
+    horizontal?: boolean;
+    /**
+     * Customized element type for scrollable element. This element will get {@link CustomWindowComponentProps} as props.
+     * @defaultValue {@link DefaultWindow}
+     */
+    element?: CustomWindowComponent;
+    /**
+     * Customized element type for item element. This element will get {@link CustomItemComponentProps} as props.
+     * @defaultValue "div"
+     */
+    itemElement?: CustomItemComponentOrElement;
+    /**
+     * Callback invoked whenever scroll offset changes.
+     * @param offset Current scrollTop or scrollLeft.
+     */
+    onScroll?: (offset: number) => void;
+    /**
+     * Callback invoked when scrolling stops.
+     */
+    onScrollStop?: () => void;
+    /**
+     * 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;
+}
+/**
+ * Virtualized list component controlled by the window scrolling. See {@link WVListProps}.
+ */
+export declare const WVList: ({ children, overscan, initialItemSize, initialItemCount, horizontal: horizontalProp, element, itemElement, onScroll: onScrollProp, onScrollStop: onScrollStopProp, onRangeChange: onRangeChangeProp, ...windowAttrs }: WVListProps) => ReactElement;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtua",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "A zero-config, fast and small (~3kB) virtual list and grid component for React.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -19,6 +19,7 @@
     "storybook:test": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run storybook -- --quiet --no-open\" \"wait-on tcp:6006 && test-storybook\"",
     "e2e": "npx playwright test",
     "typedoc": "typedoc",
+    "size": "size-limit",
     "prepublishOnly": "npm run typedoc && rimraf lib && npm run build"
   },
   "devDependencies": {
@@ -33,6 +34,7 @@
     "@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.0.18",
     "@storybook/react": "7.0.18",
     "@storybook/react-vite": "^7.0.18",
@@ -63,12 +65,13 @@
     "rimraf": "5.0.0",
     "rollup": "3.23.0",
     "rollup-plugin-banner2": "1.2.2",
+    "size-limit": "^8.2.6",
     "storybook": "^7.0.18",
     "ts-jest": "29.1.0",
     "typedoc": "0.24.7",
     "typedoc-plugin-markdown": "3.15.3",
     "typescript": "5.1.3",
-    "virtua": "^0.3.0",
+    "virtua": "^0.4.0",
     "vite": "4.3.9",
     "wait-on": "7.0.1"
   },