virtua 0.8.0 → 0.8.2

package/README.md

@@ -2,7 +2,9 @@
 
 ![npm](https://img.shields.io/npm/v/virtua) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/virtua) ![npm](https://img.shields.io/npm/dw/virtua) [![check](https://github.com/inokawa/virtua/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/check.yml) [![demo](https://github.com/inokawa/virtua/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/demo.yml)
 
-A zero-config, fast and small (~3kB) virtual list and grid component for [React](https://github.com/facebook/react).
+> A zero-config, fast and small (~3kB) virtual list and grid component for [React](https://github.com/facebook/react).
+
+![example](./example.gif)
 
 If you want to check the difference with the alternatives right away, [see comparison section](#comparison).
 
@@ -10,9 +12,9 @@ If you want to check the difference with the alternatives right away, [see compa
 
 This project is a challenge to rethink virtualization. The goals are...
 
-- **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment in bottom-up scrolling and imperative scrolling, etc).
+- **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, etc).
 - **Fast:** Scrolling without frame drop needs optimization in many aspects (reduce CPU usage, reduce GC, [reduce layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), optimize with CSS, optimize for frameworks, etc). We are trying to combine the best of them.
-- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and the total is [~4kB gzipped](https://bundlephobia.com/package/virtua).
+- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and the total is [~5kB gzipped](https://bundlephobia.com/package/virtua).
 - **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, rtl direction, sticky, infinite scrolling, placeholder, scrollTo, scroll restoration, dnd, table, and more. See [live demo](#demo).
 - **Framework agnostic (WIP):** Currently only for [React](https://react.dev/) but we could support [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Solid](https://www.solidjs.com/), [Angular](https://angular.io/), [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and more in the future.
 
@@ -167,6 +169,31 @@ And see [examples](./stories) for more usages.
 
 - [API reference](./docs/API.md)
 
+### FAQs
+
+#### Is there any way to improve performance further?
+
+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, because React element generation is 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.
+
+```tsx
+const elements = useMemo(
+  () => array.map((d) => <Component key={d.id} {...d} />),
+  [array]
+);
+const [position, setPosition] = useState(0);
+return (
+  <div>
+    <div>position: {position}</div>
+    <VList onScroll={(offset) => setPosition(offset)}>{elements}</VList>
+  </div>
+);
+```
+
+#### 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,
+[you can safely ignore it](https://github.com/DevExpress/testcafe/issues/4857#issuecomment-598775956).
+
 ## Comparison
 
 ### Features
@@ -210,7 +237,7 @@ If you find a problem, feel free to create an [issue](https://github.com/inokawa
 
 ### Making a Pull Request
 
-1. Clone this repo.
+1. Fork this repo.
 2. Run `npm install`.
 3. Commit your fix.
 4. Make a PR and confirm all the CI checks passed.

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