@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.40

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/openCloseComponent.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { p as whenTransitionDone } from "./dom.js";
+import { o as whenTransitionDone } from "./dom.js";
 function isOpen(component) {
   return component[component.openProp || "open"];
 }

package/dist/chunks/resources5.js

@@ -32,7 +32,8 @@ const CSS = {
   iconEnd: "icon-end",
   iconStart: "icon-start",
   list: "list",
-  listHide: "list--hide"
+  listHide: "list--hide",
+  disabled: "disabled"
 };
 const idPrefix = "combobox";
 const IDS = {

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.4";
-const buildDate = "2026-03-04";
-const revision = "4b35a7f1e";
+const version = "5.1.0-next.40";
+const buildDate = "2026-04-24";
+const revision = "a8eeda98f";
 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.4/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.40/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useFocusTrap.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { createFocusTrap } from "focus-trap";
-import { t as tabbableOptions, j as focusElement } from "./dom.js";
+import { t as tabbableOptions, i as focusElement } from "./dom.js";
 import { a as getConfig } from "./runtime.js";
 function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
   if (!focusTrapOptions?.extraContainers && !extraContainers) {
@@ -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,26 @@ function createFocusTrapOptions(hostEl, options) {
       }
       return typeof clickOutsideDeactivates === "function" ? clickOutsideDeactivates(event) : clickOutsideDeactivates;
     },
+    onActivate: () => {
+      if (options?.escapeDeactivates) {
+        abortController = new AbortController();
+        hostEl.addEventListener(
+          "keydown",
+          (event) => {
+            if (event.key === "Escape" && typeof options?.escapeDeactivates === "function") {
+              options.escapeDeactivates(event);
+            }
+          },
+          { signal: abortController.signal }
+        );
+      }
+      options?.onActivate?.();
+    },
+    onDeactivate: () => {
+      abortController?.abort();
+      abortController = void 0;
+      options?.onDeactivate?.();
+    },
     onPostDeactivate: () => {
       outsideClickDeactivated.delete(hostEl);
     },