virtua 0.19.2 → 0.20.1

package/README.md

@@ -88,15 +88,45 @@ export const App = () => {
 };
 ```
 
+#### Customization
+
+`VList` is a recommended solution which works like a drop-in replacement of simple list built with scrollable `div` (or removed [virtual-scroller element](https://github.com/WICG/virtual-scroller)). For more complicated styling or markup, use `Virtualizer`.
+
+```tsx
+import { Virtualizer } from "virtua";
+
+export const App = () => {
+  return (
+    <div style={{ overflowY: "auto", height: 800 }}>
+      <div style={{ height: 40 }}>header</div>
+      <Virtualizer startMargin={40}>
+        {Array.from({ length: 1000 }).map((_, i) => (
+          <div
+            key={i}
+            style={{
+              height: Math.floor(Math.random() * 10) * 10 + 10,
+              borderBottom: "solid 1px gray",
+              background: "white",
+            }}
+          >
+            {i}
+          </div>
+        ))}
+      </Virtualizer>
+    </div>
+  );
+};
+```
+
 #### Window scroll
 
 ```tsx
-import { WVList } from "virtua";
+import { WindowVirtualizer } from "virtua";
 
 export const App = () => {
   return (
     <div style={{ padding: 200 }}>
-      <WVList>
+      <WindowVirtualizer>
         {Array.from({ length: 1000 }).map((_, i) => (
           <div
             key={i}
@@ -109,7 +139,7 @@ export const App = () => {
             {i}
           </div>
         ))}
-      </WVList>
+      </WindowVirtualizer>
     </div>
   );
 };
@@ -141,7 +171,7 @@ export const App = () => {
 
 #### React Server Components (RSC) support
 
-This library is marked as a Client Component. You can render RSC as children of VList or WVList.
+This library is marked as a Client Component. You can render RSC as children of `VList`, `Virtualizer` or `WindowVirtualizer`.
 
 ```tsx
 // page.tsx in App Router of Next.js
@@ -257,7 +287,7 @@ It may be dispatched by ResizeObserver in this lib [as described in spec](https:
 | Horizontal scroll in RTL direction                 | ✅                                                                                                               | ❌                                                                                                                               | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302))                                              | ❌                                                                                                                                                                     | ❌                                                                                                                                                 | ❌                                                                                                                                                 | ❌                                                                                                                                       |
 | Grid (Virtualization for two dimension)            | 🟠 (experimental_VGrid)                                                                                          | ❌                                                                                                                               | ✅ (FixedSizeGrid / VariableSizeGrid)                                                                                        | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                                                                                           | ❌                                                                                                                                                 | 🟠 (needs customization)                                                                                                                 |
 | Table                                              | 🟠 (needs customization)                                                                                         | ✅ (TableVirtuoso)                                                                                                               | 🟠 (needs customization)                                                                                                     | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md))                                                                                   | 🟠 (needs customization)                                                                                                                           | ❌                                                                                                                                                 | 🟠 (needs customization)                                                                                                                 |
-| Window scroller                                    | ✅ (WVList)                                                                                                      | ✅                                                                                                                               | ❌                                                                                                                           | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md))                                                                 | ✅                                                                                                                                                 | ❌                                                                                                                                                 | ❌                                                                                                                                       |
+| Window scroller                                    | ✅ (WindowVirtualizer)                                                                                           | ✅                                                                                                                               | ❌                                                                                                                           | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md))                                                                 | ✅                                                                                                                                                 | ❌                                                                                                                                                 | ❌                                                                                                                                       |
 | Dynamic list size                                  | ✅                                                                                                               | ✅                                                                                                                               | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md))                           | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md))                                                                     | ✅                                                                                                                                                 | ❌                                                                                                                                                 | ✅                                                                                                                                       |
 | Dynamic item size                                  | ✅                                                                                                               | ✅                                                                                                                               | 🟠 (needs additional codes and has wrong destination when scrolling to item imperatively)                                    | 🟠 (needs [CellMeasurer](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md) and has wrong destination when scrolling to item imperatively) | 🟠 (has wrong destination when scrolling to item imperatively)                                                                                     | ❌                                                                                                                                                 | 🟠 (has wrong destination when scrolling to item imperatively)                                                                           |
 | Reverse scroll                                     | ✅                                                                                                               | ✅                                                                                                                               | ❌                                                                                                                           | ❌                                                                                                                                                                     | ❌                                                                                                                                                 | ❌                                                                                                                                                 | ❌                                                                                                                                       |

package/lib/index.js

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