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