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

package/src/OverlayTrigger.d.ts

@@ -1,11 +1,9 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-import { OverlayOptions, OverlayTriggerInteractions, Placement, TriggerInteractions } from './overlay-types';
+import { OverlayTriggerInteractions } from './overlay-types';
+import '../sp-overlay.js';
+import { Placement } from '@floating-ui/dom';
+import type { Overlay } from './Overlay.js';
 export declare type OverlayContentTypes = 'click' | 'hover' | 'longpress';
-export declare const LONGPRESS_INSTRUCTIONS: {
-    touch: string;
-    keyboard: string;
-    mouse: string;
-};
 /**
  * @element overlay-trigger
  *
@@ -18,50 +16,36 @@ export declare const LONGPRESS_INSTRUCTIONS: {
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export declare class OverlayTrigger extends SpectrumElement {
-    private closeClickOverlay?;
-    private closeLongpressOverlay?;
-    private closeHoverOverlay?;
     static get styles(): CSSResultArray;
     /**
-     * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
+     * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" }
      * @attr
      */
-    placement: Placement;
+    placement?: Placement;
     type?: OverlayTriggerInteractions;
     offset: number;
     open?: OverlayContentTypes;
     disabled: boolean;
-    hasLongpressContent: boolean;
-    private longpressDescriptor?;
-    private clickContent?;
-    private longpressContent?;
-    private hoverContent?;
-    private targetContent?;
-    private overlaidContent?;
+    private clickContent;
+    private clickPlacement?;
+    private longpressContent;
+    private longpressPlacement?;
+    private hoverContent;
+    private hoverPlacement?;
+    private targetContent;
+    clickOverlayElement: Overlay;
+    longpressOverlayElement: Overlay;
+    hoverOverlayElement: Overlay;
     private _longpressId;
-    private handleClose;
+    private getAssignedElementsFromSlot;
+    private handleTriggerContent;
+    private handleClickContent;
+    private handleLongpressContent;
+    private handleHoverContent;
+    private handleBeforetoggle;
+    protected update(changes: PropertyValues): void;
     protected render(): TemplateResult;
-    protected updated(changes: PropertyValues<this>): void;
-    protected manageLongpressDescriptor(): void;
-    private closeAllOverlays;
-    private manageOpen;
-    private openOverlay;
-    static openOverlay: (target: HTMLElement, interaction: TriggerInteractions, content: HTMLElement, options: OverlayOptions) => Promise<() => void>;
-    private get overlayOptions();
-    private onTrigger;
-    private prepareToFocusOverlayContent;
-    onTriggerClick(): Promise<void>;
-    private _longpressEvent?;
-    private onTriggerLongpress;
-    private abortOverlay;
-    onTriggerMouseEnter(): Promise<void>;
-    private onClickSlotChange;
-    private onLongpressSlotChange;
-    private onHoverSlotChange;
-    private onTargetSlotChange;
-    private extractSlotContentFromEvent;
-    private openStatePromise;
-    private openStateResolver;
+    protected updated(changes: PropertyValues): void;
     protected getUpdateComplete(): Promise<boolean>;
-    disconnectedCallback(): void;
+    protected willUpdate(): void;
 }

package/src/OverlayTrigger.dev.js

@@ -16,69 +16,134 @@ import {
 } from "@spectrum-web-components/base";
 import {
   property,
+  query,
   state
 } from "@spectrum-web-components/base/src/decorators.js";
-import { firstFocusableIn } from "@spectrum-web-components/shared/src/first-focusable-in.js";
-import {
-  isAndroid,
-  isIOS
-} from "@spectrum-web-components/shared/src/platform.js";
-import { openOverlay } from "./loader.dev.js";
 import overlayTriggerStyles from "./overlay-trigger.css.js";
-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 _OverlayTrigger = class extends SpectrumElement {
+import "../sp-overlay.dev.js";
+export class OverlayTrigger extends SpectrumElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
     this.offset = 6;
     this.disabled = false;
-    this.hasLongpressContent = false;
+    this.clickContent = [];
+    this.longpressContent = [];
+    this.hoverContent = [];
+    this.targetContent = [];
     this._longpressId = `longpress-describedby-descriptor`;
-    this.abortOverlay = () => {
-      return;
-    };
-    this.openStatePromise = Promise.resolve();
   }
   static get styles() {
     return [overlayTriggerStyles];
   }
-  handleClose(event) {
-    if (event && event.detail.interaction !== this.open && event.detail.interaction !== this.type) {
+  getAssignedElementsFromSlot(slot) {
+    return slot.assignedElements({ flatten: true });
+  }
+  handleTriggerContent(event) {
+    this.targetContent = this.getAssignedElementsFromSlot(event.target);
+  }
+  handleClickContent(event) {
+    this.clickContent = this.getAssignedElementsFromSlot(event.target);
+  }
+  handleLongpressContent(event) {
+    this.longpressContent = this.getAssignedElementsFromSlot(event.target);
+  }
+  handleHoverContent(event) {
+    this.hoverContent = this.getAssignedElementsFromSlot(event.target);
+  }
+  handleBeforetoggle(event) {
+    const { target } = event;
+    let type;
+    if (target === this.clickOverlayElement) {
+      type = "click";
+    } else if (target === this.longpressOverlayElement) {
+      type = "longpress";
+    } else if (target === this.hoverOverlayElement) {
+      type = "hover";
+    } else {
       return;
     }
-    this.removeAttribute("open");
+    if (event.newState === "open") {
+      this.open = type;
+    } else if (this.open === type) {
+      this.open = void 0;
+    }
+  }
+  update(changes) {
+    var _a, _b, _c, _d, _e, _f;
+    if (changes.has("clickContent")) {
+      this.clickPlacement = ((_a = this.clickContent[0]) == null ? void 0 : _a.getAttribute("placement")) || ((_b = this.clickContent[0]) == null ? void 0 : _b.getAttribute(
+        "direction"
+      )) || void 0;
+    }
+    if (changes.has("hoverContent")) {
+      this.hoverPlacement = ((_c = this.hoverContent[0]) == null ? void 0 : _c.getAttribute("placement")) || ((_d = this.hoverContent[0]) == null ? void 0 : _d.getAttribute(
+        "direction"
+      )) || void 0;
+    }
+    if (changes.has("longpressContent")) {
+      this.longpressPlacement = ((_e = this.longpressContent[0]) == null ? void 0 : _e.getAttribute("placement")) || ((_f = this.longpressContent[0]) == null ? void 0 : _f.getAttribute(
+        "direction"
+      )) || void 0;
+    }
+    super.update(changes);
   }
   render() {
     return html`
             <slot
                 id="trigger"
-                @click=${this.onTrigger}
-                @longpress=${this.onTrigger}
-                @mouseenter=${this.onTrigger}
-                @mouseleave=${this.onTrigger}
-                @focusin=${this.onTrigger}
-                @focusout=${this.onTrigger}
-                @sp-closed=${this.handleClose}
-                @slotchange=${this.onTargetSlotChange}
                 name="trigger"
+                @slotchange=${this.handleTriggerContent}
             ></slot>
             <div id="overlay-content">
-                <slot
-                    @slotchange=${this.onClickSlotChange}
-                    name="click-content"
-                ></slot>
-                <slot
-                    @slotchange=${this.onLongpressSlotChange}
-                    name="longpress-content"
-                ></slot>
-                <slot
-                    @slotchange=${this.onHoverSlotChange}
-                    name="hover-content"
-                ></slot>
+                <sp-overlay
+                    id="click-overlay"
+                    ?disabled=${this.disabled || !this.clickContent.length}
+                    ?open=${this.open === "click" && !!this.clickContent.length}
+                    .offset=${this.offset}
+                    .placement=${this.clickPlacement || this.placement}
+                    .triggerElement=${this.targetContent[0]}
+                    .triggerInteraction=${"click"}
+                    .type=${this.type !== "modal" ? "auto" : "modal"}
+                    @beforetoggle=${this.handleBeforetoggle}
+                >
+                    <slot
+                        name="click-content"
+                        @slotchange=${this.handleClickContent}
+                    ></slot>
+                </sp-overlay>
+                <sp-overlay
+                    id="longpress-overlay"
+                    ?disabled=${this.disabled || !this.longpressContent.length}
+                    ?open=${this.open === "longpress" && !!this.longpressContent.length}
+                    .offset=${this.offset}
+                    .placement=${this.longpressPlacement || this.placement}
+                    .triggerElement=${this.targetContent[0]}
+                    .triggerInteraction=${"longpress"}
+                    .type=${"auto"}
+                    @beforetoggle=${this.handleBeforetoggle}
+                >
+                    <slot
+                        name="longpress-content"
+                        @slotchange=${this.handleLongpressContent}
+                    ></slot>
+                    <slot name="longpress-describedby-descriptor"></slot>
+                </sp-overlay>
+                <sp-overlay
+                    id="hover-overlay"
+                    ?disabled=${this.disabled || !this.hoverContent.length || !!this.open && this.open !== "hover"}
+                    ?open=${this.open === "hover" && !!this.hoverContent.length}
+                    .offset=${this.offset}
+                    .placement=${this.hoverPlacement || this.placement}
+                    .triggerElement=${this.targetContent[0]}
+                    .triggerInteraction=${"hover"}
+                    .type=${"hint"}
+                    @beforetoggle=${this.handleBeforetoggle}
+                >
+                    <slot
+                        name="hover-content"
+                        @slotchange=${this.handleHoverContent}
+                    ></slot>
+                </sp-overlay>
                 <slot name=${this._longpressId}></slot>
             </div>
         `;
@@ -86,260 +151,20 @@ const _OverlayTrigger = class extends SpectrumElement {
   updated(changes) {
     super.updated(changes);
     if (this.disabled && changes.has("disabled")) {
-      this.closeAllOverlays();
-      return;
-    }
-    if (changes.has("open")) {
-      this.manageOpen();
-    }
-    if (changes.has("hasLongpressContent")) {
-      this.manageLongpressDescriptor();
-    }
-  }
-  manageLongpressDescriptor() {
-    const trigger = this.querySelector(
-      '[slot="trigger"]'
-    );
-    const ariaDescribedby = trigger.getAttribute("aria-describedby");
-    let descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
-    if (this.hasLongpressContent) {
-      if (!this.longpressDescriptor) {
-        this.longpressDescriptor = document.createElement(
-          "div"
-        );
-        this.longpressDescriptor.id = this._longpressId;
-        this.longpressDescriptor.slot = this._longpressId;
-      }
-      const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
-      this.longpressDescriptor.textContent = LONGPRESS_INSTRUCTIONS[messageType];
-      this.appendChild(this.longpressDescriptor);
-      descriptors.push(this._longpressId);
-    } else {
-      if (this.longpressDescriptor)
-        this.longpressDescriptor.remove();
-      descriptors = descriptors.filter(
-        (descriptor) => descriptor !== this._longpressId
-      );
-    }
-    if (descriptors.length) {
-      trigger.setAttribute("aria-describedby", descriptors.join(" "));
-    } else {
-      trigger.removeAttribute("aria-describedby");
-    }
-  }
-  closeAllOverlays() {
-    if (this.abortOverlay)
-      this.abortOverlay(true);
-    [
-      "closeClickOverlay",
-      "closeHoverOverlay",
-      "closeLongpressOverlay"
-    ].forEach(async (name) => {
-      const canClose = this[name];
-      if (canClose == null)
-        return;
-      delete this[name];
-      (await canClose)();
-    });
-    this.overlaidContent = void 0;
-  }
-  manageOpen() {
-    var _a;
-    const openHandlers = {
-      click: () => this.onTriggerClick(),
-      hover: () => this.onTriggerMouseEnter(),
-      longpress: () => this.onTriggerLongpress(),
-      none: () => this.closeAllOverlays()
-    };
-    openHandlers[(_a = this.open) != null ? _a : "none"]();
-  }
-  async openOverlay(target, interaction, content, options) {
-    this.openStatePromise = new Promise(
-      (res) => this.openStateResolver = res
-    );
-    this.addEventListener(
-      "sp-opened",
-      () => {
-        this.openStateResolver();
-      },
-      { once: true }
-    );
-    this.overlaidContent = content;
-    return _OverlayTrigger.openOverlay(
-      target,
-      interaction,
-      content,
-      options
-    );
-  }
-  get overlayOptions() {
-    return {
-      offset: this.offset,
-      placement: this.placement,
-      receivesFocus: !this.type || this.type === "inline" || this.open === "hover" ? void 0 : "auto"
-    };
-  }
-  onTrigger(event) {
-    const mouseIsEnteringHoverContent = event.type === "mouseleave" && this.open === "hover" && event.relatedTarget === this.overlaidContent;
-    if (mouseIsEnteringHoverContent && this.overlaidContent) {
-      this.overlaidContent.addEventListener(
-        "mouseleave",
-        (event2) => {
-          const mouseIsEnteringTrigger = event2.relatedTarget === this.targetContent;
-          if (mouseIsEnteringTrigger) {
-            return;
-          }
-          this.onTrigger(
-            event2
-          );
-        },
-        { once: true }
-      );
-      return;
-    }
-    if (this.disabled)
-      return;
-    switch (event.type) {
-      case "mouseenter":
-      case "focusin":
-        if (!this.open && this.hoverContent) {
-          this.open = "hover";
-        }
-        return;
-      case "mouseleave":
-      case "focusout":
-        if (this.open === "hover") {
-          this.handleClose();
-        }
-        return;
-      case "click":
-        if (this.clickContent) {
-          this.open = event.type;
-        }
-        return;
-      case "longpress":
-        if (this.longpressContent) {
-          this._longpressEvent = event;
-          this.open = event.type;
-        }
-        return;
-    }
-  }
-  prepareToFocusOverlayContent(overlayContent) {
-    if (this.type !== "modal") {
+      this.open = void 0;
       return;
     }
-    const firstFocusable = firstFocusableIn(overlayContent);
-    if (!firstFocusable) {
-      overlayContent.tabIndex = 0;
-    }
-  }
-  async onTriggerClick() {
-    if (!this.targetContent || !this.clickContent || this.closeClickOverlay) {
-      return;
-    }
-    const { targetContent, clickContent } = this;
-    this.closeAllOverlays();
-    this.prepareToFocusOverlayContent(clickContent);
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeClickOverlay = this.openOverlay(
-      targetContent,
-      this.type ? this.type : "click",
-      clickContent,
-      this.overlayOptions
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
-    }
-  }
-  async onTriggerLongpress() {
-    var _a, _b;
-    if (!this.targetContent || !this.longpressContent || this.closeLongpressOverlay) {
-      return;
-    }
-    const { targetContent, longpressContent } = this;
-    this.closeAllOverlays();
-    this.prepareToFocusOverlayContent(longpressContent);
-    const notImmediatelyClosable = ((_b = (_a = this._longpressEvent) == null ? void 0 : _a.detail) == null ? void 0 : _b.source) !== "keyboard";
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeLongpressOverlay = this.openOverlay(
-      targetContent,
-      this.type ? this.type : "longpress",
-      longpressContent,
-      {
-        ...this.overlayOptions,
-        receivesFocus: "auto",
-        notImmediatelyClosable
-      }
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
-    }
-    this._longpressEvent = void 0;
-  }
-  async onTriggerMouseEnter() {
-    if (!this.targetContent || !this.hoverContent || this.closeHoverOverlay) {
-      return;
-    }
-    const abortPromise = new Promise((res) => {
-      this.abortOverlay = res;
-    });
-    const { targetContent, hoverContent } = this;
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = true;
-    }
-    this.closeHoverOverlay = this.openOverlay(
-      targetContent,
-      "hover",
-      hoverContent,
-      {
-        abortPromise,
-        ...this.overlayOptions
-      }
-    );
-    if (true) {
-      window.__swc.ignoreWarningLevels.deprecation = false;
-    }
-  }
-  onClickSlotChange(event) {
-    this.clickContent = this.extractSlotContentFromEvent(event);
-    this.manageOpen();
-  }
-  onLongpressSlotChange(event) {
-    this.longpressContent = this.extractSlotContentFromEvent(event);
-    this.hasLongpressContent = !!this.longpressContent || !!this.closeLongpressOverlay;
-    this.manageOpen();
-  }
-  onHoverSlotChange(event) {
-    this.hoverContent = this.extractSlotContentFromEvent(event);
-    this.manageOpen();
-  }
-  onTargetSlotChange(event) {
-    this.targetContent = this.extractSlotContentFromEvent(event);
-  }
-  extractSlotContentFromEvent(event) {
-    const slot = event.target;
-    const nodes = slot.assignedNodes({ flatten: true });
-    return nodes.find((node) => node instanceof HTMLElement);
   }
   async getUpdateComplete() {
     const complete = await super.getUpdateComplete();
-    await this.openStatePromise;
     return complete;
   }
-  disconnectedCallback() {
-    this.closeAllOverlays();
-    super.disconnectedCallback();
+  willUpdate() {
+    if (this.placement === "none") {
+      this.placement = void 0;
+    }
   }
-};
-export let OverlayTrigger = _OverlayTrigger;
-OverlayTrigger.openOverlay = async (target, interaction, content, options) => {
-  return openOverlay(target, interaction, content, options);
-};
+}
 __decorateClass([
   property({ reflect: true })
 ], OverlayTrigger.prototype, "placement", 2);
@@ -347,7 +172,7 @@ __decorateClass([
   property()
 ], OverlayTrigger.prototype, "type", 2);
 __decorateClass([
-  property({ type: Number, reflect: true })
+  property({ type: Number })
 ], OverlayTrigger.prototype, "offset", 2);
 __decorateClass([
   property({ reflect: true })
@@ -357,5 +182,23 @@ __decorateClass([
 ], OverlayTrigger.prototype, "disabled", 2);
 __decorateClass([
   state()
-], OverlayTrigger.prototype, "hasLongpressContent", 2);
+], OverlayTrigger.prototype, "clickContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "longpressContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "hoverContent", 2);
+__decorateClass([
+  state()
+], OverlayTrigger.prototype, "targetContent", 2);
+__decorateClass([
+  query("#click-overlay", true)
+], OverlayTrigger.prototype, "clickOverlayElement", 2);
+__decorateClass([
+  query("#longpress-overlay", true)
+], OverlayTrigger.prototype, "longpressOverlayElement", 2);
+__decorateClass([
+  query("#hover-overlay", true)
+], OverlayTrigger.prototype, "hoverOverlayElement", 2);
 //# sourceMappingURL=OverlayTrigger.dev.js.map