fix: 修复关闭SSH终端标签页时会话状态未更新的问题

This commit is contained in:
2026-04-18 02:35:38 +08:00
commit 6e2e2f9387
43467 changed files with 5489040 additions and 0 deletions
+21
View File
@@ -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.
+317
View File
@@ -0,0 +1,317 @@
<img src="https://react-window.vercel.app/og.png" alt="react-window logo" width="400" height="210" />
`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.
## Support
If you like this project there are several ways to support it:
- [Become a GitHub sponsor](https://github.com/sponsors/bvaughn/)
- [Become an Open Collective sponsor](https://opencollective.com/react-window#sponsor)
- or [buy me a coffee](http://givebrian.coffee/)
The following wonderful companies and individuals 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>
<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>
## Installation
Begin by installing the library from NPM:
```sh
npm install react-window
```
## TypeScript types
TypeScript definitions are included within the published `dist` folder
## FAQs
Frequently asked questions can be found [here](https://react-window.vercel.app/common-questions).
## Documentation
Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/); version 1.x documentation can be found at [react-window-v1.vercel.app](https://react-window-v1.vercel.app/).
### List
<!-- List:description:begin -->
Renders data with many rows.
<!-- List:description:end -->
#### Required props
<!-- List:required-props:begin -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>rowComponent</td>
<td><p>React component responsible for rendering a row.</p>
<p>This component will receive an <code>index</code> and <code>style</code> prop by default.
Additionally it will receive prop values passed to <code>rowProps</code>.</p>
<p>️ The prop types for this component are exported as <code>RowComponentProps</code></p>
</td>
</tr>
<tr>
<td>rowCount</td>
<td><p>Number of items to be rendered in the list.</p>
</td>
</tr>
<tr>
<td>rowHeight</td>
<td><p>Row height; the following formats are supported:</p>
<ul>
<li>number of pixels (number)</li>
<li>percentage of the grid&#39;s current height (string)</li>
<li>function that returns the row height (in pixels) given an index and <code>cellProps</code></li>
<li>dynamic row height cache returned by the <code>useDynamicRowHeight</code> hook</li>
</ul>
<p>⚠️ Dynamic row heights are not as efficient as predetermined sizes.
It&#39;s recommended to provide your own height values if they can be determined ahead of time.</p>
</td>
</tr>
<tr>
<td>rowProps</td>
<td><p>Additional props to be passed to the row-rendering component.
List will automatically re-render rows when values in this object change.</p>
<p>⚠️ This object must not contain <code>ariaAttributes</code>, <code>index</code>, or <code>style</code> props.</p>
</td>
</tr>
</tbody>
</table>
<!-- List:required-props:end -->
#### Optional props
<!-- List:optional-props:begin -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td><p>CSS class name.</p>
</td>
</tr>
<tr>
<td>style</td>
<td><p>Optional CSS properties.
The list of rows will fill the height defined by this style.</p>
</td>
</tr>
<tr>
<td>children</td>
<td><p>Additional content to be rendered within the list (above cells).
This property can be used to render things like overlays or tooltips.</p>
</td>
</tr>
<tr>
<td>defaultHeight</td>
<td><p>Default height of list for initial render.
This value is important for server rendering.</p>
</td>
</tr>
<tr>
<td>listRef</td>
<td><p>Ref used to interact with this component&#39;s imperative API.</p>
<p>This API has imperative methods for scrolling and a getter for the outermost DOM element.</p>
<p>️ The <code>useListRef</code> and <code>useListCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
</td>
</tr>
<tr>
<td>onResize</td>
<td><p>Callback notified when the List&#39;s outermost HTMLElement resizes.
This may be used to (re)scroll a row into view.</p>
</td>
</tr>
<tr>
<td>onRowsRendered</td>
<td><p>Callback notified when the range of visible rows changes.</p>
</td>
</tr>
<tr>
<td>overscanCount</td>
<td><p>How many additional rows to render outside of the visible area.
This can reduce visual flickering near the edges of a list when scrolling.</p>
</td>
</tr>
<tr>
<td>tagName</td>
<td><p>Can be used to override the root HTML element rendered by the List component.
The default value is &quot;div&quot;, meaning that List renders an HTMLDivElement as its root.</p>
<p>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.</p>
</td>
</tr>
</tbody>
</table>
<!-- List:optional-props:end -->
### Grid
<!-- Grid:description:begin -->
Renders data with many rows and columns.
️ Unlike `List` rows, `Grid` cell sizes must be known ahead of time.
Either static sizes or something that can be derived (from the data in `CellProps`) without rendering.
<!-- Grid:description:end -->
#### Required props
<!-- Grid:required-props:begin -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>cellComponent</td>
<td><p>React component responsible for rendering a cell.</p>
<p>This component will receive an <code>index</code> and <code>style</code> prop by default.
Additionally it will receive prop values passed to <code>cellProps</code>.</p>
<p>️ The prop types for this component are exported as <code>CellComponentProps</code></p>
</td>
</tr>
<tr>
<td>cellProps</td>
<td><p>Additional props to be passed to the cell-rendering component.
Grid will automatically re-render cells when values in this object change.</p>
<p>⚠️ This object must not contain <code>ariaAttributes</code>, <code>columnIndex</code>, <code>rowIndex</code>, or <code>style</code> props.</p>
</td>
</tr>
<tr>
<td>columnCount</td>
<td><p>Number of columns to be rendered in the grid.</p>
</td>
</tr>
<tr>
<td>columnWidth</td>
<td><p>Column width; the following formats are supported:</p>
<ul>
<li>number of pixels (number)</li>
<li>percentage of the grid&#39;s current width (string)</li>
<li>function that returns the column width (in pixels) given an index and <code>cellProps</code></li>
</ul>
</td>
</tr>
<tr>
<td>rowCount</td>
<td><p>Number of rows to be rendered in the grid.</p>
</td>
</tr>
<tr>
<td>rowHeight</td>
<td><p>Row height; the following formats are supported:</p>
<ul>
<li>number of pixels (number)</li>
<li>percentage of the grid&#39;s current height (string)</li>
<li>function that returns the row height (in pixels) given an index and <code>cellProps</code></li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- Grid:required-props:end -->
#### Optional props
<!-- Grid:optional-props:begin -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>className</td>
<td><p>CSS class name.</p>
</td>
</tr>
<tr>
<td>dir</td>
<td><p>Indicates the directionality of grid cells.</p>
<p>️ See HTML <code>dir</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir">global attribute</a> for more information.</p>
</td>
</tr>
<tr>
<td>style</td>
<td><p>Optional CSS properties.
The grid of cells will fill the height and width defined by this style.</p>
</td>
</tr>
<tr>
<td>children</td>
<td><p>Additional content to be rendered within the grid (above cells).
This property can be used to render things like overlays or tooltips.</p>
</td>
</tr>
<tr>
<td>defaultHeight</td>
<td><p>Default height of grid for initial render.
This value is important for server rendering.</p>
</td>
</tr>
<tr>
<td>defaultWidth</td>
<td><p>Default width of grid for initial render.
This value is important for server rendering.</p>
</td>
</tr>
<tr>
<td>gridRef</td>
<td><p>Imperative Grid API.</p>
<p>️ The <code>useGridRef</code> and <code>useGridCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
</td>
</tr>
<tr>
<td>onCellsRendered</td>
<td><p>Callback notified when the range of rendered cells changes.</p>
</td>
</tr>
<tr>
<td>onResize</td>
<td><p>Callback notified when the Grid&#39;s outermost HTMLElement resizes.
This may be used to (re)scroll a cell into view.</p>
</td>
</tr>
<tr>
<td>overscanCount</td>
<td><p>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.</p>
</td>
</tr>
<tr>
<td>tagName</td>
<td><p>Can be used to override the root HTML element rendered by the List component.
The default value is &quot;div&quot;, meaning that List renders an HTMLDivElement as its root.</p>
<p>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.</p>
</td>
</tr>
</tbody>
</table>
<!-- Grid:optional-props:end -->
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+466
View File
@@ -0,0 +1,466 @@
import { ComponentProps } from 'react';
import { CSSProperties } from 'react';
import { HTMLAttributes } from 'react';
import { JSX } from 'react';
import { ReactElement } from 'react';
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>>;
export declare type DynamicRowHeight = {
getAverageRowHeight(): number;
getRowHeight(index: number): number | undefined;
setRowHeight(index: number, size: number): void;
observeRowElements: (elements: Element[] | NodeListOf<Element>) => () => void;
};
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 = "ariaAttributes" | "columnIndex" | "rowIndex" | "style";
declare type ForbiddenKeys_2 = "ariaAttributes" | "index" | "style";
export declare function getScrollbarSize(recalculate?: boolean): number;
/**
* Renders data with many rows and columns.
*
* ️ Unlike `List` rows, `Grid` cell sizes must be known ahead of time.
* Either static sizes or something that can be derived (from the data in `CellProps`) without rendering.
*/
export declare function Grid<CellProps extends object, TagName extends TagNames = "div">({ cellComponent: CellComponentProp, cellProps: cellPropsUnstable, children, className, columnCount, columnWidth, defaultHeight, defaultWidth, dir, gridRef, onCellsRendered, onResize, overscanCount, rowCount, rowHeight, style, tagName, ...rest }: GridProps<CellProps, TagName>): ReactElement;
/**
* 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` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
export declare interface GridImperativeAPI {
/**
* Outermost HTML element for the grid if mounted and null (if not mounted.
*/
get element(): HTMLDivElement | null;
/**
* Scrolls the grid so that the specified row and column are visible.
*
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param columnAlign Determines the horizontal alignment of the element within the list
* @param columnIndex Index of the column to scroll to (0-based)
* @param rowAlign Determines the vertical alignment of the element within the list
* @param rowIndex Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row or column index is provided
*/
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;
/**
* Scrolls the grid so that the specified column is visible.
*
* @param align Determines the horizontal alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the column to scroll to (0-based)
*
* @throws RangeError if an invalid column index is provided
*/
scrollToColumn: ({ align, behavior, index }: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}) => void;
/**
* Scrolls the grid so that the specified row is visible.
*
* @param align Determines the vertical alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row index is provided
*/
scrollToRow: ({ align, behavior, index }: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}) => void;
}
export declare type GridProps<CellProps extends object, TagName extends TagNames = "div"> = Omit<HTMLAttributes<HTMLDivElement>, "onResize"> & {
/**
* 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 `CellComponentProps`
*/
cellComponent: (props: {
ariaAttributes: {
"aria-colindex": number;
role: "gridcell";
};
columnIndex: number;
rowIndex: number;
style: CSSProperties;
} & CellProps) => ReactElement | null;
/**
* Additional props to be passed to the cell-rendering component.
* Grid will automatically re-render cells when values in this object change.
*
* ⚠️ This object must not contain `ariaAttributes`, `columnIndex`, `rowIndex`, or `style` props.
*/
cellProps: ExcludeForbiddenKeys<CellProps>;
/**
* Additional content to be rendered within the grid (above cells).
* This property can be used to render things like overlays or tooltips.
*/
children?: ReactNode;
/**
* CSS class name.
*/
className?: string;
/**
* Number of columns to be rendered in the grid.
*/
columnCount: number;
/**
* Column width; the following formats are supported:
* - number of pixels (number)
* - percentage of the grid's current width (string)
* - function that returns the column width (in pixels) given an index and `cellProps`
*/
columnWidth: number | string | ((index: number, cellProps: CellProps) => number);
/**
* 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;
/**
* Indicates the directionality of grid cells.
*
* ️ See HTML `dir` [global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) for more information.
*/
dir?: "ltr" | "rtl";
/**
* Imperative Grid API.
*
* ️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
gridRef?: Ref<{
/**
* Outermost HTML element for the grid if mounted and null (if not mounted.
*/
get element(): HTMLDivElement | null;
/**
* Scrolls the grid so that the specified row and column are visible.
*
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param columnAlign Determines the horizontal alignment of the element within the list
* @param columnIndex Index of the column to scroll to (0-based)
* @param rowAlign Determines the vertical alignment of the element within the list
* @param rowIndex Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row or column index is provided
*/
scrollToCell(config: {
behavior?: "auto" | "instant" | "smooth";
columnAlign?: "auto" | "center" | "end" | "smart" | "start";
columnIndex: number;
rowAlign?: "auto" | "center" | "end" | "smart" | "start";
rowIndex: number;
}): void;
/**
* Scrolls the grid so that the specified column is visible.
*
* @param align Determines the horizontal alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the column to scroll to (0-based)
*
* @throws RangeError if an invalid column index is provided
*/
scrollToColumn(config: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}): void;
/**
* Scrolls the grid so that the specified row is visible.
*
* @param align Determines the vertical alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row index is provided
*/
scrollToRow(config: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}): void;
}>;
/**
* Callback notified when the range of rendered cells changes.
*/
onCellsRendered?: (visibleCells: {
columnStartIndex: number;
columnStopIndex: number;
rowStartIndex: number;
rowStopIndex: number;
}, allCells: {
columnStartIndex: number;
columnStopIndex: number;
rowStartIndex: number;
rowStopIndex: number;
}) => void;
/**
* Callback notified when the Grid's outermost HTMLElement resizes.
* This may be used to (re)scroll a cell into view.
*/
onResize?: (size: {
height: number;
width: number;
}, prevSize: {
height: number;
width: 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; the following formats are supported:
* - number of pixels (number)
* - percentage of the grid's current height (string)
* - function that returns the row height (in pixels) given an index and `cellProps`
*/
rowHeight: number | string | ((index: number, cellProps: CellProps) => number);
/**
* Optional CSS properties.
* The grid of cells will fill the height and width defined by this style.
*/
style?: CSSProperties;
/**
* Can be used to override the root HTML element rendered by the List component.
* The default value is "div", meaning that List renders an HTMLDivElement as its root.
*
* ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.
*/
tagName?: TagName;
};
/**
* Renders data with many rows.
*/
export declare function List<RowProps extends object, TagName extends TagNames = "div">({ children, className, defaultHeight, listRef, onResize, onRowsRendered, overscanCount, rowComponent: RowComponentProp, rowCount, rowHeight: rowHeightProp, rowProps: rowPropsUnstable, tagName, style, ...rest }: ListProps<RowProps, TagName>): ReactElement;
/**
* Imperative List API.
*
* ️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
export declare interface ListImperativeAPI {
/**
* Outermost HTML element for the list if mounted and null (if not mounted.
*/
get element(): HTMLDivElement | null;
/**
* Scrolls the list so that the specified row is visible.
*
* @param align Determines the vertical alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row index is provided
*/
scrollToRow: ({ align, behavior, index }: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}) => void;
}
export declare type ListProps<RowProps extends object, TagName extends TagNames = "div"> = Omit<HTMLAttributes<HTMLDivElement>, "onResize"> & {
/**
* Additional content to be rendered within the list (above cells).
* This property can be used to render things like overlays or tooltips.
*/
children?: ReactNode;
/**
* 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` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.
*/
listRef?: Ref<{
/**
* Outermost HTML element for the list if mounted and null (if not mounted.
*/
get element(): HTMLDivElement | null;
/**
* Scrolls the list so that the specified row is visible.
*
* @param align Determines the vertical alignment of the element within the list
* @param behavior Determines whether scrolling is instant or animates smoothly
* @param index Index of the row to scroll to (0-based)
*
* @throws RangeError if an invalid row index is provided
*/
scrollToRow(config: {
align?: "auto" | "center" | "end" | "smart" | "start";
behavior?: "auto" | "instant" | "smooth";
index: number;
}): void;
}>;
/**
* Callback notified when the List's outermost HTMLElement resizes.
* This may be used to (re)scroll a row into view.
*/
onResize?: (size: {
height: number;
width: number;
}, prevSize: {
height: number;
width: number;
}) => void;
/**
* Callback notified when the range of visible rows changes.
*/
onRowsRendered?: (visibleRows: {
startIndex: number;
stopIndex: number;
}, allRows: {
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;
/**
* 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: {
ariaAttributes: {
"aria-posinset": number;
"aria-setsize": number;
role: "listitem";
};
index: number;
style: CSSProperties;
} & RowProps) => ReactElement | null;
/**
* Number of items to be rendered in the list.
*/
rowCount: number;
/**
* Row height; the following formats are supported:
* - number of pixels (number)
* - percentage of the grid's current height (string)
* - function that returns the row height (in pixels) given an index and `cellProps`
* - dynamic row height cache returned by the `useDynamicRowHeight` hook
*
* ⚠️ Dynamic row heights are not as efficient as predetermined sizes.
* It's recommended to provide your own height values if they can be determined ahead of time.
*/
rowHeight: number | string | ((index: number, cellProps: RowProps) => number) | DynamicRowHeight;
/**
* Additional props to be passed to the row-rendering component.
* List will automatically re-render rows when values in this object change.
*
* ⚠️ This object must not contain `ariaAttributes`, `index`, or `style` props.
*/
rowProps: ExcludeForbiddenKeys_2<RowProps>;
/**
* Optional CSS properties.
* The list of rows will fill the height defined by this style.
*/
style?: CSSProperties;
/**
* Can be used to override the root HTML element rendered by the List component.
* The default value is "div", meaning that List renders an HTMLDivElement as its root.
*
* ⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.
*/
tagName?: TagName;
};
declare type RowComponent<RowProps extends object> = ListProps<RowProps>["rowComponent"];
export declare type RowComponentProps<RowProps extends object = object> = ComponentProps<RowComponent<RowProps>>;
declare type TagNames = keyof JSX.IntrinsicElements;
export declare function useDynamicRowHeight({ defaultRowHeight, key }: {
defaultRowHeight: number;
key?: string | number;
}): DynamicRowHeight;
/**
* 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.
*/
export declare const useListRef: typeof useRef<ListImperativeAPI>;
export { }
+963
View File
@@ -0,0 +1,963 @@
"use client";
import { jsx as ee } from "react/jsx-runtime";
import { useState as M, useLayoutEffect as re, useEffect as J, useMemo as A, useRef as K, useCallback as D, memo as le, useImperativeHandle as ce, createElement as X } from "react";
function xe(e) {
let t = e;
for (; t; ) {
if (t.dir)
return t.dir === "rtl";
t = t.parentElement;
}
return !1;
}
function ve(e, t) {
const [s, r] = M(t === "rtl");
return re(() => {
e && (t || r(xe(e)));
}, [t, e]), s;
}
const q = typeof window < "u" ? re : J;
function ie(e) {
if (e !== void 0)
switch (typeof e) {
case "number":
return e;
case "string": {
if (e.endsWith("px"))
return parseFloat(e);
break;
}
}
}
function be({
box: e,
defaultHeight: t,
defaultWidth: s,
disabled: r,
element: n,
mode: o,
style: i
}) {
const { styleHeight: f, styleWidth: l } = A(
() => ({
styleHeight: ie(i?.height),
styleWidth: ie(i?.width)
}),
[i?.height, i?.width]
), [c, d] = M({
height: t,
width: s
}), a = r || o === "only-height" && f !== void 0 || o === "only-width" && l !== void 0 || f !== void 0 && l !== void 0;
return q(() => {
if (n === null || a)
return;
const h = new ResizeObserver((p) => {
for (const I of p) {
const { contentRect: u, target: w } = I;
n === w && d((m) => m.height === u.height && m.width === u.width ? m : {
height: u.height,
width: u.width
});
}
});
return h.observe(n, { box: e }), () => {
h?.unobserve(n);
};
}, [e, a, n, f, l]), A(
() => ({
height: f ?? c.height,
width: l ?? c.width
}),
[c, f, l]
);
}
function ae(e) {
const t = K(() => {
throw new Error("Cannot call during render.");
});
return q(() => {
t.current = e;
}, [e]), D((s) => t.current?.(s), [t]);
}
let U = null;
function Ie(e = !1) {
if (U === null || e) {
const t = document.createElement("div"), s = t.style;
s.width = "50px", s.height = "50px", s.overflow = "scroll", s.direction = "rtl";
const r = document.createElement("div"), n = r.style;
return n.width = "100px", n.height = "100px", t.appendChild(r), document.body.appendChild(t), t.scrollLeft > 0 ? U = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? U = "negative" : U = "positive-ascending"), document.body.removeChild(t), U;
}
return U;
}
function Z({
containerElement: e,
direction: t,
isRtl: s,
scrollOffset: r
}) {
if (t === "horizontal" && s)
switch (Ie()) {
case "negative":
return -r;
case "positive-descending": {
if (e) {
const { clientWidth: n, scrollLeft: o, scrollWidth: i } = e;
return i - n - o;
}
break;
}
}
return r;
}
function L(e, t = "Assertion error") {
if (!e)
throw console.error(t), Error(t);
}
function Y(e, t) {
if (e === t)
return !0;
if (!!e != !!t || (L(e !== void 0), L(t !== void 0), Object.keys(e).length !== Object.keys(t).length))
return !1;
for (const s in e)
if (!Object.is(t[s], e[s]))
return !1;
return !0;
}
function fe({
cachedBounds: e,
itemCount: t,
itemSize: s
}) {
if (t === 0)
return 0;
if (typeof s == "number")
return t * s;
{
const r = e.get(
e.size === 0 ? 0 : e.size - 1
);
L(r !== void 0, "Unexpected bounds cache miss");
const n = (r.scrollOffset + r.size) / e.size;
return t * n;
}
}
function we({
align: e,
cachedBounds: t,
index: s,
itemCount: r,
itemSize: n,
containerScrollOffset: o,
containerSize: i
}) {
if (s < 0 || s >= r)
throw RangeError(`Invalid index specified: ${s}`, {
cause: `Index ${s} is not within the range of 0 - ${r - 1}`
});
const f = fe({
cachedBounds: t,
itemCount: r,
itemSize: n
}), l = t.get(s), c = Math.max(
0,
Math.min(f - i, l.scrollOffset)
), d = Math.max(
0,
l.scrollOffset - i + l.size
);
switch (e === "smart" && (o >= d && o <= c ? e = "auto" : e = "center"), e) {
case "start":
return c;
case "end":
return d;
case "center":
return l.scrollOffset <= i / 2 ? 0 : l.scrollOffset + l.size / 2 >= f - i / 2 ? f - i : l.scrollOffset + l.size / 2 - i / 2;
case "auto":
default:
return o >= d && o <= c ? o : o < d ? d : c;
}
}
function P({
cachedBounds: e,
containerScrollOffset: t,
containerSize: s,
itemCount: r,
overscanCount: n
}) {
const o = r - 1;
let i = 0, f = -1, l = 0, c = -1, d = 0;
for (; d < o; ) {
const a = e.get(d);
if (a.scrollOffset + a.size > t)
break;
d++;
}
for (i = d, l = Math.max(0, i - n); d < o; ) {
const a = e.get(d);
if (a.scrollOffset + a.size >= t + s)
break;
d++;
}
return f = Math.min(o, d), c = Math.min(r - 1, f + n), i < 0 && (i = 0, f = -1, l = 0, c = -1), {
startIndexVisible: i,
stopIndexVisible: f,
startIndexOverscan: l,
stopIndexOverscan: c
};
}
function me({
itemCount: e,
itemProps: t,
itemSize: s
}) {
const r = /* @__PURE__ */ new Map();
return {
get(n) {
for (L(n < e, `Invalid index ${n}`); r.size - 1 < n; ) {
const i = r.size;
let f;
switch (typeof s) {
case "function": {
f = s(i, t);
break;
}
case "number": {
f = s;
break;
}
}
if (i === 0)
r.set(i, {
size: f,
scrollOffset: 0
});
else {
const l = r.get(i - 1);
L(
l !== void 0,
`Unexpected bounds cache miss for index ${n}`
), r.set(i, {
scrollOffset: l.scrollOffset + l.size,
size: f
});
}
}
const o = r.get(n);
return L(
o !== void 0,
`Unexpected bounds cache miss for index ${n}`
), o;
},
set(n, o) {
r.set(n, o);
},
get size() {
return r.size;
}
};
}
function Oe({
itemCount: e,
itemProps: t,
itemSize: s
}) {
return A(
() => me({
itemCount: e,
itemProps: t,
itemSize: s
}),
[e, t, s]
);
}
function ye({
containerSize: e,
itemSize: t
}) {
let s;
switch (typeof t) {
case "string": {
L(
t.endsWith("%"),
`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`
), L(
e !== void 0,
"Container size must be defined if a percentage item size is specified"
), s = e * parseInt(t) / 100;
break;
}
default: {
s = t;
break;
}
}
return s;
}
function te({
containerElement: e,
containerStyle: t,
defaultContainerSize: s = 0,
direction: r,
isRtl: n = !1,
itemCount: o,
itemProps: i,
itemSize: f,
onResize: l,
overscanCount: c
}) {
const { height: d = s, width: a = s } = be({
defaultHeight: r === "vertical" ? s : void 0,
defaultWidth: r === "horizontal" ? s : void 0,
element: e,
mode: r === "vertical" ? "only-height" : "only-width",
style: t
}), h = K({
height: 0,
width: 0
}), p = r === "vertical" ? d : a, I = ye({ containerSize: p, itemSize: f });
re(() => {
if (typeof l == "function") {
const g = h.current;
(g.height !== d || g.width !== a) && (l({ height: d, width: a }, { ...g }), g.height = d, g.width = a);
}
}, [d, l, a]);
const u = Oe({
itemCount: o,
itemProps: i,
itemSize: I
}), w = D(
(g) => u.get(g),
[u]
), [m, O] = M(
() => P({
cachedBounds: u,
// TODO Potentially support a defaultScrollOffset prop?
containerScrollOffset: 0,
containerSize: p,
itemCount: o,
overscanCount: c
})
), {
startIndexVisible: G,
startIndexOverscan: x,
stopIndexVisible: F,
stopIndexOverscan: V
} = {
startIndexVisible: Math.min(o - 1, m.startIndexVisible),
startIndexOverscan: Math.min(o - 1, m.startIndexOverscan),
stopIndexVisible: Math.min(o - 1, m.stopIndexVisible),
stopIndexOverscan: Math.min(o - 1, m.stopIndexOverscan)
}, z = D(
() => fe({
cachedBounds: u,
itemCount: o,
itemSize: I
}),
[u, o, I]
), $ = D(
(g) => {
const S = Z({
containerElement: e,
direction: r,
isRtl: n,
scrollOffset: g
});
return P({
cachedBounds: u,
containerScrollOffset: S,
containerSize: p,
itemCount: o,
overscanCount: c
});
},
[
u,
e,
p,
r,
n,
o,
c
]
);
q(() => {
const g = (r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0;
O($(g));
}, [e, r, $]), q(() => {
if (!e)
return;
const g = () => {
O((S) => {
const { scrollLeft: E, scrollTop: b } = e, v = Z({
containerElement: e,
direction: r,
isRtl: n,
scrollOffset: r === "vertical" ? b : E
}), R = P({
cachedBounds: u,
containerScrollOffset: v,
containerSize: p,
itemCount: o,
overscanCount: c
});
return Y(R, S) ? S : R;
});
};
return e.addEventListener("scroll", g), () => {
e.removeEventListener("scroll", g);
};
}, [
u,
e,
p,
r,
o,
c
]);
const y = ae(
({
align: g = "auto",
containerScrollOffset: S,
index: E
}) => {
let b = we({
align: g,
cachedBounds: u,
containerScrollOffset: S,
containerSize: p,
index: E,
itemCount: o,
itemSize: I
});
if (e) {
if (b = Z({
containerElement: e,
direction: r,
isRtl: n,
scrollOffset: b
}), typeof e.scrollTo != "function") {
const v = $(b);
Y(m, v) || O(v);
}
return b;
}
}
);
return {
getCellBounds: w,
getEstimatedSize: z,
scrollToIndex: y,
startIndexOverscan: x,
startIndexVisible: G,
stopIndexOverscan: V,
stopIndexVisible: F
};
}
function de(e) {
return A(() => e, Object.values(e));
}
function ue(e, t) {
const {
ariaAttributes: s,
style: r,
...n
} = e, {
ariaAttributes: o,
style: i,
...f
} = t;
return Y(s, o) && Y(r, i) && Y(n, f);
}
function Ee({
cellComponent: e,
cellProps: t,
children: s,
className: r,
columnCount: n,
columnWidth: o,
defaultHeight: i = 0,
defaultWidth: f = 0,
dir: l,
gridRef: c,
onCellsRendered: d,
onResize: a,
overscanCount: h = 3,
rowCount: p,
rowHeight: I,
style: u,
tagName: w = "div",
...m
}) {
const O = de(t), G = A(
() => le(e, ue),
[e]
), [x, F] = M(null), V = ve(x, l), {
getCellBounds: z,
getEstimatedSize: $,
startIndexOverscan: y,
startIndexVisible: g,
scrollToIndex: S,
stopIndexOverscan: E,
stopIndexVisible: b
} = te({
containerElement: x,
containerStyle: u,
defaultContainerSize: f,
direction: "horizontal",
isRtl: V,
itemCount: n,
itemProps: O,
itemSize: o,
onResize: a,
overscanCount: h
}), {
getCellBounds: v,
getEstimatedSize: R,
startIndexOverscan: k,
startIndexVisible: ne,
scrollToIndex: Q,
stopIndexOverscan: _,
stopIndexVisible: oe
} = te({
containerElement: x,
containerStyle: u,
defaultContainerSize: i,
direction: "vertical",
itemCount: p,
itemProps: O,
itemSize: I,
onResize: a,
overscanCount: h
});
ce(
c,
() => ({
get element() {
return x;
},
scrollToCell({
behavior: H = "auto",
columnAlign: T = "auto",
columnIndex: W,
rowAlign: B = "auto",
rowIndex: j
}) {
const N = S({
align: T,
containerScrollOffset: x?.scrollLeft ?? 0,
index: W
}), ge = Q({
align: B,
containerScrollOffset: x?.scrollTop ?? 0,
index: j
});
typeof x?.scrollTo == "function" && x.scrollTo({
behavior: H,
left: N,
top: ge
});
},
scrollToColumn({
align: H = "auto",
behavior: T = "auto",
index: W
}) {
const B = S({
align: H,
containerScrollOffset: x?.scrollLeft ?? 0,
index: W
});
typeof x?.scrollTo == "function" && x.scrollTo({
behavior: T,
left: B
});
},
scrollToRow({
align: H = "auto",
behavior: T = "auto",
index: W
}) {
const B = Q({
align: H,
containerScrollOffset: x?.scrollTop ?? 0,
index: W
});
typeof x?.scrollTo == "function" && x.scrollTo({
behavior: T,
top: B
});
}
}),
[x, S, Q]
), J(() => {
y >= 0 && E >= 0 && k >= 0 && _ >= 0 && d && d(
{
columnStartIndex: g,
columnStopIndex: b,
rowStartIndex: ne,
rowStopIndex: oe
},
{
columnStartIndex: y,
columnStopIndex: E,
rowStartIndex: k,
rowStopIndex: _
}
);
}, [
d,
y,
g,
E,
b,
k,
ne,
_,
oe
]);
const he = A(() => {
const H = [];
if (n > 0 && p > 0)
for (let T = k; T <= _; T++) {
const W = v(T), B = [];
for (let j = y; j <= E; j++) {
const N = z(j);
B.push(
/* @__PURE__ */ X(
G,
{
...O,
ariaAttributes: {
"aria-colindex": j + 1,
role: "gridcell"
},
columnIndex: j,
key: j,
rowIndex: T,
style: {
position: "absolute",
left: V ? void 0 : 0,
right: V ? 0 : void 0,
transform: `translate(${V ? -N.scrollOffset : N.scrollOffset}px, ${W.scrollOffset}px)`,
height: W.size,
width: N.size
}
}
)
);
}
H.push(
/* @__PURE__ */ ee("div", { role: "row", "aria-rowindex": T + 1, children: B }, T)
);
}
return H;
}, [
G,
O,
n,
y,
E,
z,
v,
V,
p,
k,
_
]), pe = /* @__PURE__ */ ee(
"div",
{
"aria-hidden": !0,
style: {
height: R(),
width: $(),
zIndex: -1
}
}
);
return X(
w,
{
"aria-colcount": n,
"aria-rowcount": p,
role: "grid",
...m,
className: r,
dir: l,
ref: F,
style: {
position: "relative",
maxHeight: "100%",
maxWidth: "100%",
flexGrow: 1,
overflow: "auto",
...u
}
},
he,
s,
pe
);
}
const Re = M, Ve = K;
function ze(e) {
return e != null && typeof e == "object" && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
}
const se = "data-react-window-index";
function Ae({
children: e,
className: t,
defaultHeight: s = 0,
listRef: r,
onResize: n,
onRowsRendered: o,
overscanCount: i = 3,
rowComponent: f,
rowCount: l,
rowHeight: c,
rowProps: d,
tagName: a = "div",
style: h,
...p
}) {
const I = de(d), u = A(
() => le(f, ue),
[f]
), [w, m] = M(null), O = ze(c), G = A(() => O ? (b) => c.getRowHeight(b) ?? c.getAverageRowHeight() : c, [O, c]), {
getCellBounds: x,
getEstimatedSize: F,
scrollToIndex: V,
startIndexOverscan: z,
startIndexVisible: $,
stopIndexOverscan: y,
stopIndexVisible: g
} = te({
containerElement: w,
containerStyle: h,
defaultContainerSize: s,
direction: "vertical",
itemCount: l,
itemProps: I,
itemSize: G,
onResize: n,
overscanCount: i
});
ce(
r,
() => ({
get element() {
return w;
},
scrollToRow({
align: b = "auto",
behavior: v = "auto",
index: R
}) {
const k = V({
align: b,
containerScrollOffset: w?.scrollTop ?? 0,
index: R
});
typeof w?.scrollTo == "function" && w.scrollTo({
behavior: v,
top: k
});
}
}),
[w, V]
), q(() => {
if (!w)
return;
const b = Array.from(w.children).filter((v, R) => {
if (v.hasAttribute("aria-hidden"))
return !1;
const k = `${z + R}`;
return v.setAttribute(se, k), !0;
});
if (O)
return c.observeRowElements(b);
}, [
w,
O,
c,
z,
y
]), J(() => {
z >= 0 && y >= 0 && o && o(
{
startIndex: $,
stopIndex: g
},
{
startIndex: z,
stopIndex: y
}
);
}, [
o,
z,
$,
y,
g
]);
const S = A(() => {
const b = [];
if (l > 0)
for (let v = z; v <= y; v++) {
const R = x(v);
b.push(
/* @__PURE__ */ X(
u,
{
...I,
ariaAttributes: {
"aria-posinset": v + 1,
"aria-setsize": l,
role: "listitem"
},
key: v,
index: v,
style: {
position: "absolute",
left: 0,
transform: `translateY(${R.scrollOffset}px)`,
// In case of dynamic row heights, don't specify a height style
// otherwise a default/estimated height would mask the actual height
height: O ? void 0 : R.size,
width: "100%"
}
}
)
);
}
return b;
}, [
u,
x,
O,
l,
I,
z,
y
]), E = /* @__PURE__ */ ee(
"div",
{
"aria-hidden": !0,
style: {
height: F(),
width: "100%",
zIndex: -1
}
}
);
return X(
a,
{
role: "list",
...p,
className: t,
ref: m,
style: {
position: "relative",
maxHeight: "100%",
flexGrow: 1,
overflowY: "auto",
...h
}
},
S,
e,
E
);
}
function ke({
defaultRowHeight: e,
key: t
}) {
const [s, r] = M({
key: t,
map: /* @__PURE__ */ new Map()
});
s.key !== t && r({
key: t,
map: /* @__PURE__ */ new Map()
});
const { map: n } = s, o = D(() => {
let a = 0;
return n.forEach((h) => {
a += h;
}), a === 0 ? e : a / n.size;
}, [e, n]), i = D(
(a) => {
const h = n.get(a);
return h !== void 0 ? h : (n.set(a, e), e);
},
[e, n]
), f = D((a, h) => {
r((p) => {
if (p.map.get(a) === h)
return p;
const I = new Map(p.map);
return I.set(a, h), {
...p,
map: I
};
});
}, []), l = ae(
(a) => {
a.length !== 0 && a.forEach((h) => {
const { borderBoxSize: p, target: I } = h, u = I.getAttribute(se);
L(
u !== null,
`Invalid ${se} attribute value`
);
const w = parseInt(u), { blockSize: m } = p[0];
m && f(w, m);
});
}
), [c] = M(() => {
if (typeof ResizeObserver < "u")
return new ResizeObserver(l);
});
J(() => {
if (c)
return () => {
c.disconnect();
};
}, [c]);
const d = D(
(a) => c ? (a.forEach((h) => c.observe(h)), () => {
a.forEach((h) => c.unobserve(h));
}) : () => {
},
[c]
);
return A(
() => ({
getAverageRowHeight: o,
getRowHeight: i,
setRowHeight: f,
observeRowElements: d
}),
[o, i, f, d]
);
}
const Le = M, Me = K;
let C = -1;
function $e(e = !1) {
if (C === -1 || e) {
const t = document.createElement("div"), s = t.style;
s.width = "50px", s.height = "50px", s.overflow = "scroll", document.body.appendChild(t), C = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
}
return C;
}
export {
Ee as Grid,
Ae as List,
$e as getScrollbarSize,
ke as useDynamicRowHeight,
Re as useGridCallbackRef,
Ve as useGridRef,
Le as useListCallbackRef,
Me as useListRef
};
//# sourceMappingURL=react-window.js.map
File diff suppressed because one or more lines are too long
+110
View File
@@ -0,0 +1,110 @@
{
"name": "react-window",
"version": "2.2.7",
"type": "module",
"author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
"contributors": [
"Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)"
],
"license": "MIT",
"homepage": "https://react-window.vercel.app/",
"repository": {
"type": "git",
"url": "https://github.com/bvaughn/react-window.git"
},
"main": "dist/react-window.cjs",
"module": "dist/react-window.js",
"types": "dist/react-window.d.ts",
"files": [
"dist"
],
"scripts": {
"dev": "vite",
"dev:integrations": "pnpm run dev:integrations:next & pnpm run dev:integrations:vike & pnpm run dev:integrations:vite",
"dev:integrations:next": "pnpm -C integrations/next/ run dev",
"dev:integrations:vike": "pnpm -C integrations/vike/ run dev",
"dev:integrations:vite": "pnpm -C integrations/vite/ run dev",
"build": "pnpm run build:lib && pnpm run build:docs",
"build:docs": "TARGET=docs vite build",
"build:lib": "TARGET=lib vite build",
"compile": "pnpm run compile:docs && pnpm run compile:examples",
"compile:docs": "tsx ./scripts/compile-docs",
"compile:examples": "tsx ./scripts/compile-examples",
"compress:og-image": "tsx ./scripts/compress-og-image",
"e2e:install": "pnpm -C integrations/tests exec playwright install --with-deps",
"e2e:test": "pnpm -C integrations/tests run test",
"lint": "eslint .",
"prerelease": "rm -rf dist && pnpm run build:lib",
"prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
"prettier:ci": "prettier --check \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
"preview": "vite preview",
"test": "vitest",
"test:ci": "vitest run",
"test:debug": "vitest --inspect-brk=127.0.0.1:3000 --no-file-parallelism",
"tsc": "tsc -b"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@csstools/postcss-oklab-function": "^4.0.11",
"@eslint/js": "^9.30.1",
"@headlessui/react": "^2.2.4",
"@headlessui/tailwindcss": "^0.2.2",
"@heroicons/react": "^2.2.0",
"@tailwindcss/vite": "^4.1.11",
"@tailwindplus/elements": "^1.0.5",
"@testing-library/jest-dom": "^6.6.4",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1",
"@types/bytes": "^3.1.5",
"@types/markdown-it": "^14.1.2",
"@types/node": "^24.2.0",
"@types/react": "^19.2.3",
"@types/react-dom": "^19.2.3",
"@types/sharp": "^0.32.0",
"@vitejs/plugin-react-swc": "^3.10.2",
"bytes": "^3.1.2",
"clsx": "^2.1.1",
"csstype": "^3.1.3",
"eslint": "^9.30.1",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.3.0",
"husky": "^9.1.7",
"jsdom": "^26.1.0",
"lint-staged": "^16.1.4",
"markdown-it": "^14.1.0",
"marked": "^16.4.1",
"postcss": "^8.5.6",
"prettier": "3.6.2",
"prettier-plugin-tailwindcss": "^0.7.1",
"react": "^19.2.3",
"react-docgen-typescript": "^2.4.0",
"react-dom": "^19.2.3",
"react-error-boundary": "^6.0.0",
"react-lib-tools": "^0.0.30",
"react-router-dom": "^7.6.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^6.0.3",
"rollup-preserve-directives": "^1.1.3",
"sharp": "^0.34.5",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.1.11",
"ts-blank-space": "^0.6.2",
"ts-node": "^10.9.2",
"tsx": "^4.21.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.35.1",
"typescript-json-schema": "^0.65.1",
"vite": "^7.0.4",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-svgr": "^4.3.0",
"vitest": "^3.2.4",
"zustand": "^5.0.7"
}
}