eewing
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
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 {};
|