@spectrum-web-components/overlay 0.30.0 → 0.30.1-overlay.30

package/src/OverlayBase.dev.js

@@ -0,0 +1,681 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  property,
+  query,
+  queryAssignedElements,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import {
+  isAndroid,
+  isIOS
+} from "@spectrum-web-components/shared/src/platform.js";
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import {
+  ElementResolutionController,
+  elementResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
+import { VirtualTrigger } from "./VirtualTrigger.dev.js";
+import {
+  ifDefined,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
+import styles from "./overlay-base.css.js";
+import { overlayStack } from "./OverlayStack.dev.js";
+import { PlacementController } from "./PlacementController.dev.js";
+const LONGPRESS_DURATION = 300;
+export const LONGPRESS_INSTRUCTIONS = {
+  touch: "Double tap and long press for additional options",
+  keyboard: "Press Space or Alt+Down Arrow for additional options",
+  mouse: "Click and hold for additional options"
+};
+export class BeforetoggleClosedEvent extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false
+    });
+    this.currentState = "open";
+    this.newState = "closed";
+  }
+}
+export class BeforetoggleOpenEvent extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false
+    });
+    this.currentState = "closed";
+    this.newState = "open";
+  }
+}
+export const noop = () => {
+  return;
+};
+export const guaranteedTransitionend = (el, action, cb) => {
+  const cleanup = () => {
+    el.removeEventListener("transitionrun", handleTransitionrun);
+    el.removeEventListener("transitionend", handleTransitionend);
+    cb();
+  };
+  let guarantee2;
+  let guarantee3;
+  const guarantee1 = requestAnimationFrame(() => {
+    guarantee2 = requestAnimationFrame(() => {
+      guarantee3 = requestAnimationFrame(() => {
+        cleanup();
+      });
+    });
+  });
+  const handleTransitionend = (event) => {
+    if (event.propertyName === "visibility") {
+      return;
+    }
+    cleanup();
+  };
+  const handleTransitionrun = (event) => {
+    if (event.propertyName === "visibility") {
+      return;
+    }
+    cancelAnimationFrame(guarantee1);
+    cancelAnimationFrame(guarantee2);
+    cancelAnimationFrame(guarantee3);
+    el.removeEventListener("transitionrun", handleTransitionrun);
+    el.addEventListener("transitionend", handleTransitionend);
+  };
+  el.addEventListener("transitionrun", handleTransitionrun);
+  action();
+};
+const _OverlayBase = class extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this._disabled = false;
+    this.dispose = noop;
+    this.longpressed = false;
+    this.offset = 6;
+    this.placementController = new PlacementController(this);
+    this._open = false;
+    this.receivesFocus = "auto";
+    this.releaseAriaDescribedby = noop;
+    this.releaseLongpressDescribedby = noop;
+    this.triggerElement = null;
+    this.type = "hint";
+    this.wasOpen = false;
+    this.elementResolver = new ElementResolutionController(this);
+    this.elementIds = [];
+    this.handlePointerdown = (event) => {
+      if (!this.triggerElement)
+        return;
+      if (event.button !== 0)
+        return;
+      const triggerElement = this.triggerElement;
+      this.longpressed = false;
+      triggerElement.addEventListener("pointerup", this.handlePointerup);
+      triggerElement.addEventListener("pointercancel", this.handlePointerup);
+      this.longressTimeout = setTimeout(() => {
+        if (!triggerElement)
+          return;
+        triggerElement.dispatchEvent(
+          new CustomEvent("longpress", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              source: "pointer"
+            }
+          })
+        );
+      }, LONGPRESS_DURATION);
+    };
+    this.handlePointerup = () => {
+      clearTimeout(this.longressTimeout);
+      if (!this.triggerElement)
+        return;
+      if (this.longpressed) {
+        this.open = true;
+      }
+      setTimeout(() => {
+        this.longpressed = false;
+      });
+      const triggerElement = this.triggerElement;
+      triggerElement.removeEventListener("pointerup", this.handlePointerup);
+      triggerElement.removeEventListener(
+        "pointercancel",
+        this.handlePointerup
+      );
+    };
+    /**
+     * @private
+     */
+    this.handleKeydown = (event) => {
+      const { code, altKey } = event;
+      if (code === "Space" || altKey && code === "ArrowDown") {
+        if (code === "ArrowDown") {
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+        }
+      }
+    };
+    this.handleKeyup = (event) => {
+      const { code, altKey } = event;
+      if (code === "Space" || altKey && code === "ArrowDown") {
+        event.stopPropagation();
+        this.dispatchEvent(
+          new CustomEvent("longpress", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              source: "keyboard"
+            }
+          })
+        );
+      }
+    };
+    this.handleClick = () => {
+      if (this.longpressed)
+        return;
+      this.open = !this.open;
+    };
+    this.focusedin = false;
+    this.handleFocusin = () => {
+      this.open = true;
+      this.focusedin = true;
+    };
+    this.handleFocusout = () => {
+      this.focusedin = false;
+      if (this.pointerentered)
+        return;
+      this.open = false;
+    };
+    this.pointerentered = false;
+    this.handlePointerenter = () => {
+      this.open = true;
+      this.pointerentered = true;
+    };
+    this.handlePointerleave = (event) => {
+      if (this === event.relatedTarget || this.contains(event.relatedTarget) || [...this.children].find((child) => {
+        if (child.localName !== "slot") {
+          return false;
+        }
+        return child.assignedElements({ flatten: true }).find((el) => {
+          return el === event.relatedTarget || el.contains(event.relatedTarget);
+        });
+      })) {
+        return;
+      }
+      this.doPointerleave();
+    };
+    this.handleOverlayPointerleave = (event) => {
+      if (this.triggerElement === event.relatedTarget || this.hasNonVirtualTrigger && this.triggerElement.contains(
+        event.relatedTarget
+      )) {
+        return;
+      }
+      this.doPointerleave();
+    };
+    this.handleLongpress = () => {
+      this.open = true;
+      this.longpressed = true;
+    };
+    this.willPreventClose = false;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(disabled) {
+    this._disabled = disabled;
+    if (disabled) {
+      this.wasOpen = this.open;
+      this.open = false;
+    } else {
+      this.open = this.open || this.wasOpen;
+      this.wasOpen = false;
+    }
+  }
+  get hasNonVirtualTrigger() {
+    return !!this.triggerElement && !(this.triggerElement instanceof VirtualTrigger);
+  }
+  get open() {
+    return this._open;
+  }
+  set open(open) {
+    if (open && this.disabled)
+      return;
+    if (open === this.open)
+      return;
+    this._open = open;
+    this.requestUpdate("open", !this.open);
+  }
+  get usesDialog() {
+    return this.type === "modal" || this.type === "page";
+  }
+  get popoverValue() {
+    switch (this.type) {
+      case "modal":
+      case "page":
+        return void 0;
+      case "hint":
+        return "manual";
+      default:
+        return this.type;
+    }
+  }
+  /* c8 ignore next 12 */
+  async manageDialogOpen() {
+    console.warn(
+      "Implement the `manageDialogOpen` method in a class extension."
+    );
+  }
+  async managePopoverOpen() {
+    console.warn(
+      "Implement the `managePopoverOpen` method in a class extension."
+    );
+  }
+  get requiresPosition() {
+    if (this.type === "page" || !this.open)
+      return false;
+    if (!this.triggerElement || !this.placement && this.type !== "hint")
+      return false;
+    return true;
+  }
+  managePosition() {
+    if (!this.requiresPosition || !this.open)
+      return;
+    const offset = this.offset || 0;
+    const trigger = this.triggerElement;
+    const placement = this.placement || "right";
+    this.placementController.placeOverlay(this.dialogEl, {
+      // delayed?: boolean,
+      offset,
+      placement,
+      // notImmediatelyClosable?: boolean, // rename or place behind other API options
+      // receivesFocus?: 'auto';
+      // root?: HTMLElement;
+      trigger,
+      type: this.type
+    });
+  }
+  async manageOpen(oldOpen) {
+    var _a;
+    if (!this.isConnected && this.open)
+      return;
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    if (this.open) {
+      overlayStack.add(this);
+    } else {
+      if (oldOpen) {
+        this.dispose();
+      }
+      overlayStack.remove(this);
+    }
+    if (this.usesDialog) {
+      this.manageDialogOpen();
+    } else {
+      this.managePopoverOpen();
+    }
+    if (this.open) {
+      _OverlayBase.openCount += 1;
+    } else {
+      const getAncestors = () => {
+        var _a2;
+        const ancestors = [];
+        let currentNode = document.activeElement;
+        while ((currentNode == null ? void 0 : currentNode.shadowRoot) && currentNode.shadowRoot.activeElement) {
+          currentNode = currentNode.shadowRoot.activeElement;
+        }
+        while (currentNode) {
+          const ancestor = currentNode.assignedSlot || currentNode.parentElement || ((_a2 = currentNode.getRootNode()) == null ? void 0 : _a2.host);
+          if (ancestor) {
+            ancestors.push(ancestor);
+          }
+          currentNode = ancestor;
+        }
+        return ancestors;
+      };
+      if (((_a = this.triggerElement) == null ? void 0 : _a.focus) && (this.contains(
+        this.getRootNode().activeElement
+      ) || !!getAncestors().find((el) => el === this))) {
+        this.triggerElement.focus();
+      }
+    }
+  }
+  unbindEvents(triggerElement) {
+    triggerElement.removeEventListener("click", this.handleClick);
+    triggerElement.removeEventListener("focusin", this.handleFocusin);
+    triggerElement.removeEventListener("focusout", this.handleFocusout);
+    triggerElement.removeEventListener(
+      "pointerenter",
+      this.handlePointerenter
+    );
+    triggerElement.removeEventListener(
+      "pointerleave",
+      this.handlePointerleave
+    );
+    this.removeEventListener(
+      "pointerleave",
+      this.handleOverlayPointerleave
+    );
+    triggerElement.addEventListener("pointerdown", this.handlePointerdown);
+    triggerElement.removeEventListener("keydown", this.handleKeydown);
+    triggerElement.removeEventListener("keyup", this.handleKeyup);
+    triggerElement.removeEventListener("longpress", this.handleLongpress);
+  }
+  bindEvents() {
+    const nextTriggerElement = this.triggerElement;
+    switch (this.triggerInteraction) {
+      case "click":
+        this.bundClickEvents(nextTriggerElement);
+        return;
+      case "longpress":
+        this.bindLongpressEvents(nextTriggerElement);
+        return;
+      case "hover":
+        this.bindHoverEvents(nextTriggerElement);
+        return;
+    }
+  }
+  bundClickEvents(triggerElement) {
+    triggerElement.addEventListener("click", this.handleClick);
+  }
+  bindLongpressEvents(triggerElement) {
+    triggerElement.addEventListener("pointerdown", this.handlePointerdown);
+    triggerElement.addEventListener("keydown", this.handleKeydown);
+    triggerElement.addEventListener("keyup", this.handleKeyup);
+    triggerElement.addEventListener("longpress", this.handleLongpress);
+    this.prepareLongpressDescription(triggerElement);
+  }
+  bindHoverEvents(triggerElement) {
+    triggerElement.addEventListener("focusin", this.handleFocusin);
+    triggerElement.addEventListener("focusout", this.handleFocusout);
+    triggerElement.addEventListener(
+      "pointerenter",
+      this.handlePointerenter
+    );
+    triggerElement.addEventListener(
+      "pointerleave",
+      this.handlePointerleave
+    );
+    this.addEventListener("pointerleave", this.handleOverlayPointerleave);
+    if (this.receivesFocus === "true")
+      return;
+    this.prepareAriaDescribedby(triggerElement);
+  }
+  manageTriggerElement(triggerElement) {
+    if (triggerElement) {
+      this.unbindEvents(triggerElement);
+      this.releaseAriaDescribedby();
+    }
+    if (!this.triggerElement || !!this.triggerElement.updateBoundingClientRect) {
+      return;
+    }
+    this.bindEvents();
+  }
+  prepareLongpressDescription(trigger) {
+    if (
+      // only "longpress" relationships are described this way
+      this.triggerInteraction !== "longpress" || // do not reapply until target it recycled
+      this.releaseLongpressDescribedby !== noop || // require "longpress content" to apply relationship
+      !this.elements.length
+    ) {
+      return;
+    }
+    const longpressDescription = document.createElement("div");
+    longpressDescription.id = `longpress-describedby-descriptor-${crypto.randomUUID().slice(0, 8)}`;
+    const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
+    longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
+    longpressDescription.slot = "longpress-describedby-descriptor";
+    trigger.insertAdjacentElement("afterend", longpressDescription);
+    const releaseLongpressDescribedby = conditionAttributeWithId(
+      trigger,
+      "aria-describedby",
+      [longpressDescription.id]
+    );
+    this.releaseLongpressDescribedby = () => {
+      releaseLongpressDescribedby();
+      longpressDescription.remove();
+      this.releaseLongpressDescribedby = noop;
+    };
+  }
+  prepareAriaDescribedby(trigger) {
+    if (
+      // only "hover" relationships establed described by content
+      this.triggerInteraction !== "hover" || // do not reapply until target is recycled
+      this.releaseAriaDescribedby !== noop || // require "hover content" to apply relationship
+      !this.elements.length
+    ) {
+      return;
+    }
+    const triggerRoot = trigger.getRootNode();
+    const contentRoot = this.elements[0].getRootNode();
+    const overlayRoot = this.getRootNode();
+    if (triggerRoot == overlayRoot) {
+      const releaseAriaDescribedby = conditionAttributeWithId(
+        trigger,
+        "aria-describedby",
+        [this.id]
+      );
+      this.releaseAriaDescribedby = () => {
+        releaseAriaDescribedby();
+        this.releaseAriaDescribedby = noop;
+      };
+    } else if (triggerRoot === contentRoot) {
+      this.elementIds = this.elements.map((el) => el.id);
+      const appliedIds = this.elements.map((el) => {
+        if (!el.id) {
+          el.id = `${this.tagName.toLowerCase()}-helper-${crypto.randomUUID().slice(0, 8)}`;
+        }
+        return el.id;
+      });
+      const releaseAriaDescribedby = conditionAttributeWithId(
+        trigger,
+        "aria-describedby",
+        appliedIds
+      );
+      this.releaseAriaDescribedby = () => {
+        releaseAriaDescribedby();
+        this.elements.map((el, index) => {
+          el.id = this.elementIds[index];
+        });
+        this.releaseAriaDescribedby = noop;
+      };
+    }
+  }
+  doPointerleave() {
+    this.pointerentered = false;
+    const triggerElement = this.triggerElement;
+    if (this.focusedin && triggerElement.matches(":focus-visible"))
+      return;
+    this.open = false;
+  }
+  handleBeforetoggle(event) {
+    if (event.newState === "open") {
+      this.handlePopovershow();
+    } else {
+      this.handlePopoverhide();
+    }
+  }
+  handlePopoverhide() {
+    this.open = false;
+  }
+  handlePopovershow() {
+  }
+  handleSlotchange() {
+    if (this.triggerElement) {
+      this.prepareAriaDescribedby(this.triggerElement);
+    }
+    if (!this.elements.length) {
+      this.releaseLongpressDescribedby();
+    } else if (this.hasNonVirtualTrigger) {
+      this.prepareLongpressDescription(
+        this.triggerElement
+      );
+    }
+  }
+  shouldPreventClose() {
+    const shouldPreventClose = this.willPreventClose;
+    this.willPreventClose = false;
+    return shouldPreventClose;
+  }
+  willUpdate(changes) {
+    var _a;
+    if (!this.hasUpdated) {
+      this.addEventListener("focusout", (event) => {
+        if (this.type !== "auto") {
+          return;
+        }
+        if (!event.relatedTarget) {
+          this.open = false;
+          return;
+        }
+        const relationEvent = new Event("overlay-relation-query", {
+          bubbles: true,
+          composed: true
+        });
+        event.relatedTarget.addEventListener(
+          relationEvent.type,
+          (event2) => {
+            if (!event2.composedPath().includes(this)) {
+              this.open = false;
+            }
+          }
+        );
+        event.relatedTarget.dispatchEvent(relationEvent);
+      });
+    }
+    if (!this.hasAttribute("id")) {
+      this.setAttribute(
+        "id",
+        `${this.tagName.toLowerCase()}-${crypto.randomUUID().slice(0, 8)}`
+      );
+    }
+    if (changes.has("open") && (typeof changes.get("open") !== "undefined" || this.open)) {
+      this.manageOpen(changes.get("open"));
+    }
+    if (changes.has("trigger")) {
+      const [id, interaction] = ((_a = this.trigger) == null ? void 0 : _a.split("@")) || [];
+      this.elementResolver.selector = id ? `#${id}` : "";
+      this.triggerInteraction = interaction;
+    }
+    const oldTrigger = this.triggerElement;
+    if (changes.has(elementResolverUpdatedSymbol)) {
+      this.triggerElement = this.elementResolver.element;
+      this.manageTriggerElement(oldTrigger);
+    }
+    if (changes.has("triggerElement")) {
+      this.manageTriggerElement(changes.get("triggerElement"));
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("placement")) {
+      if (this.placement) {
+        this.dialogEl.setAttribute("actual-placement", this.placement);
+      } else {
+        this.dialogEl.removeAttribute("actual-placement");
+      }
+      if (this.open && typeof changes.get("placement") !== "undefined") {
+        this.placementController.resetOverlayPosition();
+      }
+    }
+  }
+  render() {
+    const hasPopoverAttribute = "popover" in this;
+    const popoverValue = hasPopoverAttribute ? this.popoverValue : void 0;
+    return html`
+            <dialog
+                part="dialog"
+                popover=${ifDefined(popoverValue)}
+                @close=${() => {
+      this.open = false;
+    }}
+                @cancel=${() => {
+      this.open = false;
+    }}
+                @beforetoggle=${this.handleBeforetoggle}
+                @popovershow=${this.handlePopovershow}
+                style=${styleMap({
+      "--swc-overlay-z-index": _OverlayBase.openCount.toString()
+    })}
+            >
+                <div part="content">
+                    <slot @slotchange=${this.handleSlotchange}></slot>
+                </div>
+            </dialog>
+            <slot name="longpress-describedby-descriptor"></slot>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("close", () => {
+      this.open = false;
+    });
+    if (this.hasNonVirtualTrigger) {
+      this.bindEvents();
+    }
+  }
+  disconnectedCallback() {
+    if (this.hasNonVirtualTrigger) {
+      this.unbindEvents(this.triggerElement);
+    }
+    this.open = false;
+    super.disconnectedCallback();
+  }
+};
+export let OverlayBase = _OverlayBase;
+OverlayBase.styles = [styles];
+OverlayBase.openCount = 1;
+__decorateClass([
+  query("dialog")
+], OverlayBase.prototype, "dialogEl", 2);
+__decorateClass([
+  property({ type: Boolean })
+], OverlayBase.prototype, "disabled", 1);
+__decorateClass([
+  queryAssignedElements({
+    selector: ':not([slot="longpress-describedby-descriptor"])',
+    flatten: true
+  })
+], OverlayBase.prototype, "elements", 2);
+__decorateClass([
+  property()
+], OverlayBase.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OverlayBase.prototype, "open", 1);
+__decorateClass([
+  property()
+], OverlayBase.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], OverlayBase.prototype, "receivesFocus", 2);
+__decorateClass([
+  query("slot")
+], OverlayBase.prototype, "slotEl", 2);
+__decorateClass([
+  property()
+], OverlayBase.prototype, "trigger", 2);
+__decorateClass([
+  state()
+], OverlayBase.prototype, "triggerElement", 2);
+__decorateClass([
+  state()
+], OverlayBase.prototype, "triggerInteraction", 2);
+__decorateClass([
+  property()
+], OverlayBase.prototype, "type", 2);
+//# sourceMappingURL=OverlayBase.dev.js.map