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