UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

68 lines (67 loc) 2.44 kB
import { makeGenericController } from '@arcgis/lumina/controllers'; import { FocusTrap, Options as Options } from 'focus-trap'; import { LitElement } from '@arcgis/lumina'; export interface UseFocusTrap { /** * Activates the focus trap. */ activate: () => void; /** * Deactivates the focus trap. */ deactivate: () => void; /** * By default, the host element will be used as the focus-trap element, but if the focus-trap element needs to be a different element, use this method prior to activating to set the focus-trap element. */ overrideFocusTrapEl: (el: HTMLElement) => void; /** * Sets the extra containers to be used in the focus trap. * * @see https://github.com/focus-trap/focus-trap#trapupdatecontainerelements */ setExtraContainers: (extraContainers?: FocusTrapOptions["extraContainers"]) => void; /** * Updates focusable elements within the trap. */ updateContainerElements: () => void; } interface UseFocusTrapOptions<T extends LitElement = LitElement> { /** * The name of the prop that will trigger the focus trap to activate. */ triggerProp: keyof T; /** * Options to pass to the focus-trap library. */ focusTrapOptions?: Options; } interface FocusTrapComponent extends LitElement { focusTrapDisabled?: boolean; /** * When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */ focusTrapDisabledOverride?: () => boolean; /** * Additional options to configure the focus trap. */ focusTrapOptions?: Partial<FocusTrapOptions>; } export type FocusTrapOptions = /** * @see https://github.com/focus-trap/focus-trap#createoptions */ Pick<Options, "allowOutsideClick" | "initialFocus" | "returnFocusOnDeactivate"> & { /** * Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus-trap element. */ extraContainers: Parameters<FocusTrap["updateContainerElements"]>[0]; }; /** * A controller for managing focus traps. * * Note: traps will be deactivated automatically when the component is disconnected. * * @param options */ export declare const useFocusTrap: <T extends FocusTrapComponent>(options: UseFocusTrapOptions<T>) => ReturnType<typeof makeGenericController<UseFocusTrap, T>>; export {};