bits-ui/dist/internal/roving-focus-group.d.ts

The headless components for Svelte.

import { type Box, type ReadableBox } from "svelte-toolbelt";
import type { Orientation } from "../shared/index.js";
type RovingFocusGroupOptions = ({
    /**
     * The selector used to find the focusable candidates.
     */
    candidateAttr: string;
    candidateSelector?: undefined;
} | {
    /**
     * Custom candidate selector
     */
    candidateSelector: string;
    candidateAttr?: undefined;
}) & {
    /**
     * The id of the root node
     */
    rootNode: Box<HTMLElement | null>;
    /**
     * Whether to loop through the candidates when reaching the end.
     */
    loop: ReadableBox<boolean>;
    /**
     * The orientation of the roving focus group. Used
     * to determine how keyboard navigation should work.
     */
    orientation: ReadableBox<Orientation>;
    /**
     * A callback function called when a candidate is focused.
     */
    onCandidateFocus?: (node: HTMLElement) => void;
};
export declare class RovingFocusGroup {
    #private;
    constructor(opts: RovingFocusGroupOptions);
    getCandidateNodes(): HTMLElement[];
    focusFirstCandidate(): void;
    handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean): HTMLElement | undefined;
    getTabIndex(node: HTMLElement | null | undefined): 0 | -1;
    setCurrentTabStopId(id: string): void;
    focusCurrentTabStop(): void;
}
export {};