@workday/canvas-kit-react/dist/commonjs/collection/lib/useCursorListModel.d.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { Generic } from '@workday/canvas-kit-react/common';
import { Item } from './useBaseListModel';
type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
/**
 * The list and grid models accept a `navigation` config. If one is not provided, a default will be
 * chosen. It is possible to create a custom navigation manager to hand to the model if the default
 * doesn't work.
 */
export interface NavigationManager {
    /** Get the first item in a collection. This will be called when the `Home` key is pressed for
     * Lists and `Ctrl+Home` for Grids. */
    getFirst: NavigationRequestor;
    /** Get the last item in a collection. This will be called when the `End` key is pressed for Lists
     * and `Ctrl+End` for Grids. */
    getLast: NavigationRequestor;
    /** Get an item with the provided `id`. */
    getItem: (id: string, model: NavigationInput) => Item<Generic> | undefined;
    /** Get the next item after the provided `id`. This will be called when the `Right` arrow key is
     * pressed for RTL languages and when the `Left` arrow is pressed for LTR languages. */
    getNext: NavigationRequestor;
    /** **For Grids:** Get the cell in the next row from the provided `id`. This will be called when
     * the `Down` arrow is pressed.  */
    getNextRow: NavigationRequestor;
    /** Get the previous item before the provided `id`. This will be called when the `Left` arrow key
     * is pressed for RTL languages and when the `Right` arrow is pressed for LTR languages. */
    getPrevious: NavigationRequestor;
    /** **For Grids:** Get the cell in the previous row from the provided `id`. This will be called
     * when the `Up` arrow is pressed.  */
    getPreviousRow: NavigationRequestor;
    /** **For Grids:** Get the first item in a row. This will be called when the `Home` key is
     * pressed. */
    getFirstOfRow: NavigationRequestor;
    /** **For Grids:** Get the last item in a row. This will be called when the `End` key is
     * pressed. */
    getLastOfRow: NavigationRequestor;
    /** Get the next "page". A "page" is application specific and usually means next visible screen.
     * If the viewport is scrollable, it would scroll so that the last item visible is now the first
     * item visible. This is called when the `PageDown` key is pressed */
    getNextPage: NavigationRequestor;
    /** Get the next "page". A "page" is application specific and usually means previous visible
     * screen. If the viewport is scrollable, it would scroll so that the first item visible is now
     * the last item visible. This is called when the `PageUp` key is pressed */
    getPreviousPage: NavigationRequestor;
}
/**
 * Factory function that does type checking to create navigation managers. Navigation managers
 * are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
 * pick one of the existing navigation managers and override the methods you wish to implement.
 *
 * For example,
 * ```tsx
 * import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
 *
 * const navigationManager = createNavigationManager({
 *   ...wrappingNavigationManager,
 *   getNext(id, {state}) {
 *     //
 *   }
 * })
 * ```
 */
export declare const createNavigationManager: (manager: NavigationManager) => NavigationManager;
/**
 * Given an id and a model, return an item from the collection
 */
export type NavigationRequestor = (index: number, model: NavigationInput) => number;
/**
 * Get the first item in a list regardless of column count
 */
export declare const getFirst: NavigationRequestor;
/**
 * Get the last item in a list regardless of column count
 */
export declare const getLast: NavigationRequestor;
/**
 * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
 */
export declare const getFirstOfRow: NavigationRequestor;
/**
 * get the last item in a row - if column count is 0, it will return the results of `getLast`
 */
export declare const getLastOfRow: NavigationRequestor;
/**
 * get the item in the previous page. This can be author defined. By default it will return the
 * first item for a list, and the first item in the same column for a grid.
 */
export declare const getPreviousPage: NavigationRequestor;
/**
 * get the item in the next page. This can be author defined. By default, it will return the last
 * item for a list, and the last item in the same column for a grid.
 */
export declare const getNextPage: NavigationRequestor;
export declare const getWrappingOffsetItem: (offset: number) => (index: number, { state }: NavigationInput, tries?: number) => number;
export declare const getOffsetItem: (offset: number) => (index: number, { state }: NavigationInput, tries?: number) => number;
/**
 * The default navigation manager of lists. This navigation manager will wrap around when the edge
 * is hit. For example, if the user is the the right-most item in a list or right-most item in a
 * row, the cursor will wrap around to the beginning or the next row.
 */
export declare const wrappingNavigationManager: NavigationManager;
/**
 * The default navigation of grids. This navigation manager will not wrap, but will stop when an
 * edge is detected. This could be the last item in a list or the last item of a row in a grid.
 */
export declare const navigationManager: NavigationManager;
/**
 * A `CursorModel` extends a `ListModel` and adds a "cursor" to the list. A cursor is a pointer to a
 * current position in the list. The most common use-case is keeping track of which item currently
 * has focus within the list. Many w3c list role types specify a single tab stop within the list.
 */
export declare const useCursorListModel: (<TT_Special_Generic>(config?: (Partial<{
    /**
     * Initial cursor position. If not provided, the cursor will point to the first item in the list
     */
    initialCursorId: string;
    /**
     * If this is set it will cause a wrapping of a list that will turn it into a grid
     * @default 0
     */
    columnCount: number;
    /**
     * Controls the state changes when the user sends navigation events to the model. For example,
     * when the user hits the "right" arrow, a behavior hook will determine directionality
     * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
     * left-to-right language would send a `getNext`. The navigation manager may return the next item
     * in the list. Different managers can be created for slightly different use cases. The default
     * navigation manager will accept `orientation` and directionality to determine mapping.
     *
     * An example override might be a tab list with an overflow menu that is meant to be transparent
     * to screen reader users. This would require the overflow menu to accept both up/down keys as
     * well as left/right keys to give a more consistent experience to all users.
     */
    navigation: NavigationManager;
    /**
     * Controls how much a pageUp/pageDown navigation request will jump. If not provided, the size
     * of the list and number of items rendered will determine this value.
     */
    pageSize: number;
    id: string;
    getId: (item: any) => string;
    getTextValue: (item: any) => string;
    nonInteractiveIds: string[];
    orientation: import("./useBaseListModel").Orientation;
    defaultItemHeight: number;
    shouldVirtualize: boolean;
    items: any[];
}> & {
    onGoTo?: ((data: {
        id: string;
    }, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToNext?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToPrevious?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToPreviousRow?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToNextRow?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToFirst?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToLast?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToFirstOfRow?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToLastOfRow?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToNextPage?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onGoToPreviousPage?: ((data: undefined, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onRegisterItem?: ((data: {
        id: string;
        textValue: string;
    }, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onUnregisterItem?: ((data: {
        id: string;
    }, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
    onUpdateItemHeight?: ((data: {
        value: number;
    }, prevState: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => void) | undefined;
} & {
    shouldGoTo?: ((data: {
        id: string;
    }, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToNext?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToPrevious?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToPreviousRow?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToNextRow?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToFirst?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToLast?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToFirstOfRow?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToLastOfRow?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.
         *
         * @readonly
         */
        cursorIndexRef: {
            readonly current: number;
        };
        UNSTABLE_virtual: {
            virtualItems: import("./react-virtual").VirtualItem[];
            totalSize: number;
            scrollToOffset: (index: number, options?: import("./react-virtual").ScrollToOffsetOptions | undefined) => void;
            scrollToIndex: (index: number, options?: import("./react-virtual").ScrollToIndexOptions | undefined) => void;
            measure: () => void;
        };
        UNSTABLE_defaultItemHeight: number;
        containerRef: React.RefObject<HTMLDivElement>;
        id: string;
        orientation: "horizontal" | "vertical";
        indexRef: React.MutableRefObject<number>;
        nonInteractiveIds: string[];
        isVirtualized: boolean;
        items: Item<any>[];
    }) => boolean) | undefined;
    shouldGoToNextPage?: ((data: undefined, state: {
        /** The id of the list item the cursor is pointing to */
        cursorId: string;
        /**
         * Any positive non-zero value treats the list like a grid with rows and columns
         * @default 0
         * @private Use useGridModel instead to make a grid instead of a list
         */
        columnCount: number;
        /**
         * A React.Ref of the current page size. Either provided as config, or determined at runtime
         * based on the size of the list container and the number of items fitting within the container.
         */
        pageSizeRef: React.MutableRefObject<number>;
        /**
         * A readonly [React.Ref](https://react.dev/learn/referencing-values-with-refs) that tracks the
         * index of the `state.cursorId`. This value is automatically updated when the `state.cursorId`
         * or the `items` change.