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)),d=e=>[...e].sort(((e,t)=>e-t)),f="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},u=e=>{let t,n;return()=>(t||(t=!0,n=e()),n)},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(),T=(e,t=40,n=4,l=0,c,f=!1)=>{let u=!!l,w=1,S=0,$=0,y=0,x=0,I=0,z=0,k=0,T=0,R=u?[0,i(l-1,0)]:o,M=[0,0],E=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-$,q=()=>W()+I+x,B=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,M[0]),J=()=>(e=>e.l?g(e,e.l-1)+v(e,e.l-1):0)(C),O=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]=M:([e,t]=M=B(i(0,q())),R&&(e=r(e,R[0]),t=i(t,R[1]))),1!==k&&(e-=i(0,n)),2!==k&&(t+=i(0,n)),[i(e,0),r(t,C.l-1)]},S:()=>_(C,q()),$:()=>_(C,q()+S),I:e=>C.t[e]===a,k:()=>!!R&&C.t.slice(i(0,R[0]-1),r(C.l-1,R[1]+1)+1).includes(a),T:O,R:L,M:()=>C.l,C:()=>y,H:()=>0!==k,v:()=>S,W:()=>$,h:J,q:()=>(z=x,x=0,[z,2===T||W()+S>=J()]),B:(e,t)=>{const n=[e,t];return H.add(n),()=>{H.delete(n)}},J:(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!==T||(k=n<0?2:1),u&&(R=o,u=!1),y=t,l=4;const c=W();c>=-S&&c<=J()&&(l+=1,r=i>S);break}case 2:l=8,0!==k&&(n=!0,l+=1),k=0,T=0,R=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===T||(R?!u&&t<R[0]:O(t)+(0===k&&0===T?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);f&&(E+=o?n:n-e)}f&&S&&E>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=d(o),s=r.length,l=s/2|0,c=s%2==0?(r[l-1]+r[l])/2:r[l],f=e.o;return((e.o=c)-f)*i(t-n,0)})(C,_(C,q()))),f=!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)),T=2,l=1):(m(C,t[0]),l=1);break;case 6:$=t;break;case 7:T=1;break;case 8:R=B(t),l=1}l&&(w=1+(2147483647&w),n&&I&&(x+=I,I=0),H.forEach((([e,t])=>{l&e&&t(r)})))}}},R=setTimeout,M=(e,t)=>t&&x()?-e:e,E=(e,t,n,r,i,s)=>{const l=Date.now;let c=0,d=!1,f=!1,u=!1,a=!1;const h=(()=>{let t;const n=()=>{t!=o&&clearTimeout(t)},r=()=>{n(),t=R((()=>{t=o,(()=>{if(d||f)return d=!1,void h();u=!1,e.J(2)})()}),150)};return r.O=n,r})(),v=()=>{c=l(),u&&(a=!0),s&&e.J(6,s()),e.J(1,r()),h()},p=t=>{if(d||!e.H()||t.ctrlKey)return;const o=l()-c;150>o&&50<o&&(n?t.deltaX:t.deltaY)&&(d=!0)},g=()=>{f=!0,u=a=!1},_=()=>{f=!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.O()},P:()=>{const[t,o]=e.q();t&&(i(M(t,n),o,a),a=!1,o&&e.v()>e.h()&&e.J(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 f((()=>l(o,s)));r&&r();const c=()=>{let t;return[new Promise(((n,o)=>{t=n,r=o,k(e)&&R(o,150)})),e.B(2,(()=>{t&&t()}))]};if(s&&I()){for(;e.J(8,o()),e.k();){const[e,t]=c();try{await e}catch(e){return}finally{t()}}n.scrollTo({[t?"left":"top"]:M(o(),t),behavior:"smooth"})}else for(;;){const[r,s]=c();try{n[i]=M(o(),t),e.J(7),await r}catch(e){return}finally{s()}}};return{A(l){n=l,o=E(e,l,t,(()=>M(l[i],t)),((t,n,o)=>{if(o){const e=l.style,t=e[s];e[s]="hidden",R((()=>{e[s]=t}))}n?(l[i]=e.C()+t,r&&r()):l[i]+=t}))},X(){o&&o.L()},Y(e){l((()=>e))},j(t){t+=e.C(),l((()=>t))},D(t,{align:n,smooth:o,offset:r=0}={}){if(t=c(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)},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 f((()=>s(o,i)));r&&r();const l=()=>{let t;return[new Promise(((n,o)=>{t=n,r=o,k(e)&&R(o,150)})),e.B(2,(()=>{t&&t()}))]},c=y($(n));if(i&&I()){for(;e.J(8,o()),e.k();){const[e,t]=l();try{await e}catch(e){return}finally{t()}}c.scroll({[t?"left":"top"]:M(o(),t),behavior:"smooth"})}else for(;;){const[n,r]=l();try{c.scroll({[t?"left":"top"]:M(o(),t)}),e.J(7),await n}catch(e){return}finally{r()}}};return{A(r){n=r;const s=t?"scrollX":"scrollY",l=$(r),c=y(l),d=l.body;o=E(e,c,t,(()=>M(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.L(),n=void 0},U:()=>{o&&o.P()},D(o,{align:r,smooth:l,offset:d=0}={}){if(!n)return;if(o=c(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 f=$(n),u=y(f),a=f.documentElement,h=()=>e.v()-(t?a.clientWidth:a.clientHeight);s((()=>d+i(n,f.body,u,t)+e.T(o)+("end"===r?e.R(o)-(e.v()-h()):"center"===r?(e.R(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)},X(){n.X(),o.X()},Y(e,t){n.Y(t),o.Y(e)},j(e,t){n.j(t),o.j(e)},D(e,t){n.D(t),o.D(e)},U(){n.U(),o.U()}}},q=e=>{let t;return{V(n){(t||(t=new(y($(n)).ResizeObserver)(e))).observe(n)},F(e){t.unobserve(e)},L(){t&&t.disconnect()}}},B=(e,t)=>{let n;const r=t?"width":"height",i=new WeakMap,s=q((t=>{const s=[];for(const{target:l,contentRect:c}of t)if(l.offsetParent)if(l===n)e.J(4,c[r]);else{const e=i.get(l);e!=o&&s.push([e,c[r]])}s.length&&e.J(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)}),X:s.L}},J=(e,t)=>{const n=t?"width":"height",r=t?"innerWidth":"innerHeight",i=new WeakMap,s=q((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.J(3,r)}));let l;return{G(t){const n=y($(t)),o=()=>{e.J(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)}),X(){l&&l(),s.L()}}},O=(e,t)=>{let n;const o="height",r="width",s=new WeakMap,l=new Set,c=new Set,d=new Map,f=(e,t)=>`${e}-${t}`,u=q((u=>{const a=new Set,h=new Set;for(const{target:i,contentRect:l}of u)if(i.offsetParent)if(i===n)e.J(4,l[o]),t.J(4,l[r]);else{const e=s.get(i);if(e){const[t,n]=e,i=f(t,n),s=d.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)&&d.set(i,c)}}if(a.size){const t=[];a.forEach((e=>{let n=0;c.forEach((t=>{const o=d.get(f(e,t));o&&(n=i(n,o[0]))})),n&&t.push([e,n])})),e.J(3,t)}if(h.size){const e=[];h.forEach((t=>{let n=0;l.forEach((e=>{const o=d.get(f(e,t));o&&(n=i(n,o[1]))})),n&&e.push([t,n])})),t.J(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)}),X: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)},X=(e,t)=>{const n=e.key;return null!=n?n:"_"+t},Y=e=>{const n=t.useRef();return n[P]||(n[P]=e())},j=e=>{const n=t.useRef(e);return L((()=>{n[P]=e}),[e]),n},D=t.memo((({N:n,Z:o,ee:r,te:i,ne:s,oe:l,re:c,ie:d})=>{const f=t.useRef(null);L((()=>o(f[P],r)),[r]);const u=t.useMemo((()=>{const e={position:s&&d?void 0:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?x()?"right":"left":"top"]:i,visibility:!s||d?"visible":"hidden"};return c&&(e.display="flex"),e}),[i,s,d,c]);return"string"==typeof l?e.jsx(l,{ref:f,style:u,children:n}):e.jsx(l,{ref:f,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=j(m),k=j(w),[R,M,E,H]=Y((()=>{const e=!!c,t=T(y,s,i,v,a,!s);return[t,B(t,e),C(t,e),e]}));y!==R.M()&&R.J(5,[y,l]),h!==R.W()&&R.J(6,h);const[W,q]=t.useReducer(R.p,void 0,R.p),[J,O]=R.m(),A=R.H(),V=R.h(),F=[],G=t=>{const n=$(t);return e.jsx(D,{Z:M.K,ee:t,te:R.T(t),ne:R.I(t),oe:g,N:n,re:H,ie:b[P]},X(n,t))};L((()=>{b[P]=!1;const e=R.B(1,(e=>{e?n.flushSync(q):q()})),t=R.B(4,(()=>{I[P]&&I[P](R.C())})),o=R.B(8,(()=>{k[P]&&k[P]()})),r=e=>{M.G(e),E.A(e)};return _?f((()=>r(_[P]))):r(x[P].parentElement),()=>{e(),t(),o(),M.X(),E.X()}}),[]),L((()=>{E.U()}),[W]),t.useImperativeHandle(S,(()=>({get cache(){return R._()},get scrollOffset(){return R.C()},get scrollSize(){return z(R)},get viewportSize(){return R.v()},findStartIndex:R.S,findEndIndex:R.$,getItemOffset:R.T,getItemSize:R.R,scrollToIndex:E.D,scrollTo:E.Y,scrollBy:E.j})),[]);for(let e=J,t=O;e<=t;e++)F.push(G(e));if(u){const e=[],t=[];d(u).forEach((n=>{n<J&&e.push(G(n)),n>O&&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:d,cache:f,ssrCount:u,item:a,onScroll:h,onScrollEnd:v,style:p,...g},_)=>{const m=t.useRef(null),w=d&&!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:f,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:d,ssrCount:f,as:u="div",item:a="div",onScroll:h,onScrollEnd:v},p)=>{const[g,_]=U(o,r),m=t.useRef(null),w=j(h),S=j(v),$=t.useRef(!!f),[y,x,b,I]=Y((()=>{const e=!!c,t=T(_,s,i,f,d,!s);return[t,J(t,e),H(t,e),e]}));_!==y.M()&&y.J(5,[_,l]);const[z,k]=t.useReducer(y.p,void 0,y.p),[R,M]=y.m(),E=y.H(),C=y.h(),W=[];L((()=>{$[P]=!1;const e=y.B(1,(e=>{e?n.flushSync(k):k()})),t=y.B(4,(()=>{w[P]&&w[P]()})),o=y.B(8,(()=>{S[P]&&S[P]()})),r=m[P];return x.G(r),b.A(r),()=>{e(),t(),o(),x.X(),b.X()}}),[]),L((()=>{b.U()}),[z]),t.useImperativeHandle(p,(()=>({get cache(){return y._()},findStartIndex:y.S,findEndIndex:y.$,scrollToIndex:b.D})),[]);for(let t=R,n=M;t<=n;t++){const n=g(t);W.push(e.jsx(D,{Z:x.K,ee:t,te:y.T(t),ne:y.I(t),oe:a,N:n,re:I,ie:$[P]},X(n,t)))}return e.jsx(u,{ref:m,style:{flex:"none",position:"relative",visibility:"hidden",width:I?C:"100%",height:I?"100%":C,pointerEvents:E?"none":void 0},children:W})})),K=(e,t)=>`${e}-${t}`,N=t.memo((({N:n,Z:o,se:r,le:i,ce:s,de:l,fe:c,ue:d,ne:f,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:f?"hidden":"visible",minHeight:c,minWidth:d})),[s,l,d,c,f]),children:n})})),Q=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:l=100,overscan:c=2,initialRowCount:d,initialColCount:f,item:u="div",onScroll:a,onScrollEnd:h,style:v,...p},g)=>{const[_,m,w,S]=Y((()=>{const e=T(r,s,c,d),t=T(i,l,c,f);return[e,t,O(e,t),W(e,t)]}));r!==_.M()&&_.J(5,[r]),i!==m.M()&&m.J(5,[i]);const[$,y]=t.useReducer(_.p,void 0,_.p),[x,b]=t.useReducer(m.p,void 0,m.p),[I,k]=_.m(),[R,M]=m.m(),E=_.H(),C=m.H(),H=z(_),q=z(m),B=t.useRef(null),J=j(a),A=j(h);L((()=>{const e=B[P],t=_.B(1,(e=>{e?n.flushSync(y):y()})),o=m.B(1,(e=>{e?n.flushSync(b):b()})),r=_.B(4,(()=>{J[P]&&J[P](_.C())})),i=_.B(8,(()=>{A[P]&&A[P]()}));return w.G(e),S.A(e),()=>{t(),o(),w.X(),S.X(),r(),i()}}),[]),L((()=>{S.U()}),[$,x]),t.useImperativeHandle(g,(()=>({get scrollTop(){return _.C()},get scrollLeft(){return m.C()},get scrollHeight(){return z(_)},get scrollWidth(){return z(m)},get viewportHeight(){return _.v()},get viewportWidth(){return m.v()},scrollToIndex:S.D,scrollTo:S.Y,scrollBy:S.j})),[]);const X=t.useMemo((()=>{const e=new Map;return(t,n)=>{let r=e.get(K(t,n));return r||e.set(K(t,n),r=o({rowIndex:t,colIndex:n})),r}}),[o]),D=[];for(let t=I;t<=k;t++)for(let n=R;n<=M;n++)D.push(e.jsx(N,{Z:w,se:t,le:n,ce:_.T(t),de:m.T(n),fe:_.R(t),ue:m.R(n),ne:_.I(t)||m.I(n),ae:u,N:X(t,n)},K(t,n)));return e.jsx("div",{ref:B,...p,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",...v},children:e.jsx("div",{style:{overflowAnchor:"none",flex:"none",position:"relative",visibility:"hidden",width:q,height:H,pointerEvents:E||C?"none":void 0},children:D})})}));exports.VList=F,exports.Virtualizer=V,exports.WindowVirtualizer=G,exports.experimental_VGrid=Q;
//# sourceMappingURL=index.js.map