virtua 0.5.0 → 0.6.1

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}
-     */
-    element?: CustomWindowComponent;
-    /**
-     * Customized element type for item element. This element will get {@link CustomItemComponentProps} as props.
-     * @defaultValue "div"
-     */
-    itemElement?: CustomItemComponentOrElement;
+     * Customized components for advanced usage.
+     */
+    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.

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.
      */

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/useLatestRef.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useLatestRef: <T>(value: T) => import("react").MutableRefObject<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.5.0",
+  "version": "0.6.1",
   "description": "A zero-config, fast and small (~3kB) virtual list and grid component for React.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -29,24 +29,24 @@
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.10.8",
     "@faker-js/faker": "8.0.2",
-    "@mui/material": "5.12.3",
+    "@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-storysource": "7.1.1",
-    "@storybook/react": "7.1.1",
-    "@storybook/react-vite": "^7.1.1",
+    "@storybook/addon-storysource": "7.2.0",
+    "@storybook/react": "7.2.0",
+    "@storybook/react-vite": "^7.2.0",
     "@storybook/test-runner": "0.12.0",
     "@tanstack/react-virtual": "3.0.0-alpha.0",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.17",
+    "@types/react": "18.2.18",
     "@types/react-virtualized": "9.21.22",
     "@types/react-window": "1.8.5",
     "@typescript-eslint/parser": "6.2.0",
     "concurrently": "8.2.0",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "jest": "29.6.1",
     "jest-environment-jsdom": "29.6.1",
@@ -63,16 +63,16 @@
     "react-virtuoso": "4.4.2",
     "react-window": "1.8.9",
     "rimraf": "5.0.1",
-    "rollup": "3.26.3",
+    "rollup": "3.27.0",
     "rollup-plugin-banner2": "1.2.2",
     "size-limit": "^8.2.6",
-    "storybook": "^7.1.1",
+    "storybook": "^7.2.0",
     "ts-jest": "29.1.1",
     "typedoc": "0.24.8",
     "typedoc-plugin-markdown": "3.15.4",
     "typescript": "5.1.6",
-    "virtua": "^0.4.5",
-    "vite": "4.4.7",
+    "virtua": "^0.6.0",
+    "vite": "4.4.8",
     "wait-on": "7.0.1"
   },
   "peerDependencies": {

package/lib/react/useRefWithUpdate.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const useRefWithUpdate: <T>(value: T) => import("react").MutableRefObject<T>;