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

package/dist/components/calcite-popover/customElement.js

@@ -2,115 +2,18 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { j as isPrimaryPointerButton, x as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
-import { t as toAriaBoolean } from "../../chunks/aria.js";
-import { g as guid } from "../../chunks/guid.js";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
+import { u as useReferenceElement, F as FloatingArrow, r as referenceElementManager } from "../../chunks/useReferenceElement.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { i as isActivationKey } from "../../chunks/key.js";
-const clickTolerance = 5;
-function isDrag({
-  startX,
-  startY,
-  endX,
-  endY
-}) {
-  const distance = Math.hypot(endX - startX, endY - startY);
-  return distance > clickTolerance;
-}
-class PopoverManager {
-  constructor() {
-    this.registeredElements = /* @__PURE__ */ new Map();
-    this.registeredElementCount = 0;
-    this.queryPopover = (composedPath) => {
-      const { registeredElements } = this;
-      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
-      return registeredElements.get(registeredElement);
-    };
-    this.togglePopovers = (event) => {
-      const composedPath = event.composedPath();
-      const togglePopover = this.queryPopover(composedPath);
-      if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.open = !togglePopover.open;
-      }
-      Array.from(this.registeredElements.values()).filter(
-        (popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover)
-      ).forEach((popover) => popover.open = false);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (event.key === "Escape") {
-        this.closeAllPopovers();
-      } else if (isActivationKey(event.key)) {
-        this.togglePopovers(event);
-      }
-    };
-    this.pointerDownHandler = (event) => {
-      if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
-        return;
-      }
-      const { clientX, clientY } = event;
-      this.pointerDownPosition = { x: clientX, y: clientY };
-    };
-    this.clickHandler = (event) => {
-      if (isKeyboardTriggeredClick(event) || event.defaultPrevented || this.pointerDownPosition && isDrag({
-        endY: event.clientY,
-        endX: event.clientX,
-        startY: this.pointerDownPosition.y,
-        startX: this.pointerDownPosition.x
-      })) {
-        return;
-      }
-      this.pointerDownPosition = void 0;
-      this.togglePopovers(event);
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  registerElement(referenceEl, popover) {
-    this.registeredElementCount++;
-    this.registeredElements.set(referenceEl, popover);
-    if (this.registeredElementCount === 1) {
-      this.addListeners();
-    }
-  }
-  unregisterElement(referenceEl) {
-    if (this.registeredElements.delete(referenceEl)) {
-      this.registeredElementCount--;
-    }
-    if (this.registeredElementCount === 0) {
-      this.removeListeners();
-    }
-  }
-  closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => popover.open = false);
-  }
-  addListeners() {
-    window.addEventListener("pointerdown", this.pointerDownHandler);
-    window.addEventListener("click", this.clickHandler);
-    window.addEventListener("keydown", this.keyDownHandler);
-  }
-  removeListeners() {
-    window.removeEventListener("pointerdown", this.pointerDownHandler);
-    window.removeEventListener("click", this.clickHandler);
-    window.removeEventListener("keydown", this.keyDownHandler);
-  }
-}
 const CSS = {
   positionContainer: "position-container",
   container: "container",
@@ -123,13 +26,13 @@ const CSS = {
   heading: "heading"
 };
 const defaultPopoverPlacement = "auto";
-const ARIA_CONTROLS = "aria-controls";
-const ARIA_EXPANDED = "aria-expanded";
 const styles = css`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-popup)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-popover-max-size-x, 100vw)}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host(:is([scale=s],[scale=m])){--calcite-internal-popover-close-spacing: var(--calcite-spacing-xs)}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-internal-popover-close-spacing: var(--calcite-spacing-sm)}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button{margin:auto;margin-inline-end:var(--calcite-internal-popover-close-spacing)}.close-button-container{display:flex;flex:0 0 auto}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}:host([hidden]){display:none}[hidden]{display:none}`;
-const manager = new PopoverManager();
+const manager = referenceElementManager({ click: true });
 class Popover extends LitElement {
   constructor() {
     super(...arguments);
+    this.referenceElementType = "click";
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.direction = useDirection();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
@@ -144,8 +47,6 @@ class Popover extends LitElement {
         }
       }
     })(this);
-    this.guid = `calcite-popover-${guid()}`;
-    this.hasLoaded = false;
     this.mutationObserver = createObserver("mutation", () => this.focusTrap.updateContainerElements());
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
@@ -207,7 +108,6 @@ class Popover extends LitElement {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
-    requestAnimationFrame(() => this.setUpReferenceElement(this.hasLoaded));
   }
   willUpdate(changes) {
     if (changes.has("flipPlacements")) {
@@ -219,23 +119,18 @@ class Popover extends LitElement {
     if (changes.has("offsetDistance") && (this.hasUpdated || this.offsetDistance !== defaultOffsetDistance) || changes.has("offsetSkidding") && (this.hasUpdated || this.offsetSkidding !== 0) || changes.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || changes.has("placement") && (this.hasUpdated || this.placement !== defaultPopoverPlacement)) {
       this.reposition(true);
     }
-    if (changes.has("referenceElement")) {
-      this.referenceElementHandler();
-      if (!this.referenceElement && this.open) {
-        this.topLayer.hide();
-      }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
     }
   }
-  loaded() {
-    if (this.referenceElement && !this.referenceEl) {
-      this.setUpReferenceElement();
+  updated(changes) {
+    if (changes.has("referenceEl")) {
+      connectFloatingUI(this);
     }
-    this.hasLoaded = true;
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    this.removeReferences();
     disconnectFloatingUI(this);
   }
   flipPlacementsHandler() {
@@ -245,73 +140,14 @@ class Popover extends LitElement {
   openHandler() {
     toggleOpenClose(this);
     this.reposition(true);
-    this.setExpandedAttr();
-  }
-  referenceElementHandler() {
-    this.setUpReferenceElement();
-    this.reposition(true);
   }
   setFloatingEl(el) {
     this.floatingEl = el;
-    if (el) {
-      requestAnimationFrame(() => this.setUpReferenceElement());
-    }
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
     this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
   }
-  setUpReferenceElement(warn = true) {
-    this.removeReferences();
-    this.referenceEl = this.getReferenceElement();
-    connectFloatingUI(this);
-    const { el, referenceElement, referenceEl } = this;
-    if (warn && referenceElement && !referenceEl) {
-      console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
-        el
-      });
-    }
-    this.addReferences();
-  }
-  getId() {
-    return this.el.id || this.guid;
-  }
-  setExpandedAttr() {
-    const { referenceEl, open } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
-    }
-  }
-  addReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    const id = this.getId();
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_CONTROLS, id);
-    }
-    manager.registerElement(referenceEl, this.el);
-    this.setExpandedAttr();
-  }
-  removeReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("removeAttribute" in referenceEl) {
-      referenceEl.removeAttribute(ARIA_CONTROLS);
-      referenceEl.removeAttribute(ARIA_EXPANDED);
-    }
-    manager.unregisterElement(referenceEl);
-  }
-  getReferenceElement() {
-    const { referenceElement, el } = this;
-    return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
-  }
   hide() {
     this.open = false;
   }
@@ -353,7 +189,6 @@ class Popover extends LitElement {
     this.el.inert = hidden;
     this.el.ariaLabel = label;
     this.el.ariaLive = "polite";
-    setAttribute(this.el, "id", this.getId());
     this.el.role = "dialog";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.container]: true,

package/dist/components/calcite-sheet/customElement.js

@@ -6,7 +6,7 @@ import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { y as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
+import { z as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";

package/dist/components/calcite-tab-nav/customElement.js

@@ -6,7 +6,7 @@ import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../.
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { z as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
+import { A as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {

package/dist/components/calcite-tabs/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { a as slotChangeGetAssignedElements, A as getSlotAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements, B as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };

package/dist/components/calcite-text-area/customElement.js

@@ -14,7 +14,7 @@ import { c as createObserver, u as updateRefObserver } from "../../chunks/observ
 import { g as guid } from "../../chunks/guid.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
+import { a as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";