react-virtuoso 2.8.4 → 2.8.5

package/dist/index.d.ts

@@ -1,3 +1,847 @@
-export * from './components';
-export * from './interfaces';
-export { LogLevel } from './loggerSystem';
+import { ComponentPropsWithRef } from 'react';
+import { ComponentType } from 'react';
+import { Key } 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<Context = unknown> {
+    /**
+     * 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<ItemProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<GroupProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<TopItemListProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<ScrollerProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
+     */
+    List?: ComponentType<ListProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<ScrollSeekPlaceholderProps & {
+        context?: Context;
+    }>;
+}
+
+export declare interface ComputeItemKey<D, C> {
+    (index: number, item: D, context: C): Key;
+}
+
+export declare type FixedHeaderContent = (() => React.ReactChildren | React.ReactNode) | null;
+
+export declare type FollowOutput = FollowOutputCallback | FollowOutputScalarType;
+
+export declare type FollowOutputCallback = (isAtBottom: boolean) => FollowOutputScalarType;
+
+export declare type FollowOutputScalarType = boolean | 'smooth' | 'auto';
+
+export declare interface GridComponents<Context = any> {
+    /**
+     * Set to customize the item wrapping element. Use only if you would like to render list from elements different than a `div`.
+     */
+    Item?: ComponentType<GridItem & {
+        context?: Context;
+    }>;
+    /**
+     * 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<ScrollerProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the items wrapper. Use only if you would like to render list from elements different than a `div`.
+     */
+    List?: ComponentType<GridListProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to render an item placeholder when the user scrolls fast.
+     * See the `scrollSeekConfiguration` property for more details.
+     */
+    ScrollSeekPlaceholder?: ComponentType<GridScrollSeekPlaceholderProps & {
+        context?: Context;
+    }>;
+}
+
+export declare interface GridComputeItemKey {
+    (index: number): Key;
+}
+
+export declare interface GridItem {
+    'data-index': number;
+    className?: string;
+}
+
+export declare interface GridItemContent<C> {
+    (index: number, context: C): ReactNode;
+}
+
+/**
+ * Passed to the Components.List custom component
+ */
+export declare type GridListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref' | 'className'>;
+
+export declare type GridRootProps = Omit<React.HTMLProps<'div'>, '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 const GroupedVirtuoso: <ItemData extends unknown = any, Context extends unknown = any>(props: GroupedVirtuosoProps<ItemData, Context> & {
+    ref?: Ref<GroupedVirtuosoHandle> | undefined;
+}) => ReactElement;
+
+export declare interface GroupedVirtuosoHandle {
+    scrollToIndex(location: number | IndexLocationWithAlign): void;
+    scrollTo(location: ScrollToOptions): void;
+    scrollBy(location: ScrollToOptions): void;
+}
+
+export declare interface GroupedVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, '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<D, C>;
+}
+
+export declare interface GroupItem<D> extends Item<D> {
+    type: 'group';
+    originalIndex?: number;
+}
+
+export declare interface GroupItemContent<D, C> {
+    (index: number, groupIndex: number, data: D, context: C): ReactNode;
+}
+
+export declare interface GroupProps {
+    'data-index': number;
+    'data-item-index': number;
+    'data-known-size': number;
+}
+
+export declare interface IndexLocationWithAlign {
+    /**
+     * The index of the item to scroll to.
+     */
+    index: number | 'LAST';
+    /**
+     * 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 interface Item<D> {
+    index: number;
+    offset: number;
+    size: number;
+    data?: D;
+}
+
+export declare interface ItemContent<D, C> {
+    (index: number, data: D, context: C): ReactNode;
+}
+
+export declare interface ItemProps {
+    'data-index': number;
+    'data-item-index': number;
+    'data-item-group-index'?: number;
+    'data-known-size': number;
+}
+
+export declare type ListItem<D> = RecordItem<D> | GroupItem<D>;
+
+/**
+ * Passed to the Components.List custom component
+ */
+export declare type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & {
+    'data-test-id': string;
+};
+
+export declare interface ListRange {
+    startIndex: number;
+    endIndex: number;
+}
+
+export declare type ListRootProps = Omit<React.HTMLProps<'div'>, 'ref' | 'data'>;
+
+export declare enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3
+}
+
+export declare interface RecordItem<D> extends Item<D> {
+    type?: undefined;
+    groupIndex?: number;
+    originalIndex?: number;
+    data?: D;
+}
+
+/**
+ * Passed to the Components.Scroller custom component
+ */
+export declare type ScrollerProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'tabIndex' | 'ref'> & {
+    'data-test-id'?: string;
+    'data-virtuoso-scroller'?: boolean;
+};
+
+export declare interface ScrollIntoViewLocation {
+    index: number;
+    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;
+}
+
+/**
+ * Passed to the Components.TableBody custom component
+ */
+export declare type TableBodyProps = Pick<ComponentPropsWithRef<'tbody'>, 'style' | 'children' | 'ref' | 'className'> & {
+    'data-test-id': string;
+};
+
+/**
+ * Customize the TableVirtuoso rendering by passing a set of custom components.
+ */
+export declare interface TableComponents<Context = unknown> {
+    /**
+     * Set to customize the wrapping `table` element.
+     *
+     */
+    Table?: ComponentType<TableProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to render a fixed header at the top of the table (`thead`). use [[fixedHeaderHeight]] to set the contents
+     *
+     */
+    TableHead?: ComponentType<{
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the item wrapping element. Default is `tr`.
+     */
+    TableRow?: ComponentType<ItemProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<ScrollerProps & {
+        context?: Context;
+    }>;
+    /**
+     * Set to customize the items wrapper. Default is `tbody`.
+     */
+    TableBody?: ComponentType<TableBodyProps & {
+        context?: Context;
+    }>;
+    /**
+     * 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<ScrollSeekPlaceholderProps & {
+        context?: Context;
+    }>;
+}
+
+export declare type TableProps = Pick<ComponentPropsWithRef<'table'>, 'style'>;
+
+export declare type TableRootProps = Omit<React.HTMLProps<'table'>, 'ref' | 'data'>;
+
+export declare const TableVirtuoso: <ItemData extends unknown = any, Context extends unknown = any>(props: TableVirtuosoProps<ItemData, Context> & {
+    ref?: Ref<TableVirtuosoHandle> | undefined;
+}) => ReactElement;
+
+export declare interface TableVirtuosoHandle {
+    scrollIntoView(location: ScrollIntoViewLocation): void;
+    scrollToIndex(location: number | IndexLocationWithAlign): void;
+    scrollTo(location: ScrollToOptions): void;
+    scrollBy(location: ScrollToOptions): void;
+}
+
+export declare interface TableVirtuosoProps<D, C> extends Omit<VirtuosoProps<D, C>, 'components' | 'headerFooterTag' | 'topItemCount'> {
+    /**
+     * Use the `components` property for advanced customization of the elements rendered by the table.
+     */
+    components?: TableComponents<C>;
+    /**
+     * Set the contents of the table header.
+     */
+    fixedHeaderContent?: FixedHeaderContent;
+    /**
+     * 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<D, C>;
+    /**
+     * If specified, the component will use the function to generate the `key` property for each list item.
+     */
+    computeItemKey?: ComputeItemKey<D, C>;
+    /**
+     * 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?: (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
+    /**
+     * 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
+     * <Virtuoso
+     *  followOutput={(isAtBottom: boolean) => {
+     *    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<D>[]) => 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 `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;
+}
+
+export declare type TopItemListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children'>;
+
+export declare const Virtuoso: <ItemData extends unknown = any, Context extends unknown = any>(props: VirtuosoProps<ItemData, Context> & {
+    ref?: Ref<VirtuosoHandle> | undefined;
+}) => ReactElement;
+
+export declare const VirtuosoGrid: <Context extends unknown = any>(props: VirtuosoGridProps<Context> & {
+    ref?: Ref<VirtuosoGridHandle> | undefined;
+}) => ReactElement;
+
+export declare interface VirtuosoGridHandle {
+    scrollToIndex(location: number | IndexLocationWithAlign): void;
+    scrollTo(location: ScrollToOptions): void;
+    scrollBy(location: ScrollToOptions): void;
+}
+
+export declare interface VirtuosoGridProps<C extends unknown = unknown> {
+    /**
+     * The total amount of items to be rendered.
+     */
+    totalCount: number;
+    /**
+     * Set the callback to specify the contents of the item.
+     */
+    itemContent?: GridItemContent<C>;
+    /**
+     * Use the `components` property for advanced customization of the elements rendered by the list.
+     */
+    components?: GridComponents<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 | IndexLocationWithAlign): void;
+    /**
+     * Scrolls the item into view if necessary. See [the website example](http://virtuoso.dev/keyboard-navigation/) for an implementation.
+     */
+    scrollIntoView(location: ScrollIntoViewLocation): 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;
+}
+
+export declare interface VirtuosoProps<D, C> {
+    /**
+     * 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<C>;
+    /**
+     * Set the callback to specify the contents of the item.
+     */
+    itemContent?: ItemContent<D, C>;
+    /**
+     * If specified, the component will use the function to generate the `key` property for each list item.
+     */
+    computeItemKey?: ComputeItemKey<D, C>;
+    /**
+     * 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?: (el: HTMLElement, field: 'offsetHeight' | 'offsetWidth') => number;
+    /**
+     * 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
+     * <Virtuoso
+     *  followOutput={(isAtBottom: boolean) => {
+     *    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<D>[]) => 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;
+    /**
+     * 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;
+}
+
+export declare interface WindowViewportInfo {
+    offsetTop: number;
+    visibleHeight: number;
+    visibleWidth: number;
+}
+
+export { }