virtua/lib/index.js

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.

"use client";
var e=require("react/jsx-runtime"),t=require("react"),o=require("react-dom");const n=null,{min:r,max:i,abs:s,floor:l}=Math,c=(e,t,o)=>r(o,i(t,e)),f=e=>[...e].sort(((e,t)=>e-t)),d="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},u=e=>{let t;return()=>(e&&(t=e(),e=void 0),t)},a=-1,h=(e,t,o)=>{const n=o?"unshift":"push";for(let o=0;o<t;o++)e[n](a);return e},v=(e,t)=>{const o=e.t[t];return o===a?e.o:o},p=(e,t,o)=>{const n=e.t[t]===a;return e.t[t]=o,e.i=r(t,e.i),n},g=(e,t)=>{if(!e.l)return 0;if(e.i>=t)return e.u[t];e.i<0&&(e.u[0]=0,e.i=0);let o=e.i,n=e.u[o];for(;o<t;)n+=v(e,o),e.u[++o]=n;return e.i=t,n},_=(e,t,o=0,n=e.l-1)=>{for(;o<=n;){const r=l((o+n)/2),i=g(e,r);if(i<=t){if(i+v(e,r)>t)return r;o=r+1}else n=r-1}return c(o,0,e.l-1)},w=(e,t,o)=>{const n=t-e.l;return e.i=o?-1:r(t-1,e.i),e.l=t,n>0?(h(e.u,n),h(e.t,n,o),e.o*n):(e.u.splice(n),(o?e.t.splice(0,-n):e.t.splice(n)).reduce(((t,o)=>t-(o===a?e.o:o)),0))},m="undefined"!=typeof window,S=()=>document.documentElement,$=e=>e.ownerDocument,y=e=>e.defaultView,x=/*#__PURE__*/u((()=>!!m&&"rtl"===getComputedStyle(S()).direction)),I=/*#__PURE__*/u((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),b=/*#__PURE__*/u((()=>"scrollBehavior"in S().style)),z=e=>i(e.h(),e.v()),k=e=>!!e.v(),R=(e,t=40,o=4,l=0,c,d=!1)=>{let u=!!l,m=1,S=0,$=0,y=0,x=0,b=0,z=0,k=0,R=0,T=u?[0,i(l-1,0)]:n,C=[0,0],E=0;const M=((e,t,o)=>({o:o?o[1]:t,t:o&&o[0]?h(o[0].slice(0,r(e,o[0].length)),i(0,e-o[0].length)):h([],e),l:e,i:-1,u:h([],e)}))(e,t,c),H=new Set,W=()=>y-$,O=()=>W()+b+x,q=e=>((e,t,o,n)=>{if(n=r(n,e.l-1),g(e,n)<=t){const r=_(e,t+o,n);return[_(e,t,n,r),r]}{const r=_(e,t,void 0,n);return[r,_(e,t+o,r)]}})(M,e,S,C[0]),B=()=>(e=>e.l?g(e,e.l-1)+v(e,e.l-1):0)(M),J=e=>g(M,e)-b,A=e=>v(M,e),L=e=>{e&&(I()&&0!==k?b+=e:x+=e)};return{p:()=>m,_:()=>(e=>[e.t.slice(),e.o])(M),m:()=>{let e,t;return z?[e,t]=C:([e,t]=C=q(i(0,O())),T&&(e=r(e,T[0]),t=i(t,T[1]))),1!==k&&(e-=i(0,o)),2!==k&&(t+=i(0,o)),[i(e,0),r(t,M.l-1)]},S:()=>_(M,O()),$:()=>_(M,O()+S),I:e=>M.t[e]===a,k:()=>!!T&&M.t.slice(i(0,T[0]-1),r(M.l-1,T[1]+1)+1).includes(a),R:J,T:A,C:()=>M.l,M:()=>y,H:()=>0!==k,v:()=>S,W:()=>$,h:B,O:()=>(z=x,x=0,[z,2===R||W()+S>=B()]),q:(e,t)=>{const o=[e,t];return H.add(o),()=>{H.delete(o)}},B:(e,t)=>{let o,r,l=0;switch(e){case 1:{const e=z;z=0;const o=t-y,i=s(o);e&&i<s(e)+1||0!==R||(k=o<0?2:1),u&&(T=n,u=!1),y=t,l=4;const c=W();c>=-S&&c<=B()&&(l+=1,r=i>S);break}case 2:l=8,0!==k&&(o=!0,l+=1),k=0,R=0,T=n;break;case 3:{const e=t.filter((([e,t])=>M.t[e]!==t));if(!e.length)break;L(e.reduce(((e,[t,o])=>((2===R||(T?!u&&t<T[0]:J(t)+(0===k&&0===R?A(t):0)<W()))&&(e+=o-A(t)),e)),0));for(const[t,o]of e){const e=A(t),n=p(M,t,o);d&&(E+=n?o:o-e)}d&&S&&E>S&&(L(((e,t)=>{let o=0;const n=[];e.t.forEach(((e,r)=>{e!==a&&(n.push(e),r<t&&o++)})),e.i=-1;const r=f(n),s=r.length,l=s/2|0,c=s%2==0?(r[l-1]+r[l])/2:r[l],d=e.o;return((e.o=c)-d)*i(t-o,0)})(M,_(M,O()))),d=!1),l=3,r=!0;break}case 4:S!==t&&(S=t,l=3);break;case 5:t[1]?(L(w(M,t[0],!0)),R=2,l=1):(w(M,t[0]),l=1);break;case 6:$=t;break;case 7:R=1;break;case 8:T=q(t),l=1}l&&(m=1+(2147483647&m),o&&b&&(x+=b,b=0),H.forEach((([e,t])=>{l&e&&t(r)})))}}},T=setTimeout,C=(e,t)=>t&&x()?-e:e,E=(e,t,o,r,i,s)=>{const l=Date.now;let c=0,f=!1,d=!1,u=!1,a=!1;const h=(()=>{let t;const o=()=>{t!=n&&clearTimeout(t)},r=()=>{o(),t=T((()=>{t=n,(()=>{if(f||d)return f=!1,void h();u=!1,e.B(2)})()}),150)};return r.J=o,r})(),v=()=>{c=l(),u&&(a=!0),s&&e.B(6,s()),e.B(1,r()),h()},p=t=>{if(f||!e.H()||t.ctrlKey)return;const n=l()-c;150>n&&50<n&&(o?t.deltaX:t.deltaY)&&(f=!0)},g=()=>{d=!0,u=a=!1},_=()=>{d=!1,I()&&(u=!0)};return t.addEventListener("scroll",v),t.addEventListener("wheel",p,{passive:!0}),t.addEventListener("touchstart",g,{passive:!0}),t.addEventListener("touchend",_,{passive:!0}),{A:()=>{t.removeEventListener("scroll",v),t.removeEventListener("wheel",p),t.removeEventListener("touchstart",g),t.removeEventListener("touchend",_),h.J()},L:()=>{const[t,n]=e.O();t&&(i(C(t,o),n,a),a=!1,n&&e.v()>e.h()&&e.B(1,r()))}}},M=(e,t)=>{let o,n,r;const i=t?"scrollLeft":"scrollTop",s=t?"overflowX":"overflowY",l=async(n,s)=>{if(!o)return void d((()=>l(n,s)));r&&r();const c=()=>{let t;return[new Promise(((o,n)=>{t=o,r=n,k(e)&&T(n,150)})),e.q(2,(()=>{t&&t()}))]};if(s&&b()){for(;e.B(8,n()),e.k();){const[e,t]=c();try{await e}catch(e){return}finally{t()}}o.scrollTo({[t?"left":"top"]:C(n(),t),behavior:"smooth"})}else for(;;){const[r,s]=c();try{o[i]=C(n(),t),e.B(7),await r}catch(e){return}finally{s()}}};return{P(l){o=l,n=E(e,l,t,(()=>C(l[i],t)),((t,o,n)=>{if(n){const e=l.style,t=e[s];e[s]="hidden",T((()=>{e[s]=t}))}o?(l[i]=e.M()+t,r&&r()):l[i]+=t}))},D(){n&&n.A()},X(e){l((()=>e))},Y(t){t+=e.M(),l((()=>t))},j(t,{align:o,smooth:n,offset:r=0}={}){if(t=c(t,0,e.C()-1),"nearest"===o){const n=e.R(t),r=e.M();if(n<r)o="start";else{if(!(n+e.T(t)>r+e.v()))return;o="end"}}l((()=>r+e.W()+e.R(t)+("end"===o?e.T(t)-e.v():"center"===o?(e.T(t)-e.v())/2:0)),n)},U:()=>{n&&n.L()}}},H=(e,t)=>{let o,n,r;const i=(e,t,o,n,r=0)=>{const s=n?"offsetLeft":"offsetTop",l=r+(n&&x()?o.innerWidth-e[s]-e.offsetWidth:e[s]),c=e.offsetParent;return e!==t&&c?i(c,t,o,n,l):l},s=async(n,i)=>{if(!o)return void d((()=>s(n,i)));r&&r();const l=()=>{let t;return[new Promise(((o,n)=>{t=o,r=n,k(e)&&T(n,150)})),e.q(2,(()=>{t&&t()}))]},c=y($(o));if(i&&b()){for(;e.B(8,n()),e.k();){const[e,t]=l();try{await e}catch(e){return}finally{t()}}c.scroll({[t?"left":"top"]:C(n(),t),behavior:"smooth"})}else for(;;){const[o,r]=l();try{c.scroll({[t?"left":"top"]:C(n(),t)}),e.B(7),await o}catch(e){return}finally{r()}}};return{P(r){o=r;const s=t?"scrollX":"scrollY",l=$(r),c=y(l),f=l.body;n=E(e,c,t,(()=>C(c[s],t)),((o,n)=>{n?c.scroll({[t?"left":"top"]:e.M()+o}):c.scrollBy(t?o:0,t?0:o)}),(()=>i(r,f,c,t)))},D(){n&&n.A(),o=void 0},U:()=>{n&&n.L()},j(n,{align:r,smooth:l,offset:f=0}={}){if(!o)return;if(n=c(n,0,e.C()-1),"nearest"===r){const t=e.R(n),o=e.M();if(t<o)r="start";else{if(!(t+e.T(n)>o+e.v()))return;r="end"}}const d=$(o),u=y(d),a=d.documentElement,h=()=>e.v()-(t?a.clientWidth:a.clientHeight);s((()=>f+i(o,d.body,u,t)+e.R(n)+("end"===r?e.T(n)-(e.v()-h()):"center"===r?(e.T(n)-(e.v()-h()))/2:0)),l)}}},W=(e,t)=>{const o=M(e,!1),n=M(t,!0);return{P(e){o.P(e),n.P(e)},D(){o.D(),n.D()},X(e,t){o.X(t),n.X(e)},Y(e,t){o.Y(t),n.Y(e)},j(e,t){o.j(t),n.j(e)},U(){o.U(),n.U()}}},O=e=>{let t;return{V(o){(t||(t=new(y($(o)).ResizeObserver)(e))).observe(o)},F(e){t.unobserve(e)},A(){t&&t.disconnect()}}},q=(e,t)=>{let o;const r=t?"width":"height",i=new WeakMap,s=O((t=>{const s=[];for(const{target:l,contentRect:c}of t)if(l.offsetParent)if(l===o)e.B(4,c[r]);else{const e=i.get(l);e!=n&&s.push([e,c[r]])}s.length&&e.B(3,s)}));return{G(e){s.V(o=e)},K:(e,t)=>(i.set(e,t),s.V(e),()=>{i.delete(e),s.F(e)}),D:s.A}},B=(e,t)=>{const o=t?"width":"height",r=t?"innerWidth":"innerHeight",i=new WeakMap,s=O((t=>{const r=[];for(const{target:e,contentRect:s}of t){if(!e.offsetParent)continue;const t=i.get(e);t!=n&&r.push([t,s[o]])}r.length&&e.B(3,r)}));let l;return{G(t){const o=y($(t)),n=()=>{e.B(4,o[r])};o.addEventListener("resize",n),n(),l=()=>{o.removeEventListener("resize",n)}},K:(e,t)=>(i.set(e,t),s.V(e),()=>{i.delete(e),s.F(e)}),D(){l&&l(),s.A()}}},J=(e,t)=>{let o;const n="height",r="width",s=new WeakMap,l=new Set,c=new Set,f=new Map,d=(e,t)=>`${e}-${t}`,u=O((u=>{const a=new Set,h=new Set;for(const{target:i,contentRect:l}of u)if(i.offsetParent)if(i===o)e.B(4,l[n]),t.B(4,l[r]);else{const e=s.get(i);if(e){const[t,o]=e,i=d(t,o),s=f.get(i),c=[l[n],l[r]];let u,v;s?(s[0]!==c[0]&&(u=!0),s[1]!==c[1]&&(v=!0)):u=v=!0,u&&a.add(t),v&&h.add(o),(u||v)&&f.set(i,c)}}if(a.size){const t=[];a.forEach((e=>{let o=0;c.forEach((t=>{const n=f.get(d(e,t));n&&(o=i(o,n[0]))})),o&&t.push([e,o])})),e.B(3,t)}if(h.size){const e=[];h.forEach((t=>{let o=0;l.forEach((e=>{const n=f.get(d(e,t));n&&(o=i(o,n[1]))})),o&&e.push([t,o])})),t.B(3,e)}}));return{G(e){u.V(o=e)},K:(e,t,o)=>(s.set(e,[t,o]),l.add(t),c.add(o),u.V(e),()=>{s.delete(e),u.F(e)}),N(o){for(const[t]of o)for(let o=0;o<e.C();o++)f.delete(d(o,t));t.B(3,o)},Z(o){for(const[e]of o)for(let o=0;o<t.C();o++)f.delete(d(e,o));e.B(3,o)},D:u.A}},A=m?t.useLayoutEffect:t.useEffect,L="current",P=(e,t)=>{if(Array.isArray(e))for(const o of e)P(o,t);else null==e||"boolean"==typeof e||t.push(e)},D=(e,t)=>{const o=e.key;return null!=o?o:"_"+t},X=e=>{const o=t.useRef(null);return o[L]||(o[L]=e())},Y=e=>{const o=t.useRef(e);return A((()=>{o[L]=e}),[e]),o},j=t.memo((({ee:o,te:n,oe:r,ne:i,re:s,ie:l,se:c,le:f})=>{const d=t.useRef(null);A((()=>n(d[L],r)),[r]);const u=t.useMemo((()=>{const e={contain:"layout style",position:s&&f?void 0:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?x()?"right":"left":"top"]:i,visibility:!s||f?"visible":"hidden"};return c&&(e.display="inline-flex"),e}),[i,s,f,c]);return"string"==typeof l?e.jsx(l,{ref:d,style:u,children:o}):e.jsx(l,{ref:d,style:u,index:r,children:o})})),U=(e,o)=>t.useMemo((()=>{if("function"==typeof e)return[e,o||0];const t=(e=>{const t=[];return P(e,t),t})(e);return[e=>t[e],t.length]}),[e,o]),V=t.forwardRef((({children:n,count:r,overscan:i,itemSize:s,shift:l,horizontal:c,keepMounted:u,cache:a,startMargin:h=0,ssrCount:v,as:p="div",item:g="div",scrollRef:_,onScroll:w,onScrollEnd:m},S)=>{const[$,y]=U(n,r),x=t.useRef(null),I=t.useRef(!!v),b=Y(w),k=Y(m),[T,C,E,H]=X((()=>{const e=!!c,t=R(y,s,i,v,a,!s);return[t,q(t,e),M(t,e),e]}));y!==T.C()&&T.B(5,[y,l]),h!==T.W()&&T.B(6,h);const[W,O]=t.useReducer(T.p,void 0,T.p),[B,J]=T.m(),P=T.H(),V=T.h(),F=[],G=t=>{const o=$(t);return e.jsx(j,{te:C.K,oe:t,ne:T.R(t),re:T.I(t),ie:g,ee:o,se:H,le:I[L]},D(o,t))};A((()=>{I[L]=!1;const e=T.q(1,(e=>{e?o.flushSync(O):O()})),t=T.q(4,(()=>{b[L]&&b[L](T.M())})),n=T.q(8,(()=>{k[L]&&k[L]()})),r=e=>{C.G(e),E.P(e)};return _?d((()=>{_[L]&&r(_[L])})):r(x[L].parentElement),()=>{e(),t(),n(),C.D(),E.D()}}),[]),A((()=>{E.U()}),[W]),t.useImperativeHandle(S,(()=>({get cache(){return T._()},get scrollOffset(){return T.M()},get scrollSize(){return z(T)},get viewportSize(){return T.v()},findStartIndex:T.S,findEndIndex:T.$,getItemOffset:T.R,getItemSize:T.T,scrollToIndex:E.j,scrollTo:E.X,scrollBy:E.Y})),[]);for(let e=B,t=J;e<=t;e++)F.push(G(e));if(u){const e=[],t=[];f(u).forEach((o=>{o<B&&e.push(G(o)),o>J&&t.push(G(o))})),F.unshift(...e),F.push(...t)}return e.jsx(p,{ref:x,style:{contain:"strict",overflowAnchor:"none",overflow:"clip",flex:"none",position:"relative",width:H?V:"100%",height:H?"100%":V,pointerEvents:P?"none":void 0},children:F})})),F=t.forwardRef((({children:o,count:n,overscan:r,itemSize:i,shift:s,horizontal:l,keepMounted:c,reverse:f,cache:d,ssrCount:u,item:a,onScroll:h,onScrollEnd:v,style:p,...g},_)=>{const w=t.useRef(null),m=f&&!l;let S=e.jsx(V,{ref:_,scrollRef:m?w:void 0,count:n,overscan:r,itemSize:i,shift:s,horizontal:l,keepMounted:c,cache:d,ssrCount:u,item:a,onScroll:h,onScrollEnd:v,children:o});return m&&(S=e.jsx("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",minHeight:"100%"},children:S})),e.jsx("div",{ref:w,...g,style:{display:l?"inline-block":"block",[l?"overflowX":"overflowY"]:"auto",contain:"strict",width:"100%",height:"100%",...p},children:S})})),G=t.forwardRef((({children:n,count:r,overscan:i,itemSize:s,shift:l,horizontal:c,cache:f,ssrCount:d,as:u="div",item:a="div",onScroll:h,onScrollEnd:v},p)=>{const[g,_]=U(n,r),w=t.useRef(null),m=Y(h),S=Y(v),$=t.useRef(!!d),[y,x,I,b]=X((()=>{const e=!!c,t=R(_,s,i,d,f,!s);return[t,B(t,e),H(t,e),e]}));_!==y.C()&&y.B(5,[_,l]);const[z,k]=t.useReducer(y.p,void 0,y.p),[T,C]=y.m(),E=y.H(),M=y.h(),W=[];A((()=>{$[L]=!1;const e=y.q(1,(e=>{e?o.flushSync(k):k()})),t=y.q(4,(()=>{m[L]&&m[L]()})),n=y.q(8,(()=>{S[L]&&S[L]()})),r=w[L];return x.G(r),I.P(r),()=>{e(),t(),n(),x.D(),I.D()}}),[]),A((()=>{I.U()}),[z]),t.useImperativeHandle(p,(()=>({get cache(){return y._()},findStartIndex:y.S,findEndIndex:y.$,scrollToIndex:I.j})),[]);for(let t=T,o=C;t<=o;t++){const o=g(t);W.push(e.jsx(j,{te:x.K,oe:t,ne:y.R(t),re:y.I(t),ie:a,ee:o,se:b,le:$[L]},D(o,t)))}return e.jsx(u,{ref:w,style:{contain:"strict",overflowAnchor:"none",overflow:"clip",flex:"none",position:"relative",width:b?M:"100%",height:b?"100%":M,pointerEvents:E?"none":void 0},children:W})}));function K(...e){return t.useCallback((t=>{for(const o of e)o&&N(o,t)}),e)}function N(e,t){"function"==typeof e?e(t):e&&(e.current=t)}const Q=(e,t)=>`${e}-${t}`,Z=t.memo((({ee:o,te:n,ce:r,fe:i,de:s,ue:l,ae:c,he:f,re:d,ve:u})=>{const a=t.useRef(null);return A((()=>n.K(a[L],r,i)),[i,r]),e.jsx(u,{ref:a,style:t.useMemo((()=>({contain:"layout style",display:"grid",position:"absolute",top:s,[x()?"right":"left"]:l,visibility:d?"hidden":"visible",minHeight:c,minWidth:f})),[s,l,f,c,d]),children:o})})),ee=t.forwardRef((({children:n,row:r,col:i,cellHeight:s=40,cellWidth:l=100,overscan:c=2,initialRowCount:f,initialColCount:d,item:u="div",domRef:a,innerDomRef:h,onScroll:v,onScrollEnd:p,style:g,..._},w)=>{const[m,S,$,y]=X((()=>{const e=R(r,s,c,f),t=R(i,l,c,d);return[e,t,J(e,t),W(e,t)]}));r!==m.C()&&m.B(5,[r]),i!==S.C()&&S.B(5,[i]);const[x,I]=t.useReducer(m.p,void 0,m.p),[b,k]=t.useReducer(S.p,void 0,S.p),[T,C]=m.m(),[E,M]=S.m(),H=m.H(),O=S.H(),q=z(m),B=z(S),P=t.useRef(null),D=Y(v),j=Y(p);A((()=>{const e=P[L],t=m.q(1,(e=>{e?o.flushSync(I):I()})),n=S.q(1,(e=>{e?o.flushSync(k):k()})),r=m.q(4,(()=>{D[L]&&D[L](m.M())})),i=m.q(8,(()=>{j[L]&&j[L]()}));return $.G(e),y.P(e),()=>{t(),n(),$.D(),y.D(),r(),i()}}),[]),A((()=>{y.U()}),[x,b]),t.useImperativeHandle(w,(()=>({get scrollTop(){return m.M()},get scrollLeft(){return S.M()},get scrollHeight(){return z(m)},get scrollWidth(){return z(S)},get viewportHeight(){return m.v()},get viewportWidth(){return S.v()},findStartIndex:()=>[S.S(),m.S()],findEndIndex:()=>[S.$(),m.$()],getItemOffset:(e,t)=>[S.R(e),m.R(t)],getItemSize:(e,t)=>[S.T(e),m.T(t)],resizeCols(e){$.N(e)},resizeRows(e){$.Z(e)},scrollToIndex:y.j,scrollTo:y.X,scrollBy:y.Y})),[]);const U=t.useMemo((()=>{const e=new Map;return(t,o)=>{let r=e.get(Q(t,o));return r||e.set(Q(t,o),r=n({rowIndex:t,colIndex:o})),r}}),[n]),V=[];for(let t=T;t<=C;t++)for(let o=E;o<=M;o++)V.push(e.jsx(Z,{te:$,ce:t,fe:o,de:m.R(t),ue:S.R(o),ae:m.T(t),he:S.T(o),re:m.I(t)||S.I(o),ve:u,ee:U(t,o)},Q(t,o)));return e.jsx("div",{ref:K(P,a),..._,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",...g},children:e.jsx("div",{ref:h,style:{contain:"strict",overflowAnchor:"none",overflow:"clip",flex:"none",position:"relative",width:B,height:q,pointerEvents:H||O?"none":void 0},children:V})})}));exports.VList=F,exports.Virtualizer=V,exports.WindowVirtualizer=G,exports.experimental_VGrid=ee;
//# sourceMappingURL=index.js.map