virtua/lib/index.js

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