virtua 0.16.1 → 0.16.2

package/README.md

@@ -193,6 +193,8 @@ return (
 
 And if you want to pass the state to the items, using `context` instead of props may be better because it doesn't break the useMemo.
 
+Decreasing `overscan` prop may also improve perf in case that components are large and heavy.
+
 #### What is `ResizeObserver loop completed with undelivered notifications.` error?
 
 It may be dispatched by ResizeObserver in this lib [as described in spec](https://www.w3.org/TR/resize-observer/#deliver-resize-error). If it bothers you,

package/lib/core/scroller.d.ts

@@ -1,7 +1,7 @@
 import { ScrollJump, VirtualStore } from "./store";
 import { ScrollToIndexOpts } from "./types";
 export type Scroller = {
-    _initRoot: (rootElement: HTMLElement) => () => void;
+    _observe: (rootElement: HTMLElement) => () => void;
     _scrollTo: (offset: number) => void;
     _scrollBy: (offset: number) => void;
     _scrollToIndex: (index: number, opts?: ScrollToIndexOpts) => void;
@@ -9,7 +9,7 @@ export type Scroller = {
 };
 export declare const createScroller: (store: VirtualStore, isHorizontal: boolean) => Scroller;
 export type WindowScroller = {
-    _initRoot: (rootElement: HTMLElement) => () => void;
+    _observe: (rootElement: HTMLElement) => () => void;
     _fixScrollJump: (jump: ScrollJump) => void;
 };
 export declare const createWindowScroller: (store: VirtualStore, isHorizontal: boolean) => WindowScroller;

package/lib/core/store.d.ts

@@ -36,7 +36,7 @@ export type VirtualStore = {
     _getScrollDirection(): ScrollDirection;
     _getViewportSize(): number;
     _getViewportPaddingStart(): number;
-    _getCorrectedScrollSize(): number;
+    _getTotalSize(): number;
     _getJumpCount(): number;
     _flushJump(): ScrollJump;
     _subscribe(target: number, cb: Subscriber): () => void;

package/lib/index.js

@@ -1,3 +1,3 @@
 "use client";
-var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const o=Math.min,r=Math.max,i=Math.abs,s=Date.now,l=Object.values,c=Array.isArray,a=setTimeout,u=(e,t,n)=>o(n,r(t,e)),h=e=>null!=e,d=(e,t)=>{let n;const o=()=>{h(n)&&clearTimeout(n)},r=()=>{o(),n=a((()=>{n=null,e()}),t)};return r.t=o,r},f=e=>{let t,n;return(...o)=>(t||(t=!0,n=e(...o)),n)},_=e=>getComputedStyle(e),w=e=>e?parseFloat(e):0,g=-1,p=(e,t)=>{const n=e.o[t];return n===g?e.i:n},m=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,o=e.h[n];for(;n<t;)o+=p(e,n),e.h[++n]=o;return e.u=t,o},v=(e,t,n)=>{let o=m(e,n);for(;n>=0&&n<e.l;)if(o<=t){const r=p(e,n);if(o+r>t)break;o+=r,n++}else o-=p(e,--n);return u(n,0,e.l-1)},b=(e,t,n,r)=>{const i=v(e,t,o(n,e.l-1));return[i,v(e,t+r,i)]},S=(e,t,n)=>{const o=n?"unshift":"push";for(let n=e.l;n<t;n++)e.o[o](g),e.h.push(0===n?0:g);e.l=t},z=(e,t,n)=>{const o=t-e.l,r=o<0;let i;return r?(i=(n?e.o.splice(0,-o):e.o.splice(o)).reduce(((t,n)=>t+(n===g?e.i:n)),0),e.h.splice(o)):(i=e.i*o,S(e,e.l+o,n)),e.u=n?0:u(t-1,0,e.u),e.l=t,[i,r]},I="undefined"!=typeof window,y=()=>document.documentElement,x=/*#__PURE__*/f((e=>{const t="scrollLeft",n=e[t];e[t]=1;const o=e[t]<1;return e[t]=n,o})),R=/*#__PURE__*/f((()=>!!I&&"rtl"===_(y()).direction)),k=/*#__PURE__*/f((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),C=/*#__PURE__*/f((()=>"scrollBehavior"in y().style)),O=(e,t,n)=>t.reduce(((t,[o,r])=>{const i=r-p(e,o);return(!n||i>0)&&(t+=i),t}),0),T=(e,t=40,n=0,s=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return S(n,e),n})(e,t),l,c)=>{let a=t*r(n-1,0),h=0,d=0,f=0,_=0,w=0,v=0,I=0,y=!1,x=null,R=!1,C=[0,n];const T=new Set,M=()=>(e=>e.l?m(e,e.l-1)+p(e,e.l-1):0)(s),H=()=>M()-a+h+d,J=e=>u(e,0,H()),W=e=>{k()&&0!==I?v+=e:(w+=e,_++)},B=e=>{const t=I;return I=e,I!==t};return{_:()=>JSON.parse(JSON.stringify(s)),g:()=>x?[o(C[0],x[0]),r(C[1],x[1])]:C=b(s,f+v,C[0],a),p:e=>s.o[e]===g,m:()=>!!x&&s.o.slice(r(0,x[0]-1),o(s.l-1,x[1]+1)+1).includes(g),v(e){const t=m(s,e)-v;return l?t+r(0,a-M()):t},S:e=>p(s,e),I:()=>s.l,R:()=>f,k:H,C:()=>I,O:()=>a,T:()=>h,M:()=>r(M(),a),H:()=>_,J(){const e=w;return w=0,e},W(e,t){const n=[e,t];return T.add(n),()=>{T.delete(n)}},B(e,t){let n,r,l=0;switch(e){case 1:{const e=t.filter((([e,t])=>s.o[e]!==t));if(!e.length)break;let n=0;if(0===f);else if(f>H()-1.5)n=O(s,e,!0);else{const[t]=C;n=O(s,e.filter((([e])=>e<t)))}n&&W(n);let i=!1;e.forEach((([e,t])=>{((e,t,n)=>{const r=e.o[t]===g;return e.o[t]=n,e.u=o(t,e.u),r})(s,e,t)&&(i=!0)})),c&&i&&!f&&(e=>{const t=e.o.filter((e=>e!==g)),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)})(s),l+=2,R=r=!0;break}case 2:{const e=t[0]+t[1]+t[2];a!==e&&(a=e,h=t[1],d=t[2],l=2);break}case 3:if(t[1]){const e=H()-f,[n,r]=z(s,t[0],!0),i=r?-o(n,e):n;W(i),k()||(f=J(f+i)),l=1}else z(s,t[0]);break;case 4:{if(t===f)break;const e=t-f,n=R;R=!1,0!==I&&n||y||B(e<0?2:1),r=i(e)>a,l+=4,f=J(t),l+=1;break}case 5:B(0)&&(n=!0,l=1),y=!1,x=null;break;case 6:y=!0;break;case 7:x=b(s,t,C[0],a),l=1}l&&(n&&v&&(R=!0,w+=v,v=0,_++),T.forEach((([e,t])=>{l&e&&t(r)})))}}},M=I?t.useLayoutEffect:t.useEffect,H=(e,t,n)=>(()=>{let o=s()-50;return(...r)=>{const i=s();o+50<i&&(o=i,(o=>{if(0!==e.C()&&!o.ctrlKey&&(t?o.deltaX:o.deltaY)){const t=e.R();t>0&&t<e.k()&&n()}})(...r))}})(),J=(e,t,n,o)=>x(e)||o?-n:t.k()-n,W=(e,t)=>{let n,o,r=!1;const i=t?"scrollLeft":"scrollTop",s=t?"overflowX":"overflowY",l=(o,r)=>t&&R()?J(n,e,o,r):o,c=async(r,s)=>{if(!n)return;o&&o();const c=()=>u(r(),0,e.k()),h=()=>{let t;return[new Promise(((e,n)=>{t=e,a(o=n,150)})),e.W(2,(()=>{t&&t()}))]};if(s&&C()){for(;e.B(7,c()),e.m();){const[e,t]=h();try{await e}catch(e){return}finally{t()}}n.scrollTo({[t?"left":"top"]:l(c()),behavior:"smooth"})}else for(;;){const[t,o]=h();try{n[i]=l(c()),e.B(6),await t}catch(e){return}finally{o()}}};return{L(o){n=o;let s=!1,c=!1;const a=d((()=>{s?a():(c=!1,e.B(5))}),150),u=()=>{c&&(r=!0),e.B(4,l(o[i])),a()},h=H(e,t,a),f=()=>{s=!0,c=r=!1},_=()=>{s=!1,k()&&(c=!0)};return o.addEventListener("scroll",u),o.addEventListener("wheel",h,{passive:!0}),o.addEventListener("touchstart",f,{passive:!0}),o.addEventListener("touchend",_,{passive:!0}),()=>{o.removeEventListener("scroll",u),o.removeEventListener("wheel",h),o.removeEventListener("touchstart",f),o.removeEventListener("touchend",_),a.t()}},$(e){c((()=>e))},q(t){t+=e.R(),c((()=>t))},P(t,{align:n,smooth:o}={}){if(t=u(t,0,e.I()-1),"nearest"===n){const o=e.v(t),r=e.R();if(o<r)n="start";else{if(!(o+e.S(t)>r+e.O()))return;n="end"}}c((()=>"end"===n?e.T()+e.v(t)+e.S(t)-e.O():"center"===n?e.T()+e.v(t)+(e.S(t)-e.O())/2:e.T()+e.v(t)),o)},X:e=>{if(n){if(r){r=!1;const e=n.style,t=e[s];e[s]="hidden",a((()=>{e[s]=t}))}n[i]+=l(e,!0)}}}},B=(e,t)=>{let n;const o=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop",i=(o,r)=>t&&R()?J(n,e,o,r):o;return{L(s){n=s;const l=(e,n)=>{const o=n+(t&&R()?window.innerWidth-e[r]-e.offsetWidth:e[r]),i=e.offsetParent;return e!==document.body&&i?l(i,o):o},c=d((()=>{e.B(5)}),150),a=()=>{e.B(4,i(window[o])-l(s,0)),c()},u=H(e,t,c);return window.addEventListener("scroll",a),window.addEventListener("wheel",u,{passive:!0}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("wheel",u),c.t()}},X:e=>{window.scrollBy(t?i(e,!0):0,t?0:e)}}},L="current",$={},q=(e,t)=>{if(c(e))for(const n of e)q(n,t);else h(e)&&"boolean"!=typeof e&&t.push(e)},P=e=>{const t=[];return q(e,t),t},X=(e,t,n)=>r(e-(1===n?1:r(1,t)),0),Y=(e,t,n,i)=>o(e+(2===n?1:r(1,t)),i-1),j=e=>{const n=t.useRef();return n[L]||(n[L]=e())},D=e=>{const n=t.useRef(e);return M((()=>{n[L]=e}),[e]),n},N={box:"border-box"},U=(e,t)=>{let n;const o=t?"width":"height",r=new WeakMap,i=f((()=>new ResizeObserver((i=>{const s=[];for(const{target:l,contentRect:c}of i)if(l.offsetParent)if(l===n)e.B(2,[c[o],c[t?"left":"top"],w(_(n)[t?"paddingRight":"paddingBottom"])]);else{const e=r.get(l);h(e)&&s.push([e,c[o]])}s.length&&e.B(1,s)}))));return{Y(e){n=e;const t=i();return t.observe(e,N),()=>{t.disconnect()}},j(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},V=(e,t)=>{const n=t?"width":"height",o=t?"innerWidth":"innerHeight",r=new WeakMap,i=f((()=>new ResizeObserver((t=>{const o=[];for(const{target:e,contentRect:i}of t){if(!e.offsetParent)continue;const t=r.get(e);h(t)&&o.push([t,i[n]])}o.length&&e.B(1,o)}))));return{Y(){const t=()=>{e.B(2,[window[o],0,0])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),i().disconnect()}},j(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},A=(e,t)=>{let n;const o="height",i="width",s=new WeakMap,l=new Set,c=new Set,a=new Map,u=(e,t)=>`${e}-${t}`,h=f((()=>new ResizeObserver((h=>{const d=new Set,f=new Set;for(const{target:r,contentRect:l}of h)if(r.offsetParent)if(r===n){const r=_(n);e.B(2,[l[o],l.top,w(r.paddingBottom)]),t.B(2,[l[i],l.left,w(r.paddingRight)])}else{const e=s.get(r);if(e){const[t,n]=e,r=u(t,n),s=a.get(r),c=[l[o],l[i]];let h,_;s?(s[0]!==c[0]&&(h=!0),s[1]!==c[1]&&(_=!0)):h=_=!0,h&&d.add(t),_&&f.add(n),(h||_)&&a.set(r,c)}}if(d.size){const t=[];d.forEach((e=>{let n=0;c.forEach((t=>{const o=a.get(u(e,t));o&&(n=r(n,o[0]))})),n&&t.push([e,n])})),e.B(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const o=a.get(u(e,t));o&&(n=r(n,o[1]))})),n&&e.push([t,n])})),t.B(1,e)}}))));return{Y(e){n=e;const t=h();return t.observe(e,N),()=>{t.disconnect()}},j(e,t,n){const o=h();return s.set(e,[t,n]),l.add(t),c.add(n),o.observe(e),()=>{s.delete(e),o.unobserve(e)}}}},E=t.forwardRef((({children:n,attrs:o,width:r,height:i,scrolling:s},l)=>e.jsx("div",{ref:l,...o,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=r?r:"100%",height:null!=i?i:"100%",pointerEvents:s?"none":"auto"})),[r,i,s]),children:n})}))),F=t.memo((({D:n,N:o,U:r,V:i,A:s,F:l,G:c})=>{const a=t.useRef(null);return M((()=>o.j(a[L],r)),[r]),e.jsx(l,{ref:a,style:t.useMemo((()=>{const e={margin:0,padding:0,position:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?R()?"right":"left":"top"]:i,visibility:s?"hidden":"visible"};return c&&(e.display="flex"),e}),[i,s]),children:n})})),G=()=>[],K=()=>t.useReducer(G,void 0,G)[1],Q=t.forwardRef((({children:o,overscan:r=4,initialItemSize:i,initialItemCount:s,shift:c,horizontal:a,reverse:u,cache:d,components:{Root:f=E,Item:_="div"}=$,onScroll:w,onScrollStop:g,onRangeChange:p,...m},v)=>{const b=t.useMemo((()=>P(o)),[o]),S=b.length,z=D(w),I=D(g),[y,x,R,k]=j((()=>{const e=!!a,t=T(S,i,s,d,!!u,!i);return[t,U(t,e),W(t,e),e]}));S!==y.I()&&y.B(3,[S,c]);const C=K(),[O,H]=y.g(),J=y.C(),B=y.H(),q=y.M(),N=t.useRef(null),V=0!==J;M((()=>{const e=N[L],t=y.W(3,(e=>{e?n.flushSync(C):C()})),o=y.W(4,(()=>{z[L]&&z[L](y.R())})),r=x.Y(e),i=R.L(e);return()=>{t(),o(),r(),i()}}),[]),M((()=>{const e=y.J();e&&R.X(e)}),[B]),t.useEffect((()=>{V||I[L]&&I[L]()}),[V]),t.useEffect((()=>{p&&p(O,H)}),[O,H]),t.useImperativeHandle(v,(()=>({get cache(){return y._()},get scrollOffset(){return y.R()},get scrollSize(){return y.M()},get viewportSize(){return y.O()},scrollToIndex:R.P,scrollTo:R.$,scrollBy:R.q})),[]);const A=X(O,r,J),G=Y(H,r,J,S),Q=[];for(let t=A;t<=G;t++){const n=b[t],o=n.key;Q.push(e.jsx(F,{N:x,U:t,V:y.v(t),A:y.p(t),F:_,D:n,G:k},h(o)?o:"_"+t))}return e.jsx(f,{ref:N,width:k?q:void 0,height:k?void 0:q,scrolling:V,attrs:t.useMemo((()=>({...m,style:{[k?"overflowX":"overflowY"]:"auto",display:k?"inline-block":"block",contain:"strict",width:"100%",height:"100%",...m.style}})),l(m)),children:Q})})),Z=t.forwardRef((({children:o,overscan:r=4,initialItemSize:i,initialItemCount:s,horizontal:c,cache:a,components:{Root:u=E,Item:d="div"}=$,onScrollStop:f,onRangeChange:_,...w},g)=>{const p=t.useMemo((()=>P(o)),[o]),m=p.length,v=D(f),[b,S,z,I]=j((()=>{const e=!!c,t=T(m,i,s,a,!1,!i);return[t,V(t,e),B(t,e),e]}));m!==b.I()&&b.B(3,[m]);const y=K(),[x,R]=b.g(),k=b.C(),C=b.H(),O=b.M(),H=t.useRef(null),J=0!==k;M((()=>{const e=H[L],t=b.W(3,(e=>{e?n.flushSync(y):y()})),o=S.Y(e),r=z.L(e);return()=>{t(),o(),r()}}),[]),M((()=>{const e=b.J();e&&z.X(e)}),[C]),t.useEffect((()=>{J||v[L]&&v[L]()}),[J]),t.useEffect((()=>{_&&_(x,R)}),[x,R]),t.useImperativeHandle(g,(()=>({get cache(){return b._()}})),[]);const W=X(x,r,k),q=Y(R,r,k,m),N=[];for(let t=W;t<=q;t++){const n=p[t],o=n.key;N.push(e.jsx(F,{N:S,U:t,V:b.v(t),A:b.p(t),F:d,D:n,G:I},h(o)?o:"_"+t))}return e.jsx(u,{ref:H,width:I?O:void 0,height:I?void 0:O,scrolling:J,attrs:t.useMemo((()=>({...w,style:{display:I?"inline-block":"block",width:I?"auto":"100%",height:I?"100%":"auto",...w.style}})),l(w)),children:N})})),ee=(e,t)=>`${e}-${t}`,te=t.memo((({D:n,N:o,K:r,Z:i,ee:s,te:l,ne:c,oe:a,A:u,F:h})=>{const d=t.useRef(null);return M((()=>o.j(d[L],r,i)),[i,r]),e.jsx(h,{ref:d,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:s,[R()?"right":"left"]:l,visibility:u?"hidden":"visible",minHeight:c,minWidth:a})),[s,l,a,c,u]),children:n})})),ne=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:c=100,overscan:a=2,initialRowCount:u,initialColCount:h,components:{Root:d=E,Cell:f="div"}=$,..._},w)=>{const[g,p,m,v,b]=j((()=>{const e=T(r,s,u),t=T(i,c,h);return[e,t,A(e,t),W(e,!1),W(t,!0)]}));r!==g.I()&&g.B(3,[r]),i!==p.I()&&p.B(3,[i]);const S=K(),[z,I]=g.g(),[y,x]=p.g(),R=g.C(),k=p.C(),C=g.H(),O=p.H(),H=g.M(),J=p.M(),B=t.useRef(null),q=0!==R,P=0!==k;M((()=>{const e=B[L],t=e=>{e?n.flushSync(S):S()},o=g.W(3,t),r=p.W(3,t),i=m.Y(e),s=v.L(e),l=b.L(e);return()=>{o(),r(),i(),s(),l()}}),[]),M((()=>{const e=g.J();e&&v.X(e)}),[C]),M((()=>{const e=p.J();e&&b.X(e)}),[O]),t.useImperativeHandle(w,(()=>({get scrollOffset(){return[p.R(),g.R()]},get scrollSize(){return[p.M(),g.M()]},get viewportSize(){return[p.O(),g.O()]},scrollToIndex(e,t){b.P(e),v.P(t)},scrollTo(e,t){b.$(e),v.$(t)},scrollBy(e,t){b.q(e),v.q(t)}})),[]);const D=t.useMemo((()=>{const e=new Map;return(t,n)=>{let r=e.get(ee(t,n));return r||e.set(ee(t,n),r=o({rowIndex:t,colIndex:n})),r}}),[o]),N=X(z,a,R),U=Y(I,a,R,r),V=X(y,a,k),F=Y(x,a,k,i),G=[];for(let t=N;t<=U;t++)for(let n=V;n<=F;n++)G.push(e.jsx(te,{N:m,K:t,Z:n,ee:g.v(t),te:p.v(n),ne:g.S(t),oe:p.S(n),A:g.p(t)||p.p(n),F:f,D:D(t,n)},ee(t,n)));return e.jsx(d,{ref:B,width:J,height:H,scrolling:q||P,attrs:t.useMemo((()=>({..._,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",..._.style}})),l(_)),children:G})}));exports.VList=Q,exports.WVList=Z,exports.experimental_VGrid=ne;
+var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const o=Math.min,r=Math.max,i=Math.abs,s=Date.now,l=Object.values,c=Array.isArray,a=setTimeout,u=(e,t,n)=>o(n,r(t,e)),h=e=>null!=e,d=(e,t)=>{let n;const o=()=>{h(n)&&clearTimeout(n)},r=()=>{o(),n=a((()=>{n=null,e()}),t)};return r.t=o,r},f=e=>{let t,n;return(...o)=>(t||(t=!0,n=e(...o)),n)},_=e=>getComputedStyle(e),w=e=>e?parseFloat(e):0,g=-1,p=(e,t)=>{const n=e.o[t];return n===g?e.i:n},v=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,o=e.h[n];for(;n<t;)o+=p(e,n),e.h[++n]=o;return e.u=t,o},m=(e,t,n)=>{let o=v(e,n);for(;n>=0&&n<e.l;)if(o<=t){const r=p(e,n);if(o+r>t)break;o+=r,n++}else o-=p(e,--n);return u(n,0,e.l-1)},b=(e,t,n,r)=>{const i=m(e,t,o(n,e.l-1));return[i,m(e,t+r,i)]},S=(e,t,n)=>{const o=n?"unshift":"push";for(let n=e.l;n<t;n++)e.o[o](g),e.h.push(0===n?0:g);e.l=t},z=(e,t,n)=>{const o=t-e.l,r=o<0;let i;return r?(i=(n?e.o.splice(0,-o):e.o.splice(o)).reduce(((t,n)=>t+(n===g?e.i:n)),0),e.h.splice(o)):(i=e.i*o,S(e,e.l+o,n)),e.u=n?0:u(t-1,0,e.u),e.l=t,[i,r]},I="undefined"!=typeof window,y=()=>document.documentElement,x=/*#__PURE__*/f((e=>{const t="scrollLeft",n=e[t];e[t]=1;const o=e[t]<1;return e[t]=n,o})),R=/*#__PURE__*/f((()=>!!I&&"rtl"===_(y()).direction)),k=/*#__PURE__*/f((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),O=/*#__PURE__*/f((()=>"scrollBehavior"in y().style)),C=(e,t,n)=>t.reduce(((t,[o,r])=>{const i=r-p(e,o);return(!n||i>0)&&(t+=i),t}),0),T=(e,t=40,n=0,s=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return S(n,e),n})(e,t),l,c)=>{let a=t*r(n-1,0),h=0,d=0,f=0,_=0,w=0,m=0,I=0,y=!1,x=null,R=!1,O=[0,n];const T=new Set,M=()=>(e=>e.l?v(e,e.l-1)+p(e,e.l-1):0)(s),H=()=>M()-a+h+d,J=e=>u(e,0,H()),W=e=>{k()&&0!==I?m+=e:(w+=e,_++)},B=e=>{const t=I;return I=e,I!==t};return{_:()=>JSON.parse(JSON.stringify(s)),g:()=>x?[o(O[0],x[0]),r(O[1],x[1])]:O=b(s,f+m,O[0],a),p:e=>s.o[e]===g,v:()=>!!x&&s.o.slice(r(0,x[0]-1),o(s.l-1,x[1]+1)+1).includes(g),m(e){const t=v(s,e)-m;return l?t+r(0,a-M()):t},S:e=>p(s,e),I:()=>s.l,R:()=>f,k:H,O:()=>I,C:()=>a,T:()=>h,M:()=>r(M(),a-h-d),H:()=>_,J(){const e=w;return w=0,e},W(e,t){const n=[e,t];return T.add(n),()=>{T.delete(n)}},B(e,t){let n,r,l=0;switch(e){case 1:{const e=t.filter((([e,t])=>s.o[e]!==t));if(!e.length)break;let n=0;if(0===f);else if(f>H()-1.5)n=C(s,e,!0);else{const[t]=O;n=C(s,e.filter((([e])=>e<t)))}n&&W(n);let i=!1;e.forEach((([e,t])=>{((e,t,n)=>{const r=e.o[t]===g;return e.o[t]=n,e.u=o(t,e.u),r})(s,e,t)&&(i=!0)})),c&&i&&!f&&(e=>{const t=e.o.filter((e=>e!==g)),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)})(s),l+=2,R=r=!0;break}case 2:{const e=t[0]+t[1]+t[2];a!==e&&(a=e,h=t[1],d=t[2],l=2);break}case 3:if(t[1]){const e=H()-f,[n,r]=z(s,t[0],!0),i=r?-o(n,e):n;W(i),k()||(f=J(f+i)),l=1}else z(s,t[0]);break;case 4:{if(t===f)break;const e=t-f,n=R;R=!1,0!==I&&n||y||B(e<0?2:1),r=i(e)>a,l+=4,f=J(t),l+=1;break}case 5:B(0)&&(n=!0,l=1),y=!1,x=null;break;case 6:y=!0;break;case 7:x=b(s,t,O[0],a),l=1}l&&(n&&m&&(R=!0,w+=m,m=0,_++),T.forEach((([e,t])=>{l&e&&t(r)})))}}},M=I?t.useLayoutEffect:t.useEffect,H=(e,t,n)=>(()=>{let o=s()-50;return(...r)=>{const i=s();o+50<i&&(o=i,(o=>{if(0!==e.O()&&!o.ctrlKey&&(t?o.deltaX:o.deltaY)){const t=e.R();t>0&&t<e.k()&&n()}})(...r))}})(),J=(e,t,n,o)=>x(e)||o?-n:t.k()-n,W=(e,t)=>{let n,o,r=!1;const i=t?"scrollLeft":"scrollTop",s=t?"overflowX":"overflowY",l=(o,r)=>t&&R()?J(n,e,o,r):o,c=async(r,s)=>{if(!n)return;o&&o();const c=()=>u(r(),0,e.k()),h=()=>{let t;return[new Promise(((e,n)=>{t=e,a(o=n,150)})),e.W(2,(()=>{t&&t()}))]};if(s&&O()){for(;e.B(7,c()),e.v();){const[e,t]=h();try{await e}catch(e){return}finally{t()}}n.scrollTo({[t?"left":"top"]:l(c()),behavior:"smooth"})}else for(;;){const[t,o]=h();try{n[i]=l(c()),e.B(6),await t}catch(e){return}finally{o()}}};return{L(o){n=o;let s=!1,c=!1;const a=d((()=>{s?a():(c=!1,e.B(5))}),150),u=()=>{c&&(r=!0),e.B(4,l(o[i])),a()},h=H(e,t,a),f=()=>{s=!0,c=r=!1},_=()=>{s=!1,k()&&(c=!0)};return o.addEventListener("scroll",u),o.addEventListener("wheel",h,{passive:!0}),o.addEventListener("touchstart",f,{passive:!0}),o.addEventListener("touchend",_,{passive:!0}),()=>{o.removeEventListener("scroll",u),o.removeEventListener("wheel",h),o.removeEventListener("touchstart",f),o.removeEventListener("touchend",_),a.t()}},$(e){c((()=>e))},q(t){t+=e.R(),c((()=>t))},P(t,{align:n,smooth:o}={}){if(t=u(t,0,e.I()-1),"nearest"===n){const o=e.m(t),r=e.R();if(o<r)n="start";else{if(!(o+e.S(t)>r+e.C()))return;n="end"}}c((()=>"end"===n?e.T()+e.m(t)+e.S(t)-e.C():"center"===n?e.T()+e.m(t)+(e.S(t)-e.C())/2:e.T()+e.m(t)),o)},X:e=>{if(n){if(r){r=!1;const e=n.style,t=e[s];e[s]="hidden",a((()=>{e[s]=t}))}n[i]+=l(e,!0)}}}},B=(e,t)=>{let n;const o=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop",i=(o,r)=>t&&R()?J(n,e,o,r):o;return{L(s){n=s;const l=(e,n)=>{const o=n+(t&&R()?window.innerWidth-e[r]-e.offsetWidth:e[r]),i=e.offsetParent;return e!==document.body&&i?l(i,o):o},c=d((()=>{e.B(5)}),150),a=()=>{e.B(4,i(window[o])-l(s,0)),c()},u=H(e,t,c);return window.addEventListener("scroll",a),window.addEventListener("wheel",u,{passive:!0}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("wheel",u),c.t()}},X:e=>{window.scrollBy(t?i(e,!0):0,t?0:e)}}},L="current",$={},q=(e,t)=>{if(c(e))for(const n of e)q(n,t);else h(e)&&"boolean"!=typeof e&&t.push(e)},P=e=>{const t=[];return q(e,t),t},X=(e,t,n)=>r(e-(1===n?1:r(1,t)),0),Y=(e,t,n,i)=>o(e+(2===n?1:r(1,t)),i-1),j=e=>{const n=t.useRef();return n[L]||(n[L]=e())},D=e=>{const n=t.useRef(e);return M((()=>{n[L]=e}),[e]),n},N={box:"border-box"},U=(e,t)=>{let n;const o=t?"width":"height",r=new WeakMap,i=f((()=>new ResizeObserver((i=>{const s=[];for(const{target:l,contentRect:c}of i)if(l.offsetParent)if(l===n)e.B(2,[c[o],c[t?"left":"top"],w(_(n)[t?"paddingRight":"paddingBottom"])]);else{const e=r.get(l);h(e)&&s.push([e,c[o]])}s.length&&e.B(1,s)}))));return{Y(e){n=e;const t=i();return t.observe(e,N),()=>{t.disconnect()}},j(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},V=(e,t)=>{const n=t?"width":"height",o=t?"innerWidth":"innerHeight",r=new WeakMap,i=f((()=>new ResizeObserver((t=>{const o=[];for(const{target:e,contentRect:i}of t){if(!e.offsetParent)continue;const t=r.get(e);h(t)&&o.push([t,i[n]])}o.length&&e.B(1,o)}))));return{Y(){const t=()=>{e.B(2,[window[o],0,0])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),i().disconnect()}},j(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},A=(e,t)=>{let n;const o="height",i="width",s=new WeakMap,l=new Set,c=new Set,a=new Map,u=(e,t)=>`${e}-${t}`,h=f((()=>new ResizeObserver((h=>{const d=new Set,f=new Set;for(const{target:r,contentRect:l}of h)if(r.offsetParent)if(r===n){const r=_(n);e.B(2,[l[o],l.top,w(r.paddingBottom)]),t.B(2,[l[i],l.left,w(r.paddingRight)])}else{const e=s.get(r);if(e){const[t,n]=e,r=u(t,n),s=a.get(r),c=[l[o],l[i]];let h,_;s?(s[0]!==c[0]&&(h=!0),s[1]!==c[1]&&(_=!0)):h=_=!0,h&&d.add(t),_&&f.add(n),(h||_)&&a.set(r,c)}}if(d.size){const t=[];d.forEach((e=>{let n=0;c.forEach((t=>{const o=a.get(u(e,t));o&&(n=r(n,o[0]))})),n&&t.push([e,n])})),e.B(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const o=a.get(u(e,t));o&&(n=r(n,o[1]))})),n&&e.push([t,n])})),t.B(1,e)}}))));return{Y(e){n=e;const t=h();return t.observe(e,N),()=>{t.disconnect()}},j(e,t,n){const o=h();return s.set(e,[t,n]),l.add(t),c.add(n),o.observe(e),()=>{s.delete(e),o.unobserve(e)}}}},E=t.forwardRef((({children:n,attrs:o,width:r,height:i,scrolling:s},l)=>e.jsx("div",{ref:l,...o,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=r?r:"100%",height:null!=i?i:"100%",pointerEvents:s?"none":"auto"})),[r,i,s]),children:n})}))),F=t.memo((({D:n,N:o,U:r,V:i,A:s,F:l,G:c})=>{const a=t.useRef(null);return M((()=>o.j(a[L],r)),[r]),e.jsx(l,{ref:a,style:t.useMemo((()=>{const e={margin:0,padding:0,position:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?R()?"right":"left":"top"]:i,visibility:s?"hidden":"visible"};return c&&(e.display="flex"),e}),[i,s]),children:n})})),G=()=>[],K=()=>t.useReducer(G,void 0,G)[1],Q=t.forwardRef((({children:o,overscan:r=4,initialItemSize:i,initialItemCount:s,shift:c,horizontal:a,reverse:u,cache:d,components:{Root:f=E,Item:_="div"}=$,onScroll:w,onScrollStop:g,onRangeChange:p,...v},m)=>{const b=t.useMemo((()=>P(o)),[o]),S=b.length,z=D(w),I=D(g),[y,x,R,k]=j((()=>{const e=!!a,t=T(S,i,s,d,!!u,!i);return[t,U(t,e),W(t,e),e]}));S!==y.I()&&y.B(3,[S,c]);const O=K(),[C,H]=y.g(),J=y.O(),B=y.H(),q=y.M(),N=t.useRef(null),V=0!==J;M((()=>{const e=N[L],t=y.W(3,(e=>{e?n.flushSync(O):O()})),o=y.W(4,(()=>{z[L]&&z[L](y.R())})),r=x.Y(e),i=R.L(e);return()=>{t(),o(),r(),i()}}),[]),M((()=>{const e=y.J();e&&R.X(e)}),[B]),t.useEffect((()=>{V||I[L]&&I[L]()}),[V]),t.useEffect((()=>{p&&p(C,H)}),[C,H]),t.useImperativeHandle(m,(()=>({get cache(){return y._()},get scrollOffset(){return y.R()},get scrollSize(){return y.M()},get viewportSize(){return y.C()},scrollToIndex:R.P,scrollTo:R.$,scrollBy:R.q})),[]);const A=X(C,r,J),G=Y(H,r,J,S),Q=[];for(let t=A;t<=G;t++){const n=b[t],o=n.key;Q.push(e.jsx(F,{N:x,U:t,V:y.m(t),A:y.p(t),F:_,D:n,G:k},h(o)?o:"_"+t))}return e.jsx(f,{ref:N,width:k?q:void 0,height:k?void 0:q,scrolling:V,attrs:t.useMemo((()=>({...v,style:{[k?"overflowX":"overflowY"]:"auto",display:k?"inline-block":"block",contain:"strict",width:"100%",height:"100%",...v.style}})),l(v)),children:Q})})),Z=t.forwardRef((({children:o,overscan:r=4,initialItemSize:i,initialItemCount:s,horizontal:c,cache:a,components:{Root:u=E,Item:d="div"}=$,onScrollStop:f,onRangeChange:_,...w},g)=>{const p=t.useMemo((()=>P(o)),[o]),v=p.length,m=D(f),[b,S,z,I]=j((()=>{const e=!!c,t=T(v,i,s,a,!1,!i);return[t,V(t,e),B(t,e),e]}));v!==b.I()&&b.B(3,[v]);const y=K(),[x,R]=b.g(),k=b.O(),O=b.H(),C=b.M(),H=t.useRef(null),J=0!==k;M((()=>{const e=H[L],t=b.W(3,(e=>{e?n.flushSync(y):y()})),o=S.Y(e),r=z.L(e);return()=>{t(),o(),r()}}),[]),M((()=>{const e=b.J();e&&z.X(e)}),[O]),t.useEffect((()=>{J||m[L]&&m[L]()}),[J]),t.useEffect((()=>{_&&_(x,R)}),[x,R]),t.useImperativeHandle(g,(()=>({get cache(){return b._()}})),[]);const W=X(x,r,k),q=Y(R,r,k,v),N=[];for(let t=W;t<=q;t++){const n=p[t],o=n.key;N.push(e.jsx(F,{N:S,U:t,V:b.m(t),A:b.p(t),F:d,D:n,G:I},h(o)?o:"_"+t))}return e.jsx(u,{ref:H,width:I?C:void 0,height:I?void 0:C,scrolling:J,attrs:t.useMemo((()=>({...w,style:{display:I?"inline-block":"block",width:I?"auto":"100%",height:I?"100%":"auto",...w.style}})),l(w)),children:N})})),ee=(e,t)=>`${e}-${t}`,te=t.memo((({D:n,N:o,K:r,Z:i,ee:s,te:l,ne:c,oe:a,A:u,F:h})=>{const d=t.useRef(null);return M((()=>o.j(d[L],r,i)),[i,r]),e.jsx(h,{ref:d,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:s,[R()?"right":"left"]:l,visibility:u?"hidden":"visible",minHeight:c,minWidth:a})),[s,l,a,c,u]),children:n})})),ne=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:c=100,overscan:a=2,initialRowCount:u,initialColCount:h,components:{Root:d=E,Cell:f="div"}=$,..._},w)=>{const[g,p,v,m,b]=j((()=>{const e=T(r,s,u),t=T(i,c,h);return[e,t,A(e,t),W(e,!1),W(t,!0)]}));r!==g.I()&&g.B(3,[r]),i!==p.I()&&p.B(3,[i]);const S=K(),[z,I]=g.g(),[y,x]=p.g(),R=g.O(),k=p.O(),O=g.H(),C=p.H(),H=g.M(),J=p.M(),B=t.useRef(null),q=0!==R,P=0!==k;M((()=>{const e=B[L],t=e=>{e?n.flushSync(S):S()},o=g.W(3,t),r=p.W(3,t),i=v.Y(e),s=m.L(e),l=b.L(e);return()=>{o(),r(),i(),s(),l()}}),[]),M((()=>{const e=g.J();e&&m.X(e)}),[O]),M((()=>{const e=p.J();e&&b.X(e)}),[C]),t.useImperativeHandle(w,(()=>({get scrollOffset(){return[p.R(),g.R()]},get scrollSize(){return[p.M(),g.M()]},get viewportSize(){return[p.C(),g.C()]},scrollToIndex(e,t){b.P(e),m.P(t)},scrollTo(e,t){b.$(e),m.$(t)},scrollBy(e,t){b.q(e),m.q(t)}})),[]);const D=t.useMemo((()=>{const e=new Map;return(t,n)=>{let r=e.get(ee(t,n));return r||e.set(ee(t,n),r=o({rowIndex:t,colIndex:n})),r}}),[o]),N=X(z,a,R),U=Y(I,a,R,r),V=X(y,a,k),F=Y(x,a,k,i),G=[];for(let t=N;t<=U;t++)for(let n=V;n<=F;n++)G.push(e.jsx(te,{N:v,K:t,Z:n,ee:g.m(t),te:p.m(n),ne:g.S(t),oe:p.S(n),A:g.p(t)||p.p(n),F:f,D:D(t,n)},ee(t,n)));return e.jsx(d,{ref:B,width:J,height:H,scrolling:q||P,attrs:t.useMemo((()=>({..._,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",..._.style}})),l(_)),children:G})}));exports.VList=Q,exports.WVList=Z,exports.experimental_VGrid=ne;
 //# sourceMappingURL=index.js.map