@itwin/itwinui-react/esm/utils/functions/focusable.d.ts

A react component library for iTwinUI

import * as React from 'react';
/**
 * Return array of tabbable elements in the container.
 */
export declare const getTabbableElements: (container: HTMLElement | undefined | null) => Element[];
/**
 * Return array of focusable elements in the container.
 */
export declare const getFocusableElements: (container: HTMLElement | undefined | null) => Element[];
/**
 * Returns the latest focusable elements in the `root` element.
 * This is returned as a ref and a state. Choose which one to use according to the use case. E.g.:
 * - ref: since FloatingUI needs a ref ([`listRef`](https://floating-ui.com/docs/useListNavigation#listref)).
 * - state: when reading this value in a render.
 *
 * Pass `extraOptions.filter` to filter the elements.
 *
 * @example
 * const {focusableElementsRef, focusableElements} = useFocusableElements(root, {
 *   // Filter out focusable elements that are inside other focusable elements.
 *   filter: (allElements) => allElements.filter(
 *     (i) => !allElements?.some((p) => p.contains(i.parentElement)),
 *   ),
 * });
 */
export declare function useFocusableElements(root: HTMLElement | null, extraOptions?: {
    filter?: (elements: HTMLElement[]) => HTMLElement[];
}): {
    focusableElementsRef: React.RefObject<HTMLElement[]>;
    focusableElements: HTMLElement[];
};