@spectrum-web-components/overlay 0.35.0 → 0.35.1-rc.24

package/src/Overlay.dev.js

@@ -0,0 +1,770 @@
+"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
+} 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 {
+  ElementResolutionController,
+  elementResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import {
+  ifDefined,
+  styleMap
+} from "@spectrum-web-components/base/src/directives.js";
+import { AbstractOverlay, nextFrame } from "./AbstractOverlay.dev.js";
+import { OverlayDialog } from "./OverlayDialog.dev.js";
+import { OverlayPopover } from "./OverlayPopover.dev.js";
+import { OverlayNoPopover } from "./OverlayNoPopover.dev.js";
+import { overlayStack } from "./OverlayStack.dev.js";
+import { noop } from "./AbstractOverlay.dev.js";
+import { VirtualTrigger } from "./VirtualTrigger.dev.js";
+import { PlacementController } from "./PlacementController.dev.js";
+import styles from "./overlay.css.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"
+};
+const supportsPopover = "showPopover" in document.createElement("div");
+let OverlayFeatures = OverlayDialog(AbstractOverlay);
+if (supportsPopover) {
+  OverlayFeatures = OverlayPopover(OverlayFeatures);
+} else {
+  OverlayFeatures = OverlayNoPopover(OverlayFeatures);
+}
+const _Overlay = class extends OverlayFeatures {
+  constructor() {
+    super(...arguments);
+    this.delayed = false;
+    this._disabled = false;
+    this.longpressState = "null";
+    this.offset = 6;
+    this.placementController = new PlacementController(this);
+    this._open = false;
+    this.receivesFocus = "auto";
+    this.releaseAriaDescribedby = noop;
+    this.releaseLongpressDescribedby = noop;
+    this._state = "closed";
+    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.longpressState = "potential";
+      triggerElement.addEventListener("pointerup", this.handlePointerup);
+      triggerElement.addEventListener("pointercancel", this.handlePointerup);
+      if (triggerElement.holdAffordance) {
+        return;
+      }
+      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;
+      this.longpressState = this.state === "opening" ? "pressed" : "null";
+      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") {
+        if (!this.triggerElement || !this.hasNonVirtualTrigger) {
+          return;
+        }
+        event.stopPropagation();
+        this.triggerElement.dispatchEvent(
+          new CustomEvent("longpress", {
+            bubbles: true,
+            composed: true,
+            detail: {
+              source: "keyboard"
+            }
+          })
+        );
+        setTimeout(() => {
+          this.longpressState = "null";
+        });
+      }
+    };
+    /**
+     * An overlay with a `click` interaction should not close on click `triggerElement`.
+     * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
+     * overlay is `open` to prevent from toggling the overlay when the click event
+     * propagates later in the interaction.
+     */
+    this.preventNextToggle = false;
+    this.handlePointerdownForClick = () => {
+      this.preventNextToggle = this.open;
+    };
+    this.handleClick = () => {
+      if (this.longpressState === "opening" || this.longpressState === "pressed") {
+        return;
+      }
+      if (!this.preventNextToggle) {
+        this.open = !this.open;
+      }
+      this.preventNextToggle = false;
+    };
+    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 = () => {
+      if (this.disabled)
+        return;
+      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.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
+    };
+    this.willPreventClose = false;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(disabled) {
+    this._disabled = disabled;
+    if (disabled) {
+      if (this.hasNonVirtualTrigger) {
+        this.unbindEvents();
+      }
+      this.wasOpen = this.open;
+      this.open = false;
+    } else {
+      this.bindEvents();
+      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;
+    if ((this.longpressState === "opening" || this.longpressState === "pressed") && !open)
+      return;
+    this._open = open;
+    if (this.open) {
+      _Overlay.openCount += 1;
+    }
+    this.requestUpdate("open", !this.open);
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state2) {
+    if (state2 === this.state)
+      return;
+    const oldState = this.state;
+    this._state = state2;
+    if (this.state === "opened" || this.state === "closed") {
+      this.longpressState = this.longpressState === "pressed" ? "null" : this.longpressState;
+    }
+    this.requestUpdate("state", oldState);
+  }
+  get usesDialog() {
+    return this.type === "modal" || this.type === "page";
+  }
+  get popoverValue() {
+    const hasPopoverAttribute = "popover" in this;
+    if (!hasPopoverAttribute) {
+      return void 0;
+    }
+    switch (this.type) {
+      case "modal":
+      case "page":
+        return void 0;
+      case "hint":
+        return "manual";
+      default:
+        return this.type;
+    }
+  }
+  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";
+    const tipPadding = this.tipPadding;
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset,
+      placement,
+      tipPadding,
+      trigger,
+      type: this.type
+    });
+  }
+  async managePopoverOpen() {
+    super.managePopoverOpen();
+    const targetOpenState = this.open;
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.manageDelay(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.ensureOnDOM(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    const focusEl = await this.makeTransition(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.applyFocus(targetOpenState, focusEl);
+  }
+  async applyFocus(targetOpenState, focusEl) {
+    if (this.receivesFocus === "false" || this.type === "hint") {
+      return;
+    }
+    await nextFrame();
+    await nextFrame();
+    if (targetOpenState === this.open && !this.open) {
+      if (this.hasNonVirtualTrigger && this.contains(this.getRootNode().activeElement)) {
+        this.triggerElement.focus();
+      }
+      return;
+    }
+    focusEl == null ? void 0 : focusEl.focus();
+  }
+  async manageOpen(oldOpen) {
+    var _a;
+    if (!this.isConnected && this.open)
+      return;
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    if (this.open) {
+      overlayStack.add(this);
+      if (this.willPreventClose) {
+        document.addEventListener(
+          "pointerup",
+          () => {
+            this.dialogEl.classList.toggle(
+              "not-immediately-closable",
+              false
+            );
+            this.willPreventClose = false;
+          },
+          { once: true }
+        );
+        this.dialogEl.classList.toggle(
+          "not-immediately-closable",
+          true
+        );
+      }
+    } else {
+      if (oldOpen) {
+        this.dispose();
+      }
+      overlayStack.remove(this);
+    }
+    if (this.open && this.state !== "opened") {
+      this.state = "opening";
+    } else if (!this.open && this.state !== "closed") {
+      this.state = "closing";
+    }
+    if (this.usesDialog) {
+      this.manageDialogOpen();
+    } else {
+      this.managePopoverOpen();
+    }
+    if (!this.open) {
+      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().includes(this))) {
+        this.triggerElement.focus();
+      }
+    }
+  }
+  unbindEvents() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  bindEvents() {
+    if (!this.hasNonVirtualTrigger)
+      return;
+    this.abortController = new AbortController();
+    const nextTriggerElement = this.triggerElement;
+    switch (this.triggerInteraction) {
+      case "click":
+        this.bindClickEvents(nextTriggerElement);
+        return;
+      case "longpress":
+        this.bindLongpressEvents(nextTriggerElement);
+        return;
+      case "hover":
+        this.bindHoverEvents(nextTriggerElement);
+        return;
+    }
+  }
+  bindClickEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener("click", this.handleClick, options);
+    triggerElement.addEventListener(
+      "pointerdown",
+      this.handlePointerdownForClick,
+      options
+    );
+  }
+  bindLongpressEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener(
+      "longpress",
+      this.handleLongpress,
+      options
+    );
+    triggerElement.addEventListener(
+      "pointerdown",
+      this.handlePointerdown,
+      options
+    );
+    this.prepareLongpressDescription(triggerElement);
+    if (triggerElement.holdAffordance) {
+      return;
+    }
+    triggerElement.addEventListener("keydown", this.handleKeydown, options);
+    triggerElement.addEventListener("keyup", this.handleKeyup, options);
+  }
+  bindHoverEvents(triggerElement) {
+    const options = { signal: this.abortController.signal };
+    triggerElement.addEventListener("focusin", this.handleFocusin, options);
+    triggerElement.addEventListener(
+      "focusout",
+      this.handleFocusout,
+      options
+    );
+    triggerElement.addEventListener(
+      "pointerenter",
+      this.handlePointerenter,
+      options
+    );
+    triggerElement.addEventListener(
+      "pointerleave",
+      this.handlePointerleave,
+      options
+    );
+    this.addEventListener(
+      "pointerleave",
+      this.handleOverlayPointerleave,
+      options
+    );
+    if (this.receivesFocus === "true")
+      return;
+    this.prepareAriaDescribedby(triggerElement);
+  }
+  manageTriggerElement(triggerElement) {
+    if (triggerElement) {
+      this.unbindEvents();
+      this.releaseAriaDescribedby();
+    }
+    const missingOrVirtual = !this.triggerElement || this.triggerElement instanceof VirtualTrigger;
+    if (missingOrVirtual) {
+      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.handleBrowserClose();
+    }
+  }
+  handleBrowserClose() {
+    if (this.longpressState !== "opening" && this.longpressState !== "pressed") {
+      this.open = false;
+      return;
+    }
+    this.open = true;
+    this.manageOpen(false);
+  }
+  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) {
+          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();
+      }
+    }
+  }
+  renderContent() {
+    return html`
+            <div style=${styleMap(this.dialogStyleMap)} part="content">
+                <slot @slotchange=${this.handleSlotchange}></slot>
+            </div>
+        `;
+  }
+  get dialogStyleMap() {
+    return {
+      "--swc-overlay-open-count": _Overlay.openCount.toString()
+    };
+  }
+  renderDialog() {
+    return html`
+            <dialog
+                class="dialog"
+                part="dialog"
+                @close=${this.handleBrowserClose}
+                @cancel=${this.handleBrowserClose}
+                @beforetoggle=${this.handleBeforetoggle}
+                ?is-visible=${this.state !== "closed"}
+            >
+                ${this.renderContent()}
+            </dialog>
+        `;
+  }
+  renderPopover() {
+    return html`
+            <div
+                class="dialog"
+                part="dialog"
+                popover=${ifDefined(this.popoverValue)}
+                @beforetoggle=${this.handleBeforetoggle}
+                @close=${this.handleBrowserClose}
+                ?is-visible=${this.state !== "closed"}
+            >
+                ${this.renderContent()}
+            </div>
+        `;
+  }
+  render() {
+    const isDialog = this.type === "modal" || this.type === "page";
+    return html`
+            ${isDialog ? this.renderDialog() : this.renderPopover()}
+            <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.open = false;
+    super.disconnectedCallback();
+  }
+};
+export let Overlay = _Overlay;
+Overlay.styles = [styles];
+Overlay.openCount = 1;
+__decorateClass([
+  property({ type: Boolean })
+], Overlay.prototype, "delayed", 2);
+__decorateClass([
+  query(".dialog")
+], Overlay.prototype, "dialogEl", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Overlay.prototype, "disabled", 1);
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: ':not([slot="longpress-describedby-descriptor"])'
+    // gather only elements slotted into the default slot
+  })
+], Overlay.prototype, "elements", 2);
+__decorateClass([
+  property({ type: Number })
+], Overlay.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Overlay.prototype, "open", 1);
+__decorateClass([
+  property()
+], Overlay.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], Overlay.prototype, "receivesFocus", 2);
+__decorateClass([
+  query("slot")
+], Overlay.prototype, "slotEl", 2);
+__decorateClass([
+  state()
+], Overlay.prototype, "state", 1);
+__decorateClass([
+  property({ type: Number, attribute: "tip-padding" })
+], Overlay.prototype, "tipPadding", 2);
+__decorateClass([
+  property()
+], Overlay.prototype, "trigger", 2);
+__decorateClass([
+  property({ attribute: false })
+], Overlay.prototype, "triggerElement", 2);
+__decorateClass([
+  property({ attribute: false })
+], Overlay.prototype, "triggerInteraction", 2);
+__decorateClass([
+  property()
+], Overlay.prototype, "type", 2);
+//# sourceMappingURL=Overlay.dev.js.map