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

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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 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;

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,11 +25,7 @@ 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, 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 function Grid<CellProps extends object>({ cellComponent: CellComponentProp, cellProps: cellPropsUnstable, className, columnCount, columnWidth, defaultHeight, defaultWidth, gridRef, onCellsRendered, onScroll: onScrollProp, overscanCount, rowCount, rowHeight, style, ...rest }: GridProps<CellProps>): JSX.Element;
 
 export declare type GridImperativeAPI = {
     get element(): HTMLDivElement | null;
@@ -47,7 +48,7 @@ export declare type GridImperativeAPI = {
     }): void;
 };
 
-export declare type GridProps<CellProps extends object> = {
+export declare type GridProps<CellProps extends object> = HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS class name.
      */
@@ -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,7 +127,7 @@ 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, rowProps: rowPropsUnstable, style, ...rest }: ListProps<RowProps>): JSX.Element;
+export declare function List<RowProps extends object>({ className, defaultHeight, listRef, onRowsRendered, onScroll: onScrollProp, overscanCount, rowComponent: RowComponentProp, rowCount, rowHeight, rowProps: rowPropsUnstable, style, ...rest }: ListProps<RowProps>): JSX.Element;
 
 export declare type ListImperativeAPI = {
     get element(): HTMLDivElement | null;
@@ -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.
  */