vlist-react 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,47 +1,13 @@
 /**
  * React hooks for vlist - lightweight virtual scrolling
- *
- * @packageDocumentation
  */
-import type { VListConfig, VListItem, VList, VListEvents, EventHandler } from "@floor/vlist";
-/** Configuration for useVList (VListConfig without container) */
+import type { VListConfig, VListItem, VListEvents, EventHandler } from "@floor/vlist";
+import { type BuiltVList } from "@floor/vlist";
 export type UseVListConfig<T extends VListItem = VListItem> = Omit<VListConfig<T>, "container">;
-/** Return value from the useVList hook */
 export interface UseVListReturn<T extends VListItem = VListItem> {
     containerRef: React.RefObject<HTMLDivElement | null>;
-    instanceRef: React.RefObject<VList<T> | null>;
-    getInstance: () => VList<T> | null;
+    instanceRef: React.RefObject<BuiltVList<T> | null>;
+    getInstance: () => BuiltVList<T> | null;
 }
-/**
- * React hook for vlist integration.
- *
- * @example
- * ```tsx
- * import { useVList } from 'vlist-react';
- * import '@floor/vlist/styles';
- *
- * function UserList({ users }) {
- *   const { containerRef, instanceRef } = useVList({
- *     item: {
- *       height: 48,
- *       template: (user) => `<div>${user.name}</div>`,
- *     },
- *     items: users,
- *   });
- *
- *   return <div ref={containerRef} style={{ height: 400 }} />;
- * }
- * ```
- */
 export declare function useVList<T extends VListItem = VListItem>(config: UseVListConfig<T>): UseVListReturn<T>;
-/**
- * Subscribe to vlist events within React lifecycle
- *
- * @example
- * ```tsx
- * useVListEvent(instanceRef, 'selection:change', ({ selected }) => {
- *   console.log('Selected:', selected);
- * });
- * ```
- */
-export declare function useVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instanceRef: React.RefObject<VList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;
+export declare function useVListEvent<T extends VListItem, K extends keyof VListEvents<T>>(instanceRef: React.RefObject<BuiltVList<T> | null>, event: K, handler: EventHandler<VListEvents<T>[K]>): void;

package/dist/index.js

@@ -1 +1 @@
-import{useRef as J,useEffect as Q,useCallback as X}from"react";import{vlist as Y}from"@floor/vlist";import{withAsync as Z,withGrid as _,withSections as $,withSelection as U,withScrollbar as k,withScale as A,withSnapshots as G,withPage as H}from"@floor/vlist";function V(B){let F=J(null),z=J(null),q=J(B);q.current=B;let D=J(!1);Q(()=>{let M=F.current;if(!M)return;let j=Y({...q.current,container:M});if(q.current.scroll?.element===window)j=j.use(H());if(q.current.adapter)j=j.use(Z({adapter:q.current.adapter,...q.current.loading&&{loading:q.current.loading}}));if(q.current.layout==="grid"&&q.current.grid)j=j.use(_(q.current.grid));if(q.current.groups)j=j.use($(q.current.groups));if((q.current.selection?.mode||"none")!=="none")j=j.use(U(q.current.selection));else j=j.use(U({mode:"none"}));j=j.use(A());let N=q.current.scroll?.scrollbar||q.current.scrollbar;if(N!=="none"){let W=typeof N==="object"?N:{};j=j.use(k(W))}j=j.use(G());let T=j.build();return z.current=T,D.current=!0,()=>{D.current=!1,T.destroy(),z.current=null}},[]),Q(()=>{if(!D.current||!z.current)return;if(B.items)z.current.setItems(B.items)},[B.items]);let K=X(()=>{return z.current},[]);return{containerRef:F,instanceRef:z,getInstance:K}}function x(B,F,z){let q=J(z);q.current=z,Q(()=>{let D=B.current;if(!D)return;let K=(j)=>{q.current(j)};return D.on(F,K)},[B.current,F])}export{x as useVListEvent,V as useVList};
+import{useRef as c,useEffect as f,useCallback as p}from"react";import{vlist as V}from"@floor/vlist";import{withAsync as g,withGrid as h,withSections as T,withSelection as m,withScrollbar as b,withScale as R,withSnapshots as v,withPage as I}from"@floor/vlist";function H(s){let u=c(null),n=c(null),t=c(s);t.current=s;let i=c(!1);f(()=>{let l=u.current;if(!l)return;let e=V({...t.current,container:l});if(t.current.scroll?.element===window)e=e.use(I());if(t.current.adapter)e=e.use(g({adapter:t.current.adapter,...t.current.loading&&{loading:t.current.loading}}));if(t.current.layout==="grid"&&t.current.grid)e=e.use(h(t.current.grid));if(t.current.groups){let r=t.current.groups,L=typeof r.headerHeight==="function"?r.headerHeight("",0):r.headerHeight;e=e.use(T({getGroupForIndex:r.getGroupForIndex,headerHeight:L,headerTemplate:r.headerTemplate,...r.sticky!==void 0&&{sticky:r.sticky}}))}if((t.current.selection?.mode||"none")!=="none")e=e.use(m(t.current.selection));else e=e.use(m({mode:"none"}));e=e.use(R());let a=t.current.scroll?.scrollbar||t.current.scrollbar;if(a!=="none"){let r=typeof a==="object"?a:{};e=e.use(b(r))}e=e.use(v());let d=e.build();return n.current=d,i.current=!0,()=>{i.current=!1,d.destroy(),n.current=null}},[]),f(()=>{if(!i.current||!n.current)return;if(s.items)n.current.setItems(s.items)},[s.items]);let o=p(()=>{return n.current},[]);return{containerRef:u,instanceRef:n,getInstance:o}}function C(s,u,n){let t=c(n);t.current=n,f(()=>{let i=s.current;if(!i)return;let o=(e)=>{t.current(e)};return i.on(u,o)},[s.current,u])}export{C as useVListEvent,H as useVList};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vlist-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React hooks for vlist - lightweight virtual scrolling",
   "author": {
     "name": "Floor IO",