@spectrum-web-components/overlay 0.35.1-rc.41 → 0.36.0

package/src/Overlay.dev.js

@@ -1,777 +0,0 @@
-"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 _Overlay 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.placementController.allowPlacementUpdate = 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"
-                placement=${ifDefined(
-      this.requiresPosition ? this.placement || "right" : void 0
-    )}
-                @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"
-                placement=${ifDefined(
-      this.requiresPosition ? this.placement || "right" : void 0
-    )}
-                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();
-  }
-};
-_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);
-export let Overlay = _Overlay;
-//# sourceMappingURL=Overlay.dev.js.map