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

package/dist/chunks/{useReferenceElement.js → manager.js}

@@ -1,27 +1,84 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { ref } from "lit/directives/ref.js";
-import { keyed } from "lit/directives/keyed.js";
-import { nothing, svg, html } from "lit";
-import { safeClassMap } from "@arcgis/lumina";
-import { x as getShadowRootNode, j as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "./dom.js";
+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";
-import { makeGenericController } from "@arcgis/lumina/controllers";
-const CSS = {
-  arrow: "calcite-floating-ui-arrow",
-  arrowStroke: "calcite-floating-ui-arrow__stroke"
-};
-const DEFAULTS = {
-  width: 12,
-  height: 6,
-  strokeWidth: 1
-};
-const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
-  const { width, height, strokeWidth } = DEFAULTS;
-  const svgX = width / 2;
-  const isVertical = floatingLayout === "vertical";
-  const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
-  return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
+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) {
@@ -71,7 +128,7 @@ const referenceElementManager = (options) => {
       return void 0;
     }
     const components = registeredElements.get(registeredElement);
-    return components?.filter((component) => component.referenceElementType === type);
+    return type ? components?.filter((component) => component.referenceElementType === type) : components;
   };
   const toggleComponents = (event, type) => {
     const composedPath = event.composedPath();
@@ -179,6 +236,10 @@ const referenceElementManager = (options) => {
       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);
   };
@@ -243,15 +304,32 @@ const referenceElementManager = (options) => {
     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("click", clickHandler);
-      window.addEventListener("keydown", keyDownHandler);
       window.addEventListener("pointerdown", pointerDownHandler);
     }
     if (options.hover) {
-      window.addEventListener("click", hoverClickHandler);
-      window.addEventListener("keydown", hoverKeyDownHandler);
       window.addEventListener("pointermove", pointerMoveHandler);
       window.addEventListener("focusin", focusInHandler);
       window.addEventListener("blur", blurHandler);
@@ -259,14 +337,14 @@ const referenceElementManager = (options) => {
     }
   };
   const removeListeners = () => {
+    if (options.click || options.hover) {
+      window.removeEventListener("click", clickListener);
+      window.removeEventListener("keydown", keyDownListener);
+    }
     if (options.click) {
       window.removeEventListener("pointerdown", pointerDownHandler);
-      window.removeEventListener("click", clickHandler);
-      window.removeEventListener("keydown", keyDownHandler);
     }
     if (options.hover) {
-      window.removeEventListener("click", hoverClickHandler);
-      window.removeEventListener("keydown", hoverKeyDownHandler);
       window.removeEventListener("pointermove", pointerMoveHandler);
       window.removeEventListener("focusin", focusInHandler);
       window.removeEventListener("blur", blurHandler);
@@ -349,15 +427,15 @@ const referenceElementManager = (options) => {
     }
     if (options.click && "ariaControlsElements" in referenceEl) {
       const currentElements = referenceEl.ariaControlsElements ?? [];
-      if (!currentElements.includes(component)) {
-        const updatedElements = [...currentElements, component];
+      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)) {
-        const updatedElements = [...currentElements, component];
+      if (!currentElements.includes(component.el)) {
+        const updatedElements = [...currentElements, component.el];
         referenceEl.ariaDescribedByElements = updatedElements;
       }
     }
@@ -398,7 +476,7 @@ const referenceElementManager = (options) => {
       clearHoverTimeout();
     }
     if (options.click && "ariaControlsElements" in referenceEl) {
-      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component);
+      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component.el);
       referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
     }
     if (options.click && "ariaExpanded" in referenceEl) {
@@ -411,7 +489,7 @@ const referenceElementManager = (options) => {
       }
     }
     if (options.hover && "ariaDescribedByElements" in referenceEl) {
-      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component);
+      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component.el);
       referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
     }
   };
@@ -421,85 +499,7 @@ const referenceElementManager = (options) => {
     updateElement
   };
 };
-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);
-    });
-  });
-};
 export {
-  FloatingArrow as F,
   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.9";
-const buildDate = "2026-03-13";
-const revision = "6c3ab4117";
+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.9/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");