@esri/calcite-components/dist/types/utils/focusTrapComponent.d.ts

Web Components for Esri's Calcite Design System.

import { FocusTrap as _FocusTrap, Options as FocusTrapOptions } from "focus-trap";
/**
 * Defines interface for components with a focus trap. Focusable content is required for components implementing focus trapping with this interface.
 */
export interface FocusTrapComponent {
  /**
   * The focus trap element.
   */
  el: HTMLElement;
  /**
   * When `true`, prevents focus trapping.
   */
  focusTrapDisabled: boolean;
  /**
   * The focus trap instance.
   */
  focusTrap: FocusTrap;
  /**
   * Method to update the element(s) that are used within the FocusTrap component.
   *
   * This should be implemented for components that allow user content and/or have conditionally-rendered focusable elements within the trap.
   */
  updateFocusTrapElements?: () => Promise<void>;
}
export type FocusTrap = _FocusTrap;
interface ConnectFocusTrapOptions {
  /**
   * This option allows the focus trap to be created on a different element that's not the host (e.g., a supporting popup component).
   */
  focusTrapEl?: HTMLElement;
  /**
   * This allows specifying overrides to ConnectFocusTrap options.
   */
  focusTrapOptions?: Omit<FocusTrapOptions, "document" | "tabbableOptions" | "trapStack">;
}
/**
 * Helper to set up the FocusTrap component.
 *
 * @param {FocusTrapComponent} component The FocusTrap component.
 * @param options
 */
export declare function connectFocusTrap(component: FocusTrapComponent, options?: ConnectFocusTrapOptions): void;
/**
 * Helper to activate the FocusTrap component.
 *
 * @param {FocusTrapComponent} component The FocusTrap component.
 * @param [options] The FocusTrap activate options.
 */
export declare function activateFocusTrap(component: FocusTrapComponent, options?: Parameters<_FocusTrap["activate"]>[0]): void;
/**
 * Helper to deactivate the FocusTrap component.
 *
 * @param {FocusTrapComponent} component The FocusTrap component.
 * @param [options] The FocusTrap deactivate options.
 */
export declare function deactivateFocusTrap(component: FocusTrapComponent, options?: Parameters<_FocusTrap["deactivate"]>[0]): void;
/**
 * Helper to update the element(s) that are used within the FocusTrap component.
 *
 * @param {FocusTrapComponent} component The FocusTrap component.
 * @example
 * const modal = document.querySelector("calcite-modal");
 * const input = document.createElement("calcite-input");
 * content.appendChild(input);
 * await input.componentOnReady();
 * await modal.updateFocusTrapElements();
 * requestAnimationFrame(() => input.setFocus());
 */
export declare function updateFocusTrapElements(component: FocusTrapComponent): void;
export {};