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

package/dist/react-window.cjs

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