@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
72 lines (71 loc) • 2.24 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { createFocusTrap } from "focus-trap";
import { focusElement, tabbableOptions } from "./dom";
const trapStack = [];
/**
* Helper to set up the FocusTrap component.
*
* @param {FocusTrapComponent} component The FocusTrap component.
* @param options
*/
export function connectFocusTrap(component, options) {
const { el } = component;
const focusTrapNode = options?.focusTrapEl || el;
if (!focusTrapNode) {
return;
}
const focusTrapOptions = {
clickOutsideDeactivates: true,
escapeDeactivates: false,
fallbackFocus: focusTrapNode,
setReturnFocus: (el) => {
focusElement(el);
return false;
},
...options?.focusTrapOptions,
// the following options are not overrideable
document: el.ownerDocument,
tabbableOptions,
trapStack
};
component.focusTrap = createFocusTrap(focusTrapNode, focusTrapOptions);
}
/**
* Helper to activate the FocusTrap component.
*
* @param {FocusTrapComponent} component The FocusTrap component.
* @param [options] The FocusTrap activate options.
*/
export function activateFocusTrap(component, options) {
if (!component.focusTrapDisabled) {
component.focusTrap?.activate(options);
}
}
/**
* Helper to deactivate the FocusTrap component.
*
* @param {FocusTrapComponent} component The FocusTrap component.
* @param [options] The FocusTrap deactivate options.
*/
export function deactivateFocusTrap(component, options) {
component.focusTrap?.deactivate(options);
}
/**
* 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 function updateFocusTrapElements(component) {
component.focusTrap?.updateContainerElements(component.el);
}