@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
68 lines (67 loc) • 2.44 kB
TypeScript
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 {};