@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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * Represents the [Navigation](https://www.telerik.com/kendo-react-ui/components/common/api/navigation) options object.
 *
 */
export interface NavigationOptions {
    /**
     * Sets the tabIndex used by the [Navigation](https://www.telerik.com/kendo-react-ui/components/common/api/navigation).
     */
    tabIndex: number;
    /**
     * Sets the root DOM element used by the [Navigation](https://www.telerik.com/kendo-react-ui/components/common/api/navigation).
     */
    root: React.RefObject<HTMLElement | null>;
    /**
     * Sets the CSS selectors used by the [Navigation](https://www.telerik.com/kendo-react-ui/components/common/api/navigation). The navigation DOM elements will be queried using the selectors.
     * Make sure their order matches the navigating order.
     */
    selectors: string[] | string[][];
    /**
     * Configures if the roving tabIndex technique will be used in the [Navigation](https://www.telerik.com/kendo-react-ui/components/common/api/navigation). Defaults to `true`.
     */
    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;
        };
    };
    /**
     * Sets a class to the current focused element.
     */
    focusClass?: string;
}
/**
 * Represents the [KendoReact Navigation functionality](https://www.telerik.com/kendo-react-ui/components/common/navigation).
 * It handles the navigation through a collection of DOM elements.
 */
export declare class Navigation {
    /**
     * @hidden
     */
    selectors: string[] | 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 | null>;
    /**
     * @hidden
     */
    rovingTabIndex?: boolean;
    /**
     * @hidden
     */
    focusClass?: string;
    /**
     * @hidden
     */
    lastFocused: HTMLElement | null;
    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;
    /**
     * Returns the next DOM element from the navigation collection of DOM elements.
     */
    next(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement;
    /**
     * Returns the previous DOM element from the navigation collection of DOM elements.
     */
    previous(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement;
    /**
     * Focuses the next element from the navigation collection of DOM elements.
     */
    focusNext(target: HTMLElement, selectors?: string[] | string[][]): HTMLElement;
    /**
     * Focuses the previous element from the navigation collection of DOM elements.
     */
    focusPrevious(target: HTMLElement, selectors?: string[] | string[][]): 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;
    /**
     * Set the first element tabIndex to `1` and `-1` for the rest.
     */
    initializeRovingTab(itemIndex?: number): void;
    /**
     * Remove a focus listener.
     */
    removeFocusListener(): void;
    /**
     * Remove a focus class.
     */
    removeFocusClass(target: HTMLElement): void;
    /**
     * @hidden
     */
    update: () => void;
    private setFocusClass;
    private disableTabindexForRest;
    private focusNextIndex;
    private customElements;
    private target;
}