virtua 0.15.7 → 0.16.0

package/README.md

@@ -12,10 +12,10 @@ If you want to check the difference with the alternatives right away, [see compa
 
 This project is a challenge to rethink virtualization. The goals are...
 
-- **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, etc).
-- **Fast:** Scrolling without frame drop needs optimization in many aspects (reduce CPU usage, reduce GC, [reduce layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), optimize with CSS, optimize for frameworks, etc). We are trying to combine the best of them.
+- **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, iOS support, etc).
+- **Fast:** Natural virtual scrolling needs optimization in many aspects (eliminate frame drops by reducing CPU usage and GC and [layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), reduce visual jumps on repaint, optimize with CSS, optimize for frameworks, etc). We are trying to combine the best of them.
 - **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and the total is [~5kB gzipped](https://bundlephobia.com/package/virtua).
-- **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, RTL, mobile, sticky, infinite scrolling, placeholder, scrollTo, scroll restoration, DnD, table, and more. See [live demo](#demo).
+- **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, RTL, mobile, infinite scrolling, scroll restoration, DnD, keyboard navigation, sticky, placeholder and more. See [live demo](#demo).
 - **Framework agnostic (WIP):** Currently only for [React](https://react.dev/) but we could support [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Solid](https://www.solidjs.com/), [Angular](https://angular.io/), [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and more in the future.
 
 ## Demo
@@ -88,30 +88,6 @@ export const App = () => {
 };
 ```
 
-### Vertical and horizontal scroll
-
-```tsx
-import { VGrid } from "virtua";
-
-export const App = () => {
-  return (
-    <VGrid style={{ height: 800 }} row={1000} col={500}>
-      {({ rowIndex, colIndex }) => (
-        <div
-          style={{
-            width: ((colIndex % 3) + 1) * 100,
-            border: "solid 1px gray",
-            background: "white",
-          }}
-        >
-          {rowIndex} / {colIndex}
-        </div>
-      )}
-    </VGrid>
-  );
-};
-```
-
 ### Window scroll
 
 ```tsx
@@ -139,6 +115,30 @@ export const App = () => {
 };
 ```
 
+### Vertical and horizontal scroll
+
+```tsx
+import { experimental_VGrid as VGrid } from "virtua";
+
+export const App = () => {
+  return (
+    <VGrid style={{ height: 800 }} row={1000} col={500}>
+      {({ rowIndex, colIndex }) => (
+        <div
+          style={{
+            width: ((colIndex % 3) + 1) * 100,
+            border: "solid 1px gray",
+            background: "white",
+          }}
+        >
+          {rowIndex} / {colIndex}
+        </div>
+      )}
+    </VGrid>
+  );
+};
+```
+
 ### React Server Components (RSC) support
 
 This library is marked as a Client Component. You can render RSC as children of VList or WVList.
@@ -173,12 +173,14 @@ And see [examples](./stories) for more usages.
 
 #### Is there any way to improve performance further?
 
-In complex usage, children element generation can be a performance bottle neck if you re-render frequently the parent of virtual scroller and the children are tons of items, because React element generation is not free and new React element instance breaks some of memoization inside virtual scroller. In that case use useMemo to reduce computation and keep the elements' instance the same.
+As a trade-off to be compatible with React's built-in elements like `div`, virtua doesn't have optimization possible by using [render prop](https://legacy.reactjs.org/docs/render-props.html) which some of other virtualization libraries for React have. That also means common optimization techniques for non-virtualized list ([`memo`](https://react.dev/reference/react/memo), [`useMemo`](https://react.dev/reference/react/useMemo), [`context`](https://react.dev/learn/passing-data-deeply-with-context), etc) work for this lib!
+
+In complex usage, children element generation can be a performance bottle neck if you re-render frequently the parent of virtual scroller and the children are tons of items. That's because React element generation is fast enough but not free and new React element instance breaks some of memoization inside virtual scroller. In that case use `useMemo` to reduce computation and keep the elements' instance the same.
 
 ```tsx
 const elements = useMemo(
-  () => array.map((d) => <Component key={d.id} {...d} />),
-  [array]
+  () => tooLongArray.map((d) => <Component key={d.id} {...d} />),
+  [tooLongArray]
 );
 const [position, setPosition] = useState(0);
 return (
@@ -189,6 +191,8 @@ return (
 );
 ```
 
+And if you want to pass the state to the items, using `context` instead of props may be better because it doesn't break the useMemo.
+
 #### What is `ResizeObserver loop completed with undelivered notifications.` error?
 
 It may be dispatched by ResizeObserver in this lib [as described in spec](https://www.w3.org/TR/resize-observer/#deliver-resize-error). If it bothers you,
@@ -203,7 +207,7 @@ It may be dispatched by ResizeObserver in this lib [as described in spec](https:
 | Bundle size                                        | [5.0kB gzipped](https://bundlephobia.com/package/virtua) | [16.9kB gzipped](https://bundlephobia.com/package/react-virtuoso)                                | [6.4kB gzipped](https://bundlephobia.com/package/react-window)                                     | [27.3kB gzipped](https://bundlephobia.com/package/react-virtualized)                                                                                                   | [2.3kB gzipped](https://bundlephobia.com/package/@tanstack/react-virtual) | [3.7kB gzipped](https://bundlephobia.com/package/react-tiny-virtual-list)       | [3.1kB gzipped](https://bundlephobia.com/package/react-cool-virtual)  |
 | Vertical scroll                                    | ✅                                                       | ✅                                                                                               | ✅                                                                                                 | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                  | ✅                                                                              | 🟠 (needs customization)                                              |
 | Horizontal scroll                                  | ✅                                                       | ❌                                                                                               | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302))                    | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                  | ✅                                                                              | 🟠 (needs customization)                                              |
-| Grid (Virtualization for two dimension)            | ✅ (VGrid)                                               | ❌                                                                                               | ✅ (FixedSizeGrid / VariableSizeGrid)                                                              | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                  | ❌                                                                              | 🟠 (needs customization)                                              |
+| 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))                                                                 | ✅                                                                        | ❌                                                                              | ❌                                                                    |
 | 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))                                                                     | ✅                                                                        | ❌                                                                              | ✅                                                                    |

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