import { ComponentPropsWithRef } from 'react'; import { ComponentType } from 'react'; import { Key } from 'react'; import { default as React_2 } from 'react'; import * as React_3 from 'react'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { Ref } from 'react'; /** * Customize the Virtuoso rendering by passing a set of custom components. */ export declare interface Components { /** * Set to render a component at the top of the list. * * The header remains above the top items and does not remain sticky. */ Header?: ComponentType<{ context?: Context; }>; /** * Set to render a component at the bottom of the list. */ Footer?: ComponentType<{ context?: Context; }>; /** * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`. */ Item?: ComponentType; /** * Set to customize the group item wrapping element. Use only if you would like to render list from elements different than a `div`. */ Group?: ComponentType; /** * Set to customize the top list item wrapping element. Use if you would like to render list from elements different than a `div` * or you want to set a custom z-index for the sticky position. */ TopItemList?: ComponentType; /** * Set to customize the outermost scrollable element. This should not be necessary in general, * as the component passes its HTML attribute props to it. */ Scroller?: ComponentType; /** * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`. */ List?: ComponentType; /** * Set to render a custom UI when the list is empty. */ EmptyPlaceholder?: ComponentType<{ context?: Context; }>; /** * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details. */ ScrollSeekPlaceholder?: ComponentType; } export declare interface ComputeItemKey { (index: number, item: D, context: C): Key; } /** * Passed to the Components.FillerRow custom component */ export declare interface FillerRowProps { height: number; } export declare type FixedFooterContent = (() => React_2.ReactNode) | null; export declare type FixedHeaderContent = (() => React_2.ReactNode) | null; export declare interface FlatIndexLocationWithAlign extends LocationOptions { /** * The index of the item to scroll to. */ index: number | 'LAST'; } export declare interface FlatScrollIntoViewLocation extends ScrollIntoViewLocationOptions { index: number; } export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType; export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType; export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto'; export declare interface GridComponents { /** * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`. */ Item?: ComponentType; /** * Set to customize the outermost scrollable element. This should not be necessary in general, * as the component passes its HTML attribute props to it. */ Scroller?: ComponentType; /** * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`. */ List?: ComponentType; /** * Set to render an item placeholder when the user scrolls fast. * See the `scrollSeekConfiguration` property for more details. */ ScrollSeekPlaceholder?: ComponentType; } export declare interface GridComputeItemKey { (index: number): Key; } export declare interface GridItem { 'data-index': number; className?: string; } export declare interface GridItemContent { (index: number, context: C): ReactNode; } /** * Passed to the Components.List custom component */ export declare type GridListProps = Pick, 'style' | 'children' | 'ref' | 'className'>; export declare type GridRootProps = Omit, 'ref' | 'data'>; /** * Passed to the GridComponents.ScrollSeekPlaceholder custom component */ export declare interface GridScrollSeekPlaceholderProps { index: number; height: number; width: number; } export declare interface GroupContent { (index: number): ReactNode; } export declare interface GroupedScrollIntoViewLocation extends ScrollIntoViewLocationOptions { groupIndex: number; } export declare const GroupedVirtuoso: (props: GroupedVirtuosoProps & { ref?: Ref | undefined; }) => ReactElement; export declare interface GroupedVirtuosoHandle { scrollToIndex(location: number | IndexLocationWithAlign): void; scrollIntoView(location: number | ScrollIntoViewLocation): void; scrollTo(location: ScrollToOptions): void; scrollBy(location: ScrollToOptions): void; autoscrollToBottom(): void; } export declare interface GroupedVirtuosoProps extends Omit, 'totalCount' | 'itemContent'> { /** * Specifies the amount of items in each group (and, actually, how many groups are there). * For example, passing [20, 30] will display 2 groups with 20 and 30 items each. */ groupCounts?: number[]; /** * Specifies how each each group header gets rendered. The callback receives the zero-based index of the group. */ groupContent?: GroupContent; /** * Specifies how each each item gets rendered. */ itemContent?: GroupItemContent; } export declare interface GroupIndexLocationWithAlign extends LocationOptions { /** * The group index of the item to scroll to. */ groupIndex: number; } export declare interface GroupItem extends Item { type: 'group'; originalIndex?: number; } export declare interface GroupItemContent { (index: number, groupIndex: number, data: D, context: C): ReactNode; } export declare type GroupProps = Pick, 'style' | 'children'> & { 'data-index': number; 'data-item-index': number; 'data-known-size': number; }; export declare type IndexLocationWithAlign = FlatIndexLocationWithAlign | GroupIndexLocationWithAlign; export declare interface Item { index: number; offset: number; size: number; data?: D; } export declare interface ItemContent { (index: number, data: D, context: C): ReactNode; } export declare type ItemProps = Pick, 'style' | 'children'> & { 'data-index': number; 'data-item-index': number; 'data-item-group-index'?: number; 'data-known-size': number; }; export declare type ListItem = RecordItem | GroupItem; /** * Passed to the Components.List custom component */ export declare type ListProps = Pick, 'style' | 'children' | 'ref'> & { 'data-test-id': string; }; export declare interface ListRange { startIndex: number; endIndex: number; } export declare type ListRootProps = Omit, 'ref' | 'data'>; export declare interface LocationOptions { /** * How to position the item in the viewport. */ align?: 'start' | 'center' | 'end'; /** * Set 'smooth' to have an animated transition to the specified location. */ behavior?: 'smooth' | 'auto'; /** * The offset to scroll. */ offset?: number; } export declare enum LogLevel { DEBUG = 0, INFO = 1, WARN = 2, ERROR = 3 } export declare interface RecordItem extends Item { type?: undefined; groupIndex?: number; originalIndex?: number; data?: D; } export declare interface ScrollContainerState { scrollHeight: number; scrollTop: number; viewportHeight: number; } /** * Passed to the Components.Scroller custom component */ export declare type ScrollerProps = Pick, 'style' | 'children' | 'tabIndex' | 'ref'> & { 'data-test-id'?: string; 'data-virtuoso-scroller'?: boolean; }; export declare type ScrollIntoViewLocation = FlatScrollIntoViewLocation | GroupedScrollIntoViewLocation; export declare interface ScrollIntoViewLocationOptions { align?: 'start' | 'center' | 'end'; behavior?: 'auto' | 'smooth'; done?: () => void; } export declare interface ScrollSeekConfiguration { /** * Callback to determine if the list should enter "scroll seek" mode. */ enter: ScrollSeekToggle; /** * called during scrolling in scroll seek mode - use to display a hint where the list is. */ change?: (velocity: number, range: ListRange) => void; /** * Callback to determine if the list should enter "scroll seek" mode. */ exit: ScrollSeekToggle; } /** * Passed to the Components.ScrollSeekPlaceholder custom component */ export declare interface ScrollSeekPlaceholderProps { index: number; height: number; groupIndex?: number; type: 'group' | 'item'; } export declare interface ScrollSeekToggle { (velocity: number, range: ListRange): boolean; } /** Calculates the height of `el`, which will be the `Item` element in the DOM. */ export declare type SizeFunction = (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number; /** * Passed to the Components.TableBody custom component */ export declare type TableBodyProps = Pick, 'style' | 'children' | 'ref' | 'className'> & { 'data-test-id': string; }; /** * Customize the TableVirtuoso rendering by passing a set of custom components. */ export declare interface TableComponents { /** * Set to customize the wrapping `table` element. * */ Table?: ComponentType; /** * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents * */ TableHead?: ComponentType, 'style' | 'ref'> & { context?: Context; }>; /** * Set to render a fixed footer at the bottom of the table (`tfoot`). use [[fixedFooterContent]] to set the contents */ TableFoot?: ComponentType, 'style' | 'ref'> & { context?: Context; }>; /** * Set to customize the item wrapping element. Default is `tr`. */ TableRow?: ComponentType; /** * Set to customize the outermost scrollable element. This should not be necessary in general, * as the component passes its HTML attribute props to it. */ Scroller?: ComponentType; /** * Set to customize the items wrapper. Default is `tbody`. */ TableBody?: ComponentType; /** * Set to render a custom UI when the list is empty. */ EmptyPlaceholder?: ComponentType<{ context?: Context; }>; /** * Set to render an item placeholder when the user scrolls fast. See the `scrollSeek` property for more details. */ ScrollSeekPlaceholder?: ComponentType; /** * Set to render an empty item placeholder. */ FillerRow?: ComponentType; } export declare type TableProps = Pick, 'style' | 'children'>; export declare type TableRootProps = Omit, 'ref' | 'data'>; export declare const TableVirtuoso: (props: TableVirtuosoProps & { ref?: Ref | undefined; }) => ReactElement; export declare interface TableVirtuosoHandle { scrollIntoView(location: number | FlatScrollIntoViewLocation): void; scrollToIndex(location: number | FlatIndexLocationWithAlign): void; scrollTo(location: ScrollToOptions): void; scrollBy(location: ScrollToOptions): void; } export declare interface TableVirtuosoProps extends Omit, 'components' | 'headerFooterTag' | 'topItemCount'> { /** * Use the `components` property for advanced customization of the elements rendered by the table. */ components?: TableComponents; /** * Set the contents of the table header. */ fixedHeaderContent?: FixedHeaderContent; /** * Set the contents of the table footer. */ fixedFooterContent?: FixedFooterContent; /** * The total amount of items to be rendered. */ totalCount?: number; /** * The data items to be rendered. If data is set, the total count will be inferred from the length of the array. */ data?: readonly D[]; /** * Set the overscan property to make the component "chunk" the rendering of new items on scroll. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions. * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in `react-window`). */ overscan?: number | { main: number; reverse: number; }; /** * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport. * The property causes the component to render more items than the necessary, but can help with slow loading content. * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately. */ increaseViewportBy?: number | { top: number; bottom: number; }; /** * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item. */ initialTopMostItemIndex?: number; /** * Set this value to offset the initial location of the list. * Warning: using this property will still run a render cycle at the scrollTop: 0 list window. * If possible, avoid using it and stick to `initialTopMostItemIndex` instead. */ initialScrollTop?: number; /** * Use for server-side rendering - if set, the list will render the specified amount of items * regardless of the container / item size. */ initialItemCount?: number; /** * Set the callback to specify the contents of the item. */ itemContent?: ItemContent; /** * If specified, the component will use the function to generate the `key` property for each list item. */ computeItemKey?: ComputeItemKey; /** * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe"). * * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower, * as multiple passes of rendering should happen for the list to fill the viewport. * * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property * value as default height instead. */ defaultItemHeight?: number; /** * Allows customizing the height/width calculation of `Item` elements. * * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`. */ itemSize?: SizeFunction; /** * Can be used to improve performance if the rendered items are of known size. * Setting it causes the component to skip item measurements. */ fixedItemHeight?: number; /** * Use to display placeholders if the user scrolls fast through the list. * * Set `components.ScrollSeekPlaceholder` to change the placeholder content. */ scrollSeekConfiguration?: ScrollSeekConfiguration | false; /** * If set to `true`, the list automatically scrolls to bottom if the total count is changed. * Set to `"smooth"` for an animated scrolling. * * By default, `followOutput` scrolls down only if the list is already at the bottom. * To implement an arbitrary logic behind that, pass a function: * * ```tsx * { * if (expression) { * return 'smooth' // can be 'auto' or false to avoid scrolling * } else { * return false * } * }} /> * ``` */ followOutput?: FollowOutput; /** * Use when implementing inverse infinite scrolling - decrease the value this property * in combination with `data` or `totalCount` to prepend items to the top of the list. * * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed. */ firstItemIndex?: number; /** * Called when the list starts/stops scrolling. */ isScrolling?: (isScrolling: boolean) => void; /** * Gets called when the user scrolls to the end of the list. * Receives the last item index as an argument. Can be used to implement endless scrolling. */ endReached?: (index: number) => void; /** * Called when the user scrolls to the start of the list. */ startReached?: (index: number) => void; /** * Called with the new set of items each time the list items are rendered due to scrolling. */ rangeChanged?: (range: ListRange) => void; /** * Called with true / false when the list has reached the bottom / gets scrolled up. * Can be used to load newer items, like `tail -f`. */ atBottomStateChange?: (atBottom: boolean) => void; /** * Called with `true` / `false` when the list has reached the top / gets scrolled down. */ atTopStateChange?: (atTop: boolean) => void; /** * Called when the total list height is changed due to new items or viewport resize. */ totalListHeightChanged?: (height: number) => void; /** * Called with the new set of items each time the list items are rendered due to scrolling. */ itemsRendered?: (items: ListItem[]) => void; /** * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport. * Use `followOutput` property to keep the list aligned when new items are appended. */ alignToBottom?: boolean; /** * Uses the document scroller rather than wrapping the list in its own. */ useWindowScroll?: boolean; /** * Pass a reference to a scrollable parent element, so that the table won't wrap in its own. */ customScrollParent?: HTMLElement; /** * Provides access to the root DOM element */ scrollerRef?: (ref: HTMLElement | Window | null) => any; /** * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top. */ atTopThreshold?: number; /** * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom. */ atBottomThreshold?: number; /** * No longer necessary after 2.10.2. component should work out of the box. */ react18ConcurrentRendering?: boolean; } export declare type TopItemListProps = Pick, 'style' | 'children'>; export declare const Virtuoso: (props: VirtuosoProps & { ref?: Ref | undefined; }) => ReactElement; export declare const VirtuosoGrid: (props: VirtuosoGridProps & { ref?: Ref | undefined; }) => ReactElement; export declare interface VirtuosoGridHandle { scrollToIndex(location: number | IndexLocationWithAlign): void; scrollTo(location: ScrollToOptions): void; scrollBy(location: ScrollToOptions): void; } export declare interface VirtuosoGridProps extends GridRootProps { /** * The total amount of items to be rendered. */ totalCount: number; /** * Use for server-side rendering - if set, the list will render the specified amount of items * regardless of the container / item size. */ initialItemCount?: number; /** * Set the callback to specify the contents of the item. */ itemContent?: GridItemContent; /** * Use the `components` property for advanced customization of the elements rendered by the list. */ components?: GridComponents; /** * Use the `components` property for advanced customization of the elements rendered by the list. */ context?: C; /** * Set the overscan property to make the component "chunk" the rendering of new items on scroll. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions. */ overscan?: number | { main: number; reverse: number; }; /** * If specified, the component will use the function to generate the `key` property for each list item. */ computeItemKey?: GridComputeItemKey; /** * Use to display placeholders if the user scrolls fast through the list. * * Set `components.ScrollSeekPlaceholder` to change the placeholder content. */ scrollSeekConfiguration?: ScrollSeekConfiguration | false; /** * Called when the list starts/stops scrolling. */ isScrolling?: (isScrolling: boolean) => void; /** * Gets called when the user scrolls to the end of the list. * Receives the last item index as an argument. Can be used to implement endless scrolling. */ endReached?: (index: number) => void; /** * Called when the user scrolls to the start of the list. */ startReached?: (index: number) => void; /** * Called with the new set of items each time the list items are rendered due to scrolling. */ rangeChanged?: (range: ListRange) => void; /** * Called with true / false when the list has reached the bottom / gets scrolled up. * Can be used to load newer items, like `tail -f`. */ atBottomStateChange?: (atBottom: boolean) => void; /** * Called with `true` / `false` when the list has reached the top / gets scrolled down. */ atTopStateChange?: (atTop: boolean) => void; /** * Provides access to the root DOM element */ scrollerRef?: (ref: HTMLElement | null) => any; /** * Sets the className for the list DOM element */ listClassName?: string; /** * Sets the grid items' className */ itemClassName?: string; /** * Uses the document scroller rather than wrapping the grid in its own. */ useWindowScroll?: boolean; /** * Pass a reference to a scrollable parent element, so that the grid won't wrap in its own. */ customScrollParent?: HTMLElement; } export declare interface VirtuosoHandle { /** * Scrolls the component to the specified item index. See {@link IndexLocationWithAlign} for more options. */ scrollToIndex(location: number | FlatIndexLocationWithAlign): void; /** * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation. */ scrollIntoView(location: FlatScrollIntoViewLocation): void; /** * Scrolls the component to the specified location. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) */ scrollTo(location: ScrollToOptions): void; /** * Scrolls the component with the specified amount. See [ScrollToOptions (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) */ scrollBy(location: ScrollToOptions): void; /** * Use this with combination with follow output if you have images loading in the list. Listen to the image loading and call the method. */ autoscrollToBottom(): void; } export declare const VirtuosoMockContext: React_3.Context; export declare interface VirtuosoMockContextValue { viewportHeight: number; itemHeight: number; } export declare interface VirtuosoProps extends ListRootProps { /** * The total amount of items to be rendered. */ totalCount?: number; /** * The data items to be rendered. If data is set, the total count will be inferred from the length of the array. */ data?: readonly D[]; /** * Additional context available in the custom components and content callbacks */ context?: C; /** * *The property accepts pixel values.* * * Set the overscan property to make the component "chunk" the rendering of new items on scroll. * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll. * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions. * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window). * */ overscan?: number | { main: number; reverse: number; }; /** * * *The property accepts pixel values.* * * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport. * The property causes the component to render more items than the necessary, but can help with slow loading content. * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately. * */ increaseViewportBy?: number | { top: number; bottom: number; }; /** * Set the amount of items to remain fixed at the top of the list. * * For a header that scrolls away when scrolling, check the `components.Header` property. */ topItemCount?: number; /** * Set to a value between 0 and totalCount - 1 to make the list start scrolled to that item. * Pass in an object to achieve additional effects similar to `scrollToIndex`. */ initialTopMostItemIndex?: number | IndexLocationWithAlign; /** * Set this value to offset the initial location of the list. * Warning: using this property will still run a render cycle at the scrollTop: 0 list window. * If possible, avoid using it and stick to `initialTopMostItemIndex` instead. */ initialScrollTop?: number; /** * Use for server-side rendering - if set, the list will render the specified amount of items * regardless of the container / item size. */ initialItemCount?: number; /** * Use the `components` property for advanced customization of the elements rendered by the list. */ components?: Components; /** * Set the callback to specify the contents of the item. */ itemContent?: ItemContent; /** * If specified, the component will use the function to generate the `key` property for each list item. */ computeItemKey?: ComputeItemKey; /** * By default, the component assumes the default item height from the first rendered item (rendering it as a "probe"). * * If the first item turns out to be an outlier (very short or tall), the rest of the rendering will be slower, * as multiple passes of rendering should happen for the list to fill the viewport. * * Setting `defaultItemHeight` causes the component to skip the "probe" rendering and use the property * value as default height instead. */ defaultItemHeight?: number; /** * Allows customizing the height/width calculation of `Item` elements. * * The default implementation reads `el.getBoundingClientRect().height` and `el.getBoundingClientRect().width`. */ itemSize?: SizeFunction; /** * Can be used to improve performance if the rendered items are of known size. * Setting it causes the component to skip item measurements. */ fixedItemHeight?: number; /** * Use to display placeholders if the user scrolls fast through the list. * * Set `components.ScrollSeekPlaceholder` to change the placeholder content. */ scrollSeekConfiguration?: ScrollSeekConfiguration | false; /** * If set to `true`, the list automatically scrolls to bottom if the total count is changed. * Set to `"smooth"` for an animated scrolling. * * By default, `followOutput` scrolls down only if the list is already at the bottom. * To implement an arbitrary logic behind that, pass a function: * * ```tsx * { * if (expression) { * return 'smooth' // can be 'auto' or false to avoid scrolling * } else { * return false * } * }} /> * ``` */ followOutput?: FollowOutput; /** * Set to customize the wrapper tag for the header and footer components (default is `div`). */ headerFooterTag?: string; /** * Use when implementing inverse infinite scrolling - decrease the value this property * in combination with `data` or `totalCount` to prepend items to the top of the list. * * Warning: the firstItemIndex should **be a positive number**, based on the total amount of items to be displayed. */ firstItemIndex?: number; /** * Called when the list starts/stops scrolling. */ isScrolling?: (isScrolling: boolean) => void; /** * Gets called when the user scrolls to the end of the list. * Receives the last item index as an argument. Can be used to implement endless scrolling. */ endReached?: (index: number) => void; /** * Called when the user scrolls to the start of the list. */ startReached?: (index: number) => void; /** * Called with the new set of items each time the list items are rendered due to scrolling. */ rangeChanged?: (range: ListRange) => void; /** * Called with true / false when the list has reached the bottom / gets scrolled up. * Can be used to load newer items, like `tail -f`. */ atBottomStateChange?: (atBottom: boolean) => void; /** * Called with `true` / `false` when the list has reached the top / gets scrolled down. */ atTopStateChange?: (atTop: boolean) => void; /** * Called when the total list height is changed due to new items or viewport resize. */ totalListHeightChanged?: (height: number) => void; /** * Called with the new set of items each time the list items are rendered due to scrolling. */ itemsRendered?: (items: ListItem[]) => void; /** * Setting `alignToBottom` to `true` aligns the items to the bottom of the list if the list is shorter than the viewport. * Use `followOutput` property to keep the list aligned when new items are appended. */ alignToBottom?: boolean; /** * Uses the document scroller rather than wrapping the list in its own. */ useWindowScroll?: boolean; /** * Pass a reference to a scrollable parent element, so that the list won't wrap in its own. */ customScrollParent?: HTMLElement; /** * Provides access to the root DOM element */ scrollerRef?: (ref: HTMLElement | Window | null) => any; /** * *The property accepts pixel values.* * * By default `0`. Redefine to change how much away from the top the scroller can be before the list is not considered not at top. */ atTopThreshold?: number; /** * *The property accepts pixel values.* * * By default `4`. Redefine to change how much away from the bottom the scroller can be before the list is not considered not at bottom. */ atBottomThreshold?: number; /** * No longer necessary after 2.10.2. component should work out of the box. */ react18ConcurrentRendering?: boolean; } export declare interface WindowViewportInfo { offsetTop: number; visibleHeight: number; visibleWidth: number; } export { }