react-window 1.8.10 → 2.0.0-alpha.0

package/README.md

@@ -1,171 +1,19 @@
 # react-window
 
-> React components for efficiently rendering large lists and tabular data
+`react-window` is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from React DevTools to the Replay browser.
 
-### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
+## Installation
 
----
+Begin by installing the library from NPM:
 
-React window works by only rendering *part* of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
-1. It reduces the amount of work (and time) required to render the initial view and to process updates.
-2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.
-
-### Sponsors
-
-The following wonderful companies have sponsored react-window:
-
-<a href="https://opencollective.com/react-window/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/9/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/10/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/10/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/11/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/11/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/12/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/12/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/13/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/13/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/14/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/14/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/15/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/15/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/16/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/16/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/17/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/17/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/18/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/18/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/19/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/19/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/20/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/20/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/21/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/21/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/22/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/22/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/23/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/23/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/24/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/24/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/25/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/25/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/26/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/26/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/27/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/27/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/28/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/28/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/sponsor/29/website" target="_blank"><img src="https://opencollective.com/react-window/sponsor/29/avatar.svg"></a>
-
-[Learn more about becoming a sponsor!](https://opencollective.com/react-window#sponsor)
-
-<a href="https://opencollective.com/react-window/backer/0/website" target="_blank"><img src="https://opencollective.com/react-window/backer/0/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/1/website" target="_blank"><img src="https://opencollective.com/react-window/backer/1/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/2/website" target="_blank"><img src="https://opencollective.com/react-window/backer/2/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/3/website" target="_blank"><img src="https://opencollective.com/react-window/backer/3/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/4/website" target="_blank"><img src="https://opencollective.com/react-window/backer/4/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/5/website" target="_blank"><img src="https://opencollective.com/react-window/backer/5/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/6/website" target="_blank"><img src="https://opencollective.com/react-window/backer/6/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/7/website" target="_blank"><img src="https://opencollective.com/react-window/backer/7/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/8/website" target="_blank"><img src="https://opencollective.com/react-window/backer/8/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/9/website" target="_blank"><img src="https://opencollective.com/react-window/backer/9/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/10/website" target="_blank"><img src="https://opencollective.com/react-window/backer/10/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/11/website" target="_blank"><img src="https://opencollective.com/react-window/backer/11/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/12/website" target="_blank"><img src="https://opencollective.com/react-window/backer/12/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/13/website" target="_blank"><img src="https://opencollective.com/react-window/backer/13/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/14/website" target="_blank"><img src="https://opencollective.com/react-window/backer/14/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/15/website" target="_blank"><img src="https://opencollective.com/react-window/backer/15/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/16/website" target="_blank"><img src="https://opencollective.com/react-window/backer/16/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/17/website" target="_blank"><img src="https://opencollective.com/react-window/backer/17/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/18/website" target="_blank"><img src="https://opencollective.com/react-window/backer/18/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/19/website" target="_blank"><img src="https://opencollective.com/react-window/backer/19/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/20/website" target="_blank"><img src="https://opencollective.com/react-window/backer/20/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/21/website" target="_blank"><img src="https://opencollective.com/react-window/backer/21/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/22/website" target="_blank"><img src="https://opencollective.com/react-window/backer/22/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/23/website" target="_blank"><img src="https://opencollective.com/react-window/backer/23/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/24/website" target="_blank"><img src="https://opencollective.com/react-window/backer/24/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/25/website" target="_blank"><img src="https://opencollective.com/react-window/backer/25/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/26/website" target="_blank"><img src="https://opencollective.com/react-window/backer/26/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/27/website" target="_blank"><img src="https://opencollective.com/react-window/backer/27/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/28/website" target="_blank"><img src="https://opencollective.com/react-window/backer/28/avatar.svg"></a>
-<a href="https://opencollective.com/react-window/backer/29/website" target="_blank"><img src="https://opencollective.com/react-window/backer/29/avatar.svg"></a>
-
-## Install
-
-```bash
-# Yarn
-yarn add react-window
-
-# NPM
-npm install --save react-window
+```sh
+npm install react-window
 ```
 
-## Usage
-
-Learn more at [react-window.now.sh](https://react-window.now.sh/):
-
-## Related libraries
-
-* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
-* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
-* [`react-vtree`](https://www.npmjs.com/package/react-vtree): Lightweight and flexible solution to render large tree structures (e.g., file system).
-
-## Frequently asked questions
-
-### How is `react-window` different from `react-virtualized`?
-I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
-
-`react-window` is a complete rewrite of `react-virtualized`. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package **smaller**<sup>1</sup> and **faster**. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
-
-If `react-window` provides the functionality your project needs, I would strongly recommend using it instead of `react-virtualized`. However if you need features that only `react-virtualized` provides, you have two options:
-
-1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)
-2. Create a component that decorates one of the `react-window` primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂
-
-<sup>1 - Adding a `react-virtualized` list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a `react-window` list to a CRA project increases the (gzipped) build size by &lt;2 KB.</sup>
-
-### Can a list or a grid fill 100% the width or height of a page?
-
-Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
-
-<img width="336" alt="screen shot 2019-03-07 at 7 29 08 pm" src="https://user-images.githubusercontent.com/29597/54005716-50f41880-410f-11e9-864f-a65bbdf49e07.png">
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
-
-### Why is my list blank when I scroll?
-
-If your list looks something like this...
-
-<img src="https://user-images.githubusercontent.com/29597/54005352-eb535c80-410d-11e9-80b2-d3d02db1f599.gif" width="302" height="152">
-
-...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
-
-<img width="257" alt="screen shot 2019-03-07 at 7 21 48 pm" src="https://user-images.githubusercontent.com/29597/54005433-45ecb880-410e-11e9-8721-420ff1a153da.png">
-
-### Can I lazy load data for my list?
-
-Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
-
-<img width="368" alt="screen shot 2019-03-07 at 7 32 32 pm" src="https://user-images.githubusercontent.com/29597/54006733-653a1480-4113-11e9-907b-08ca5e27b3f9.png">
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
-
-### Can I attach custom properties or event handlers?
-
-Yes, using the `outerElementType` prop.
-
-<img width="412" alt="Screen Shot 2019-03-12 at 8 58 09 AM" src="https://user-images.githubusercontent.com/29597/54215333-f9ee9a80-44a4-11e9-9142-34c67026d950.png">
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
-
-### Can I add padding to the top and bottom of a list?
-
-Yes, although it requires a bit of inline styling.
-
-<img width="418" alt="Screen Shot 2019-06-02 at 8 38 18 PM" src="https://user-images.githubusercontent.com/29597/58774454-65ad4480-8576-11e9-8889-07044fd41393.png">
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/react-window-list-padding-dg0pq).
-
-### Can I add gutter or padding between items?
-
-Yes, although it requires a bit of inline styling.
-
-<img width="416" alt="Screen Shot 2019-03-26 at 6 33 56 PM" src="https://user-images.githubusercontent.com/29597/55043972-c14ad700-4ff5-11e9-9caa-2e9f4d85f96c.png">
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
-
-### Does this library support "sticky" items?
+TypeScript definitions are included within the published dist folder and documentation is included within the docs folder.
 
-Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
+## Documentation
 
-## License
+Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/).
 
-MIT © [bvaughn](https://github.com/bvaughn)
+TypeScript definitions and version-specific documentation are also included with each published build.

package/dist/react-window.cjs

@@ -0,0 +1,22 @@
+"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;

package/dist/react-window.d.ts

@@ -0,0 +1,217 @@
+import { ComponentProps } from 'react';
+import { CSSProperties } from 'react';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { useRef } from 'react';
+
+export declare type Align = "auto" | "center" | "end" | "smart" | "start";
+
+declare type ExcludeForbiddenKeys<Type> = {
+    [Key in keyof Type]: Key extends ForbiddenKeys ? never : Type[Key];
+};
+
+declare type ExcludeForbiddenKeys_2<Type> = {
+    [Key in keyof Type]: Key extends ForbiddenKeys_2 ? never : Type[Key];
+};
+
+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 type GridImperativeAPI = {
+    get element(): HTMLDivElement | null;
+    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, }: {
+        align?: "auto" | "center" | "end" | "smart" | "start";
+        behavior?: "auto" | "instant" | "smooth";
+        index: number;
+    }): void;
+    scrollToRow({ align, behavior, index, }: {
+        align?: "auto" | "center" | "end" | "smart" | "start";
+        behavior?: "auto" | "instant" | "smooth";
+        index: number;
+    }): void;
+};
+
+export declare type GridProps<CellProps extends object> = {
+    /**
+     * CSS class name.
+     */
+    className?: string;
+    /**
+     * Default height of grid for initial render.
+     * This value is important for server rendering.
+     */
+    defaultHeight?: number;
+    /**
+     * Default width of grid for initial render.
+     * This value is important for server rendering.
+     */
+    defaultWidth?: number;
+    /**
+     * React component responsible for rendering a cell.
+     *
+     * 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`
+     */
+    cellComponent: (props: {
+        columnIndex: number;
+        rowIndex: number;
+        style: CSSProperties;
+    } & CellProps) => ReactNode;
+    /**
+     * Additional props to be passed to the cellComponent.
+     *
+     * ⚠️ This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.
+     */
+    cellProps: ExcludeForbiddenKeys<CellProps>;
+    /**
+     * Number of columns to be rendered in the grid.
+     */
+    columnCount: number;
+    /**
+     * Column width (in pixels) or a function that returns a column width (in pixels) given an index and `cellProps`.
+     */
+    columnWidth: number | ((index: number, cellProps: CellProps) => number);
+    /**
+     * Ref used to interact with this component's imperative API.
+     *
+     * 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.
+     */
+    gridRef?: Ref<GridImperativeAPI>;
+    /**
+     * Callback notified when the range of rendered cells changes.
+     */
+    onCellsRendered?: (args: {
+        columnStartIndex: number;
+        columnStopIndex: number;
+        rowStartIndex: number;
+        rowStopIndex: number;
+    }) => void;
+    /**
+     * How many additional rows/columns to render outside of the visible area.
+     * This can reduce visual flickering near the edges of a grid when scrolling.
+     */
+    overscanCount?: number;
+    /**
+     * Number of rows to be rendered in the grid.
+     */
+    rowCount: number;
+    /**
+     * Row height (in pixels) or a function that returns a row height (in pixels) given an index and `cellProps`.
+     */
+    rowHeight: number | ((index: number, cellProps: CellProps) => number);
+    /**
+     * Optional CSS properties.
+     * The grid of cells will fill the height and width defined by this style.
+     */
+    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 type ListImperativeAPI = {
+    get element(): HTMLDivElement | null;
+    scrollToRow({ align, behavior, index, }: {
+        align?: "auto" | "center" | "end" | "smart" | "start";
+        behavior?: "auto" | "instant" | "smooth";
+        index: number;
+    }): void;
+};
+
+export declare type ListProps<RowProps extends object> = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS class name.
+     */
+    className?: string;
+    /**
+     * Default height of list for initial render.
+     * This value is important for server rendering.
+     */
+    defaultHeight?: number;
+    /**
+     * Ref used to interact with this component's imperative API.
+     *
+     * 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.
+     */
+    listRef?: Ref<ListImperativeAPI>;
+    /**
+     * React component responsible for rendering a row.
+     *
+     * This component will receive an `index` and `style` prop by default.
+     * Additionally it will receive prop values passed to `rowProps`.
+     *
+     * ⚠️ The prop types for this component are exported as `RowComponentProps`
+     */
+    rowComponent: (props: {
+        index: number;
+        style: CSSProperties;
+    } & RowProps) => ReactNode;
+    /**
+     * Number of items to be rendered in the list.
+     */
+    rowCount: number;
+    /**
+     * Row height (in pixels) or a function that returns a row height (in pixels) given its index and `rowProps` data.
+     */
+    rowHeight: number | ((index: number, rowProps: RowProps) => number);
+    /**
+     * Additional props to be passed to the rowComponent.
+     *
+     * ⚠️ This object must not contain either an `index` or `style` prop.
+     */
+    rowProps: ExcludeForbiddenKeys_2<RowProps>;
+    /**
+     * Callback notified when the range of visible rows changes.
+     */
+    onRowsRendered?: (args: {
+        startIndex: number;
+        stopIndex: number;
+    }) => void;
+    /**
+     * How many additional rows to render outside of the visible area.
+     * This can reduce visual flickering near the edges of a list when scrolling.
+     */
+    overscanCount?: number;
+    /**
+     * Optional CSS properties.
+     * The list of rows will fill the height defined by this style.
+     */
+    style?: CSSProperties;
+};
+
+declare type RowComponent<RowProps extends object> = ListProps<RowProps>["rowComponent"];
+
+export declare type RowComponentProps<RowProps extends object = object> = ComponentProps<RowComponent<RowProps>>;
+
+/**
+ * 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 for the List component.
+ */
+export declare const useListRef: typeof useRef<ListImperativeAPI>;
+
+export { }