@solid-aria/focus/dist/types/FocusScope.d.ts

Primitives for dealing with focus rings and focus management.

import { JSX } from "solid-js";
interface FocusScopeProps {
    /**
     * The contents of the focus scope.
     */
    children?: JSX.Element;
    /**
     * Whether to contain focus inside the scope, so users cannot
     * move focus outside, for example in a modal dialog.
     */
    contain?: boolean;
    /**
     * Whether to restore focus back to the element that was focused
     * when the focus scope mounted, after the focus scope unmounts.
     */
    restoreFocus?: boolean;
    /**
     * Whether to auto focus the first focusable element in the focus scope on mount.
     */
    autofocus?: boolean;
}
interface FocusManagerOptions {
    /**
     * The element to start searching from.
     * The currently focused element by default.
     */
    from?: HTMLElement;
    /**
     * Whether to only include tabbable elements, or all focusable elements.
     */
    tabbable?: boolean;
    /**
     *  Whether focus should wrap around when it reaches the end of the scope.
     */
    wrap?: boolean;
}
export interface FocusManager {
    /**
     * Moves focus to the next focusable or tabbable element in the focus scope.
     */
    focusNext(opts?: FocusManagerOptions): HTMLElement;
    /**
     * Moves focus to the previous focusable or tabbable element in the focus scope.
     */
    focusPrevious(opts?: FocusManagerOptions): HTMLElement;
    /**
     * Moves focus to the first focusable or tabbable element in the focus scope.
     */
    focusFirst(opts?: FocusManagerOptions): HTMLElement;
    /**
     * Moves focus to the last focusable or tabbable element in the focus scope.
     */
    focusLast(opts?: FocusManagerOptions): HTMLElement;
}
/**
 * A FocusScope manages focus for its descendants. It supports containing focus inside
 * the scope, restoring focus to the previously focused element on unmount, and auto
 * focusing children on mount. It also acts as a container for a programmatic focus
 * management interface that can be used to move focus forward and back in response
 * to user events.
 */
export declare function FocusScope(props: FocusScopeProps): JSX.Element;
/**
 * Returns a FocusManager interface for the parent FocusScope.
 * A FocusManager can be used to programmatically move focus within a FocusScope,
 * e.g. in response to user events like keyboard navigation.
 */
export declare function useFocusManager(): FocusManager;
/**
 * Create a [TreeWalker]{@link https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker}
 * that matches all focusable/tabbable elements.
 */
export declare function getFocusableTreeWalker(root: HTMLElement, opts?: FocusManagerOptions, scope?: HTMLElement[]): TreeWalker;
/**
 * Creates a FocusManager object that can be used to move focus within an element.
 */
export declare function createFocusManager(ref: HTMLElement): FocusManager;
export {};