react-window 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/react-window.cjs

@@ -1,22 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react");var G={exports:{}},D={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var ee;function fe(){if(ee)return D;ee=1;var i=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(o,r,s){var c=null;if(s!==void 0&&(c=""+s),r.key!==void 0&&(c=""+r.key),"key"in r){s={};for(var u in r)u!=="key"&&(s[u]=r[u])}else s=r;return r=s.ref,{$$typeof:i,type:o,key:c,ref:r!==void 0?r:null,props:s}}return D.Fragment=t,D.jsx=n,D.jsxs=n,D}var U={};/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var te;function he(){return te||(te=1,process.env.NODE_ENV!=="production"&&function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===C?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case R:return"Fragment";case v:return"Profiler";case y:return"StrictMode";case k:return"Suspense";case h:return"SuspenseList";case Y:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case w:return"Portal";case M:return(e.displayName||"Context")+".Provider";case A:return(e._context.displayName||"Context")+".Consumer";case W:var l=e.render;return e=e.displayName,e||(e=l.displayName||l.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case E:return l=e.displayName||null,l!==null?l:i(e.type)||"Memo";case N:l=e._payload,e=e._init;try{return i(e(l))}catch{}}return null}function t(e){return""+e}function n(e){try{t(e);var l=!1}catch{l=!0}if(l){l=console;var f=l.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(l,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),t(e)}}function o(e){if(e===R)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===N)return"<...>";try{var l=i(e);return l?"<"+l+">":"<...>"}catch{return"<...>"}}function r(){var e=P.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function c(e){if(V.call(e,"key")){var l=Object.getOwnPropertyDescriptor(e,"key").get;if(l&&l.isReactWarning)return!1}return e.key!==void 0}function u(e,l){function f(){_||(_=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",l))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function x(){var e=i(this.type);return j[e]||(j[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function O(e,l,f,d,$,z,H,J){return f=z.ref,e={$$typeof:S,type:e,key:l,props:z,_owner:$},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function I(e,l,f,d,$,z,H,J){var m=l.children;if(m!==void 0)if(d)if(p(m)){for(d=0;d<m.length;d++)b(m[d]);Object.freeze&&Object.freeze(m)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(m);if(V.call(l,"key")){m=i(e);var F=Object.keys(l).filter(function(ae){return ae!=="key"});d=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",K[m+d]||(F=0<F.length?"{"+F.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,d,m,F,m),K[m+d]=!0)}if(m=null,f!==void 0&&(n(f),m=""+f),c(l)&&(n(l.key),m=""+l.key),"key"in l){f={};for(var X in l)X!=="key"&&(f[X]=l[X])}else f=l;return m&&u(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),O(e,m,z,$,r(),f,H,J)}function b(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var T=a,S=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),R=Symbol.for("react.fragment"),y=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),A=Symbol.for("react.consumer"),M=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),h=Symbol.for("react.suspense_list"),E=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),Y=Symbol.for("react.activity"),C=Symbol.for("react.client.reference"),P=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,p=Array.isArray,g=console.createTask?console.createTask:function(){return null};T={"react-stack-bottom-frame":function(e){return e()}};var _,j={},L=T["react-stack-bottom-frame"].bind(T,s)(),Q=g(o(s)),K={};U.Fragment=R,U.jsx=function(e,l,f,d,$){var z=1e4>P.recentlyCreatedOwnerStacks++;return I(e,l,f,!1,d,$,z?Error("react-stack-top-frame"):L,z?g(o(e)):Q)},U.jsxs=function(e,l,f,d,$){var z=1e4>P.recentlyCreatedOwnerStacks++;return I(e,l,f,!0,d,$,z?Error("react-stack-top-frame"):L,z?g(o(e)):Q)}}()),U}var re;function de(){return re||(re=1,process.env.NODE_ENV==="production"?G.exports=fe():G.exports=he()),G.exports}var q=de();function se(i){if(i!==void 0)switch(typeof i){case"number":return i;case"string":{if(i.endsWith("px"))return parseFloat(i);break}}}const me=typeof window<"u"?a.useLayoutEffect:a.useEffect;function ie({box:i,defaultHeight:t,defaultWidth:n,disabled:o,element:r,mode:s,style:c}){const{styleHeight:u,styleWidth:x}=a.useMemo(()=>({styleHeight:se(c?.height),styleWidth:se(c?.width)}),[c?.height,c?.width]),[O,I]=a.useState({height:t,width:n}),b=o||s==="only-height"&&u!==void 0||s==="only-width"&&x!==void 0||u!==void 0&&x!==void 0;return me(()=>{if(r===null||b)return;const T=new ResizeObserver(S=>{for(const w of S){const{contentRect:R,target:y}=w;r===y&&I(v=>v.height===R.height&&v.width===R.width?v:{height:R.height,width:R.width})}});return T.observe(r,{box:i}),()=>{T?.unobserve(r)}},[i,b,r,u,x]),a.useMemo(()=>({height:u??O.height,width:x??O.width}),[O,u,x])}function le(i){return a.useMemo(()=>i,Object.values(i))}function B(i,t="Assertion error"){if(!i)throw console.error(t),Error(t)}class be{#e;#l;#s;#c;#o;#r;#a;#t=0;#n=0;#i=0;#u=-1;constructor({count:t,defaultSize:n,direction:o,element:r,itemSize:s,overscanCount:c}){B(r),this.#e=new Map,this.#l=new Set,this.#s=t,this.#c=o,this.#o=r,this.#r=s,this.#a=c,this.#n=n??0,this.#o.addEventListener("scroll",this.#h)}getEstimatedHeight(){if(typeof this.#r=="number")return this.#s*this.#r;if(this.#e.size>0){const t=this.#e.get(this.#e.size-1);B(t!==void 0,"Unexpected bounds cache miss");const n=(t.scrollOffset+t.size)/this.#e.size;return this.#s*n}else return 0}getIndices(){return this.#i<0?[0,-1]:[this.#i,this.#u]}getItemBounds(t){if(typeof this.#r=="number")return{scrollOffset:t*this.#r,size:this.#r};for(;this.#e.size-1<t;){const o=this.#e.size,r=typeof this.#r=="number"?this.#r:this.#r(o);if(o===0)this.#e.set(o,{size:r,scrollOffset:0});else{const s=this.#e.get(o-1);B(s!==void 0,`Unexpected bounds cache miss for index ${t}`),this.#e.set(o,{scrollOffset:s.scrollOffset+s.size,size:r})}}const n=this.#e.get(t);return B(n!==void 0,`Unexpected bounds cache miss for index ${t}`),n}resize(t){this.#n=t,this.#f()}subscribe=t=>(this.#l.add(t),()=>{this.#l.delete(t)});version=()=>`${this.#i}-${this.#u}`;scrollToIndex({align:t="auto",behavior:n,index:o}){const r=this.#d(o,t);this.#c==="horizontal"?this.#o?.scrollTo({left:r,behavior:n||void 0}):this.#o?.scrollTo({behavior:n||void 0,top:r})}scrollForTest(t){this.#t=t,this.#f()}#h=()=>{const{clientHeight:t,scrollHeight:n,scrollLeft:o,scrollTop:r,scrollWidth:s}=this.#o,c=this.#c==="vertical"?r:o,u=this.#c==="vertical"?n:s;this.#t!==c&&(this.#t=Math.max(0,Math.min(c,u-t)),this.#f())};#d(t,n){const o=this.getItemBounds(this.#s-1).scrollOffset,r=o+this.getItemBounds(this.#s-1).scrollOffset-this.#n,s=Math.max(0,this.getItemBounds(t+1).scrollOffset-this.#n),c=Math.min(o,this.getItemBounds(t).scrollOffset);switch(n==="smart"&&(this.#t>=s&&this.#t<=c?n="auto":n="center"),n){case"start":return Math.min(r,c);case"end":return s;case"center":{const u=Math.round(s+(c-s)/2);return u<Math.ceil(this.#n/2)?0:u>r?r:u}case"auto":default:return this.#t>=s&&this.#t<=c?this.#t:this.#t<s?s:c}}#m(){this.#l.forEach(t=>t())}#f(){const t=this.#s-1;let n=0,o=-1,r=0;for(;r<t;){const s=this.getItemBounds(r);if(s.scrollOffset+s.size>this.#t)break;r++}for(n=r,n=Math.max(0,n-this.#a);r<t;){const s=this.getItemBounds(r);if(s.scrollOffset+s.size>=this.#t+this.#n)break;r++}o=Math.min(t,r),o=Math.min(this.#s-1,o+this.#a),(this.#i!==n||this.#u!==o)&&(this.#i=n,this.#u=o,this.#m())}}function Z({count:i,defaultSize:t,direction:n,element:o,itemSize:r,overscanCount:s,size:c}){const u=a.useMemo(()=>o?new be({count:i,defaultSize:t,direction:n,element:o,itemSize:r,overscanCount:s}):null,[i,t,n,o,r,s]);return a.useLayoutEffect(()=>{c!==void 0&&u?.resize(c)},[c,u]),a.useSyncExternalStore(u?.subscribe??ce,u?.version??ne,u?.version??ne),u}function ce(){return ce}function ne(){return""}function oe(i,t){if(i===t)return!0;if(!!i!=!!t||(B(i!==void 0),B(t!==void 0),Object.keys(i).length!==Object.keys(t).length))return!1;for(const n in i)if(!Object.is(t[n],i[n]))return!1;return!0}function ue(i,t){const{style:n,...o}=i,{style:r,...s}=t;return oe(n,r)&&oe(o,s)}function ve({cellComponent:i,cellProps:t,className:n,columnCount:o,columnWidth:r,defaultHeight:s,defaultWidth:c,gridRef:u,onCellsRendered:x,overscanCount:O=3,rowCount:I,rowHeight:b,style:T,...S}){const w=le(t),R=a.useMemo(()=>a.memo(i,ue),[i]),[y,v]=a.useState(null),{height:A=0,width:M=0}=ie({defaultHeight:s,defaultWidth:c,element:y,style:T}),W=a.useMemo(()=>typeof r=="number"?r:p=>r(p,w),[r,w]),k=a.useMemo(()=>typeof b=="number"?b:p=>b(p,w),[b,w]),h=Z({count:o,defaultSize:c,direction:"horizontal",element:y,itemSize:W,overscanCount:O,size:M}),E=Z({count:I,defaultSize:s,direction:"vertical",element:y,itemSize:k,overscanCount:O,size:A}),[N,Y]=h?.getIndices()??[-1,0],[C,P]=E?.getIndices()??[-1,0];a.useImperativeHandle(u,()=>({get element(){return y},scrollToCell({behavior:p="auto",columnAlign:g="auto",columnIndex:_,rowAlign:j="auto",rowIndex:L}){E?.scrollToIndex({align:j,behavior:p,index:L}),h?.scrollToIndex({behavior:p,align:g,index:_})},scrollToColumn({align:p="auto",behavior:g="auto",index:_}){h?.scrollToIndex({align:p,behavior:g,index:_})},scrollToRow({align:p="auto",behavior:g="auto",index:_}){E?.scrollToIndex({align:p,behavior:g,index:_})}}),[h,y,E]),a.useEffect(()=>{N>=0&&Y>=0&&C>=0&&P>=0&&x&&x({columnStartIndex:N,columnStopIndex:Y,rowStartIndex:C,rowStopIndex:P})},[x,N,Y,C,P]);const V=a.useMemo(()=>{const p=[];if(h&&o>0&&E&&I>0)for(let g=C;g<=P;g++){const _=E.getItemBounds(g);for(let j=N;j<=Y;j++){const L=h.getItemBounds(j);p.push(a.createElement(R,{...w,columnIndex:j,key:`${g}-${j}`,rowIndex:g,style:{position:"absolute",left:0,transform:`translate(${L.scrollOffset}px, ${_.scrollOffset}px)`,height:_.size,width:L.size}}))}}return p},[R,w,o,N,Y,h,I,C,P,E]);return q.jsx("div",{role:"grid",...S,className:n,ref:v,style:{...T,maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto"},children:q.jsx("div",{className:n,style:{position:"relative",height:E?.getEstimatedHeight(),width:h?.getEstimatedHeight()},children:V})})}const Ee=a.useRef;function pe({className:i,defaultHeight:t=0,listRef:n,onRowsRendered:o,overscanCount:r=3,rowComponent:s,rowCount:c,rowHeight:u,rowProps:x,style:O,...I}){const b=le(x),T=a.useMemo(()=>a.memo(s,ue),[s]),[S,w]=a.useState(null),{height:R=0}=ie({defaultHeight:t,element:S,mode:"only-height",style:O}),y=a.useMemo(()=>typeof u=="number"?u:k=>u(k,b),[u,b]),v=Z({count:c,defaultSize:t,direction:"vertical",element:S,itemSize:y,overscanCount:r,size:R}),[A,M]=v?.getIndices()??[-1,0];a.useImperativeHandle(n,()=>({get element(){return S},scrollToRow({align:k="auto",behavior:h="auto",index:E}){v?.scrollToIndex({align:k,behavior:h,index:E})}}),[S,v]),a.useEffect(()=>{A>=0&&M>=0&&o&&o({startIndex:A,stopIndex:M})},[o,A,M]);const W=a.useMemo(()=>{const k=[];if(v&&c>0)for(let h=A;h<=M;h++){const E=v.getItemBounds(h);k.push(a.createElement(T,{...b,key:h,index:h,style:{position:"absolute",left:0,transform:`translateY(${E.scrollOffset}px)`,height:E.size,width:"100%"}}))}return k},[T,c,b,A,M,v]);return q.jsx("div",{role:"list",...I,className:i,ref:w,style:{...O,maxHeight:"100%",flexGrow:1,overflowY:"auto"},children:q.jsx("div",{className:i,style:{height:v?.getEstimatedHeight(),position:"relative",width:"100%"},children:W})})}const ge=a.useRef;exports.Grid=ve;exports.List=pe;exports.useGridRef=Ee;exports.useListRef=ge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),i=require("react"),P=typeof window<"u"?i.useLayoutEffect:i.useEffect;function $(e){if(e!==void 0)switch(typeof e){case"number":return e;case"string":{if(e.endsWith("px"))return parseFloat(e);break}}}function V({box:e,defaultHeight:r,defaultWidth:l,disabled:s,element:t,mode:c,style:n}){const{styleHeight:u,styleWidth:o}=i.useMemo(()=>({styleHeight:$(n?.height),styleWidth:$(n?.width)}),[n?.height,n?.width]),[f,p]=i.useState({height:r,width:l}),I=s||c==="only-height"&&u!==void 0||c==="only-width"&&o!==void 0||u!==void 0&&o!==void 0;return P(()=>{if(t===null||I)return;const S=new ResizeObserver(y=>{for(const w of y){const{contentRect:d,target:m}=w;t===m&&p(z=>z.height===d.height&&z.width===d.width?z:{height:d.height,width:d.width})}});return S.observe(t,{box:e}),()=>{S?.unobserve(t)}},[e,I,t,u,o]),i.useMemo(()=>({height:u??f.height,width:o??f.width}),[f,u,o])}function H(e,r="Assertion error"){if(!e)throw console.error(r),Error(r)}function q({cachedBounds:e,itemCount:r,itemSize:l}){if(typeof l=="number")return r*l;if(e.size>0){const s=e.get(e.size-1);H(s!==void 0,"Unexpected bounds cache miss");const t=(s.scrollOffset+s.size)/e.size;return r*t}else return 0}function U({align:e,cachedBounds:r,index:l,itemCount:s,containerScrollOffset:t,containerSize:c}){const n=r.get(s-1).scrollOffset,u=n+n-c,o=Math.max(0,r.get(l+1).scrollOffset-c),f=Math.min(n,r.get(l).scrollOffset);switch(e==="smart"&&(t>=o&&t<=f?e="auto":e="center"),e){case"start":return Math.min(u,f);case"end":return o;case"center":{const p=Math.round(o+(f-o)/2);return p<Math.ceil(c/2)?0:p>u?u:p}case"auto":default:return t>=o&&t<=f?t:t<o?o:f}}function F({cachedBounds:e,containerScrollOffset:r,containerSize:l,itemCount:s,overscanCount:t}){const c=s-1;let n=0,u=-1,o=0;for(;o<c;){const f=e.get(o);if(f.scrollOffset+f.size>r)break;o++}for(n=o,n=Math.max(0,n-t);o<c;){const f=e.get(o);if(f.scrollOffset+f.size>=r+l)break;o++}return u=Math.min(c,o),u=Math.min(s-1,u+t),n<0?[0,-1]:[n,u]}function Y({itemCount:e,itemProps:r,itemSize:l}){const s=new Map;return{get(t){for(H(t<e,`Invalid index ${t}`);s.size-1<t;){const n=s.size,u=typeof l=="number"?l:l(n,r);if(n===0)s.set(n,{size:u,scrollOffset:0});else{const o=s.get(n-1);H(o!==void 0,`Unexpected bounds cache miss for index ${t}`),s.set(n,{scrollOffset:o.scrollOffset+o.size,size:u})}}const c=s.get(t);return H(c!==void 0,`Unexpected bounds cache miss for index ${t}`),c},set(t,c){s.set(t,c)},get size(){return s.size}}}function A({itemCount:e,itemProps:r,itemSize:l}){return i.useMemo(()=>Y({itemCount:e,itemProps:r,itemSize:l}),[e,r,l])}function j({containerElement:e,containerStyle:r,defaultContainerSize:l=0,direction:s,itemCount:t,itemProps:c,itemSize:n,overscanCount:u}){const[o,f]=i.useState([0,-1]),[p,I]=[Math.min(t-1,o[0]),Math.min(t-1,o[1])],{height:S=l,width:y=l}=V({defaultHeight:s==="vertical"?l:void 0,defaultWidth:s==="horizontal"?l:void 0,element:e,mode:s==="vertical"?"only-height":"only-width",style:r}),w=s==="vertical"?S:y,d=A({itemCount:t,itemProps:c,itemSize:n}),m=i.useCallback(a=>d.get(a),[d]),z=i.useCallback(()=>q({cachedBounds:d,itemCount:t,itemSize:n}),[d,t,n]),g=i.useCallback(a=>F({cachedBounds:d,containerScrollOffset:a,containerSize:w,itemCount:t,overscanCount:u}),[d,w,t,u]);P(()=>{const a=(s==="vertical"?e?.scrollTop:e?.scrollLeft)??0;f(g(a))},[e,s,g]);const h=i.useCallback(({align:a="auto",behavior:O="auto",containerScrollOffset:v,index:x})=>{const M=U({align:a,cachedBounds:d,containerScrollOffset:v,containerSize:w,index:x,itemCount:t});s==="horizontal"?e?.scrollTo({left:M,behavior:O||void 0}):e?.scrollTo({behavior:O||void 0,top:M})},[d,e,w,s,t]);return{getCellBounds:m,getEstimatedHeight:z,onScroll:()=>{const a=g((s==="vertical"?e?.scrollTop:e?.scrollLeft)??0);(a[0]!==p||a[1]!==I)&&f(a)},scrollToIndex:h,startIndex:p,stopIndex:I}}function W(e){return i.useMemo(()=>e,Object.values(e))}function G(e,r){if(e===r)return!0;if(!!e!=!!r||(H(e!==void 0),H(r!==void 0),Object.keys(e).length!==Object.keys(r).length))return!1;for(const l in e)if(!Object.is(r[l],e[l]))return!1;return!0}function B(e,r){const{style:l,...s}=e,{style:t,...c}=r;return G(l,t)&&G(s,c)}function C({cellComponent:e,cellProps:r,className:l,columnCount:s,columnWidth:t,defaultHeight:c=0,defaultWidth:n=0,gridRef:u,onCellsRendered:o,overscanCount:f=3,rowCount:p,rowHeight:I,style:S,...y}){const w=W(r),d=i.useMemo(()=>i.memo(e,B),[e]),[m,z]=i.useState(null),g=j({containerElement:m,defaultContainerSize:n,direction:"horizontal",itemCount:s,itemProps:w,itemSize:t,overscanCount:f}),h=j({containerElement:m,defaultContainerSize:c,direction:"vertical",itemCount:p,itemProps:w,itemSize:I,overscanCount:f}),{startIndex:a,stopIndex:O}=g,{startIndex:v,stopIndex:x}=h;i.useImperativeHandle(u,()=>({get element(){return m},scrollToCell({behavior:T="auto",columnAlign:b="auto",columnIndex:k,rowAlign:E="auto",rowIndex:R}){h?.scrollToIndex({align:E,behavior:T,containerScrollOffset:m?.scrollTop??0,index:R}),g?.scrollToIndex({align:b,behavior:T,containerScrollOffset:m?.scrollLeft??0,index:k})},scrollToColumn({align:T="auto",behavior:b="auto",index:k}){g?.scrollToIndex({align:T,behavior:b,containerScrollOffset:m?.scrollLeft??0,index:k})},scrollToRow({align:T="auto",behavior:b="auto",index:k}){h?.scrollToIndex({align:T,behavior:b,containerScrollOffset:m?.scrollTop??0,index:k})}}),[g,m,h]),i.useEffect(()=>{a>=0&&O>=0&&v>=0&&x>=0&&o&&o({columnStartIndex:a,columnStopIndex:O,rowStartIndex:v,rowStopIndex:x})},[o,a,O,v,x]);const M=i.useMemo(()=>{const T=[];if(g&&s>0&&h&&p>0)for(let b=v;b<=x;b++){const k=h.getCellBounds(b);for(let E=a;E<=O;E++){const R=g.getCellBounds(E);T.push(i.createElement(d,{...w,columnIndex:E,key:`${b}-${E}`,rowIndex:b,style:{position:"absolute",left:0,transform:`translate(${R.scrollOffset}px, ${k.scrollOffset}px)`,height:k.size,width:R.size}}))}}return T},[d,w,s,a,O,g,p,v,x,h]);return L.jsx("div",{role:"grid",...y,className:l,onScroll:()=>{g.onScroll(),h.onScroll()},ref:z,style:{...S,maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto"},children:L.jsx("div",{className:l,style:{position:"relative",height:h?.getEstimatedHeight(),width:g?.getEstimatedHeight()},children:M})})}const D=i.useState,J=i.useRef;function K({className:e,defaultHeight:r=0,listRef:l,onRowsRendered:s,overscanCount:t=3,rowComponent:c,rowCount:n,rowHeight:u,rowProps:o,style:f,...p}){const I=W(o),S=i.useMemo(()=>i.memo(c,B),[c]),[y,w]=i.useState(null),{getCellBounds:d,getEstimatedHeight:m,onScroll:z,scrollToIndex:g,startIndex:h,stopIndex:a}=j({containerElement:y,defaultContainerSize:r,direction:"vertical",itemCount:n,itemProps:I,itemSize:u,overscanCount:t});i.useImperativeHandle(l,()=>({get element(){return y},scrollToRow({align:v="auto",behavior:x="auto",index:M}){g({align:v,behavior:x,containerScrollOffset:y?.scrollTop??0,index:M})}}),[y,g]),i.useEffect(()=>{h>=0&&a>=0&&s&&s({startIndex:h,stopIndex:a})},[s,h,a]);const O=i.useMemo(()=>{const v=[];if(n>0)for(let x=h;x<=a;x++){const M=d(x);v.push(i.createElement(S,{...I,key:x,index:x,style:{position:"absolute",left:0,transform:`translateY(${M.scrollOffset}px)`,height:M.size,width:"100%"}}))}return v},[S,d,n,I,h,a]);return L.jsx("div",{role:"list",...p,className:e,onScroll:z,ref:w,style:{...f,maxHeight:"100%",flexGrow:1,overflowY:"auto"},children:L.jsx("div",{className:e,style:{height:m(),position:"relative",width:"100%"},children:O})})}const Q=i.useState,X=i.useRef;exports.Grid=C;exports.List=K;exports.useGridCallbackRef=D;exports.useGridRef=J;exports.useListCallbackRef=Q;exports.useListRef=X;

package/dist/react-window.d.ts

@@ -5,9 +5,14 @@ import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { useRef } from 'react';
+import { useState } from 'react';
 
 export declare type Align = "auto" | "center" | "end" | "smart" | "start";
 
+declare type CellComponent<CellProps extends object> = GridProps<CellProps>["cellComponent"];
+
+export declare type CellComponentProps<CellProps extends object = object> = ComponentProps<CellComponent<CellProps>>;
+
 declare type ExcludeForbiddenKeys<Type> = {
     [Key in keyof Type]: Key extends ForbiddenKeys ? never : Type[Key];
 };
@@ -20,27 +25,23 @@ declare type ForbiddenKeys = "columnIndex" | "rowIndex" | "style";
 
 declare type ForbiddenKeys_2 = "index" | "style";
 
-export declare function Grid<CellProps extends object>({ cellComponent: CellComponentProp, cellProps: cellPropsUnstable, className, columnCount, columnWidth: columnWidthProp, defaultHeight, defaultWidth, gridRef, onCellsRendered, overscanCount, rowCount, rowHeight: rowHeightProp, style, ...rest }: GridProps<CellProps>): JSX.Element;
-
-declare type GridComponent<CellProps extends object> = GridProps<CellProps>["cellComponent"];
-
-export declare type GridComponentProps<CellProps extends object = object> = ComponentProps<GridComponent<CellProps>>;
+export declare function Grid<CellProps extends object>({ cellComponent: CellComponentProp, cellProps: cellPropsUnstable, className, columnCount, columnWidth, defaultHeight, defaultWidth, gridRef, onCellsRendered, overscanCount, rowCount, rowHeight, style, ...rest }: GridProps<CellProps>): JSX.Element;
 
 export declare type GridImperativeAPI = {
     get element(): HTMLDivElement | null;
-    scrollToCell({ behavior, columnAlign, columnIndex, rowAlign, rowIndex, }: {
+    scrollToCell({ behavior, columnAlign, columnIndex, rowAlign, rowIndex }: {
         behavior?: "auto" | "instant" | "smooth";
         columnAlign?: "auto" | "center" | "end" | "smart" | "start";
         columnIndex: number;
         rowAlign?: "auto" | "center" | "end" | "smart" | "start";
         rowIndex: number;
     }): void;
-    scrollToColumn({ align, behavior, index, }: {
+    scrollToColumn({ align, behavior, index }: {
         align?: "auto" | "center" | "end" | "smart" | "start";
         behavior?: "auto" | "instant" | "smooth";
         index: number;
     }): void;
-    scrollToRow({ align, behavior, index, }: {
+    scrollToRow({ align, behavior, index }: {
         align?: "auto" | "center" | "end" | "smart" | "start";
         behavior?: "auto" | "instant" | "smooth";
         index: number;
@@ -68,7 +69,7 @@ export declare type GridProps<CellProps extends object> = {
      * This component will receive an `index` and `style` prop by default.
      * Additionally it will receive prop values passed to `cellProps`.
      *
-     * ⚠️ The prop types for this component are exported as `GridComponentProps`
+     * ⚠️ The prop types for this component are exported as `CellComponentProps`
      */
     cellComponent: (props: {
         columnIndex: number;
@@ -126,11 +127,11 @@ export declare type GridProps<CellProps extends object> = {
     style?: CSSProperties;
 };
 
-export declare function List<RowProps extends object>({ className, defaultHeight, listRef, onRowsRendered, overscanCount, rowComponent: RowComponentProp, rowCount, rowHeight: rowHeightProp, rowProps: rowPropsUnstable, style, ...rest }: ListProps<RowProps>): JSX.Element;
+export declare function List<RowProps extends object>({ className, defaultHeight, listRef, onRowsRendered, overscanCount, rowComponent: RowComponentProp, rowCount, rowHeight, rowProps: rowPropsUnstable, style, ...rest }: ListProps<RowProps>): JSX.Element;
 
 export declare type ListImperativeAPI = {
     get element(): HTMLDivElement | null;
-    scrollToRow({ align, behavior, index, }: {
+    scrollToRow({ align, behavior, index }: {
         align?: "auto" | "center" | "end" | "smart" | "start";
         behavior?: "auto" | "instant" | "smooth";
         index: number;
@@ -204,11 +205,25 @@ declare type RowComponent<RowProps extends object> = ListProps<RowProps>["rowCom
 
 export declare type RowComponentProps<RowProps extends object = object> = ComponentProps<RowComponent<RowProps>>;
 
+/**
+ * Convenience hook to return a properly typed ref callback for the Grid component.
+ *
+ * Use this hook when you need to share the ref with another component or hook.
+ */
+export declare const useGridCallbackRef: typeof useState<GridImperativeAPI | null>;
+
 /**
  * Convenience hook to return a properly typed ref for the Grid component.
  */
 export declare const useGridRef: typeof useRef<GridImperativeAPI>;
 
+/**
+ * Convenience hook to return a properly typed ref callback for the List component.
+ *
+ * Use this hook when you need to share the ref with another component or hook.
+ */
+export declare const useListCallbackRef: typeof useState<ListImperativeAPI | null>;
+
 /**
  * Convenience hook to return a properly typed ref for the List component.
  */