@spectrum-web-components/overlay 0.19.2-overlay.33 → 0.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/overlay",
-    "version": "0.19.2-overlay.33+499d5fe96",
+    "version": "0.19.3",
     "publishConfig": {
         "access": "public"
     },
@@ -29,47 +29,15 @@
             "development": "./src/ActiveOverlay.dev.js",
             "default": "./src/ActiveOverlay.js"
         },
-        "./src/OverlayBase.js": {
-            "development": "./src/OverlayBase.dev.js",
-            "default": "./src/OverlayBase.js"
-        },
-        "./src/OverlayDialog.js": {
-            "development": "./src/OverlayDialog.dev.js",
-            "default": "./src/OverlayDialog.js"
-        },
-        "./src/OverlayElement.js": {
-            "development": "./src/OverlayElement.dev.js",
-            "default": "./src/OverlayElement.js"
-        },
-        "./src/OverlayNoPopover.js": {
-            "development": "./src/OverlayNoPopover.dev.js",
-            "default": "./src/OverlayNoPopover.js"
-        },
-        "./src/OverlayPopover.js": {
-            "development": "./src/OverlayPopover.dev.js",
-            "default": "./src/OverlayPopover.js"
-        },
-        "./src/OverlayStack.js": {
-            "development": "./src/OverlayStack.dev.js",
-            "default": "./src/OverlayStack.js"
-        },
         "./src/OverlayTrigger.js": {
             "development": "./src/OverlayTrigger.dev.js",
             "default": "./src/OverlayTrigger.js"
         },
-        "./src/PlacementController.js": {
-            "development": "./src/PlacementController.dev.js",
-            "default": "./src/PlacementController.js"
-        },
         "./src/VirtualTrigger.js": {
             "development": "./src/VirtualTrigger.dev.js",
             "default": "./src/VirtualTrigger.js"
         },
         "./src/active-overlay.css.js": "./src/active-overlay.css.js",
-        "./src/fullSizePlugin.js": {
-            "development": "./src/fullSizePlugin.dev.js",
-            "default": "./src/fullSizePlugin.js"
-        },
         "./src/index.js": {
             "development": "./src/index.dev.js",
             "default": "./src/index.js"
@@ -78,8 +46,6 @@
             "development": "./src/loader.dev.js",
             "default": "./src/loader.js"
         },
-        "./src/overlay-base.css.js": "./src/overlay-base.css.js",
-        "./src/overlay-element.css.js": "./src/overlay-element.css.js",
         "./src/overlay-events.js": {
             "development": "./src/overlay-events.dev.js",
             "default": "./src/overlay-events.js"
@@ -105,18 +71,6 @@
             "development": "./src/overlay.dev.js",
             "default": "./src/overlay.js"
         },
-        "./src/placement.js": {
-            "development": "./src/placement.dev.js",
-            "default": "./src/placement.js"
-        },
-        "./src/sizePlugin.js": {
-            "development": "./src/sizePlugin.dev.js",
-            "default": "./src/sizePlugin.js"
-        },
-        "./src/topLayerOverTransforms.js": {
-            "development": "./src/topLayerOverTransforms.dev.js",
-            "default": "./src/topLayerOverTransforms.js"
-        },
         "./active-overlay.js": {
             "development": "./active-overlay.dev.js",
             "default": "./active-overlay.js"
@@ -128,10 +82,6 @@
         "./sync/overlay-trigger.js": {
             "development": "./sync/overlay-trigger.dev.js",
             "default": "./sync/overlay-trigger.js"
-        },
-        "./sp-overlay.js": {
-            "development": "./sp-overlay.dev.js",
-            "default": "./sp-overlay.js"
         }
     },
     "scripts": {
@@ -152,21 +102,20 @@
         "lit-html"
     ],
     "dependencies": {
-        "@floating-ui/dom": "^1.2.1",
-        "@spectrum-web-components/action-button": "^0.10.13-overlay.33+499d5fe96",
+        "@floating-ui/dom": "^1.2.0",
+        "@spectrum-web-components/action-button": "^0.10.14",
         "@spectrum-web-components/base": "^0.7.4",
-        "@spectrum-web-components/shared": "^0.15.6-overlay.99+499d5fe96",
-        "@spectrum-web-components/theme": "^0.14.11"
+        "@spectrum-web-components/shared": "^0.15.5",
+        "@spectrum-web-components/theme": "^0.14.13"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
     "sideEffects": [
         "./active-overlay.js",
         "./overlay-trigger.js",
-        "./sp-overlay.js",
         "./sync/overlay-trigger.js",
         "./stories/overlay-story-components.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "499d5fe966f35eb862c1983eb3a42641f213ac6a"
+    "gitHead": "1e25ee121f3bc838dbb99bac62f3c95857570f7a"
 }

package/src/OverlayTrigger.d.ts

@@ -1,8 +1,5 @@
 import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-import { OverlayTriggerInteractions } from './overlay-types';
-import '../sp-overlay.js';
-import { Placement } from '@floating-ui/dom';
-import { OverlayBase } from './OverlayBase';
+import { OverlayOptions, OverlayTriggerInteractions, Placement, TriggerInteractions } from './overlay-types';
 export declare type OverlayContentTypes = 'click' | 'hover' | 'longpress';
 export declare const LONGPRESS_INSTRUCTIONS: {
     touch: string;
@@ -21,34 +18,50 @@ 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"}
      * @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;
-    clickOverlayElement: OverlayBase;
-    longpressOverlayElement: OverlayBase;
-    hoverOverlayElement: OverlayBase;
+    private clickContent?;
+    private longpressContent?;
+    private hoverContent?;
+    private targetContent?;
+    private overlaidContent?;
     private _longpressId;
-    private getAssignedElementsFromEvent;
-    private handleTriggerContent;
-    private handleClickContent;
-    private handleLongpressContent;
-    private handleHoverContent;
+    private handleClose;
     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 getUpdateComplete(): Promise<boolean>;
-    protected willUpdate(): void;
+    disconnectedCallback(): void;
 }

package/src/OverlayTrigger.dev.js

@@ -16,146 +16,69 @@ 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";
-import "../sp-overlay.dev.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"
 };
-export class OverlayTrigger extends SpectrumElement {
+const _OverlayTrigger = class 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];
   }
-  getAssignedElementsFromEvent(event) {
-    const target = event.target;
-    return target.assignedElements({ flatten: true });
-  }
-  handleTriggerContent(event) {
-    this.targetContent = this.getAssignedElementsFromEvent(event);
-  }
-  handleClickContent(event) {
-    this.clickContent = this.getAssignedElementsFromEvent(event);
-  }
-  handleLongpressContent(event) {
-    this.longpressContent = this.getAssignedElementsFromEvent(event);
-  }
-  handleHoverContent(event) {
-    this.hoverContent = this.getAssignedElementsFromEvent(event);
+  handleClose(event) {
+    if (event && event.detail.interaction !== this.open && event.detail.interaction !== this.type) {
+      return;
+    }
+    this.removeAttribute("open");
   }
   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">
-                <sp-overlay
-                    id="click-overlay"
-                    ?disabled=${!this.clickContent.length}
-                    ?open=${this.open === "click" && !!this.clickContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"click"}
-                    .type=${this.type !== "modal" ? "auto" : "modal"}
-                    @sp-closed=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.clickOverlayElement)
-        return;
-      if (this.open === "click") {
-        this.open = void 0;
-      }
-    }}
-                    @sp-opened=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.clickOverlayElement)
-        return;
-      this.open = "click";
-    }}
-                >
-                    <slot
-                        name="click-content"
-                        @slotchange=${this.handleClickContent}
-                    ></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="longpress-overlay"
-                    ?disabled=${!this.longpressContent.length}
-                    ?open=${this.open === "longpress" && !!this.longpressContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"longpress"}
-                    .type=${"auto"}
-                    @sp-closed=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.longpressOverlayElement)
-        return;
-      if (this.open === "longpress") {
-        this.open = void 0;
-      }
-    }}
-                    @sp-opened=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.longpressOverlayElement)
-        return;
-      this.open = "longpress";
-    }}
-                >
-                    <slot
-                        name="longpress-content"
-                        @slotchange=${this.handleLongpressContent}
-                    ></slot>
-                </sp-overlay>
-                <sp-overlay
-                    id="hover-overlay"
-                    ?disabled=${!this.hoverContent.length}
-                    ?open=${this.open === "hover" && !!this.hoverContent.length}
-                    .offset=${this.offset}
-                    .placement=${this.placement}
-                    .triggerElement=${this.targetContent[0]}
-                    .triggerInteraction=${"hover"}
-                    .type=${"hint"}
-                    @sp-closed=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.hoverOverlayElement)
-        return;
-      if (this.open === "hover") {
-        this.open = void 0;
-      }
-    }}
-                    @sp-opened=${(event) => {
-      const target = event.composedPath()[0];
-      if (target !== this.hoverOverlayElement)
-        return;
-      this.open = "hover";
-    }}
-                >
-                    <slot
-                        name="hover-content"
-                        @slotchange=${this.handleHoverContent}
-                    ></slot>
-                </sp-overlay>
+                <slot
+                    @slotchange=${this.onClickSlotChange}
+                    name="click-content"
+                ></slot>
+                <slot
+                    @slotchange=${this.onLongpressSlotChange}
+                    name="longpress-content"
+                ></slot>
+                <slot
+                    @slotchange=${this.onHoverSlotChange}
+                    name="hover-content"
+                ></slot>
                 <slot name=${this._longpressId}></slot>
             </div>
         `;
@@ -163,9 +86,12 @@ export class OverlayTrigger extends SpectrumElement {
   updated(changes) {
     super.updated(changes);
     if (this.disabled && changes.has("disabled")) {
-      this.open = void 0;
+      this.closeAllOverlays();
       return;
     }
+    if (changes.has("open")) {
+      this.manageOpen();
+    }
     if (changes.has("hasLongpressContent")) {
       this.manageLongpressDescriptor();
     }
@@ -201,16 +127,219 @@ export class OverlayTrigger extends SpectrumElement {
       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") {
+      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;
   }
-  willUpdate() {
-    if (this.placement === "none") {
-      this.placement = void 0;
-    }
+  disconnectedCallback() {
+    this.closeAllOverlays();
+    super.disconnectedCallback();
   }
-}
+};
+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);
@@ -229,25 +358,4 @@ __decorateClass([
 __decorateClass([
   state()
 ], OverlayTrigger.prototype, "hasLongpressContent", 2);
-__decorateClass([
-  state()
-], 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