react-window 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/react-window.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),n=require("react"),W=typeof window<"u"?n.useLayoutEffect:n.useEffect;function G(e){if(e!==void 0)switch(typeof e){case"number":return e;case"string":{if(e.endsWith("px"))return parseFloat(e);break}}}function q({box:e,defaultHeight:r,defaultWidth:l,disabled:s,element:t,mode:f,style:i}){const{styleHeight:u,styleWidth:o}=n.useMemo(()=>({styleHeight:G(i?.height),styleWidth:G(i?.width)}),[i?.height,i?.width]),[a,w]=n.useState({height:r,width:l}),v=s||f==="only-height"&&u!==void 0||f==="only-width"&&o!==void 0||u!==void 0&&o!==void 0;return W(()=>{if(t===null||v)return;const O=new ResizeObserver(M=>{for(const I of M){const{contentRect:d,target:S}=I;t===S&&w(h=>h.height===d.height&&h.width===d.width?h:{height:d.height,width:d.width})}});return O.observe(t,{box:e}),()=>{O?.unobserve(t)}},[e,v,t,u,o]),n.useMemo(()=>({height:u??a.height,width:o??a.width}),[a,u,o])}function R(e,r="Assertion error"){if(!e)throw console.error(r),Error(r)}function F({cachedBounds:e,itemCount:r,itemSize:l}){if(typeof l=="number")return r*l;if(e.size>0){const s=e.get(e.size-1);R(s!==void 0,"Unexpected bounds cache miss");const t=(s.scrollOffset+s.size)/e.size;return r*t}else return 0}function C({align:e,cachedBounds:r,index:l,itemCount:s,containerScrollOffset:t,containerSize:f}){const i=r.get(s-1).scrollOffset,u=i+i-f,o=Math.max(0,r.get(l+1).scrollOffset-f),a=Math.min(i,r.get(l).scrollOffset);switch(e==="smart"&&(t>=o&&t<=a?e="auto":e="center"),e){case"start":return Math.min(u,a);case"end":return o;case"center":{const w=Math.round(o+(a-o)/2);return w<Math.ceil(f/2)?0:w>u?u:w}case"auto":default:return t>=o&&t<=a?t:t<o?o:a}}function N({cachedBounds:e,containerScrollOffset:r,containerSize:l,itemCount:s,overscanCount:t}){const f=s-1;let i=0,u=-1,o=0;for(;o<f;){const a=e.get(o);if(a.scrollOffset+a.size>r)break;o++}for(i=o,i=Math.max(0,i-t);o<f;){const a=e.get(o);if(a.scrollOffset+a.size>=r+l)break;o++}return u=Math.min(f,o),u=Math.min(s-1,u+t),i<0?[0,-1]:[i,u]}function Y({itemCount:e,itemProps:r,itemSize:l}){const s=new Map;return{get(t){for(R(t<e,`Invalid index ${t}`);s.size-1<t;){const i=s.size,u=typeof l=="number"?l:l(i,r);if(i===0)s.set(i,{size:u,scrollOffset:0});else{const o=s.get(i-1);R(o!==void 0,`Unexpected bounds cache miss for index ${t}`),s.set(i,{scrollOffset:o.scrollOffset+o.size,size:u})}}const f=s.get(t);return R(f!==void 0,`Unexpected bounds cache miss for index ${t}`),f},set(t,f){s.set(t,f)},get size(){return s.size}}}function A({itemCount:e,itemProps:r,itemSize:l}){return n.useMemo(()=>Y({itemCount:e,itemProps:r,itemSize:l}),[e,r,l])}function $({containerElement:e,containerStyle:r,defaultContainerSize:l=0,direction:s,itemCount:t,itemProps:f,itemSize:i,overscanCount:u}){const[o,a]=n.useState([0,-1]),[w,v]=[Math.min(t-1,o[0]),Math.min(t-1,o[1])],{height:O=l,width:M=l}=q({defaultHeight:s==="vertical"?l:void 0,defaultWidth:s==="horizontal"?l:void 0,element:e,mode:s==="vertical"?"only-height":"only-width",style:r}),I=s==="vertical"?O:M,d=A({itemCount:t,itemProps:f,itemSize:i}),S=n.useCallback(c=>d.get(c),[d]),h=n.useCallback(()=>F({cachedBounds:d,itemCount:t,itemSize:i}),[d,t,i]),k=n.useCallback(c=>N({cachedBounds:d,containerScrollOffset:c,containerSize:I,itemCount:t,overscanCount:u}),[d,I,t,u]);W(()=>{const c=(s==="vertical"?e?.scrollTop:e?.scrollLeft)??0;a(k(c))},[e,s,k]);const x=n.useCallback(({align:c="auto",behavior:p="auto",containerScrollOffset:z,index:m})=>{const g=C({align:c,cachedBounds:d,containerScrollOffset:z,containerSize:I,index:m,itemCount:t});s==="horizontal"?e?.scrollTo({left:g,behavior:p||void 0}):e?.scrollTo({behavior:p||void 0,top:g})},[d,e,I,s,t]);return{getCellBounds:S,getEstimatedHeight:h,onScroll:()=>{const c=k((s==="vertical"?e?.scrollTop:e?.scrollLeft)??0);(c[0]!==w||c[1]!==v)&&a(c)},scrollToIndex:x,startIndex:w,stopIndex:v}}function B(e){return n.useMemo(()=>e,Object.values(e))}function P(e,r){if(e===r)return!0;if(!!e!=!!r||(R(e!==void 0),R(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 U(e,r){const{style:l,...s}=e,{style:t,...f}=r;return P(l,t)&&P(s,f)}const V=()=>{};function _({cellComponent:e,cellProps:r,className:l,columnCount:s,columnWidth:t,defaultHeight:f=0,defaultWidth:i=0,gridRef:u,onCellsRendered:o,onScroll:a=V,overscanCount:w=3,rowCount:v,rowHeight:O,style:M,...I}){const d=B(r),S=n.useMemo(()=>n.memo(e,U),[e]),[h,k]=n.useState(null),x=$({containerElement:h,defaultContainerSize:i,direction:"horizontal",itemCount:s,itemProps:d,itemSize:t,overscanCount:w}),c=$({containerElement:h,defaultContainerSize:f,direction:"vertical",itemCount:v,itemProps:d,itemSize:O,overscanCount:w}),{startIndex:p,stopIndex:z}=x,{startIndex:m,stopIndex:g}=c;n.useImperativeHandle(u,()=>({get element(){return h},scrollToCell({behavior:b="auto",columnAlign:y="auto",columnIndex:T,rowAlign:E="auto",rowIndex:L}){c?.scrollToIndex({align:E,behavior:b,containerScrollOffset:h?.scrollTop??0,index:L}),x?.scrollToIndex({align:y,behavior:b,containerScrollOffset:h?.scrollLeft??0,index:T})},scrollToColumn({align:b="auto",behavior:y="auto",index:T}){x?.scrollToIndex({align:b,behavior:y,containerScrollOffset:h?.scrollLeft??0,index:T})},scrollToRow({align:b="auto",behavior:y="auto",index:T}){c?.scrollToIndex({align:b,behavior:y,containerScrollOffset:h?.scrollTop??0,index:T})}}),[x,h,c]),n.useEffect(()=>{p>=0&&z>=0&&m>=0&&g>=0&&o&&o({columnStartIndex:p,columnStopIndex:z,rowStartIndex:m,rowStopIndex:g})},[o,p,z,m,g]);const H=n.useMemo(()=>{const b=[];if(x&&s>0&&c&&v>0)for(let y=m;y<=g;y++){const T=c.getCellBounds(y);for(let E=p;E<=z;E++){const L=x.getCellBounds(E);b.push(n.createElement(S,{...d,columnIndex:E,key:`${y}-${E}`,rowIndex:y,style:{position:"absolute",left:0,transform:`translate(${L.scrollOffset}px, ${T.scrollOffset}px)`,height:T.size,width:L.size}}))}}return b},[S,d,s,p,z,x,v,m,g,c]);return j.jsx("div",{role:"grid",...I,className:l,onScroll:b=>{x.onScroll(),c.onScroll(),a(b)},ref:k,style:{...M,maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto"},children:j.jsx("div",{className:l,style:{position:"relative",height:c?.getEstimatedHeight(),width:x?.getEstimatedHeight()},children:H})})}const D=n.useState,J=n.useRef;function K({className:e,defaultHeight:r=0,listRef:l,onRowsRendered:s,onScroll:t=V,overscanCount:f=3,rowComponent:i,rowCount:u,rowHeight:o,rowProps:a,style:w,...v}){const O=B(a),M=n.useMemo(()=>n.memo(i,U),[i]),[I,d]=n.useState(null),{getCellBounds:S,getEstimatedHeight:h,onScroll:k,scrollToIndex:x,startIndex:c,stopIndex:p}=$({containerElement:I,defaultContainerSize:r,direction:"vertical",itemCount:u,itemProps:O,itemSize:o,overscanCount:f});n.useImperativeHandle(l,()=>({get element(){return I},scrollToRow({align:m="auto",behavior:g="auto",index:H}){x({align:m,behavior:g,containerScrollOffset:I?.scrollTop??0,index:H})}}),[I,x]),n.useEffect(()=>{c>=0&&p>=0&&s&&s({startIndex:c,stopIndex:p})},[s,c,p]);const z=n.useMemo(()=>{const m=[];if(u>0)for(let g=c;g<=p;g++){const H=S(g);m.push(n.createElement(M,{...O,key:g,index:g,style:{position:"absolute",left:0,transform:`translateY(${H.scrollOffset}px)`,height:H.size,width:"100%"}}))}return m},[M,S,u,O,c,p]);return j.jsx("div",{role:"list",...v,className:e,onScroll:m=>{k(),t(m)},ref:d,style:{...w,maxHeight:"100%",flexGrow:1,overflowY:"auto"},children:j.jsx("div",{className:e,style:{height:h(),position:"relative",width:"100%"},children:z})})}const Q=n.useState,X=n.useRef;exports.Grid=_;exports.List=K;exports.useGridCallbackRef=D;exports.useGridRef=J;exports.useListCallbackRef=Q;exports.useListRef=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),n=require("react"),G=typeof window<"u"?n.useLayoutEffect:n.useEffect;function P(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:o,defaultWidth:l,disabled:s,element:t,mode:f,style:i}){const{styleHeight:u,styleWidth:r}=n.useMemo(()=>({styleHeight:P(i?.height),styleWidth:P(i?.width)}),[i?.height,i?.width]),[a,w]=n.useState({height:o,width:l}),I=s||f==="only-height"&&u!==void 0||f==="only-width"&&r!==void 0||u!==void 0&&r!==void 0;return G(()=>{if(t===null||I)return;const O=new ResizeObserver(M=>{for(const v of M){const{contentRect:d,target:S}=v;t===S&&w(h=>h.height===d.height&&h.width===d.width?h:{height:d.height,width:d.width})}});return O.observe(t,{box:e}),()=>{O?.unobserve(t)}},[e,I,t,u,r]),n.useMemo(()=>({height:u??a.height,width:r??a.width}),[a,u,r])}function H(e,o="Assertion error"){if(!e)throw console.error(o),Error(o)}function q({cachedBounds:e,itemCount:o,itemSize:l}){if(typeof l=="number")return o*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 o*t}else return 0}function F({align:e,cachedBounds:o,index:l,itemCount:s,containerScrollOffset:t,containerSize:f}){const i=o.get(s-1).scrollOffset,u=i+i-f,r=Math.max(0,o.get(l+1).scrollOffset-f),a=Math.min(i,o.get(l).scrollOffset);switch(e==="smart"&&(t>=r&&t<=a?e="auto":e="center"),e){case"start":return Math.min(u,a);case"end":return r;case"center":{const w=Math.round(r+(a-r)/2);return w<Math.ceil(f/2)?0:w>u?u:w}case"auto":default:return t>=r&&t<=a?t:t<r?r:a}}function N({cachedBounds:e,containerScrollOffset:o,containerSize:l,itemCount:s,overscanCount:t}){const f=s-1;let i=0,u=-1,r=0;for(;r<f;){const a=e.get(r);if(a.scrollOffset+a.size>o)break;r++}for(i=r,i=Math.max(0,i-t);r<f;){const a=e.get(r);if(a.scrollOffset+a.size>=o+l)break;r++}return u=Math.min(f,r),u=Math.min(s-1,u+t),i<0?[0,-1]:[i,u]}function Y({itemCount:e,itemProps:o,itemSize:l}){const s=new Map;return{get(t){for(H(t<e,`Invalid index ${t}`);s.size-1<t;){const i=s.size,u=typeof l=="number"?l:l(i,o);if(i===0)s.set(i,{size:u,scrollOffset:0});else{const r=s.get(i-1);H(r!==void 0,`Unexpected bounds cache miss for index ${t}`),s.set(i,{scrollOffset:r.scrollOffset+r.size,size:u})}}const f=s.get(t);return H(f!==void 0,`Unexpected bounds cache miss for index ${t}`),f},set(t,f){s.set(t,f)},get size(){return s.size}}}function A({itemCount:e,itemProps:o,itemSize:l}){return n.useMemo(()=>Y({itemCount:e,itemProps:o,itemSize:l}),[e,o,l])}function _(e){const o=n.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return G(()=>{o.current=e},[e]),n.useCallback(l=>o.current?.(l),[o])}function $({containerElement:e,containerStyle:o,defaultContainerSize:l=0,direction:s,itemCount:t,itemProps:f,itemSize:i,overscanCount:u}){const[r,a]=n.useState([0,-1]),[w,I]=[Math.min(t-1,r[0]),Math.min(t-1,r[1])],{height:O=l,width:M=l}=V({defaultHeight:s==="vertical"?l:void 0,defaultWidth:s==="horizontal"?l:void 0,element:e,mode:s==="vertical"?"only-height":"only-width",style:o}),v=s==="vertical"?O:M,d=A({itemCount:t,itemProps:f,itemSize:i}),S=n.useCallback(c=>d.get(c),[d]),h=n.useCallback(()=>q({cachedBounds:d,itemCount:t,itemSize:i}),[d,t,i]),k=n.useCallback(c=>N({cachedBounds:d,containerScrollOffset:c,containerSize:v,itemCount:t,overscanCount:u}),[d,v,t,u]);G(()=>{const c=(s==="vertical"?e?.scrollTop:e?.scrollLeft)??0;a(k(c))},[e,s,k]);const x=_(({align:c="auto",behavior:p="auto",containerScrollOffset:z,index:m})=>{const g=F({align:c,cachedBounds:d,containerScrollOffset:z,containerSize:v,index:m,itemCount:t});s==="horizontal"?e?.scrollTo({left:g,behavior:p||void 0}):e?.scrollTo({behavior:p||void 0,top:g})});return{getCellBounds:S,getEstimatedHeight:h,onScroll:()=>{const c=k((s==="vertical"?e?.scrollTop:e?.scrollLeft)??0);(c[0]!==w||c[1]!==I)&&a(c)},scrollToIndex:x,startIndex:w,stopIndex:I}}function W(e){return n.useMemo(()=>e,Object.values(e))}function C(e,o){if(e===o)return!0;if(!!e!=!!o||(H(e!==void 0),H(o!==void 0),Object.keys(e).length!==Object.keys(o).length))return!1;for(const l in e)if(!Object.is(o[l],e[l]))return!1;return!0}function B(e,o){const{style:l,...s}=e,{style:t,...f}=o;return C(l,t)&&C(s,f)}const U=()=>{};function D({cellComponent:e,cellProps:o,className:l,columnCount:s,columnWidth:t,defaultHeight:f=0,defaultWidth:i=0,gridRef:u,onCellsRendered:r,onScroll:a=U,overscanCount:w=3,rowCount:I,rowHeight:O,style:M,...v}){const d=W(o),S=n.useMemo(()=>n.memo(e,B),[e]),[h,k]=n.useState(null),x=$({containerElement:h,defaultContainerSize:i,direction:"horizontal",itemCount:s,itemProps:d,itemSize:t,overscanCount:w}),c=$({containerElement:h,defaultContainerSize:f,direction:"vertical",itemCount:I,itemProps:d,itemSize:O,overscanCount:w}),{startIndex:p,stopIndex:z}=x,{startIndex:m,stopIndex:g}=c;n.useImperativeHandle(u,()=>({get element(){return h},scrollToCell({behavior:b="auto",columnAlign:y="auto",columnIndex:T,rowAlign:E="auto",rowIndex:L}){c?.scrollToIndex({align:E,behavior:b,containerScrollOffset:h?.scrollTop??0,index:L}),x?.scrollToIndex({align:y,behavior:b,containerScrollOffset:h?.scrollLeft??0,index:T})},scrollToColumn({align:b="auto",behavior:y="auto",index:T}){x?.scrollToIndex({align:b,behavior:y,containerScrollOffset:h?.scrollLeft??0,index:T})},scrollToRow({align:b="auto",behavior:y="auto",index:T}){c?.scrollToIndex({align:b,behavior:y,containerScrollOffset:h?.scrollTop??0,index:T})}}),[x,h,c]),n.useEffect(()=>{p>=0&&z>=0&&m>=0&&g>=0&&r&&r({columnStartIndex:p,columnStopIndex:z,rowStartIndex:m,rowStopIndex:g})},[r,p,z,m,g]);const R=n.useMemo(()=>{const b=[];if(x&&s>0&&c&&I>0)for(let y=m;y<=g;y++){const T=c.getCellBounds(y);for(let E=p;E<=z;E++){const L=x.getCellBounds(E);b.push(n.createElement(S,{...d,columnIndex:E,key:`${y}-${E}`,rowIndex:y,style:{position:"absolute",left:0,transform:`translate(${L.scrollOffset}px, ${T.scrollOffset}px)`,height:T.size,width:L.size}}))}}return b},[S,d,s,p,z,x,I,m,g,c]);return j.jsx("div",{role:"grid",...v,className:l,onScroll:b=>{x.onScroll(),c.onScroll(),a(b)},ref:k,style:{...M,maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto"},children:j.jsx("div",{className:l,style:{position:"relative",height:c?.getEstimatedHeight(),width:x?.getEstimatedHeight()},children:R})})}const J=n.useState,K=n.useRef;function Q({className:e,defaultHeight:o=0,listRef:l,onRowsRendered:s,onScroll:t=U,overscanCount:f=3,rowComponent:i,rowCount:u,rowHeight:r,rowProps:a,style:w,...I}){const O=W(a),M=n.useMemo(()=>n.memo(i,B),[i]),[v,d]=n.useState(null),{getCellBounds:S,getEstimatedHeight:h,onScroll:k,scrollToIndex:x,startIndex:c,stopIndex:p}=$({containerElement:v,defaultContainerSize:o,direction:"vertical",itemCount:u,itemProps:O,itemSize:r,overscanCount:f});n.useImperativeHandle(l,()=>({get element(){return v},scrollToRow({align:m="auto",behavior:g="auto",index:R}){x({align:m,behavior:g,containerScrollOffset:v?.scrollTop??0,index:R})}}),[v,x]),n.useEffect(()=>{c>=0&&p>=0&&s&&s({startIndex:c,stopIndex:p})},[s,c,p]);const z=n.useMemo(()=>{const m=[];if(u>0)for(let g=c;g<=p;g++){const R=S(g);m.push(n.createElement(M,{...O,key:g,index:g,style:{position:"absolute",left:0,transform:`translateY(${R.scrollOffset}px)`,height:R.size,width:"100%"}}))}return m},[M,S,u,O,c,p]);return j.jsx("div",{role:"list",...I,className:e,onScroll:m=>{k(),t(m)},ref:d,style:{...w,maxHeight:"100%",flexGrow:1,overflowY:"auto"},children:j.jsx("div",{className:e,style:{height:h(),position:"relative",width:"100%"},children:z})})}const X=n.useState,Z=n.useRef;exports.Grid=D;exports.List=Q;exports.useGridCallbackRef=J;exports.useGridRef=K;exports.useListCallbackRef=X;exports.useListRef=Z;

package/dist/react-window.d.ts

@@ -95,7 +95,7 @@ export declare type GridProps<CellProps extends object> = HTMLAttributes<HTMLDiv
      *
      * This API has imperative methods for scrolling and a getter for the outermost DOM element.
      *
-     * ⚠️ The `useGridRef` hook is exported for convenience use in TypeScript projects.
+     * ⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
      */
     gridRef?: Ref<GridImperativeAPI>;
     /**
@@ -153,7 +153,7 @@ export declare type ListProps<RowProps extends object> = HTMLAttributes<HTMLDivE
      *
      * This API has imperative methods for scrolling and a getter for the outermost DOM element.
      *
-     * ⚠️ The `useListRef` hook is exported for convenience use in TypeScript projects.
+     * ⚠️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.
      */
     listRef?: Ref<ListImperativeAPI>;
     /**