@spectrum-web-components/overlay 0.41.0 → 0.41.2

package/src/Overlay.dev.js

@@ -19,15 +19,10 @@ import {
   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
@@ -38,17 +33,17 @@ 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 { ClickController } from "./ClickController.dev.js";
+import { HoverController } from "./HoverController.dev.js";
+import { LongpressController } from "./LongpressController.dev.js";
+export { LONGPRESS_INSTRUCTIONS } from "./LongpressController.dev.js";
+import {
+  removeSlottableRequest,
+  SlottableRequestEvent
+} from "./slottable-request-event.dev.js";
 import styles from "./overlay.css.js";
-const LONGPRESS_DURATION = 300;
-const HOVER_DELAY = 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) {
@@ -56,23 +51,23 @@ if (supportsPopover) {
 } else {
   OverlayFeatures = OverlayNoPopover(OverlayFeatures);
 }
+export const strategies = {
+  click: ClickController,
+  longpress: LongpressController,
+  hover: HoverController
+};
 const _Overlay = class _Overlay extends OverlayFeatures {
   constructor() {
     super(...arguments);
     this._delayed = false;
     this._disabled = false;
-    this.longpressState = "null";
     this.offset = 0;
-    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 = "auto";
     this.wasOpen = false;
-    this.elementResolver = new ElementResolutionController(this);
     this.closeOnFocusOut = (event) => {
       if (!event.relatedTarget) {
         return;
@@ -91,133 +86,6 @@ const _Overlay = class _Overlay extends OverlayFeatures {
       );
       event.relatedTarget.dispatchEvent(relationEvent);
     };
-    this.elementIds = [];
-    this.handlePointerdown = (event) => {
-      if (!this.triggerElement)
-        return;
-      if (event.button !== 0)
-        return;
-      const triggerElement = this.triggerElement;
-      this.longpressState = "potential";
-      document.addEventListener("pointerup", this.handlePointerup);
-      document.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";
-      document.removeEventListener("pointerup", this.handlePointerup);
-      document.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.hoverTimeout) {
-        clearTimeout(this.hoverTimeout);
-        delete this.hoverTimeout;
-      }
-      if (this.disabled)
-        return;
-      this.open = true;
-      this.pointerentered = true;
-    };
-    // set a timeout once the pointer enters and the overlay is shown
-    // give the user time to enter the overlay
-    this.handleOverlayPointerenter = () => {
-      if (this.hoverTimeout) {
-        clearTimeout(this.hoverTimeout);
-        delete this.hoverTimeout;
-      }
-    };
-    this.handlePointerleave = () => {
-      this.doPointerleave();
-    };
-    this.handleOverlayPointerleave = () => {
-      this.doPointerleave();
-    };
-    this.handleLongpress = () => {
-      this.open = true;
-      this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
-    };
   }
   get delayed() {
     var _a;
@@ -230,11 +98,10 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     return this._disabled;
   }
   set disabled(disabled) {
+    var _a;
     this._disabled = disabled;
     if (disabled) {
-      if (this.hasNonVirtualTrigger) {
-        this.unbindEvents();
-      }
+      (_a = this.strategy) == null ? void 0 : _a.abort();
       this.wasOpen = this.open;
       this.open = false;
     } else {
@@ -246,35 +113,52 @@ const _Overlay = class _Overlay extends OverlayFeatures {
   get hasNonVirtualTrigger() {
     return !!this.triggerElement && !(this.triggerElement instanceof VirtualTrigger);
   }
+  get placementController() {
+    if (!this._placementController) {
+      this._placementController = new PlacementController(this);
+    }
+    return this._placementController;
+  }
   get open() {
     return this._open;
   }
   set open(open) {
+    var _a;
     if (open && this.disabled)
       return;
     if (open === this.open)
       return;
-    if ((this.longpressState === "opening" || this.longpressState === "pressed") && !open)
+    if (((_a = this.strategy) == null ? void 0 : _a.activelyOpening) && !open)
       return;
     this._open = open;
     if (this.open) {
       _Overlay.openCount += 1;
     }
     this.requestUpdate("open", !this.open);
+    if (this.open) {
+      this.requestSlottable();
+    }
   }
   get state() {
     return this._state;
   }
   set state(state2) {
+    var _a;
     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;
+      (_a = this.strategy) == null ? void 0 : _a.shouldCompleteOpen();
     }
     this.requestUpdate("state", oldState);
   }
+  get elementResolver() {
+    if (!this._elementResolver) {
+      this._elementResolver = new ElementResolutionController(this);
+    }
+    return this._elementResolver;
+  }
   get usesDialog() {
     return this.type === "modal" || this.type === "page";
   }
@@ -349,8 +233,32 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     }
     focusEl == null ? void 0 : focusEl.focus();
   }
-  async manageOpen(oldOpen) {
+  returnFocus() {
     var _a;
+    if (this.open || this.type === "hint")
+      return;
+    const getAncestors = () => {
+      var _a2, _b;
+      const ancestors = [];
+      let currentNode = document.activeElement;
+      while ((_a2 = currentNode == null ? void 0 : currentNode.shadowRoot) == null ? void 0 : _a2.activeElement) {
+        currentNode = currentNode.shadowRoot.activeElement;
+      }
+      while (currentNode) {
+        const ancestor = currentNode.assignedSlot || currentNode.parentElement || ((_b = currentNode.getRootNode()) == null ? void 0 : _b.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) || // eslint-disable-next-line @spectrum-web-components/document-active-element
+    document.activeElement === document.body)) {
+      this.triggerElement.focus();
+    }
+  }
+  async manageOpen(oldOpen) {
     if (!this.isConnected && this.open)
       return;
     if (!this.hasUpdated) {
@@ -407,211 +315,19 @@ const _Overlay = class _Overlay extends OverlayFeatures {
         );
       }
     }
-    if (!this.open && this.type !== "hint") {
-      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() {
     var _a;
+    (_a = this.strategy) == null ? void 0 : _a.abort();
+    this.strategy = void 0;
     if (!this.hasNonVirtualTrigger)
       return;
-    (_a = this.abortController) == null ? void 0 : _a.abort();
-    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(
-      "pointerenter",
-      this.handleOverlayPointerenter,
-      options
-    );
-    this.addEventListener(
-      "pointerleave",
-      this.handleOverlayPointerleave,
-      options
-    );
-  }
-  manageTriggerElement(triggerElement) {
-    if (triggerElement) {
-      this.unbindEvents();
-      this.releaseAriaDescribedby();
-    }
-    const missingOrVirtual = !this.triggerElement || this.triggerElement instanceof VirtualTrigger;
-    if (missingOrVirtual) {
-      return;
-    }
-    this.bindEvents();
-    if (this.receivesFocus === "true")
-      return;
-    this.prepareAriaDescribedby();
-  }
-  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
-    ) {
+    if (!this.triggerInteraction)
       return;
-    }
-    const longpressDescription = document.createElement("div");
-    longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;
-    const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
-    longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
-    longpressDescription.slot = "longpress-describedby-descriptor";
-    const triggerParent = trigger.getRootNode();
-    const overlayParent = this.getRootNode();
-    if (triggerParent === overlayParent) {
-      this.append(longpressDescription);
-    } else {
-      longpressDescription.hidden = !("host" in triggerParent);
-      trigger.insertAdjacentElement("afterend", longpressDescription);
-    }
-    const releaseLongpressDescribedby = conditionAttributeWithId(
-      trigger,
-      "aria-describedby",
-      [longpressDescription.id]
+    this.strategy = new strategies[this.triggerInteraction](
+      this,
+      this.triggerElement
     );
-    this.releaseLongpressDescribedby = () => {
-      releaseLongpressDescribedby();
-      longpressDescription.remove();
-      this.releaseLongpressDescribedby = noop;
-    };
-  }
-  prepareAriaDescribedby() {
-    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 || // Virtual triggers can have no aria content
-      !this.hasNonVirtualTrigger
-    ) {
-      return;
-    }
-    const trigger = this.triggerElement;
-    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-${randomID()}`;
-        }
-        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.hoverTimeout = setTimeout(() => {
-      this.open = false;
-    }, HOVER_DELAY);
   }
   handleBeforetoggle(event) {
     if (event.newState !== "open") {
@@ -619,7 +335,8 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     }
   }
   handleBrowserClose() {
-    if (this.longpressState !== "opening" && this.longpressState !== "pressed") {
+    var _a;
+    if (!((_a = this.strategy) == null ? void 0 : _a.activelyOpening)) {
       this.open = false;
       return;
     }
@@ -631,13 +348,11 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     this.manageOpen(false);
   }
   handleSlotchange() {
-    if (this.triggerElement) {
-      this.prepareAriaDescribedby();
-    }
+    var _a, _b;
     if (!this.elements.length) {
-      this.releaseLongpressDescribedby();
+      (_a = this.strategy) == null ? void 0 : _a.releaseDescription();
     } else if (this.hasNonVirtualTrigger) {
-      this.prepareLongpressDescription(
+      (_b = this.strategy) == null ? void 0 : _b.prepareDescription(
         this.triggerElement
       );
     }
@@ -647,6 +362,17 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     this.willPreventClose = false;
     return shouldPreventClose;
   }
+  requestSlottable() {
+    if (!this.open) {
+      document.body.offsetHeight;
+    }
+    this.dispatchEvent(
+      new SlottableRequestEvent(
+        "overlay-content",
+        this.open ? {} : removeSlottableRequest
+      )
+    );
+  }
   willUpdate(changes) {
     var _a;
     if (!this.hasAttribute("id")) {
@@ -672,7 +398,7 @@ const _Overlay = class _Overlay extends OverlayFeatures {
       oldTrigger = changes.get("triggerElement");
     }
     if (oldTrigger !== false) {
-      this.manageTriggerElement(oldTrigger);
+      this.bindEvents();
     }
   }
   updated(changes) {
@@ -687,7 +413,7 @@ const _Overlay = class _Overlay extends OverlayFeatures {
         this.placementController.resetOverlayPosition();
       }
     }
-    if (changes.has("state") && this.state === "closed") {
+    if (changes.has("state") && this.state === "closed" && typeof changes.get("state") !== "undefined") {
       this.placementController.clearOverlayPosition();
     }
   }
@@ -749,16 +475,13 @@ const _Overlay = class _Overlay extends OverlayFeatures {
     this.addEventListener("close", () => {
       this.open = false;
     });
-    if (this.hasNonVirtualTrigger) {
+    if (this.hasUpdated) {
       this.bindEvents();
     }
   }
   disconnectedCallback() {
-    if (this.hasNonVirtualTrigger) {
-      this.unbindEvents();
-    }
-    this.releaseAriaDescribedby();
-    this.releaseLongpressDescribedby();
+    var _a;
+    (_a = this.strategy) == null ? void 0 : _a.releaseDescription();
     this.open = false;
     super.disconnectedCallback();
   }