@esri/calcite-components 5.1.0-next.8 → 5.1.0

package/dist/chunks/manager.js

@@ -0,0 +1,505 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
+import { q as queryElementRoots, v as getShadowRootNode, j as isPrimaryPointerButton, x as isKeyboardTriggeredClick } from "./dom.js";
+import { i as isActivationKey } from "./key.js";
+import { t as toAriaBoolean } from "./aria.js";
+const useReferenceElement = (options) => {
+  const { manager } = options;
+  return makeGenericController((component, controller) => {
+    let animationFrameId = null;
+    let lastRegisteredReferenceEl = null;
+    const canManageReferenceElement = (referenceEl) => {
+      return Boolean(referenceEl && component.referenceElementType);
+    };
+    const registerReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.registerElement(component, referenceEl);
+      lastRegisteredReferenceEl = referenceEl;
+    };
+    const unregisterReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.unregisterElement(component, referenceEl);
+      if (lastRegisteredReferenceEl === referenceEl) {
+        lastRegisteredReferenceEl = null;
+      }
+    };
+    const getReferenceElement = (component2) => {
+      const { referenceElement, el } = component2;
+      return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
+    };
+    const setUpReferenceElement = (warn = true) => {
+      if (!component.referenceElementType) {
+        return;
+      }
+      component.referenceEl = getReferenceElement(component);
+      const { el, referenceElement, referenceEl } = component;
+      if (warn && referenceElement && !referenceEl) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+    };
+    controller.onConnected(() => {
+      animationFrameId = requestAnimationFrame(() => {
+        if (!component.el.isConnected) {
+          return;
+        }
+        setUpReferenceElement(component.manager.loadedCalled);
+        registerReferenceElement(component.referenceEl);
+      });
+    });
+    controller.onLoaded(() => {
+      if (component.referenceElement && !component.referenceEl) {
+        setUpReferenceElement();
+      }
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        return;
+      }
+      if (changes.has("referenceElement")) {
+        setUpReferenceElement();
+      }
+      if (changes.has("referenceEl")) {
+        unregisterReferenceElement(changes.get("referenceEl"));
+        registerReferenceElement(component.referenceEl);
+      } else if (changes.has("open")) {
+        manager.updateElement(component, component.referenceEl);
+      }
+    });
+    controller.onDisconnected(() => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      unregisterReferenceElement(lastRegisteredReferenceEl);
+    });
+  });
+};
+function haveSameComponents(components, activeComponents) {
+  if (components === activeComponents) {
+    return true;
+  }
+  if (components.length !== activeComponents.length) {
+    return false;
+  }
+  const s1 = new Set(components);
+  const s2 = new Set(activeComponents);
+  if (s1.size !== s2.size) {
+    return false;
+  }
+  for (const item of s1) {
+    if (!s2.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+const clickTolerance = 5;
+const HOVER_OPEN_DELAY_MS = 300;
+const HOVER_QUICK_OPEN_DELAY_MS = HOVER_OPEN_DELAY_MS / 3;
+const HOVER_CLOSE_DELAY_MS = HOVER_OPEN_DELAY_MS * 1.5;
+function isDrag({
+  startX,
+  startY,
+  endX,
+  endY
+}) {
+  const distance = Math.hypot(endX - startX, endY - startY);
+  return distance > clickTolerance;
+}
+const referenceElementManager = (options) => {
+  const registeredElements = /* @__PURE__ */ new Map();
+  const registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
+  let activeComponents = null;
+  let clickedComponents = null;
+  let hoverCloseTimeout = null;
+  let hoverOpenTimeout = null;
+  let hoveredComponents = null;
+  let pointerDownPosition = null;
+  let registeredComponentCount = 0;
+  const queryComponents = (composedPath, type) => {
+    const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+    if (!registeredElement) {
+      return void 0;
+    }
+    const components = registeredElements.get(registeredElement);
+    return type ? components?.filter((component) => component.referenceElementType === type) : components;
+  };
+  const toggleComponents = (event, type) => {
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, type);
+    components?.forEach((component) => {
+      if (component && !component.triggerDisabled) {
+        component.open = !component.open;
+      }
+    });
+    Array.from(registeredElements.values()).flat().filter(
+      (component) => !components?.includes(component) && component.autoClose && component.open && !composedPath.includes(component.el)
+    ).forEach((component) => component.open = false);
+  };
+  const clickHandler = (event) => {
+    if (isKeyboardTriggeredClick(event) || event.defaultPrevented || pointerDownPosition && isDrag({
+      endY: event.clientY,
+      endX: event.clientX,
+      startY: pointerDownPosition.y,
+      startX: pointerDownPosition.x
+    })) {
+      return;
+    }
+    pointerDownPosition = null;
+    toggleComponents(event, "click");
+  };
+  const clearHoverOpenTimeout = () => {
+    if (hoverOpenTimeout != null) {
+      window.clearTimeout(hoverOpenTimeout);
+    }
+    hoverOpenTimeout = null;
+  };
+  const clearHoverCloseTimeout = () => {
+    if (hoverCloseTimeout != null) {
+      window.clearTimeout(hoverCloseTimeout);
+    }
+    hoverCloseTimeout = null;
+  };
+  const clearHoverTimeout = () => {
+    clearHoverOpenTimeout();
+    clearHoverCloseTimeout();
+  };
+  const pathHasOpenHoverComponent = (components, composedPath) => {
+    return activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el));
+  };
+  const toggleHoverComponents = (components, open) => {
+    components?.forEach((component) => component.open = open);
+    activeComponents = open ? components : null;
+  };
+  const closeActiveHoverComponents = () => {
+    toggleHoverComponents(activeComponents, false);
+  };
+  const hoverKeyDownHandler = (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      const openActiveHoverComponents = activeComponents?.filter((component) => component?.open);
+      if (openActiveHoverComponents?.length) {
+        clearHoverTimeout();
+        closeActiveHoverComponents();
+        const composedPath = event.composedPath();
+        if (openActiveHoverComponents.some(
+          (component) => component.referenceEl instanceof Element && composedPath.includes(component.referenceEl) || composedPath.includes(component.el)
+        )) {
+          event.preventDefault();
+        }
+      }
+    }
+  };
+  const hoverClickHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clickedComponents = null;
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    closeActiveHoverComponents();
+    if (!components?.length) {
+      return;
+    }
+    clearHoverTimeout();
+    const closeOnClickHoverComponents = components.filter((component) => component.closeOnClick);
+    const nonCloseOnClickHoverComponents = components.filter((component) => !component.closeOnClick);
+    if (closeOnClickHoverComponents?.length) {
+      clickedComponents = closeOnClickHoverComponents;
+      toggleHoverComponents(closeOnClickHoverComponents, false);
+    }
+    toggleHoverComponents(nonCloseOnClickHoverComponents, true);
+  };
+  const pointerDownHandler = (event) => {
+    if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
+      return;
+    }
+    const { clientX, clientY } = event;
+    pointerDownPosition = { x: clientX, y: clientY };
+  };
+  const keyDownHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === "Escape") {
+      closeAllComponents();
+    } else if (isActivationKey(event.key)) {
+      toggleComponents(event, "click");
+    }
+  };
+  const onReferenceElementKeyDown = (event) => {
+    const components = queryComponents(event.composedPath());
+    components?.forEach((component) => component.onReferenceElementKeyDown?.(event));
+  };
+  const closeAllComponents = () => {
+    Array.from(registeredElements.values()).flat().forEach((component) => component.open = false);
+  };
+  const closeComponentsIfNotActive = (components) => {
+    if (!haveSameComponents(components ?? [], activeComponents ?? [])) {
+      closeActiveHoverComponents();
+    }
+  };
+  const openHoveredComponents = (components) => {
+    hoverOpenTimeout = window.setTimeout(
+      () => {
+        if (hoverOpenTimeout === null || !haveSameComponents(components ?? [], hoveredComponents ?? [])) {
+          return;
+        }
+        clearHoverCloseTimeout();
+        closeComponentsIfNotActive(components);
+        toggleHoverComponents(components, true);
+      },
+      activeComponents?.some((component) => component.open) ? HOVER_QUICK_OPEN_DELAY_MS : HOVER_OPEN_DELAY_MS
+    );
+  };
+  const closeHoveredComponents = () => {
+    hoverCloseTimeout = window.setTimeout(() => {
+      if (hoverCloseTimeout === null) {
+        return;
+      }
+      closeActiveHoverComponents();
+    }, HOVER_CLOSE_DELAY_MS);
+  };
+  const pointerMoveHandler = (event) => {
+    if (event.defaultPrevented) {
+      closeActiveHoverComponents();
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    if (!components?.some((component) => hoveredComponents?.includes(component))) {
+      clearHoverOpenTimeout();
+    }
+    hoveredComponents = components;
+    if (components?.length) {
+      openHoveredComponents(components);
+    } else if (activeComponents?.some((component) => component?.open)) {
+      closeHoveredComponents();
+    }
+    clickedComponents = null;
+  };
+  const blurHandler = () => {
+    closeActiveHoverComponents();
+  };
+  const pointerLeaveHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clearHoverTimeout();
+    closeHoveredComponents();
+  };
+  const clickListener = (event) => {
+    if (options.click) {
+      clickHandler(event);
+    }
+    if (options.hover) {
+      hoverClickHandler(event);
+    }
+  };
+  const keyDownListener = (event) => {
+    onReferenceElementKeyDown(event);
+    if (options.click) {
+      keyDownHandler(event);
+    }
+    if (options.hover) {
+      hoverKeyDownHandler(event);
+    }
+  };
+  const addListeners = () => {
+    if (options.click || options.hover) {
+      window.addEventListener("click", clickListener);
+      window.addEventListener("keydown", keyDownListener);
+    }
+    if (options.click) {
+      window.addEventListener("pointerdown", pointerDownHandler);
+    }
+    if (options.hover) {
+      window.addEventListener("pointermove", pointerMoveHandler);
+      window.addEventListener("focusin", focusInHandler);
+      window.addEventListener("blur", blurHandler);
+      document.addEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const removeListeners = () => {
+    if (options.click || options.hover) {
+      window.removeEventListener("click", clickListener);
+      window.removeEventListener("keydown", keyDownListener);
+    }
+    if (options.click) {
+      window.removeEventListener("pointerdown", pointerDownHandler);
+    }
+    if (options.hover) {
+      window.removeEventListener("pointermove", pointerMoveHandler);
+      window.removeEventListener("focusin", focusInHandler);
+      window.removeEventListener("blur", blurHandler);
+      document.removeEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const toggleFocusedComponents = (components, open) => {
+    {
+      clearHoverTimeout();
+    }
+    toggleHoverComponents(components, open);
+  };
+  const getReferenceElShadowRootNode = (referenceEl) => {
+    return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
+  };
+  const focusInHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    clickedComponents = null;
+    closeComponentsIfNotActive(components);
+    if (!components?.length) {
+      return;
+    }
+    toggleFocusedComponents(components, true);
+  };
+  const updateElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const existingComponents = registeredElements.get(referenceEl) ?? [];
+      const existingComponentOpen = existingComponents?.some((component2) => component2.open) ?? false;
+      referenceEl.ariaExpanded = toAriaBoolean(component.open || existingComponentOpen);
+    }
+  };
+  const addShadowListeners = (shadowRoot) => {
+    shadowRoot.addEventListener("focusin", focusInHandler);
+  };
+  const removeShadowListeners = (shadowRoot) => {
+    shadowRoot.removeEventListener("focusin", focusInHandler);
+  };
+  const registerShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const newCount = (typeof count === "number" ? count : 0) + 1;
+    if (newCount === 1) {
+      addShadowListeners(shadowRoot);
+    }
+    registeredShadowRootCounts.set(shadowRoot, newCount);
+  };
+  const unregisterShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const currentCount = typeof count === "number" ? count : 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (currentCount > 0 && newCount === 0) {
+      removeShadowListeners(shadowRoot);
+      registeredShadowRootCounts.delete(shadowRoot);
+      return;
+    }
+    if (newCount > 0) {
+      registeredShadowRootCounts.set(shadowRoot, newCount);
+    }
+  };
+  const registerElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    if (existingComponents.includes(component)) {
+      return;
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const currentElements = referenceEl.ariaControlsElements ?? [];
+      if (!currentElements.includes(component.el)) {
+        const updatedElements = [...currentElements, component.el];
+        referenceEl.ariaControlsElements = updatedElements;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const currentElements = referenceEl.ariaDescribedByElements ?? [];
+      if (!currentElements.includes(component.el)) {
+        const updatedElements = [...currentElements, component.el];
+        referenceEl.ariaDescribedByElements = updatedElements;
+      }
+    }
+    registeredComponentCount++;
+    registeredElements.set(referenceEl, [...existingComponents, component]);
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    if (shadowRoot) {
+      registerShadowRoot(shadowRoot);
+    }
+    if (registeredComponentCount === 1) {
+      addListeners();
+    }
+    updateElement(component, referenceEl);
+  };
+  const decrementRegisteredElementCount = (shadowRoot) => {
+    registeredComponentCount--;
+    if (shadowRoot) {
+      unregisterShadowRoot(shadowRoot);
+    }
+  };
+  const unregisterElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    const updatedComponents = existingComponents.filter((p) => p !== component);
+    if (updatedComponents.length > 0) {
+      registeredElements.set(referenceEl, updatedComponents);
+      if (updatedComponents.length !== existingComponents.length) {
+        decrementRegisteredElementCount(shadowRoot);
+      }
+    } else if (registeredElements.delete(referenceEl)) {
+      decrementRegisteredElementCount(shadowRoot);
+    }
+    if (registeredComponentCount === 0) {
+      removeListeners();
+      clearHoverTimeout();
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component.el);
+      referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
+      if (hasRegisteredComponents) {
+        const existingComponentOpen = updatedComponents?.some((component2) => component2.open) ?? false;
+        referenceEl.ariaExpanded = toAriaBoolean(existingComponentOpen);
+      } else {
+        referenceEl.ariaExpanded = null;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component.el);
+      referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
+    }
+  };
+  return {
+    registerElement,
+    unregisterElement,
+    updateElement
+  };
+};
+export {
+  referenceElementManager as r,
+  useReferenceElement as u
+};

package/dist/chunks/resources6.js

@@ -42,6 +42,8 @@ const SLOTS = {
   contentTop: "content-top",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
+  description: "description",
+  heading: "heading",
   headerMenuActions: "header-menu-actions",
   headerContent: "header-content",
   fab: "fab",

package/dist/chunks/runtime.js

@@ -60,9 +60,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.1.0-next.8";
-const buildDate = "2026-03-12";
-const revision = "bc2a4d14b";
+const version = "5.1.0";
+const buildDate = "2026-05-28";
+const revision = "5dfc16b29";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,7 +85,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.8/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://js.arcgis.com/calcite-components/5.1.0/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useFocusTrap.js

@@ -23,6 +23,7 @@ function defaultSetReturnFocus(hostEl, el) {
 function createFocusTrapOptions(hostEl, options) {
   const fallbackFocus = options?.fallbackFocus || hostEl;
   const clickOutsideDeactivates = options?.clickOutsideDeactivates ?? true;
+  let abortController;
   return {
     fallbackFocus,
     ...options,
@@ -36,6 +37,30 @@ function createFocusTrapOptions(hostEl, options) {
       }
       return typeof clickOutsideDeactivates === "function" ? clickOutsideDeactivates(event) : clickOutsideDeactivates;
     },
+    onActivate: (params) => {
+      if (options?.escapeDeactivates) {
+        abortController = new AbortController();
+        hostEl.addEventListener(
+          "keydown",
+          (event) => {
+            if (event.key === "Escape") {
+              const escapeDeactivates = options?.escapeDeactivates;
+              const deactivate = typeof escapeDeactivates === "function" ? escapeDeactivates(event) : escapeDeactivates ?? true;
+              if (deactivate) {
+                params.trap.deactivate();
+              }
+            }
+          },
+          { signal: abortController.signal }
+        );
+      }
+      options?.onActivate?.(params);
+    },
+    onDeactivate: (params) => {
+      abortController?.abort();
+      abortController = void 0;
+      options?.onDeactivate?.(params);
+    },
     onPostDeactivate: () => {
       outsideClickDeactivated.delete(hostEl);
     },
@@ -45,27 +70,56 @@ function createFocusTrapOptions(hostEl, options) {
     }
   };
 }
-const useFocusTrap = (options) => {
+const useFocusTrap = (options = {}) => {
   return makeGenericController((component, controller) => {
     let focusTrap;
     let focusTrapEl;
     let effectiveContainers;
+    let requestedActive = false;
     const internalFocusTrapOptions = options.focusTrapOptions;
+    const isTriggerActive = () => options.triggerProp ? Boolean(component[options.triggerProp]) : true;
+    const shouldAutoActivate = () => options.triggerProp ? isTriggerActive() : requestedActive;
+    const canActivateTrap = () => typeof component.focusTrapDisabledOverride === "function" ? !component.focusTrapDisabledOverride() : !component.focusTrapDisabled;
+    const activateTrap = () => {
+      const targetEl = focusTrapEl || component.el;
+      if (!targetEl.isConnected) {
+        return;
+      }
+      if (!focusTrap) {
+        effectiveContainers ||= getEffectiveContainerElements(targetEl, component);
+        focusTrap = createFocusTrap(
+          effectiveContainers,
+          createFocusTrapOptions(targetEl, {
+            ...internalFocusTrapOptions,
+            ...component.focusTrapOptions
+          })
+        );
+      }
+      if (canActivateTrap()) {
+        focusTrap.activate();
+      }
+    };
+    const deactivateTrap = () => {
+      focusTrap?.deactivate();
+    };
     controller.onConnected(() => {
-      if (component[options.triggerProp] && focusTrap) {
-        utils.activate();
+      if (focusTrap && shouldAutoActivate()) {
+        activateTrap();
       }
     });
     controller.onUpdate((changes) => {
-      if (component.hasUpdated && changes.has("focusTrapDisabled")) {
-        if (component.focusTrapDisabled) {
-          utils.deactivate();
-        } else {
-          utils.activate();
-        }
+      if (!component.hasUpdated || !changes.has("focusTrapDisabled")) {
+        return;
+      }
+      if (component.focusTrapDisabled || !isTriggerActive()) {
+        deactivateTrap();
+        return;
+      }
+      if (shouldAutoActivate()) {
+        activateTrap();
       }
     });
-    controller.onDisconnected(() => utils.deactivate());
+    controller.onDisconnected(() => deactivateTrap());
     const utils = {
       get _instance() {
         if (process.env.NODE_ENV === "test") {
@@ -74,25 +128,13 @@ const useFocusTrap = (options) => {
         return void 0;
       },
       activate: () => {
-        const targetEl = focusTrapEl || component.el;
-        if (!targetEl.isConnected) {
-          return;
-        }
-        if (!focusTrap) {
-          effectiveContainers ||= getEffectiveContainerElements(targetEl, component);
-          focusTrap = createFocusTrap(
-            effectiveContainers,
-            createFocusTrapOptions(targetEl, {
-              ...internalFocusTrapOptions,
-              ...component.focusTrapOptions
-            })
-          );
-        }
-        if (typeof component.focusTrapDisabledOverride === "function" ? !component.focusTrapDisabledOverride() : !component.focusTrapDisabled) {
-          focusTrap.activate();
-        }
+        requestedActive = true;
+        activateTrap();
+      },
+      deactivate: () => {
+        requestedActive = false;
+        deactivateTrap();
       },
-      deactivate: () => focusTrap?.deactivate(),
       overrideFocusTrapEl: (el) => {
         if (focusTrap) {
           throw new Error("Focus trap already created");