@spectrum-web-components/overlay 0.31.1-overlay.29 → 0.31.1-react.21

package/src/OverlayBase.dev.js

@@ -1,701 +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,
-  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";
-import { OverlayTimer } from "./overlay-timer.dev.js";
-export const overlayTimer = new OverlayTimer();
-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.delayed = false;
-    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.preventNextToggle = false;
-    this.handlePointerdownForClick = () => {
-      this.preventNextToggle = this.open;
-    };
-    this.handleClick = () => {
-      if (this.longpressed)
-        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 = () => {
-      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(
-      "pointerdown",
-      this.handlePointerdownForClick
-    );
-    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);
-    triggerElement.addEventListener(
-      "pointerdown",
-      this.handlePointerdownForClick
-    );
-  }
-  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) {
-          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": (1e3 + _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([
-  property({ type: Boolean })
-], OverlayBase.prototype, "delayed", 2);
-__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