virtua/lib/index.mjs

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

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