@progress/kendo-react-common/navigation.d.ts

React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package

/**-----------------------------------------------------------------------------------------
* Copyright © 2023 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------*/
/**
 * @hidden
 */
export declare const FOCUSABLE_ELEMENTS: string[];
/**
 * Represents the [Navigation]({% slug api_common_navigation %}) options object.
 *
 */
export interface NavigationOptions {
    /**
     * Sets the tabIndex used by the [Navigation]({% slug api_common_navigation %}).
     */
    tabIndex: number;
    /**
     * Sets the root DOM element used by the [Navigation]({% slug api_common_navigation %}).
     */
    root: React.RefObject<HTMLElement>;
    /**
     * Sets the CSS selectors used by the [Navigation]({% slug api_common_navigation %}). The navigation DOM elements will be queried using the selectors.
     * Make sure their order matches the navigating order.
     */
    selectors: string[];
    /**
     * Configures if the roving tabIndex technique will be used in the [Navigation]({% slug api_common_navigation %}).
     */
    rovingTabIndex?: boolean;
    /**
     * Sets the options of the focus methods that is used. Defaults to `{ preventScroll: true }`.
     */
    focusOptions?: FocusOptions;
    /**
     * Sets the mouse events handlers.
     */
    mouseEvents?: {
        [type: string]: (target: HTMLElement, nav: Navigation, ev: React.MouseEvent<HTMLElement>) => void;
    };
    /**
     * Sets the keyboard events handlers.
     */
    keyboardEvents?: {
        [type: string]: {
            [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
        };
    };
}
/**
 * Represents the [KendoReact Navigation functionality]({% slug overview_navigation %}).
 * It handles the navigation through a collection of DOM elements.
 */
export declare class Navigation {
    /**
     * @hidden
     */
    selectors: string[];
    /**
     * @hidden
     */
    mouseEvents: {
        [type: string]: (target: HTMLElement, nav: Navigation, ev: React.MouseEvent<HTMLElement>) => void;
    };
    /**
     * @hidden
     */
    keyboardEvents: {
        [type: string]: {
            [key: string]: (target: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>, options?: any) => void;
        };
    };
    /**
     * @hidden
     */
    tabIndex: number;
    /**
     * @hidden
     */
    focusOptions: FocusOptions;
    /**
     * @hidden
     */
    root: React.RefObject<HTMLElement>;
    /**
     * @hidden
     */
    rovingTabIndex?: boolean;
    constructor(options: NavigationOptions);
    /**
     * Returns the collection of DOM elements which the module will navigate in.
     */
    get elements(): HTMLElement[];
    /**
     * Returns the first navigation DOM element.
     */
    get first(): HTMLElement | null;
    /**
     * Returns the last navigation DOM element.
     */
    get last(): HTMLElement | null;
    /**
     * Returns the focused DOM element from the navigation collection of DOM elements.
     */
    get current(): HTMLElement | null;
    /**
     * Focuses the next element from the navigation collection of DOM elements.
     */
    focusNext(target: HTMLElement): HTMLElement;
    /**
     * Focuses the previous element from the navigation collection of DOM elements.
     */
    focusPrevious(target: HTMLElement): HTMLElement;
    /**
     * The keyboard events handler.
     */
    triggerKeyboardEvent(ev: React.KeyboardEvent<HTMLElement>, options?: any): void;
    /**
     * The mouse events handler.
     */
    triggerMouseEvent(ev: React.MouseEvent<HTMLElement>): void;
    /**
     * Focuses the passed element from the navigation collection of DOM elements.
     */
    focusElement(element: HTMLElement | null, previous: HTMLElement | null): void;
    /**
     * @hidden
     */
    update: () => void;
    private focusNextIndex;
}