virtua 0.4.0 → 0.4.1

package/README.md

@@ -11,7 +11,7 @@ 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 configuration:** 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).
-- **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 for frameworks, etc). We are trying to combine the best of them.
+- **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).
 - **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, rtl direction, sticky, infinite scrolling, placeholder, scrollTo, 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.

package/lib/core/store.d.ts

@@ -1,11 +1,11 @@
 export type ScrollJump = Readonly<number>;
 export type ItemResize = Readonly<[index: number, size: number]>;
 type ItemsRange = Readonly<[startIndex: number, endIndex: number]>;
-export declare const SCROLL_STOP = 0;
+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_STOP | typeof SCROLL_DOWN | typeof SCROLL_UP | typeof SCROLL_MANUAL;
+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;
@@ -22,7 +22,7 @@ export type VirtualStore = {
     _getScrollOffset(): number;
     _getViewportSize(): number;
     _getScrollSize(): number;
-    _getScrollableDomSize(): number;
+    _getCorrectedScrollSize(): number;
     _getJumpCount(): number;
     _flushJump(): ScrollJump | undefined;
     _getItemIndexForScrollTo(offset: number): number;

package/lib/index.js

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