virtua 0.2.4 → 0.3.0

package/README.md

@@ -110,6 +110,30 @@ export const App = () => {
 };
 ```
 
+### React Server Components (RSC) support
+
+This library is marked as a Client Component. You can render RSC as children of VList.
+
+```tsx
+// page.tsx in App Router of Next.js
+import { VList } from "virtua";
+
+export default async () => {
+  return (
+    <div>
+      <div>This is Server Component</div>
+      <VList style={{ height: 300 }}>
+        {Array.from({ length: 1000 }).map((_, i) => (
+          <div key={i} style={{ border: "solid 1px gray", height: 80 }}>
+            {i}
+          </div>
+        ))}
+      </VList>
+    </div>
+  );
+};
+```
+
 And see [examples](./stories) for more usages.
 
 ## Documentation
@@ -138,6 +162,7 @@ WIP
 | Infinite scroll                                    | ✅                                                       | ✅                                                                | 🟠 (needs [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader)) | 🟠 (needs [InfiniteLoader](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md))                                                           | ✅                                                                        | ✅                                                                    |
 | RTL                                                | ✅                                                       | ❌                                                                | ✅                                                                                                 | ❌                                                                                                                                                                     | ❌                                                                        | ❌                                                                    |
 | SSR support                                        | ✅                                                       | ✅                                                                | ✅                                                                                                 | ✅                                                                                                                                                                     | ✅                                                                        | ✅                                                                    |
+| React Server Components (RSC) support              | ✅                                                       | ?                                                                 | ?                                                                                                  | ?                                                                                                                                                                      | ✅ (hook)                                                                 | ✅ (hook)                                                             |
 | Display exceeding browser's max element size limit | ❌                                                       | ❌                                                                | ❌                                                                                                 | ✅                                                                                                                                                                     | ❌                                                                        | ❌                                                                    |
 
 - ✅ - Built-in supported

package/lib/core/resizer.d.ts

@@ -1,5 +1,5 @@
 import { VirtualStore } from "./store";
-export declare const createResizer: (store: VirtualStore) => {
+export declare const createResizer: (store: VirtualStore, isHorizontal: boolean) => {
     _observeRoot(root: HTMLElement): () => void;
     _observeItem(el: HTMLElement, i: number): () => void;
     _isJustResized(): boolean;

package/lib/core/scroller.d.ts

@@ -6,4 +6,4 @@ export type Scroller = {
     _scrollToIndex: (index: number, count: number) => void;
     _fixScrollJump: (jump: ScrollJump, startIndex: number) => void;
 };
-export declare const createScroller: (store: VirtualStore, isJustResized: () => boolean) => Scroller;
+export declare const createScroller: (store: VirtualStore, isHorizontal: boolean, isRtl: boolean, isJustResized: () => boolean) => Scroller;

package/lib/core/store.d.ts

@@ -12,6 +12,7 @@ export declare const ACTION_WINDOW_RESIZE = 2;
 export declare const ACTION_SCROLL = 3;
 export declare const ACTION_MANUAL_SCROLL = 4;
 type Actions = [type: typeof ACTION_ITEM_RESIZE, entries: ItemResize[]] | [type: typeof ACTION_WINDOW_RESIZE, size: number] | [type: typeof ACTION_SCROLL, offset: number] | [type: typeof ACTION_MANUAL_SCROLL, offset: number];
+type Subscriber = (sync?: boolean) => void;
 export type VirtualStore = {
     _getRange(): ItemsRange;
     _isUnmeasuredItem(index: number): boolean;
@@ -21,16 +22,15 @@ export type VirtualStore = {
     _getScrollOffset(): number;
     _getViewportSize(): number;
     _getScrollSize(): number;
+    _getScrollableDomSize(): number;
     _getJump(): ScrollJump;
-    _isHorizontal(): boolean;
-    _isRtl(): boolean;
     _getItemIndexForScrollTo(offset: number): number;
     _waitForScrollDestinationItemsMeasured(): Promise<void>;
-    _subscribe(cb: () => void): () => void;
+    _subscribe(cb: Subscriber): () => void;
     _update(...action: Actions): void;
     _getScrollDirection(): ScrollDirection;
     _setScrollDirection(direction: ScrollDirection): void;
     _updateCacheLength(length: number): void;
 };
-export declare const createVirtualStore: (itemCount: number, itemSize: number, isHorizontal: boolean, isRtl: boolean, initialItemCount: number | undefined, onScrollStateChange: (scrolling: boolean) => void, onScrollOffsetChange: (offset: number) => void) => VirtualStore;
+export declare const createVirtualStore: (itemCount: number, itemSize: number, initialItemCount: number | undefined, isReverse: boolean, onScrollStateChange: (scrolling: boolean) => void, onScrollOffsetChange: (offset: number) => void) => VirtualStore;
 export {};

package/lib/core/utils.d.ts

@@ -1,5 +1,6 @@
 export declare const min: (...values: number[]) => number;
 export declare const max: (...values: number[]) => number;
+export declare const abs: (x: number) => number;
 export declare const now: () => number;
 export declare const exists: <T>(v: T) => v is Exclude<T, null | undefined>;
 export declare const range: <T>(length: number, cb: (i: number) => T) => T[];

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export { VList } from "./react/VList";
-export type { VListProps, VListHandle, CustomItemComponent, CustomItemComponentProps, CustomWindowComponent, CustomWindowComponentProps, } from "./react/VList";
+export type { VListProps, VListHandle, CustomItemComponent, CustomItemComponentProps, ScrollMode, } from "./react/VList";
 export { VGrid } from "./react/VGrid";
-export type { VGridProps, VGridHandle, CustomCellComponent, CustomCellComponentProps, CustomGridWindowComponent, CustomGridWindowComponentProps, } from "./react/VGrid";
-export type { WindowComponentAttributes } from "./react/types";
+export type { VGridProps, VGridHandle, CustomCellComponent, CustomCellComponentProps, } from "./react/VGrid";
+export type { WindowComponentAttributes, CustomWindowComponent, CustomWindowComponentProps, } from "./react/DefaultWindow";

package/lib/index.js

@@ -1,2 +1,3 @@
-var e=require("react/jsx-runtime"),t=require("react"),r=require("use-sync-external-store/shim/index.js");const n=Math.min,o=Math.max,i=Date.now,l=e=>null!=e,s=(e,t)=>Array.from({length:e},((e,r)=>t(r))),c=e=>{let t,r;return(...n)=>(t||(t=!0,r=e(...n)),r)},u=(e,t)=>{const r=e.t[t];return-1===r?e.o:r},d=(e,t,r)=>{if(!e.i)return 0;if(e.l>=t)return r?e.u[t]+u(e,t):e.u[t];let n=e.l,o=e.u[n];for(;n<=t&&(e.u[n]=o,n!==t||r);)o+=u(e,n),n++;return e.l=t,o},a=(e,t)=>d(e,t),_=(e,t,r)=>{let i=0;if(r>=0)for(;t<e.i-1;){const n=u(e,t++);if((i+=n)>=r){i-n/2>=r&&t--;break}}else for(;t>0;){const n=u(e,--t);if((i-=n)<=r){i+n/2<r&&t++;break}}return n(o(t,0),e.i-1)},h=(e,t,r,n)=>_(e,r,t-n),f=_,g=(e,t,r)=>({o:t,i:e,l:r?n(r.l,e-1):0,t:s(e,(e=>{const t=r&&r.t[e];return l(t)?t:-1})),u:s(e,(e=>{if(0===e)return 0;const t=r&&r.u[e];return l(t)?t:-1}))}),m=(e,t,r,i,l=0,s,c)=>{let _,m=t*o(l-1,0),w=0,S=[],v=g(e,t),p=0,z=[0,l];const I=new Set;return{_(){const[e,t]=z,r=a(v,e),n=h(v,w,e,r),o=f(v,n,m);return e===n&&t===o?z:z=[n,o]},h:e=>-1===v.t[e],g:e=>((e,t,r)=>{for(let n=t;n<=r;n++)if(-1===e.t[n])return!0;return!1})(v,e,f(v,e,m)),m:e=>a(v,e),S:e=>u(v,e),v:()=>w,p:()=>m,I:()=>(e=>d(e,e.i-1,!0))(v),R:()=>S,T:()=>r,M:()=>i,C:e=>h(v,e,0,0),O:()=>(_&&_[1](),new Promise(((e,t)=>{_=[()=>{Promise.resolve().then((()=>{e(),_=void 0}))},t]}))),W:e=>(I.add(e),()=>{I.delete(e)}),H(e,t){const r=(()=>{switch(e){case 1:{const e=t.filter((([e,t])=>v.t[e]!==t));if(!e.length)return!1;const r=[];return e.forEach((([e,t])=>{r.push([t-u(v,e),e]),((e,t,r)=>{e.t[t]=r,e.l=n(t,e.l)})(v,e,t)})),S=r,!0}case 2:return m!==t&&(m=t,!0);case 3:case 4:{const e=w;return(w=t)!==e}}})();r&&(I.forEach((e=>{e()})),3===e?c(w):_&&1===e&&_[0]())},k:()=>p,D(e){const t=p;p=e,0===p?s(!1):0!==t||1!==p&&2!==p||s(!0)},J(e){v.i!==e&&(v=g(e,t,v))}}},w="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,S=(e,t)=>r.useSyncExternalStore(e,t,t),v=c((e=>{const t="scrollLeft",r=e[t];e[t]=1;const n=e[t]<1;return e[t]=r,n})),p=(e,t)=>{let r;const s=e.T(),c=e.M(),u=s?"scrollLeft":"scrollTop",d=()=>r?s?r.scrollWidth:r.scrollHeight:0,a=(t,n)=>v(r)||n?-t:e.I()-e.p()-t,_=(t,n)=>{r&&(s&&c&&(t=a(t,n)),n?r[u]+=t:(r[u]=t,e.D(3)))},h=async(t,r)=>{const n=()=>{let t=r();const n=d(),o=e.p();return n-(t+o)<=0&&(t=n-o),t};if(e.g(t)){do{e.H(4,n());try{await e.O()}catch(e){return}}while(e.g(t));_(n())}else{const t=n();_(t),e.H(4,t)}},f=e=>e.reduce(((e,[t])=>e+t),0);return{$(n){r=n;const o=()=>{let r=n[u];s&&c&&(r=a(r));const o=e.v();if(o===r)return;const i=e.k(),l=t();0!==i&&l||3===i||e.D(o>r?2:1),e.H(3,r)},d=(()=>{let t;const r=()=>{l(t)&&clearTimeout(t)},n=()=>{r(),t=setTimeout((()=>{t=null,o(),e.D(0)}),150)};return n.q=r,n})(),_=()=>{o(),d()},h=(()=>{let t=i()-50;return(...r)=>{const n=i();t+50<n&&(t=n,(t=>{if(0!==e.k()&&!t.ctrlKey&&(s?t.deltaX:t.deltaY)){const t=e.v();t>0&&t<e.I()-e.p()&&d()}})(...r))}})();return n.addEventListener("scroll",_),n.addEventListener("wheel",h,{passive:!0}),()=>{n.removeEventListener("scroll",_),n.removeEventListener("wheel",h),d.q()}},L:d,j(t){t=o(t,0),h(e.C(t),(()=>t))},A(t,r){t=o(n(t,r-1),0),h(t,(()=>e.m(t)))},F:(t,r)=>{const n=e.k();if(2===n){const e=f(t);e&&_(e,!0)}else if(3===n){const n=e.v();if(0===n);else{const o=f(t);if(e.I()-(n+e.p()+o)<=0)o&&_(n+o);else{const e=t.reduce(((e,[t,n])=>(n<r&&(e+=t),e)),0);e&&_(e,!0)}}}}}},z="current",I=e=>{const r=t.useRef();return r[z]||(r[z]=e())},b=e=>{const r=t.useRef(e);return w((()=>{r[z]=e}),[e]),r},x=t.memo((({P:r,U:n,B:o,V:i,G:l})=>{const s=t.useRef(null),c=S(o.W,(()=>o.m(i))),u=S(o.W,(()=>o.h(i)));return w((()=>n.K(s[z],i)),[i]),e.jsx(l,{ref:s,style:t.useMemo((()=>{const e=o.T(),t=o.M()?"right":"left",r={margin:0,padding:0,position:"absolute",[e?"height":"width"]:"100%",[e?"top":t]:0,[e?t:"top"]:c,visibility:u?"hidden":"visible"};return e&&(r.display="flex"),r}),[c,u]),children:r})})),y=t.forwardRef((({children:r,scrollSize:n,scrolling:o,horizontal:i,attrs:l},s)=>e.jsx("div",{ref:s,...l,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:i?n:"100%",height:i?"100%":n,pointerEvents:o?"none":"auto"})),[n,o]),children:r})}))),R=({P:r,N:n,B:o,G:i,X:l,Y:s})=>{const c=S(o.W,o.I),u=o.T();return e.jsx(i,{ref:n,scrollSize:c,scrolling:l,horizontal:u,attrs:t.useMemo((()=>({...s,style:{overflow:u?"auto hidden":"hidden auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...s.style}})),[s]),children:r})},T=t.forwardRef((({children:r,itemSize:i=40,overscan:s=4,initialItemCount:u,horizontal:d,rtl:a,element:_=y,itemElement:h="div",onScroll:f,onScrollStop:g,onRangeChange:v,...T},M)=>{const C=t.useMemo((()=>{const e=[];return t.Children.forEach(r,(t=>{(e=>!l(e)||"boolean"==typeof e)(t)||e.push(t)})),e}),[r]),O=C.length,W=b(f),H=b(g),[k,D]=t.useState(new Set),[E,J]=t.useState(!1),[$,q,L]=I((()=>{const e=m(O,i,!!d,!!a,u,(e=>{J(e),e||(D(new Set),H[z]&&H[z]())}),(e=>{W[z]&&W[z](e)})),t=(e=>{let t,r=!1;const n=e.T()?"width":"height",o=new WeakMap,i=c((()=>new ResizeObserver((i=>{const s=[];for(const{target:r,contentRect:c}of i)if(r===t)e.H(2,c[n]);else{const e=o.get(r);l(e)&&s.push([e,c[n]])}s.length&&(e.H(1,s),r=!0)}))));return{Z(e){t=e;const r=i();return r.observe(e),()=>{r.disconnect()}},K(e,t){const r=i();return o.set(e,t),r.observe(e),()=>{o.delete(e),r.unobserve(e)}},ee(){const e=r;return r=!1,e}}})(e);return[e,t,p(e,t.ee)]}));$.J(O);const[j,A]=S($.W,$._),F=S($.W,$.R),P=t.useRef(null);w((()=>{const e=P[z],t=q.Z(e),r=L.$(e);return()=>{t(),r()}}),[]),w((()=>{F.length&&L.F(F,j)}),[F]),t.useEffect((()=>{v&&v({start:j,end:A,count:O})}),[j,A]),t.useImperativeHandle(M,(()=>({get scrollOffset(){return $.v()},get scrollSize(){return L.L()},get viewportSize(){return $.p()},scrollToIndex(e){L.A(e,O)},scrollTo:L.j,scrollBy(e){L.j($.v()+e)}})),[O]);const U=o(j-s,0),B=n(A+s,O-1),V=t.useMemo((()=>{const t=[];for(let e=U;e<=B;e++)k.add(e);return k.forEach((r=>{const n=C[r];l(n)&&t.push(e.jsx(x,{U:q,B:$,V:r,G:h,P:n},(null==n?void 0:n.key)||r))})),t}),[C,k,U,B]);return e.jsx(R,{N:P,B:$,G:_,X:E,P:V,Y:T})})),M=(e,t)=>`${e}-${t}`,C=t.memo((({P:r,U:n,te:o,re:i,ne:l,oe:s,G:c})=>{const u=t.useRef(null),d=S(o.W,(()=>o.m(l))),a=S(i.W,(()=>i.m(s))),_=S(o.W,(()=>o.h(l))),h=S(i.W,(()=>i.h(s))),f=S(o.W,(()=>o.S(l))),g=S(i.W,(()=>i.S(s)));return w((()=>n.K(u[z],l,s)),[s,l]),e.jsx(c,{ref:u,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:d,[o.M()?"right":"left"]:a,visibility:_||h?"hidden":"visible",minHeight:f,minWidth:g})),[d,a,g,f,_,h]),children:r})})),O=t.forwardRef((({children:r,scrollWidth:n,scrollHeight:o,scrolling:i,attrs:l},s)=>e.jsx("div",{ref:s,...l,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:n,height:o,pointerEvents:i?"none":"auto"})),[n,o,i]),children:r})}))),W=({P:r,N:n,ie:o,le:i,G:l,X:s,Y:c})=>{const u=S(o.W,o.I),d=S(i.W,i.I);return e.jsx(l,{ref:n,scrollWidth:d,scrollHeight:u,scrolling:s,attrs:t.useMemo((()=>({...c,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...c.style}})),[c]),children:r})},H=t.forwardRef((({children:r,row:i,col:l,cellHeight:s=40,cellWidth:u=100,overscan:d=2,initialRowCount:a,initialColCount:_,rtl:h,element:f=O,cellElement:g="div",...v})=>{const[b,x]=t.useState(!1),[y,R]=t.useState(!1),[T,H,k,D,E]=I((()=>{const e=()=>{},t=m(i,s,!1,!!h,a,x,e),r=m(l,u,!0,!!h,_,R,e),n=((e,t)=>{let r,n=!1,i=!1;const l="height",s="width",u=new WeakMap,d=new Set,a=new Set,_=new Map,h=(e,t)=>`${e}-${t}`,f=c((()=>new ResizeObserver((c=>{const f=new Set,g=new Set;for(const{target:n,contentRect:o}of c)if(n===r)e.H(2,o[l]),t.H(2,o[s]);else{const e=u.get(n);if(e){const[t,r]=e,n=h(t,r),i=_.get(n),c=[o[l],o[s]];let u,d;i?(i[0]!==c[0]&&(u=!0),i[1]!==c[1]&&(d=!0)):u=d=!0,u&&f.add(t),d&&g.add(r),(u||d)&&_.set(n,c)}}if(f.size){const t=[];f.forEach((e=>{let r=0;a.forEach((t=>{const n=_.get(h(e,t));n&&(r=o(r,n[0]))})),r&&t.push([e,r])})),e.H(1,t),n=!0}if(g.size){const e=[];g.forEach((t=>{let r=0;d.forEach((e=>{const n=_.get(h(e,t));n&&(r=o(r,n[1]))})),r&&e.push([t,r])})),t.H(1,e),i=!0}}))));return{Z(e){r=e;const t=f();return t.observe(e),()=>{t.disconnect()}},K(e,t,r){const n=f();return u.set(e,[t,r]),d.add(t),a.add(r),n.observe(e),()=>{u.delete(e),n.unobserve(e)}},ee(e){const t=e?i:n;return e?i=!1:n=!1,t}}})(t,r);return[t,r,n,p(t,(()=>n.ee())),p(r,(()=>n.ee(!0)))]}));T.J(i),H.J(l);const[J,$]=S(T.W,T._),[q,L]=S(H.W,H._),j=S(T.W,T.R),A=S(H.W,H.R),F=t.useRef(null);w((()=>{const e=F[z],t=k.Z(e),r=D.$(e),n=E.$(e);return()=>{t(),r(),n()}}),[]),w((()=>{j.length&&D.F(j,J)}),[j]),w((()=>{A.length&&E.F(A,q)}),[A]);const P=t.useMemo((()=>{const e=new Map;return(t,n)=>{let o=e.get(M(t,n));return o||e.set(M(t,n),o=r({rowIndex:t,colIndex:n})),o}}),[r]),U=o(J-d,0),B=n($+d,i-1),V=o(q-d,0),G=n(L+d,l-1),K=t.useMemo((()=>{const t=[];for(let r=U;r<=B;r++)for(let n=V;n<=G;n++)t.push(e.jsx(C,{U:k,te:T,re:H,ne:r,oe:n,G:g,P:P(r,n)},M(r,n)));return t}),[P,U,B,V,G]);return e.jsx(W,{N:F,ie:T,le:H,G:f,X:b||y,P:K,Y:v})}));exports.VGrid=H,exports.VList=T;
+"use client";
+var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom");const n=Math.min,o=Math.max,i=Math.abs,l=Date.now,s=e=>null!=e,c=(e,t)=>Array.from({length:e},((e,r)=>t(r))),u=e=>{let t,r;return(...n)=>(t||(t=!0,r=e(...n)),r)},_=(e,t)=>{const r=e.t[t];return-1===r?e.o:r},a=(e,t,r)=>{if(!e.i)return 0;if(e.l>=t)return r?e.u[t]+_(e,t):e.u[t];let n=e.l,o=e.u[n];for(;n<=t&&(e.u[n]=o,n!==t||r);)o+=_(e,n),n++;return e.l=t,o},d=(e,t)=>a(e,t),h=(e,t,r)=>{let i=0;if(r>=0)for(;t<e.i-1;){const n=_(e,t++);if((i+=n)>=r){i-n/2>=r&&t--;break}}else for(;t>0;){const n=_(e,--t);if((i-=n)<=r){i+n/2<r&&t++;break}}return n(o(t,0),e.i-1)},f=(e,t,r,n)=>h(e,r,t-n),g=h,m=(e,t,r)=>({o:t,i:e,l:r?n(r.l,e-1):0,t:c(e,(e=>{const t=r&&r.t[e];return s(t)?t:-1})),u:c(e,(e=>{if(0===e)return 0;const t=r&&r.u[e];return s(t)?t:-1}))}),w=(e,t,r=0,l,s,c)=>{let u,h=t*o(r-1,0),w=0,S=[],v=m(e,t),p=0,z=[0,r];const I=new Set,b=()=>(e=>a(e,e.i-1,!0))(v);return{_(){const[e,t]=z,r=d(v,e),n=f(v,w,e,r),o=g(v,n,h);return e===n&&t===o?z:z=[n,o]},h:e=>-1===v.t[e],g:e=>((e,t,r)=>{for(let n=t;n<=r;n++)if(-1===e.t[n])return!0;return!1})(v,e,g(v,e,h)),m(e){const t=d(v,e);return l?t+o(0,h-b()):t},S:e=>_(v,e),v:()=>w,p:()=>h,I:()=>b(),R:()=>o(b(),h),T:()=>S,M:e=>f(v,e,0,0),O:()=>(u&&u[1](),new Promise(((e,t)=>{u=[()=>{Promise.resolve().then((()=>{e(),u=void 0}))},t]}))),C:e=>(I.add(e),()=>{I.delete(e)}),H(e,t){let r;const o=(()=>{switch(e){case 1:{const e=t.filter((([e,t])=>v.t[e]!==t));return!!e.length&&(S=[],e.forEach((([e,t])=>{S.push([t-_(v,e),e]),((e,t,r)=>{e.t[t]=r,e.l=n(t,e.l)})(v,e,t)})),r=!0,!0)}case 2:return h!==t&&(h=t,!0);case 3:case 4:{const n=w,o=(w=t)!==n;return o&&3===e&&(r=i(n-t)>h),o}}})();o&&(I.forEach((e=>{e(r)})),3===e?c(w):u&&1===e&&u[0]())},D:()=>p,k(e){const t=p;p=e,0===p?s(!1):0!==t||1!==p&&2!==p||s(!0)},J(e){v.i!==e&&(v=m(e,t,v))}}},S="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,v="current",p=e=>{const r=t.useRef(e);return S((()=>{r[v]=e}),[e]),r},z=(e,n,o)=>{const[i,l]=t.useState(n),s=p(n);if(t.useLayoutEffect((()=>{const t=()=>{l((()=>s[v]()))};return e.C((e=>{e?r.flushSync(t):t()}))}),[]),o){const e=n();i!==e&&l(e)}return i},I=u((e=>{const t="scrollLeft",r=e[t];e[t]=1;const n=e[t]<1;return e[t]=r,n})),b=(e,t,r,i)=>{let c;const u=t?"scrollLeft":"scrollTop",_=()=>c?t?c.scrollWidth:c.scrollHeight:0,a=(t,r)=>I(c)||r?-t:e.I()-e.p()-t,d=(n,o)=>{c&&(t&&r&&(n=a(n,o)),o?c[u]+=n:(c[u]=n,e.k(3)))},h=async(t,r)=>{const n=()=>{let t=r();const n=_(),o=e.p();return n-(t+o)<=0&&(t=n-o),t};if(e.g(t)){do{e.H(4,n());try{await e.O()}catch(e){return}}while(e.g(t));d(n())}else{const t=n();d(t),e.H(4,t)}},f=e=>e.reduce(((e,[t])=>e+t),0);return{W(n){c=n;const o=()=>{let o=n[u];t&&r&&(o=a(o));const l=e.v();if(l===o)return;const s=e.D(),c=i();0!==s&&c||3===s||e.k(l>o?2:1),e.H(3,o)},_=(()=>{let t;const r=()=>{s(t)&&clearTimeout(t)},n=()=>{r(),t=setTimeout((()=>{t=null,o(),e.k(0)}),150)};return n.$=r,n})(),d=()=>{o(),_()},h=(()=>{let r=l()-50;return(...n)=>{const o=l();r+50<o&&(r=o,(r=>{if(0!==e.D()&&!r.ctrlKey&&(t?r.deltaX:r.deltaY)){const t=e.v();t>0&&t<e.I()-e.p()&&_()}})(...n))}})();return n.addEventListener("scroll",d),n.addEventListener("wheel",h,{passive:!0}),()=>{n.removeEventListener("scroll",d),n.removeEventListener("wheel",h),_.$()}},q:_,L(t){t=o(t,0),h(e.M(t),(()=>t))},A(t,r){t=o(n(t,r-1),0),h(t,(()=>e.m(t)))},B:(t,r)=>{const n=e.D();if(2===n){const e=f(t);e&&d(e,!0)}else if(3===n){const n=e.v();if(0===n);else{const o=f(t);if(e.I()-(n+e.p()+o)<=0)o&&d(n+o);else{const e=t.reduce(((e,[t,n])=>(n<r&&(e+=t),e)),0);e&&d(e,!0)}}}}}},x=e=>{const r=t.useRef();return r[v]||(r[v]=e())},R=t.forwardRef((({children:r,attrs:n,width:o,height:i,scrolling:l},s)=>e.jsx("div",{ref:s,...n,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=o?o:"100%",height:null!=i?i:"100%",pointerEvents:l?"none":"auto"})),[o,i,l]),children:r})}))),y=t.memo((({F:r,P:n,U:o,j:i,V:l,G:s,K:c})=>{const u=t.useRef(null),_=z(o,(()=>o.m(i)),!0),a=z(o,(()=>o.h(i)),!0);return S((()=>n.N(u[v],i)),[i]),e.jsx(l,{ref:u,style:t.useMemo((()=>{const e=c?"right":"left",t={margin:0,padding:0,position:"absolute",[s?"height":"width"]:"100%",[s?"top":e]:0,[s?e:"top"]:_,visibility:a?"hidden":"visible"};return s&&(t.display="flex"),t}),[_,a]),children:r})})),T=({F:r,X:n,U:o,V:i,Y:l,Z:s,G:c})=>{const u=z(o,o.I);return e.jsx(i,{ref:n,width:c?u:void 0,height:c?void 0:u,scrolling:l,attrs:t.useMemo((()=>({...s,style:{overflow:c?"auto hidden":"hidden auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...s.style}})),[s]),children:r})},M=t.forwardRef((({children:r,itemSize:i=40,overscan:l=4,initialItemCount:c,horizontal:_,mode:a,element:d=R,itemElement:h="div",onScroll:f,onScrollStop:g,onRangeChange:m,...I},M)=>{const O=t.useMemo((()=>{const e=[];return t.Children.forEach(r,(t=>{(e=>!s(e)||"boolean"==typeof e)(t)||e.push(t)})),e}),[r]),C=O.length,H=p(f),D=p(g),[k,J]=t.useState(!1),[W,$,q,E,L]=x((()=>{const e=!!_,t="rtl"===a,r=w(C,i,c,"reverse"===a,(e=>{J(e),e||D[v]&&D[v]()}),(e=>{H[v]&&H[v](e)})),n=((e,t)=>{let r,n=!1;const o=t?"width":"height",i=new WeakMap,l=u((()=>new ResizeObserver((t=>{const l=[];for(const{target:n,contentRect:c}of t)if(n===r)e.H(2,c[o]);else{const e=i.get(n);s(e)&&l.push([e,c[o]])}l.length&&(e.H(1,l),n=!0)}))));return{ee(e){r=e;const t=l();return t.observe(e),()=>{t.disconnect()}},N(e,t){const r=l();return i.set(e,t),r.observe(e),()=>{i.delete(e),r.unobserve(e)}},te(){const e=n;return n=!1,e}}})(r,e);return[r,n,b(r,e,t,n.te),e,t]}));W.J(C);const[A,B]=z(W,W._),F=z(W,W.T),P=t.useRef(null);S((()=>{const e=P[v],t=$.ee(e),r=q.W(e);return()=>{t(),r()}}),[]),S((()=>{F.length&&q.B(F,A)}),[F]),t.useEffect((()=>{m&&m({start:A,end:B,count:C})}),[A,B]),t.useImperativeHandle(M,(()=>({get scrollOffset(){return W.v()},get scrollSize(){return q.q()},get viewportSize(){return W.p()},scrollToIndex(e){q.A(e,C)},scrollTo:q.L,scrollBy(e){q.L(W.v()+e)}})),[C]);const U=o(A-l,0),j=n(B+l,C-1),V=t.useMemo((()=>{const t=[];for(let r=U;r<=j;r++){const n=O[r];s(n)&&t.push(e.jsx(y,{P:$,U:W,j:r,V:h,F:n,G:E,K:L},(null==n?void 0:n.key)||r))}return t}),[O,U,j]);return e.jsx(T,{X:P,U:W,V:d,Y:k,F:V,Z:I,G:E})})),O=(e,t)=>`${e}-${t}`,C=t.memo((({F:r,P:n,re:o,ne:i,oe:l,ie:s,V:c,K:u})=>{const _=t.useRef(null),a=z(o,(()=>o.m(l)),!0),d=z(i,(()=>i.m(s)),!0),h=z(o,(()=>o.h(l)),!0),f=z(i,(()=>i.h(s)),!0),g=z(o,(()=>o.S(l)),!0),m=z(i,(()=>i.S(s)),!0);return S((()=>n.N(_[v],l,s)),[s,l]),e.jsx(c,{ref:_,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:a,[u?"right":"left"]:d,visibility:h||f?"hidden":"visible",minHeight:g,minWidth:m})),[a,d,m,g,h,f]),children:r})})),H=({F:r,X:n,le:o,se:i,V:l,Y:s,Z:c})=>{const u=z(o,o.I),_=z(i,i.I);return e.jsx(l,{ref:n,width:_,height:u,scrolling:s,attrs:t.useMemo((()=>({...c,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...c.style}})),[c]),children:r})},D=t.forwardRef((({children:r,row:i,col:l,cellHeight:s=40,cellWidth:c=100,overscan:_=2,initialRowCount:a,initialColCount:d,rtl:h,element:f=R,cellElement:g="div",...m},p)=>{const[I,y]=t.useState(!1),[T,M]=t.useState(!1),[D,k,J,W,$,q]=x((()=>{const e=!!h,t=()=>{},r=w(i,s,a,!1,y,t),n=w(l,c,d,!1,M,t),_=((e,t)=>{let r,n=!1,i=!1;const l="height",s="width",c=new WeakMap,_=new Set,a=new Set,d=new Map,h=(e,t)=>`${e}-${t}`,f=u((()=>new ResizeObserver((u=>{const f=new Set,g=new Set;for(const{target:n,contentRect:o}of u)if(n===r)e.H(2,o[l]),t.H(2,o[s]);else{const e=c.get(n);if(e){const[t,r]=e,n=h(t,r),i=d.get(n),c=[o[l],o[s]];let u,_;i?(i[0]!==c[0]&&(u=!0),i[1]!==c[1]&&(_=!0)):u=_=!0,u&&f.add(t),_&&g.add(r),(u||_)&&d.set(n,c)}}if(f.size){const t=[];f.forEach((e=>{let r=0;a.forEach((t=>{const n=d.get(h(e,t));n&&(r=o(r,n[0]))})),r&&t.push([e,r])})),e.H(1,t),n=!0}if(g.size){const e=[];g.forEach((t=>{let r=0;_.forEach((e=>{const n=d.get(h(e,t));n&&(r=o(r,n[1]))})),r&&e.push([t,r])})),t.H(1,e),i=!0}}))));return{ee(e){r=e;const t=f();return t.observe(e),()=>{t.disconnect()}},N(e,t,r){const n=f();return c.set(e,[t,r]),_.add(t),a.add(r),n.observe(e),()=>{c.delete(e),n.unobserve(e)}},te(e){const t=e?i:n;return e?i=!1:n=!1,t}}})(r,n);return[r,n,_,b(r,!1,e,(()=>_.te())),b(n,!0,e,(()=>_.te(!0))),e]}));D.J(i),k.J(l);const[E,L]=z(D,D._),[A,B]=z(k,k._),F=z(D,D.T),P=z(k,k.T),U=t.useRef(null);S((()=>{const e=U[v],t=J.ee(e),r=W.W(e),n=$.W(e);return()=>{t(),r(),n()}}),[]),S((()=>{F.length&&W.B(F,E)}),[F]),S((()=>{P.length&&$.B(P,A)}),[P]),t.useImperativeHandle(p,(()=>({get scrollOffset(){return[k.v(),D.v()]},get scrollSize(){return[$.q(),W.q()]},get viewportSize(){return[k.p(),D.p()]},scrollToIndex(e,t){$.A(e,l),W.A(t,i)},scrollTo(e,t){$.L(e),W.L(t)},scrollBy(e,t){$.L(k.v()+e),W.L(D.v()+t)}})),[i,l]);const j=t.useMemo((()=>{const e=new Map;return(t,n)=>{let o=e.get(O(t,n));return o||e.set(O(t,n),o=r({rowIndex:t,colIndex:n})),o}}),[r]),V=o(E-_,0),G=n(L+_,i-1),K=o(A-_,0),N=n(B+_,l-1),Q=t.useMemo((()=>{const t=[];for(let r=V;r<=G;r++)for(let n=K;n<=N;n++)t.push(e.jsx(C,{P:J,re:D,ne:k,oe:r,ie:n,V:g,F:j(r,n),K:q},O(r,n)));return t}),[j,V,G,K,N]);return e.jsx(H,{X:U,le:D,se:k,V:f,Y:I||T,F:Q,Z:m})}));exports.VGrid=D,exports.VList=M;
 //# sourceMappingURL=index.js.map