virtua 0.4.5 → 0.5.0

package/README.md

@@ -139,7 +139,7 @@ export const App = () => {
 
 ### React Server Components (RSC) support
 
-This library is marked as a Client Component. You can render RSC as children of VList.
+This library is marked as a Client Component. You can render RSC as children of VList or WVList.
 
 ```tsx
 // page.tsx in App Router of Next.js
@@ -169,13 +169,6 @@ And see [examples](./stories) for more usages.
 
 ## Comparison
 
-### Benchmarks
-
-WIP
-
-Basically by design, this library uses children instead of render prop like other virtual scrollers.
-It reduces rerender during scrolling with [caching element instances](https://github.com/facebook/react/issues/8669#issuecomment-270032204). However it may make component's mount slower if you display million items.
-
 ### Features
 
 |                                                    | [virtua](https://github.com/inokawa/virtua)              | [react-virtuoso](https://github.com/petyosi/react-virtuoso)       | [react-window](https://github.com/bvaughn/react-window)                                            | [react-virtualized](https://github.com/bvaughn/react-virtualized)                                                                                                      | [@tanstack/react-virtual](https://github.com/TanStack/virtual)            | [react-cool-virtual](https://github.com/wellyshen/react-cool-virtual) |
@@ -203,6 +196,13 @@ It reduces rerender during scrolling with [caching element instances](https://gi
 - 🟠 - Supported but partial, limited or requires some user custom code
 - ❌ - Not officially supported
 
+### Benchmarks
+
+WIP
+
+Basically by design, this library uses children instead of render prop like other virtual scrollers.
+It reduces rerender during scrolling with [caching element instances](https://github.com/facebook/react/issues/8669#issuecomment-270032204). However it may make component's mount slower if you display million items.
+
 ## Contribute
 
 All contributions are welcome.

package/lib/core/cache.d.ts

@@ -16,4 +16,5 @@ export declare const findStartIndexWithOffset: (cache: Cache, offset: number, pr
 export { findIndex as findEndIndex };
 export declare const hasUnmeasuredItemsInRange: (cache: Cache, startIndex: number, endIndex: number) => boolean;
 export declare const estimateDefaultItemSize: (cache: Writeable<Cache>) => void;
-export declare const resetCache: (length: number, itemSize: number, cache?: Cache) => Cache;
+export declare const initCache: (length: number, itemSize: number) => Cache;
+export declare const updateCache: (cache: Writeable<Cache>, length: number) => void;

package/lib/core/store.d.ts

@@ -5,18 +5,19 @@ type ItemsRange = Readonly<[startIndex: number, endIndex: number]>;
 export declare const SCROLL_IDLE = 0;
 export declare const SCROLL_DOWN = 1;
 export declare const SCROLL_UP = 2;
-export declare const SCROLL_MANUAL = 3;
-type ScrollDirection = typeof SCROLL_IDLE | typeof SCROLL_DOWN | typeof SCROLL_UP | typeof SCROLL_MANUAL;
 export declare const ACTION_ITEM_RESIZE = 1;
 export declare const ACTION_WINDOW_RESIZE = 2;
 export declare const ACTION_SCROLL = 3;
-export declare const ACTION_MANUAL_SCROLL = 4;
+export declare const ACTION_BEFORE_MANUAL_SCROLL = 4;
 export declare const ACTION_SCROLL_END = 5;
-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: typeof ACTION_SCROLL_END, isManual: boolean];
+export declare const ACTION_MANUAL_SCROLL = 6;
+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_BEFORE_MANUAL_SCROLL, offset: number] | [type: typeof ACTION_SCROLL_END, dummy?: void] | [type: typeof ACTION_MANUAL_SCROLL, dummy?: void];
 type Subscriber = (sync?: boolean) => void;
 export declare const UPDATE_SCROLL = 1;
 export declare const UPDATE_SIZE = 2;
 export declare const UPDATE_JUMP = 4;
+export declare const UPDATE_IS_SCROLLING = 8;
+export declare const UPDATE_SCROLL_WITH_EVENT = 16;
 export type VirtualStore = {
     _getCache(): CacheSnapshot;
     _getRange(): ItemsRange;
@@ -31,12 +32,12 @@ export type VirtualStore = {
     _getScrollSize(): number;
     _getCorrectedScrollSize(): number;
     _getJumpCount(): number;
-    _flushJump(): ScrollJump | undefined;
+    _flushJump(): ScrollJump;
     _getItemIndexForScrollTo(offset: number): number;
     _subscribe(target: number, cb: Subscriber): () => void;
     _update(...action: Actions): void;
-    _getScrollDirection(): ScrollDirection;
+    _getIsScrolling(): boolean;
     _updateCacheLength(length: number): void;
 };
-export declare const createVirtualStore: (elementsCount: number, itemSize: number | undefined, initialItemCount: number | undefined, isReverse: boolean, onScrollStateChange: (scrolling: boolean) => void, cacheSnapshot?: CacheSnapshot, onScrollOffsetChange?: ((offset: number) => void) | undefined) => VirtualStore;
+export declare const createVirtualStore: (elementsCount: number, itemSize: number | undefined, initialItemCount: number | undefined, isReverse: boolean, cacheSnapshot?: CacheSnapshot) => VirtualStore;
 export {};

package/lib/core/types.d.ts

@@ -8,7 +8,7 @@ declare const cacheSymbol: unique symbol;
 /**
  * Serializable cache snapshot.
  *
- * **This is not intended to be modified by users. And it is not guaranteed to work if you pass it to the different version ot this package.**
+ * **This is not intended to be modified by users. And it is not guaranteed to work if you pass it to the different version of this package.**
  */
 export interface CacheSnapshot {
     [cacheSymbol]: never;

package/lib/index.js

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