react-elegant-ui/hooks/behavior/useKeyboardNavigation.d.ts

Elegant UI components, made by BEM best practices for react

export interface KeyboardNavigationItem {
    disabled?: boolean;
}
export type NavigationDirection = 'start' | 'end' | 'next' | 'prev';
export type Predicate<T> = (item: T) => boolean;
export declare const defaultPredicate: <T extends KeyboardNavigationItem>(item: T) => boolean;
/**
 * Return index of new active item
 *
 * If new item can't be found - return `-1`
 * It's return `-1` in case when all items except current is not match
 */
export declare const navigate: <T extends KeyboardNavigationItem>(items: readonly T[], cursor: number, direction: NavigationDirection, predicate?: Predicate<T> | undefined, loop?: boolean) => number;
export interface KeyboardNavigationParameters<T extends KeyboardNavigationItem = KeyboardNavigationItem> {
    /**
     * Handlers work only when enabled
     */
    enabled: boolean;
    /**
     * List of items for navigate
     */
    items: T[];
    /**
     * Index of active item from list
     */
    cursor: number;
    /**
     * Hook to set new index of active item
     */
    setCursor?: (index: number) => void;
    /**
     * Predicate to check item match
     */
    predicate?: Predicate<T>;
    /**
     * Define handled arrow keys
     */
    direction?: ('vertical' | 'horizontal')[];
    /**
     * Start from other end by reaching the edge
     */
    loop?: boolean;
    /**
     * Enable jumps to start or end of items list
     */
    enableJump?: boolean;
    /**
     * Define event phase
     *
     * @default true
     */
    eventCapture?: boolean;
}
/**
 * Global hook which implement keyboard navigation
 *
 * It useful when u want navigate in items by keyboard arrows
 */
export declare const useKeyboardNavigation: <T extends {}>({ enabled, items, cursor, setCursor, predicate, direction, loop, enableJump, eventCapture, }: KeyboardNavigationParameters<T>) => void;