@candidstartup/react-virtual-scroll 0.5.0 → 0.6.1

package/dist/index.d.ts

@@ -1,24 +1,106 @@
-import React from 'react';
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
- * Common props for {@link VirtualListItem} and {@link VirtualGridItem}
+ * Props that an implementation of {@link VirtualContainerRender} must accept.
+ *
+ * Includes all the props that a {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement | HTMLDivElement} would accept.
+ */
+type VirtualContainerRenderProps = React$1.ComponentPropsWithoutRef<'div'>;
+/**
+ * Render prop for a {@link VirtualContainer}
+ *
+ * Can be passed to {@link VirtualContainer} to replace default implementation.
+ * Function must render a div and forward {@link VirtualContainerRenderProps}
+ * and any `ref` to it.
+ *
+ * @example Minimal compliant implementation
+ * ```
+ * const containerRender: VirtualContainerRender = ({...rest}, ref) => (
+ *   <div ref={ref} {...rest} />
+ * )
+ * ```
+ */
+type VirtualContainerRender = (props: VirtualContainerRenderProps, ref?: React$1.ForwardedRef<HTMLDivElement>) => JSX.Element;
+/**
+ * Props that {@link VirtualContainer} accepts.
+ */
+interface VirtualContainerComponentProps extends VirtualContainerRenderProps {
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link VirtualContainer}. */
+    render?: VirtualContainerRender;
+}
+/**
+ * Wrapper around a div used by other components in {@link @candidstartup/react-virtual-scroll!}. Most props are passed through to the div. Use the
+ * {@link VirtualContainerComponentProps.render} prop to override the default behavior.
+ *
+ * @group Components
+ */
+declare const VirtualContainer: React$1.ForwardRefExoticComponent<VirtualContainerComponentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props that an implementation of {@link AutoSizerRender} must accept.
+ */
+interface AutoSizerRenderProps {
+    /** Computed height */
+    height: number;
+    /** Computed width */
+    width: number;
+}
+/**
+ * Render prop for content in an {@link AutoSizer}
+ *
+ * Function renders content and forwards `width` and `height`
+ * to whatever needs it.
+ *
+ * @example Simple implementation
+ * ```
+ * const autoSizeRender: AutoSizeRender = ({width, height}) => (
+ *   <VirtualList width={width} height={height} {...props} />
+ * )
+ * ```
+ */
+type AutoSizerRender = (props: AutoSizerRenderProps) => JSX.Element;
+/**
+ * Props accepted by {@link AutoSizer}
+ */
+interface AutoSizerProps {
+    /** Function implementing {@link AutoSizerRender} that renders the content that needs explicit sizing */
+    children: AutoSizerRender;
+    /** The `className` applied to the container element */
+    className?: string;
+    /** Inline style to apply to the container element */
+    style?: React$1.CSSProperties;
+}
+/**
+ * HOC that calculates the size available to it and makes the computed size available to children.
+ * The size available depends on DOM layout and style applied wherever the AutoSizer finds itself.
+ * You will probably want to pass something appropriate via the `className` or `style` props.
+ *
+ * Accepts props defined by {@link AutoSizerProps}.
+ * You must pass a single instance of {@link AutoSizerRender} as a child.
+ * @group Components
  */
-interface VirtualBaseItemProps {
-    /** Value of {@link VirtualBaseProps.itemData} from owning component */
+declare function AutoSizer(props: AutoSizerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Common props for {@link DisplayListItem} and {@link DisplayGridItem}
+ */
+interface DisplayBaseItemProps {
+    /** Value of {@link DisplayBaseProps.itemData} from owning component */
     data: unknown;
     /**
      * Is the owning component being actively scrolled? Used to change how the item is rendered depending on scroll state.
      *
-     * Only defined if {@link VirtualBaseProps.useIsScrolling} is true.
+     * Value passed through from {@link DisplayBaseProps.isScrolling}.
      * */
     isScrolling?: boolean;
     /** Style that should be applied to each item rendered. Positions the item within the inner container. */
-    style: React.CSSProperties;
+    style: React$1.CSSProperties;
 }
 /**
- * Common props for {@link VirtualList} and {@link VirtualGrid}
+ * Common props for all components
  */
-interface VirtualBaseProps {
+interface ComponentProps {
     /** The `className` applied to the outer container element. Use when styling the entire component. */
     className?: string;
     /** The `className` applied to the inner container element. Use for special cases when styling only the inner container and items. */
@@ -27,11 +109,39 @@ interface VirtualBaseProps {
     height: number;
     /** Component width */
     width: number;
-    /** Passed as {@link VirtualBaseItemProps.data} to each child item */
+}
+/**
+ * Common props for {@link DisplayList} and {@link DisplayGrid}
+ */
+interface DisplayBaseProps extends ComponentProps {
+    /** Passed as {@link DisplayBaseItemProps.data} to each child item */
     itemData?: unknown;
+    /** Passed as {@link DisplayBaseItemProps.isScrolling} to each child item
+     *
+     * Provided as a convenience when combining display components with {@link VirtualScroll}
+     * Not interpreted by the display component itself
+     */
+    isScrolling?: boolean;
+    /**
+     * Renders the outer viewport div which provides a window onto the inner grid div
+     *
+     * Render prop implementing {@link VirtualContainerRender}. Used to customize display component outer container.
+     */
+    outerRender?: VirtualContainerRender;
+    /**
+     * Renders the inner grid div containing all the list items
+     *
+     * Render prop implementing {@link VirtualContainerRender}. Used to customize display component inner container.
+     */
+    innerRender?: VirtualContainerRender;
+}
+/**
+ * Common props for all virtual scrollable components
+ */
+interface VirtualScrollableProps extends ComponentProps {
     /**
      * Determines whether the component should track whether it's being actively scrolled
-     * and pass to child items as {@link VirtualBaseItemProps.isScrolling}.
+     * and pass through when rendering its content.
      *
      * @defaultValue false
      * */
@@ -44,7 +154,7 @@ interface VirtualBaseProps {
      * */
     maxCssSize?: number;
     /**
-     * The minimum number of virtual pages to use when inner container would otherwise be more than {@link VirtualBaseProps.maxCssSize} big.
+     * The minimum number of virtual pages to use when inner container would otherwise be more than {@link VirtualScrollableProps.maxCssSize} big.
      * You should never normally need to change this.
      *
      * @defaultValue 100
@@ -52,59 +162,12 @@ interface VirtualBaseProps {
     minNumPages?: number;
 }
 /**
- * Props that an implementation of {@link VirtualInnerRender} must accept.
- */
-interface VirtualInnerProps {
-    /** The `className` to apply to the inner container div. Passed through from {@link VirtualBaseProps.innerClassName} */
-    className: string | undefined;
-    /** The visible child items rendered into the inner container div */
-    children: React.ReactNode;
-    /** Style to apply to the inner container div */
-    style: React.CSSProperties;
-}
-/**
- * Render prop for inner container in a virtual scrolling component
- *
- * Can be passed to {@link VirtualList} or {@link VirtualGrid} to replace default
- * implementation. Function must render a div and forward {@link VirtualInnerProps}
- * and any `ref` to it.
- *
- * @example Minimal compliant implementation
- * ```
- * const innerRender: VirtualInnerRender = ({...rest}, ref) => (
- *   <div ref={ref} {...rest} />
- * )
- * ```
- */
-type VirtualInnerRender = (props: VirtualInnerProps, ref?: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
-/**
- * Props that an implementation of {@link VirtualOuterRender} must accept.
+ * Common props for {@link VirtualList} and {@link VirtualGrid}
  */
-interface VirtualOuterProps {
-    /** The `className` to apply to the outer container div. Passed through from {@link VirtualBaseProps.className} */
-    className: string | undefined;
-    /** The child inner container rendered into the outer container div */
-    children: React.ReactNode;
-    /** Style to apply to the outer container div */
-    style: React.CSSProperties;
-    /** Scroll callback that should be applied to the outer container div */
-    onScroll: (event: ScrollEvent) => void;
+interface VirtualBaseProps extends VirtualScrollableProps {
+    /** Passed as {@link DisplayBaseItemProps.data} to each child item */
+    itemData?: unknown;
 }
-/**
- * Render prop for outer container in a virtual scrolling component
- *
- * Can be passed to {@link VirtualList} or {@link VirtualGrid} to replace default
- * implementation. Function must render a div and forward {@link VirtualOuterProps}
- * and any `ref` to it.
- *
- * @example Minimal compliant implementation
- * ```
- * const outerRender: VirtualOuterRender = ({style, ...rest}, ref) => (
- *   <div ref={ref} {...rest} />
- * )
- * ```
- */
-type VirtualOuterRender = (props: VirtualOuterProps, ref?: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
 /**
  * Interface that {@link VirtualList} and {@link VirtualGrid} use to determine size and
  * positioning offset for items in a single dimension.
@@ -123,7 +186,18 @@ interface ItemOffsetMapping {
     offsetToItem(offset: number): [itemIndex: number, startOffset: number];
 }
 /**  Alias for type of event that React passes to a `div` element's `OnScroll` handler. */
-type ScrollEvent = React.SyntheticEvent<HTMLDivElement>;
+type ScrollEvent = React$1.SyntheticEvent<HTMLDivElement>;
+/**
+ * Option for {@link VirtualGridProxy.scrollToItem} and {@link VirtualListProxy.scrollToItem}
+ *
+ * * `topleft` scrolls the item as far to the top and left as possible
+ * * `visible` scrolls the item the minimum amount needed to ensure that it's visible
+ *
+ *  @defaultValue `topleft`
+ */
+type ScrollToOption = 'topleft' | 'visible';
+/** Specifies the direction over which lists should implement virtual scrolling */
+type ScrollLayout = "horizontal" | "vertical";
 
 /** Direction of scrolling */
 type ScrollDirection = "forward" | "backward";
@@ -142,37 +216,207 @@ interface ScrollState {
 }
 
 /**
- * Props accepted by {@link VirtualGridItem}
+ * Custom ref handle returned by {@link VirtualScroll} that exposes imperative methods
+ *
+ * Use `React.useRef<VirtualScrollProxy>(null)` to create a ref.
+ */
+interface VirtualScrollProxy {
+    /**
+     * Scrolls to the specified vertical and horizontal offset in pixels
+     * Either offset can be left undefined to scroll in one dimension only
+     * @param verticalOffset - Offset to scroll to vertically
+     * @param horizontalOffset - Offset to scroll to horizontally
+     */
+    scrollTo(verticalOffset?: number, horizontalOffset?: number): void;
+    /**
+   * Scrolls to the specified area
+   * Either offset/size pair can be left undefined to scroll in one dimension only
+   * @param verticalOffset - Offset to scroll to vertically
+   * @param verticalSize - Size of target area vertically
+   * @param horizontalOffset - Offset to scroll to horizontally
+   * @param horizontalSize - Size of target area horizontally
+   * @param option - Where to {@link ScrollToOption | position} the area within the viewport
+   */
+    scrollToArea(verticalOffset?: number, verticalSize?: number, horizontalOffset?: number, horizontalSize?: number, option?: ScrollToOption): void;
+    /** Exposes DOM clientWidth property */
+    get clientWidth(): number;
+    /** Exposes DOM clientHeight property */
+    get clientHeight(): number;
+}
+/**
+ * Returns the offset needed to scroll in one dimension for a specified range
+ *
+ * Used internally to implement {@link VirtualScrollProxy.scrollToArea}. Can be used directly for
+ * advanced customization scenarios.
+ */
+declare function getOffsetToScrollRange(offset: number | undefined, size: number | undefined, clientExtent: number, scrollOffset: number, option?: ScrollToOption): number | undefined;
+
+/**
+ * Props that an implementation of {@link VirtualContentRender} must accept.
+ */
+interface VirtualContentProps {
+    /**
+     * Is the owning component being actively scrolled? Used to change how the content is rendered depending on scroll state.
+     *
+     * Only defined if {@link VirtualScrollableProps.useIsScrolling} is true.
+     * */
+    isScrolling?: boolean;
+    /** Current scroll position vertical offset */
+    verticalOffset: number;
+    /** Current scroll position horizontal offset */
+    horizontalOffset: number;
+}
+/**
+ * Render prop for content container in {@link VirtualScroll}
+ *
+ * Pass to {@link VirtualScroll} to render content into the viewport
+ * implementation. Function must render a div and forward {@link VirtualContentProps}
+ * and any `ref` to it.
+ *
+ * @example Minimal compliant implementation
+ * ```
+ * const contentRender: VirtualContentRender = ({isScrolling, ...rest}, ref) => (
+ *   <div ref={ref} {...rest} />
+ * )
+ * ```
+ */
+type VirtualContentRender = (props: VirtualContentProps, ref?: React$1.ForwardedRef<HTMLDivElement>) => JSX.Element;
+/**
+ * Props accepted by {@link VirtualScroll}
+ */
+interface VirtualScrollProps extends VirtualScrollableProps {
+    /** Function implementing {@link VirtualContentRender} that renders the content that needs to respond to scrolling */
+    children: VirtualContentRender;
+    /**
+     * Height of area to scroll over
+     *
+     * @defaultValue 0
+     */
+    scrollHeight?: number;
+    /**
+     * Width of area to scroll over
+     *
+     * @defaultValue 0
+     */
+    scrollWidth?: number;
+    /**
+     * Callback after a scroll event has been processed and state updated but before rendering
+     * @param verticalOffset - Resulting overall vertical offset.
+     * @param horizontalOffset - Resulting overall horizontal offset.
+     * @param newVerticalScrollState - New vertical {@link ScrollState} that will be used for rendering.
+     * @param newHorizontalScrollState - New horizontal {@link ScrollState} that will be used for rendering.
+     */
+    onScroll?: (verticalOffset: number, horizontalOffset: number, newVerticalScrollState: ScrollState, newHorizontalScrollState: ScrollState) => void;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link VirtualScroll} outer container. */
+    outerRender?: VirtualContainerRender;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link VirtualScroll} inner container. */
+    innerRender?: VirtualContainerRender;
+}
+/**
+ * Customizable Virtual Scrolling Component
+ *
+ * Allows user to scroll over a virtual area `scrollHeight` x `scrollWidth` pixels.
+ * Use `onScroll` to track scroll state and `innerRender` to render scroll state specific content into the viewport
+ *
+ * Accepts props defined by {@link VirtualScrollProps}.
+ * Refs are forwarded to {@link VirtualScrollProxy}.
+ * @group Components
+ */
+declare const VirtualScroll: React$1.ForwardRefExoticComponent<VirtualScrollProps & React$1.RefAttributes<VirtualScrollProxy>>;
+
+/**
+ * Props accepted by {@link DisplayListItem}
+ */
+interface DisplayListItemProps extends DisplayBaseItemProps {
+    /** Index of item in the list being rendered */
+    index: number;
+}
+/**
+ * Type of item in a {@link DisplayList}
+ *
+ * Must be passed as a child to {@link DisplayList}.
+ * Accepts props defined by {@link DisplayListItemProps}.
+ * Component must pass {@link DisplayBaseItemProps.style} to whatever it renders.
+ *
+ * @example Basic implementation
+ * ```
+ * const Row = ({ index, style }: { index: number, style: React.CSSProperties }) => (
+ *   <div className="row" style={style}>
+ *     { index }
+ *   </div>
+ * );
+ * ```
+ */
+type DisplayListItem = React$1.ComponentType<DisplayListItemProps>;
+/**
+ * Props accepted by {@link DisplayList}
+ */
+interface DisplayListProps extends DisplayBaseProps {
+    /** Component used as a template to render items in the list. Must implement {@link DisplayListItem} interface. */
+    children: DisplayListItem;
+    /** Number of items in the list */
+    itemCount: number;
+    /** Offset to start of displayed content */
+    offset: number;
+    /**
+     * Implementation of {@link ItemOffsetMapping} interface that defines size and offset to each item in the list
+     *
+     * Use {@link useFixedSizeItemOffsetMapping} or {@link useVariableSizeItemOffsetMapping} to create implementations
+     * for common cases.
+     */
+    itemOffsetMapping: ItemOffsetMapping;
+    /**
+     * Function that defines the key to use for each item given item index and value of {@link DisplayBaseProps.itemData}.
+     * @defaultValue `(index, _data) => index`
+     */
+    itemKey?: (index: number, data: unknown) => React$1.Key;
+    /**
+     * Choice of 'vertical' or 'horizontal' layouts
+     * @defaultValue 'vertical'
+     */
+    layout?: ScrollLayout;
+}
+/**
+ * Displays a window onto the contents of a virtualized list starting from `offset`.
+ *
+ * Accepts props defined by {@link DisplayListProps}.
+ * You must pass a single instance of {@link DisplayListItem} as a child.
+ * @group Components
+ */
+declare function DisplayList(props: DisplayListProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props accepted by {@link DisplayGridItem}
  */
-interface VirtualGridItemProps extends VirtualBaseItemProps {
+interface DisplayGridItemProps extends DisplayBaseItemProps {
     /** Row index of item in the grid being rendered */
     rowIndex: number;
     /** Column index of item in the grid being rendered */
     columnIndex: number;
 }
 /**
- * Type of item in a {@link VirtualGrid}
+ * Type of item in a {@link DisplayGrid}
  *
- * Must be passed as a child to {@link VirtualGrid}.
- * Accepts props defined by {@link VirtualGridItemProps}.
- * Component must pass {@link VirtualBaseItemProps.style} to whatever it renders.
+ * Must be passed as a child to {@link DisplayGrid}.
+ * Accepts props defined by {@link DisplayGridItemProps}.
+ * Component must pass {@link DisplayBaseItemProps.style} to whatever it renders.
  *
  * @example Basic implementation
  * ```
- * const Cell = ({ rowIndex, columnIndex, style }: { rowIndex: number, columnIndex: number, style: React.CSSProperties }) => (
- *   <div className="cell" style={style}>
- *     { `${rowIndex}:${columnIndex}` }
+ * const Row = ({ index, style }: { index: number, style: React.CSSProperties }) => (
+ *   <div className="row" style={style}>
+ *     { index }
  *   </div>
  * );
  * ```
  */
-type VirtualGridItem = React.ComponentType<VirtualGridItemProps>;
+type DisplayGridItem = React$1.ComponentType<DisplayGridItemProps>;
 /**
- * Props accepted by {@link VirtualGrid}
+ * Props accepted by {@link DisplayGrid}
  */
-interface VirtualGridProps extends VirtualBaseProps {
-    /** Component used as a template to render items in the grid. Must implement {@link VirtualGridItem} interface. */
-    children: VirtualGridItem;
+interface DisplayGridProps extends DisplayBaseProps {
+    /** Component used as a template to render items in the list. Must implement {@link DisplayGridItem} interface. */
+    children: DisplayGridItem;
     /** Number of rows in the grid */
     rowCount: number;
     /**
@@ -191,27 +435,28 @@ interface VirtualGridProps extends VirtualBaseProps {
      * for common cases.
      */
     columnOffsetMapping: ItemOffsetMapping;
+    /** Vertical offset to start of displayed content */
+    rowOffset: number;
+    /** Horizontal offset to start of displayed content */
+    columnOffset: number;
     /**
-     * Function that defines the key to use for each item given row and column index and value of {@link VirtualBaseProps.itemData}.
+     * Function that defines the key to use for each item given row and column index and value of {@link DisplayBaseProps.itemData}.
      * @defaultValue
      * ```ts
      * (rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`
      * ```
      */
-    itemKey?: (rowIndex: number, columnIndex: number, data: unknown) => React.Key;
-    /**
-     * Callback after a scroll event has been processed and state updated but before rendering
-     * @param rowOffset - Resulting overall row offset. Can be passed to {@link ItemOffsetMapping} to determine first row.
-     * @param columnOffset - Resulting overall column offset. Can be passed to {@link ItemOffsetMapping} to determine first column.
-     * @param newRowScrollState - New {@link ScrollState} for rows that will be used for rendering.
-     * @param newColumnScrollState - New {@link ScrollState} for columns that will be used for rendering.
-     */
-    onScroll?: (rowOffset: number, columnOffset: number, newRowScrollState: ScrollState, newColumnScrollState: ScrollState) => void;
-    /** Render prop implementing {@link VirtualOuterRender}. Used to customize {@link VirtualGrid}. */
-    outerRender?: VirtualOuterRender;
-    /** Render prop implementing {@link VirtualInnerRender}. Used to customize {@link VirtualGrid}. */
-    innerRender?: VirtualInnerRender;
+    itemKey?: (rowIndex: number, columnIndex: number, data: unknown) => React$1.Key;
 }
+/**
+ * Displays a window onto the contents of a virtualized grid starting from `rowOffset`, `columnOffset`.
+ *
+ * Accepts props defined by {@link DisplayGridProps}.
+ * You must pass a single instance of {@link DisplayGridItem} as a child.
+ * @group Components
+ */
+declare function DisplayGrid(props: DisplayGridProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Custom ref handle returned by {@link VirtualGrid} that exposes imperative methods
  *
@@ -226,55 +471,118 @@ interface VirtualGridProxy {
      * Scrolls the list so that the specified item is visible
      * @param rowIndex - Row of item to scroll to
      * @param columnIndex - Column of item to scroll to
+     * @param option - Where to {@link ScrollToOption | position} the item within the viewport
      */
-    scrollToItem(rowIndex?: number, columnIndex?: number): void;
+    scrollToItem(rowIndex?: number, columnIndex?: number, option?: ScrollToOption): void;
     /** Exposes DOM clientWidth property */
     get clientWidth(): number;
     /** Exposes DOM clientHeight property */
     get clientHeight(): number;
 }
+/** Range to scroll to in one dimension specified as (offset,size). May be undefined if no need to scroll. */
+type ScrollRange = [offset: number | undefined, size: number | undefined];
+/**
+ * Returns the {@link ScrollRange} corresponding to a specified item.
+ *
+ * Used internally to implement {@link VirtualGridProxy.scrollToItem}. Can be used directly for
+ * advanced customization scenarios.
+ */
+declare function getRangeToScroll(index: number | undefined, mapping: ItemOffsetMapping): ScrollRange;
+/**
+ * Same logic as {@link VirtualGridProxy.scrollToItem} usable with your own {@link VirtualScroll}
+ *
+ * You're encouraged to put together your own combination of {@link VirtualScroll} and {@link DisplayGrid} for
+ * advanced customization scenarios. This function provides `ScrollToItem` functionality for use with your own {@link VirtualScroll}.
+ */
+declare function virtualGridScrollToItem(scrollRef: React.RefObject<VirtualScrollProxy>, rowOffsetMapping: ItemOffsetMapping, columnOffsetMapping: ItemOffsetMapping, rowIndex?: number, columnIndex?: number, option?: ScrollToOption): void;
+
+/**
+ * Props accepted by {@link VirtualGrid}
+ */
+interface VirtualGridProps extends VirtualBaseProps {
+    /** Component used as a template to render items in the grid. Must implement {@link DisplayGridItem} interface. */
+    children: DisplayGridItem;
+    /** Number of rows in the grid */
+    rowCount: number;
+    /**
+     * Implementation of {@link ItemOffsetMapping} interface that defines size and offset to each row in the grid
+     *
+     * Use {@link useFixedSizeItemOffsetMapping} or {@link useVariableSizeItemOffsetMapping} to create implementations
+     * for common cases.
+     */
+    rowOffsetMapping: ItemOffsetMapping;
+    /** Number of columns in the grid */
+    columnCount: number;
+    /**
+     * Implementation of {@link ItemOffsetMapping} interface that defines size and offset to each column in the grid
+     *
+     * Use {@link useFixedSizeItemOffsetMapping} or {@link useVariableSizeItemOffsetMapping} to create implementations
+     * for common cases.
+     */
+    columnOffsetMapping: ItemOffsetMapping;
+    /**
+     * Function that defines the key to use for each item given row and column index and value of {@link VirtualBaseProps.itemData}.
+     * @defaultValue
+     * ```ts
+     * (rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`
+     * ```
+     */
+    itemKey?: (rowIndex: number, columnIndex: number, data: unknown) => React$1.Key;
+    /**
+     * Callback after a scroll event has been processed and state updated but before rendering
+     * @param rowOffset - Resulting overall row offset. Can be passed to {@link ItemOffsetMapping} to determine first row.
+     * @param columnOffset - Resulting overall column offset. Can be passed to {@link ItemOffsetMapping} to determine first column.
+     * @param newRowScrollState - New {@link ScrollState} for rows that will be used for rendering.
+     * @param newColumnScrollState - New {@link ScrollState} for columns that will be used for rendering.
+     */
+    onScroll?: (rowOffset: number, columnOffset: number, newRowScrollState: ScrollState, newColumnScrollState: ScrollState) => void;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link VirtualGrid} outer container. */
+    outerRender?: VirtualContainerRender;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link DisplayGrid} within {@link VirtualGrid} inner container. */
+    innerRender?: VirtualContainerRender;
+}
 /**
  * Virtual Scrolling Grid
  *
  * Accepts props defined by {@link VirtualGridProps}.
  * Refs are forwarded to {@link VirtualGridProxy}.
- * You must pass a single instance of {@link VirtualGridItem} as a child.
+ * You must pass a single instance of {@link DisplayGridItem} as a child.
  * @group Components
  */
-declare const VirtualGrid: React.ForwardRefExoticComponent<VirtualGridProps & React.RefAttributes<VirtualGridProxy>>;
+declare const VirtualGrid: React$1.ForwardRefExoticComponent<VirtualGridProps & React$1.RefAttributes<VirtualGridProxy>>;
 
-/** Specifies the direction over which the list should implement virtual scrolling */
-type ScrollLayout = "horizontal" | "vertical";
 /**
- * Props accepted by {@link VirtualListItem}
+ * Custom ref handle returned by {@link VirtualList} that exposes imperative methods
+ *
+ * Use `React.useRef<VirtualListProxy>(null)` to create a ref.
  */
-interface VirtualListItemProps extends VirtualBaseItemProps {
-    /** Index of item in the list being rendered */
-    index: number;
+interface VirtualListProxy {
+    /**
+     * Scrolls the list to the specified offset in pixels
+     * @param offset - Offset to scroll to
+     */
+    scrollTo(offset: number): void;
+    /**
+     * Scrolls the list so that the specified item is visible
+     * @param index - Index of item to scroll to
+     * @param option - Where to {@link ScrollToOption | position} the item within the viewport
+     */
+    scrollToItem(index: number, option?: ScrollToOption): void;
 }
 /**
- * Type of item in a {@link VirtualList}
+ * Same logic as {@link VirtualListProxy.scrollToItem} usable with your own {@link VirtualScroll}
  *
- * Must be passed as a child to {@link VirtualList}.
- * Accepts props defined by {@link VirtualListItemProps}.
- * Component must pass {@link VirtualBaseItemProps.style} to whatever it renders.
- *
- * @example Basic implementation
- * ```
- * const Row = ({ index, style }: { index: number, style: React.CSSProperties }) => (
- *   <div className="row" style={style}>
- *     { index }
- *   </div>
- * );
- * ```
+ * You're encouraged to put together your own combination of {@link VirtualScroll} and {@link DisplayList} for
+ * advanced customization scenarios. This function provides `ScrollToItem` functionality for use with your own {@link VirtualScroll}.
  */
-type VirtualListItem = React.ComponentType<VirtualListItemProps>;
+declare function virtualListScrollToItem(scrollRef: React.RefObject<VirtualScrollProxy>, itemOffsetMapping: ItemOffsetMapping, isVertical: boolean, index: number, option?: ScrollToOption): void;
+
 /**
  * Props accepted by {@link VirtualList}
  */
 interface VirtualListProps extends VirtualBaseProps {
-    /** Component used as a template to render items in the list. Must implement {@link VirtualListItem} interface. */
-    children: VirtualListItem;
+    /** Component used as a template to render items in the list. Must implement {@link DisplayListItem} interface. */
+    children: DisplayListItem;
     /** Number of items in the list */
     itemCount: number;
     /**
@@ -288,7 +596,7 @@ interface VirtualListProps extends VirtualBaseProps {
      * Function that defines the key to use for each item given item index and value of {@link VirtualBaseProps.itemData}.
      * @defaultValue `(index, _data) => index`
      */
-    itemKey?: (index: number, data: unknown) => React.Key;
+    itemKey?: (index: number, data: unknown) => React$1.Key;
     /**
      * Choice of 'vertical' or 'horizontal' layouts
      * @defaultValue 'vertical'
@@ -300,37 +608,20 @@ interface VirtualListProps extends VirtualBaseProps {
      * @param newScrollState - New {@link ScrollState} that will be used for rendering.
      */
     onScroll?: (offset: number, newScrollState: ScrollState) => void;
-    /** Render prop implementing {@link VirtualOuterRender}. Used to customize {@link VirtualList}. */
-    outerRender?: VirtualOuterRender;
-    /** Render prop implementing {@link VirtualInnerRender}. Used to customize {@link VirtualList}. */
-    innerRender?: VirtualInnerRender;
-}
-/**
- * Custom ref handle returned by {@link VirtualList} that exposes imperative methods
- *
- * Use `React.useRef<VirtualListProxy>(null)` to create a ref.
- */
-interface VirtualListProxy {
-    /**
-     * Scrolls the list to the specified offset in pixels
-     * @param offset - Offset to scroll to
-     */
-    scrollTo(offset: number): void;
-    /**
-     * Scrolls the list so that the specified item is visible
-     * @param index - Index of item to scroll to
-     */
-    scrollToItem(index: number): void;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link VirtualList} outer container. */
+    outerRender?: VirtualContainerRender;
+    /** Render prop implementing {@link VirtualContainerRender}. Used to customize {@link DisplayList} within {@link VirtualList} inner container. */
+    innerRender?: VirtualContainerRender;
 }
 /**
  * Virtual Scrolling List
  *
  * Accepts props defined by {@link VirtualListProps}.
  * Refs are forwarded to {@link VirtualListProxy}.
- * You must pass a single instance of {@link VirtualListItem} as a child.
+ * You must pass a single instance of {@link DisplayListItem} as a child.
  * @group Components
  */
-declare const VirtualList: React.ForwardRefExoticComponent<VirtualListProps & React.RefAttributes<VirtualListProxy>>;
+declare const VirtualList: React$1.ForwardRefExoticComponent<VirtualListProps & React$1.RefAttributes<VirtualListProxy>>;
 
 /**
  * Returns an instance of {@link ItemOffsetMapping} suitable for use when all items have a fixed size.
@@ -347,4 +638,4 @@ declare function useFixedSizeItemOffsetMapping(itemSize: number): ItemOffsetMapp
  */
 declare function useVariableSizeItemOffsetMapping(defaultItemSize: number, sizes?: number[]): ItemOffsetMapping;
 
-export { type ItemOffsetMapping, type ScrollDirection, type ScrollEvent, type ScrollLayout, type ScrollState, type VirtualBaseItemProps, type VirtualBaseProps, VirtualGrid, type VirtualGridItem, type VirtualGridItemProps, type VirtualGridProps, type VirtualGridProxy, type VirtualInnerProps, type VirtualInnerRender, VirtualList, type VirtualListItem, type VirtualListItemProps, type VirtualListProps, type VirtualListProxy, type VirtualOuterProps, type VirtualOuterRender, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping };
+export { AutoSizer, type AutoSizerProps, type AutoSizerRender, type AutoSizerRenderProps, type ComponentProps, type DisplayBaseItemProps, type DisplayBaseProps, DisplayGrid, type DisplayGridItem, type DisplayGridItemProps, type DisplayGridProps, DisplayList, type DisplayListItem, type DisplayListItemProps, type DisplayListProps, type ItemOffsetMapping, type ScrollDirection, type ScrollEvent, type ScrollLayout, type ScrollRange, type ScrollState, type ScrollToOption, type VirtualBaseProps, VirtualContainer, type VirtualContainerComponentProps, type VirtualContainerRender, type VirtualContainerRenderProps, type VirtualContentProps, type VirtualContentRender, VirtualGrid, type VirtualGridProps, type VirtualGridProxy, VirtualList, type VirtualListProps, type VirtualListProxy, VirtualScroll, type VirtualScrollProps, type VirtualScrollProxy, type VirtualScrollableProps, getOffsetToScrollRange, getRangeToScroll, useFixedSizeItemOffsetMapping, useVariableSizeItemOffsetMapping, virtualGridScrollToItem, virtualListScrollToItem };