@clayui/shared/lib/useNavigation.d.ts

ClayShared component

/**
 * SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
 * SPDX-License-Identifier: BSD-3-Clause
 */
import React from 'react';
import type { Virtualizer } from '@tanstack/react-virtual';
declare type CollectionState = {
    UNSAFE_virtualizer?: Virtualizer<HTMLElement, Element>;
    collection: JSX.Element;
    getFirstItem: () => {
        key: React.Key;
        value: string;
        index: number;
    };
    getItem: (key: React.Key) => {
        value: string;
        index: number;
    };
    getItems: () => Array<React.Key>;
    getLastItem: () => {
        key: React.Key;
        value: string;
        index: number;
    };
    size?: number;
    virtualize: boolean;
};
declare type Props<T> = {
    /**
     * Flag to indicate the navigation behavior in the tab.
     *
     * - manual - it will just move the focus and tab activation is done just
     * by pressing space or enter.
     * - automatic - moves the focus to the tab and activates the tab.
     */
    activation?: 'manual' | 'automatic';
    /**
     * The id of the currently active item that is highlighted.
     * Typically used when navigation is not done via focus.
     */
    active?: React.Key;
    /**
     * Reference of the parent element of the focusable elements.
     */
    containerRef: React.MutableRefObject<T>;
    /**
     * Defines that the navigation is done with the collection API when
     * it's declared.
     */
    collection?: CollectionState;
    focusableElements?: Array<string>;
    /**
     * Flag to indicate if navigation should loop.
     */
    loop?: boolean;
    /**
     * Callback is called when the intent is to move to the element.
     */
    onNavigate?: (item: HTMLElement | React.Key, index: number | null) => void;
    /**
     * Indicates whether the element's orientation is horizontal or vertical.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Flag to enable the possibility of moving the focus when typing values
     * that correspond to some item in the menu.
     */
    typeahead?: boolean;
    /**
     * Flag to indicate list is visible.
     */
    visible?: boolean;
};
export declare function useNavigation<T extends HTMLElement | null>({ activation, active, collection, containerRef, focusableElements, loop, onNavigate, orientation, typeahead, visible, }: Props<T>): {
    accessibilityFocus: (item: HTMLElement | React.Key, items?: Array<HTMLElement> | Array<React.Key>) => void;
    navigationProps: {
        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
    };
};
export declare function getFocusableList<T extends HTMLElement | null>(containeRef: React.MutableRefObject<T> | React.RefObject<T>, focusableElements?: Array<string>): HTMLElement[];
export declare function isTypeahead(event: React.KeyboardEvent<HTMLElement>): boolean;
export {};