virtua 0.16.2 → 0.16.3

package/README.md

@@ -173,9 +173,9 @@ And see [examples](./stories) for more usages.
 
 #### Is there any way to improve performance further?
 
-As a trade-off to be compatible with React's built-in elements like `div`, virtua doesn't have optimization possible by using [render prop](https://legacy.reactjs.org/docs/render-props.html) which some of other virtualization libraries for React have. That also means common optimization techniques for non-virtualized list ([`memo`](https://react.dev/reference/react/memo), [`useMemo`](https://react.dev/reference/react/useMemo), [`context`](https://react.dev/learn/passing-data-deeply-with-context), etc) work for this lib!
+In complex usage, especially if you re-render frequently the parent of virtual scroller or the children are tons of items, children element creation can be a performance bottle neck. That's because creating React elements is fast enough but not free and new React element instances break some of memoization inside virtual scroller.
 
-In complex usage, children element generation can be a performance bottle neck if you re-render frequently the parent of virtual scroller and the children are tons of items. That's because React element generation is fast enough but not free and new React element instance breaks some of memoization inside virtual scroller. In that case use `useMemo` to reduce computation and keep the elements' instance the same.
+One solution is memoization with [`useMemo`](https://react.dev/reference/react/useMemo). You can use it to reduce computation and keep the elements' instance the same. And if you want to pass state from parent to the items, using [`context`](https://react.dev/learn/passing-data-deeply-with-context) instead of props may be better because it doesn't break the memoization.
 
 ```tsx
 const elements = useMemo(
@@ -191,7 +191,18 @@ 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.
+The other solution is using [`render prop`](https://legacy.reactjs.org/docs/render-props.html) as children to create elements lazily. It will effectively reduce cost on start up when you render many items (>1000). An important point is that newly created elements from `render prop` will disable [optimization possible with cached element instances](https://github.com/facebook/react/issues/8669#issuecomment-270032204). We recommend using [`memo`](https://react.dev/reference/react/memo) to reduce calling render function of your item components during scrolling.
+
+```tsx
+const Component = memo(HeavyItem);
+
+<VList count={items.length}>
+  {(i) => {
+    const item = items[i];
+    return <Component key={item.id} data={item} />;
+  }}
+</VList>;
+```
 
 Decreasing `overscan` prop may also improve perf in case that components are large and heavy.
 
@@ -233,9 +244,6 @@ It may be dispatched by ResizeObserver in this lib [as described in spec](https:
 
 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/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},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;
+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,u=setTimeout,a=(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=u((()=>{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 a(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:a(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 u=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()-u+h+d,J=e=>a(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],u),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,u-M()):t},S:e=>p(s,e),I:()=>s.l,R:()=>f,k:H,O:()=>I,C:()=>u,T:()=>h,M:()=>r(M(),u-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];u!==e&&(u=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)>u,f=J(t),l=5;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],u),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=()=>a(r(),0,e.k()),h=()=>{let t;return[new Promise(((e,n)=>{t=e,u(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 u=d((()=>{s?u():(c=!1,e.B(5))}),150),a=()=>{c&&(r=!0),e.B(4,l(o[i])),u()},h=H(e,t,u),f=()=>{s=!0,c=r=!1},_=()=>{s=!1,k()&&(c=!0)};return o.addEventListener("scroll",a),o.addEventListener("wheel",h,{passive:!0}),o.addEventListener("touchstart",f,{passive:!0}),o.addEventListener("touchend",_,{passive:!0}),()=>{o.removeEventListener("scroll",a),o.removeEventListener("wheel",h),o.removeEventListener("touchstart",f),o.removeEventListener("touchend",_),u.t()}},$(e){c((()=>e))},q(t){t+=e.R(),c((()=>t))},P(t,{align:n,smooth:o}={}){if(t=a(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",u((()=>{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),u=()=>{e.B(4,i(window[o])-l(s,0)),c()},a=H(e,t,c);return window.addEventListener("scroll",u),window.addEventListener("wheel",a,{passive:!0}),()=>{window.removeEventListener("scroll",u),window.removeEventListener("wheel",a),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,u=new Map,a=(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=a(t,n),s=u.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||_)&&u.set(r,c)}}if(d.size){const t=[];d.forEach((e=>{let n=0;c.forEach((t=>{const o=u.get(a(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=u.get(a(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 u=t.useRef(null);return M((()=>o.j(u[L],r)),[r]),e.jsx(l,{ref:u,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,count:r,overscan:i=4,initialItemSize:s,initialItemCount:c,shift:u,horizontal:a,reverse:d,cache:f,components:{Root:_=E,Item:w="div"}=$,onScroll:g,onScrollStop:p,onRangeChange:v,...m},b)=>{const[S,z]=t.useMemo((()=>{if("function"==typeof o)return[o,r||0];const e=P(o);return[t=>e[t],e.length]}),[o,r]),I=D(g),y=D(p),[x,R,k,O]=j((()=>{const e=!!a,t=T(z,s,c,f,!!d,!s);return[t,U(t,e),W(t,e),e]}));z!==x.I()&&x.B(3,[z,u]);const C=K(),[H,J]=x.g(),B=x.O(),q=x.H(),N=x.M(),V=t.useRef(null),A=0!==B;M((()=>{const e=V[L],t=x.W(3,(e=>{e?n.flushSync(C):C()})),o=x.W(4,(()=>{I[L]&&I[L](x.R())})),r=R.Y(e),i=k.L(e);return()=>{t(),o(),r(),i()}}),[]),M((()=>{const e=x.J();e&&k.X(e)}),[q]),t.useEffect((()=>{A||y[L]&&y[L]()}),[A]),t.useEffect((()=>{v&&v(H,J)}),[H,J]),t.useImperativeHandle(b,(()=>({get cache(){return x._()},get scrollOffset(){return x.R()},get scrollSize(){return x.M()},get viewportSize(){return x.C()},scrollToIndex:k.P,scrollTo:k.$,scrollBy:k.q})),[]);const G=X(H,i,B),Q=Y(J,i,B,z),Z=[];for(let t=G;t<=Q;t++){const n=S(t),o=n.key;Z.push(e.jsx(F,{N:R,U:t,V:x.m(t),A:x.p(t),F:w,D:n,G:O},h(o)?o:"_"+t))}return e.jsx(_,{ref:V,width:O?N:void 0,height:O?void 0:N,scrolling:A,attrs:t.useMemo((()=>({...m,style:{[O?"overflowX":"overflowY"]:"auto",display:O?"inline-block":"block",contain:"strict",width:"100%",height:"100%",...m.style}})),l(m)),children:Z})})),Z=t.forwardRef((({children:o,overscan:r=4,initialItemSize:i,initialItemCount:s,horizontal:c,cache:u,components:{Root:a=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,u,!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(a,{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:u,A:a,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:a?"hidden":"visible",minHeight:c,minWidth:u})),[s,l,u,c,a]),children:n})})),ne=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:c=100,overscan:u=2,initialRowCount:a,initialColCount:h,components:{Root:d=E,Cell:f="div"}=$,..._},w)=>{const[g,p,v,m,b]=j((()=>{const e=T(r,s,a),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,u,R),U=Y(I,u,R,r),V=X(y,u,k),F=Y(x,u,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