@spectrum-web-components/overlay 0.31.1-react.3 → 0.32.1-overlay.33

package/src/OverlayStack.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OverlayStack.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { OverlayBase as Overlay } from './OverlayBase.dev.js'\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n    private get document(): Document {\n        return this.root.ownerDocument /* c8 ignore next */ || document;\n    }\n\n    private root: HTMLElement = document.body;\n\n    stack: Overlay[] = [];\n\n    constructor() {\n        this.bindEvents();\n    }\n\n    bindEvents(): void {\n        this.document.addEventListener('pointerup', this.handleClick);\n        this.document.addEventListener('keydown', this.handleKeydown);\n    }\n\n    private closeOverlay(overlay: Overlay): void {\n        const overlayIndex = this.stack.indexOf(overlay);\n        if (overlayIndex > -1) {\n            this.stack.splice(overlayIndex, 1);\n        }\n        overlay.open = false;\n    }\n\n    /**\n     * Close all overlays that are not ancestors of this click event\n     *\n     * @param event {ClickEvent}\n     */\n    handleClick = (event: Event): void => {\n        if (!this.stack.length) return;\n\n        const composedPath = event.composedPath();\n        const nonAncestorOverlays = this.stack.filter((overlay) => {\n            const inStack = composedPath.find(\n                (el) => el === overlay || el === overlay?.triggerElement\n            );\n            return !inStack && !overlay.shouldPreventClose();\n        }) as Overlay[];\n        nonAncestorOverlays.reverse();\n        nonAncestorOverlays.forEach((overlay) => {\n            this.closeOverlay(overlay);\n            let parentToClose = overlay.parentOverlayToForceClose;\n            while (parentToClose) {\n                this.closeOverlay(parentToClose);\n                parentToClose = parentToClose.parentOverlayToForceClose;\n            }\n        });\n\n        // let reverseIndex = -1;\n        // let overlay = this.stack.at(reverseIndex);\n        // if (overlay?.shouldPreventClose()) return;\n\n        // let shouldClose;\n        // while (overlay && !shouldClose) {\n        //     shouldClose =\n        //         overlay.shouldPreventClose() ||\n        //         !composedPath.find(\n        //             (el) => el === overlay || el === overlay?.triggerElement\n        //         );\n        //     if (!shouldClose) {\n        //         reverseIndex -= 1;\n        //         overlay = this.stack.at(reverseIndex);\n        //     }\n        // }\n        // if (!shouldClose || !overlay) {\n        //     return;\n        // }\n\n        // this.closeOverlay(overlay);\n        // let parentToClose = overlay.parentOverlayToForceClose;\n        // while (parentToClose) {\n        //     this.closeOverlay(parentToClose);\n        //     parentToClose = parentToClose.parentOverlayToForceClose;\n        // }\n    };\n\n    handleBeforetoggle = (event: Event): void => {\n        const { target, newState: open } = event as Event & {\n            newState: string;\n        };\n        if (open === 'open') return;\n        this.closeOverlay(target as Overlay);\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        if (event.code !== 'Escape') return;\n        if (supportsPopover) return;\n        if (!this.stack.length) return;\n\n        const last = this.stack.at(-1);\n        if (!last) return;\n        this.closeOverlay(last);\n    };\n\n    /**\n     * When overlays are added manage the open state of exisiting overlays appropriately:\n     * - 'modal': should close other overlays\n     * - 'page': should close other overlays\n     * - 'hint': shouldn't close other overlays\n     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n     * - 'manual': shouldn't close other overlays\n     */\n    add(overlay: Overlay): void {\n        if (this.stack.includes(overlay)) {\n            const overlayIndex = this.stack.indexOf(overlay);\n            if (overlayIndex > -1) {\n                this.stack.splice(overlayIndex, 1);\n                this.stack.push(overlay);\n            }\n            return;\n        }\n        if (\n            overlay.type === 'auto' ||\n            overlay.type === 'modal' ||\n            overlay.type === 'page'\n        ) {\n            // manage closing open overlays\n            const queryPathEventName = 'sp-overlay-query-path';\n            const queryPathEvent = new Event(queryPathEventName, {\n                composed: true,\n                bubbles: true,\n            });\n            overlay.addEventListener(\n                queryPathEventName,\n                (event: Event) => {\n                    const path = event.composedPath();\n                    this.stack.forEach((overlayEl) => {\n                        const inPath = path.find((el) => el === overlayEl);\n                        if (!inPath && overlayEl.type !== 'manual') {\n                            this.closeOverlay(overlayEl);\n                        }\n                    });\n                },\n                { once: true }\n            );\n            overlay.dispatchEvent(queryPathEvent);\n        } else if (overlay.type === 'hint') {\n            this.stack.forEach((overlayEl) => {\n                if (overlayEl.type === 'hint') {\n                    this.closeOverlay(overlayEl);\n                }\n            });\n        }\n        requestAnimationFrame(() => {\n            this.stack.push(overlay);\n            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n                once: true,\n            });\n        });\n    }\n\n    remove(overlay: Overlay): void {\n        this.closeOverlay(overlay);\n    }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/OverlayStack.js

@@ -0,0 +1,2 @@
+"use strict";const r="showPopover"in document.createElement("div");class c{constructor(){this.root=document.body;this.stack=[];this.handleClick=e=>{if(!this.stack.length)return;const t=e.composedPath(),i=this.stack.filter(s=>!t.find(o=>o===s||o===(s==null?void 0:s.triggerElement))&&!s.shouldPreventClose());i.reverse(),i.forEach(s=>{this.closeOverlay(s);let n=s.parentOverlayToForceClose;for(;n;)this.closeOverlay(n),n=n.parentOverlayToForceClose})};this.handleBeforetoggle=e=>{const{target:t,newState:i}=e;i!=="open"&&this.closeOverlay(t)};this.handleKeydown=e=>{if(e.code!=="Escape"||r||!this.stack.length)return;const t=this.stack.at(-1);t&&this.closeOverlay(t)};this.bindEvents()}get document(){return this.root.ownerDocument||document}bindEvents(){this.document.addEventListener("pointerup",this.handleClick),this.document.addEventListener("keydown",this.handleKeydown)}closeOverlay(e){const t=this.stack.indexOf(e);t>-1&&this.stack.splice(t,1),e.open=!1}add(e){if(this.stack.includes(e)){const t=this.stack.indexOf(e);t>-1&&(this.stack.splice(t,1),this.stack.push(e));return}if(e.type==="auto"||e.type==="modal"||e.type==="page"){const t="sp-overlay-query-path",i=new Event(t,{composed:!0,bubbles:!0});e.addEventListener(t,s=>{const n=s.composedPath();this.stack.forEach(o=>{!n.find(a=>a===o)&&o.type!=="manual"&&this.closeOverlay(o)})},{once:!0}),e.dispatchEvent(i)}else e.type==="hint"&&this.stack.forEach(t=>{t.type==="hint"&&this.closeOverlay(t)});requestAnimationFrame(()=>{this.stack.push(e),e.addEventListener("beforetoggle",this.handleBeforetoggle,{once:!0})})}remove(e){this.closeOverlay(e)}}export const overlayStack=new c;
+//# sourceMappingURL=OverlayStack.js.map

package/src/OverlayStack.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["OverlayStack.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { OverlayBase as Overlay } from './OverlayBase.js';\n\nconst supportsPopover = 'showPopover' in document.createElement('div');\n\nclass OverlayStack {\n    private get document(): Document {\n        return this.root.ownerDocument /* c8 ignore next */ || document;\n    }\n\n    private root: HTMLElement = document.body;\n\n    stack: Overlay[] = [];\n\n    constructor() {\n        this.bindEvents();\n    }\n\n    bindEvents(): void {\n        this.document.addEventListener('pointerup', this.handleClick);\n        this.document.addEventListener('keydown', this.handleKeydown);\n    }\n\n    private closeOverlay(overlay: Overlay): void {\n        const overlayIndex = this.stack.indexOf(overlay);\n        if (overlayIndex > -1) {\n            this.stack.splice(overlayIndex, 1);\n        }\n        overlay.open = false;\n    }\n\n    /**\n     * Close all overlays that are not ancestors of this click event\n     *\n     * @param event {ClickEvent}\n     */\n    handleClick = (event: Event): void => {\n        if (!this.stack.length) return;\n\n        const composedPath = event.composedPath();\n        const nonAncestorOverlays = this.stack.filter((overlay) => {\n            const inStack = composedPath.find(\n                (el) => el === overlay || el === overlay?.triggerElement\n            );\n            return !inStack && !overlay.shouldPreventClose();\n        }) as Overlay[];\n        nonAncestorOverlays.reverse();\n        nonAncestorOverlays.forEach((overlay) => {\n            this.closeOverlay(overlay);\n            let parentToClose = overlay.parentOverlayToForceClose;\n            while (parentToClose) {\n                this.closeOverlay(parentToClose);\n                parentToClose = parentToClose.parentOverlayToForceClose;\n            }\n        });\n\n        // let reverseIndex = -1;\n        // let overlay = this.stack.at(reverseIndex);\n        // if (overlay?.shouldPreventClose()) return;\n\n        // let shouldClose;\n        // while (overlay && !shouldClose) {\n        //     shouldClose =\n        //         overlay.shouldPreventClose() ||\n        //         !composedPath.find(\n        //             (el) => el === overlay || el === overlay?.triggerElement\n        //         );\n        //     if (!shouldClose) {\n        //         reverseIndex -= 1;\n        //         overlay = this.stack.at(reverseIndex);\n        //     }\n        // }\n        // if (!shouldClose || !overlay) {\n        //     return;\n        // }\n\n        // this.closeOverlay(overlay);\n        // let parentToClose = overlay.parentOverlayToForceClose;\n        // while (parentToClose) {\n        //     this.closeOverlay(parentToClose);\n        //     parentToClose = parentToClose.parentOverlayToForceClose;\n        // }\n    };\n\n    handleBeforetoggle = (event: Event): void => {\n        const { target, newState: open } = event as Event & {\n            newState: string;\n        };\n        if (open === 'open') return;\n        this.closeOverlay(target as Overlay);\n    };\n\n    private handleKeydown = (event: KeyboardEvent): void => {\n        if (event.code !== 'Escape') return;\n        if (supportsPopover) return;\n        if (!this.stack.length) return;\n\n        const last = this.stack.at(-1);\n        if (!last) return;\n        this.closeOverlay(last);\n    };\n\n    /**\n     * When overlays are added manage the open state of exisiting overlays appropriately:\n     * - 'modal': should close other overlays\n     * - 'page': should close other overlays\n     * - 'hint': shouldn't close other overlays\n     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays\n     * - 'manual': shouldn't close other overlays\n     */\n    add(overlay: Overlay): void {\n        if (this.stack.includes(overlay)) {\n            const overlayIndex = this.stack.indexOf(overlay);\n            if (overlayIndex > -1) {\n                this.stack.splice(overlayIndex, 1);\n                this.stack.push(overlay);\n            }\n            return;\n        }\n        if (\n            overlay.type === 'auto' ||\n            overlay.type === 'modal' ||\n            overlay.type === 'page'\n        ) {\n            // manage closing open overlays\n            const queryPathEventName = 'sp-overlay-query-path';\n            const queryPathEvent = new Event(queryPathEventName, {\n                composed: true,\n                bubbles: true,\n            });\n            overlay.addEventListener(\n                queryPathEventName,\n                (event: Event) => {\n                    const path = event.composedPath();\n                    this.stack.forEach((overlayEl) => {\n                        const inPath = path.find((el) => el === overlayEl);\n                        if (!inPath && overlayEl.type !== 'manual') {\n                            this.closeOverlay(overlayEl);\n                        }\n                    });\n                },\n                { once: true }\n            );\n            overlay.dispatchEvent(queryPathEvent);\n        } else if (overlay.type === 'hint') {\n            this.stack.forEach((overlayEl) => {\n                if (overlayEl.type === 'hint') {\n                    this.closeOverlay(overlayEl);\n                }\n            });\n        }\n        requestAnimationFrame(() => {\n            this.stack.push(overlay);\n            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {\n                once: true,\n            });\n        });\n    }\n\n    remove(overlay: Overlay): void {\n        this.closeOverlay(overlay);\n    }\n}\n\nexport const overlayStack = new OverlayStack();\n"],
+  "mappings": "aAaA,MAAMA,EAAkB,gBAAiB,SAAS,cAAc,KAAK,EAErE,MAAMC,CAAa,CASf,aAAc,CAJd,KAAQ,KAAoB,SAAS,KAErC,WAAmB,CAAC,EAwBpB,iBAAeC,GAAuB,CAClC,GAAI,CAAC,KAAK,MAAM,OAAQ,OAExB,MAAMC,EAAeD,EAAM,aAAa,EAClCE,EAAsB,KAAK,MAAM,OAAQC,GAIpC,CAHSF,EAAa,KACxBG,GAAOA,IAAOD,GAAWC,KAAOD,GAAA,YAAAA,EAAS,eAC9C,GACmB,CAACA,EAAQ,mBAAmB,CAClD,EACDD,EAAoB,QAAQ,EAC5BA,EAAoB,QAASC,GAAY,CACrC,KAAK,aAAaA,CAAO,EACzB,IAAIE,EAAgBF,EAAQ,0BAC5B,KAAOE,GACH,KAAK,aAAaA,CAAa,EAC/BA,EAAgBA,EAAc,yBAEtC,CAAC,CA4BL,EAEA,wBAAsBL,GAAuB,CACzC,KAAM,CAAE,OAAAM,EAAQ,SAAUC,CAAK,EAAIP,EAG/BO,IAAS,QACb,KAAK,aAAaD,CAAiB,CACvC,EAEA,KAAQ,cAAiBN,GAA+B,CAGpD,GAFIA,EAAM,OAAS,UACfF,GACA,CAAC,KAAK,MAAM,OAAQ,OAExB,MAAMU,EAAO,KAAK,MAAM,GAAG,EAAE,EACxBA,GACL,KAAK,aAAaA,CAAI,CAC1B,EArFI,KAAK,WAAW,CACpB,CAVA,IAAY,UAAqB,CAC7B,OAAO,KAAK,KAAK,eAAsC,QAC3D,CAUA,YAAmB,CACf,KAAK,SAAS,iBAAiB,YAAa,KAAK,WAAW,EAC5D,KAAK,SAAS,iBAAiB,UAAW,KAAK,aAAa,CAChE,CAEQ,aAAaL,EAAwB,CACzC,MAAMM,EAAe,KAAK,MAAM,QAAQN,CAAO,EAC3CM,EAAe,IACf,KAAK,MAAM,OAAOA,EAAc,CAAC,EAErCN,EAAQ,KAAO,EACnB,CAiFA,IAAIA,EAAwB,CACxB,GAAI,KAAK,MAAM,SAASA,CAAO,EAAG,CAC9B,MAAMM,EAAe,KAAK,MAAM,QAAQN,CAAO,EAC3CM,EAAe,KACf,KAAK,MAAM,OAAOA,EAAc,CAAC,EACjC,KAAK,MAAM,KAAKN,CAAO,GAE3B,OAEJ,GACIA,EAAQ,OAAS,QACjBA,EAAQ,OAAS,SACjBA,EAAQ,OAAS,OACnB,CAEE,MAAMO,EAAqB,wBACrBC,EAAiB,IAAI,MAAMD,EAAoB,CACjD,SAAU,GACV,QAAS,EACb,CAAC,EACDP,EAAQ,iBACJO,EACCV,GAAiB,CACd,MAAMY,EAAOZ,EAAM,aAAa,EAChC,KAAK,MAAM,QAASa,GAAc,CAE1B,CADWD,EAAK,KAAMR,GAAOA,IAAOS,CAAS,GAClCA,EAAU,OAAS,UAC9B,KAAK,aAAaA,CAAS,CAEnC,CAAC,CACL,EACA,CAAE,KAAM,EAAK,CACjB,EACAV,EAAQ,cAAcQ,CAAc,OAC7BR,EAAQ,OAAS,QACxB,KAAK,MAAM,QAASU,GAAc,CAC1BA,EAAU,OAAS,QACnB,KAAK,aAAaA,CAAS,CAEnC,CAAC,EAEL,sBAAsB,IAAM,CACxB,KAAK,MAAM,KAAKV,CAAO,EACvBA,EAAQ,iBAAiB,eAAgB,KAAK,mBAAoB,CAC9D,KAAM,EACV,CAAC,CACL,CAAC,CACL,CAEA,OAAOA,EAAwB,CAC3B,KAAK,aAAaA,CAAO,CAC7B,CACJ,CAEO,aAAM,aAAe,IAAIJ",
+  "names": ["supportsPopover", "OverlayStack", "event", "composedPath", "nonAncestorOverlays", "overlay", "el", "parentToClose", "target", "open", "last", "overlayIndex", "queryPathEventName", "queryPathEvent", "path", "overlayEl"]
+}

package/src/OverlayTrigger.d.ts

@@ -1,5 +1,8 @@
 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 { OverlayBase } from './OverlayBase.js';
 export declare type OverlayContentTypes = 'click' | 'hover' | 'longpress';
 export declare const LONGPRESS_INSTRUCTIONS: {
     touch: string;
@@ -18,50 +21,39 @@ 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?;
-    private overlaidContent?;
+    private clickContent;
+    private clickPlacement?;
+    private longpressContent;
+    private longpressPlacement?;
+    private hoverContent;
+    private hoverPlacement?;
+    private targetContent;
+    clickOverlayElement: OverlayBase;
+    longpressOverlayElement: OverlayBase;
+    hoverOverlayElement: OverlayBase;
     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 getUpdateComplete(): Promise<boolean>;
-    disconnectedCallback(): void;
+    protected willUpdate(): void;
 }

package/src/OverlayTrigger.dev.js

@@ -16,69 +16,144 @@ 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"
 };
-const _OverlayTrigger = class extends SpectrumElement {
+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.composedPath()[0];
+    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,13 +161,10 @@ const _OverlayTrigger = class extends SpectrumElement {
   updated(changes) {
     super.updated(changes);
     if (this.disabled && changes.has("disabled")) {
-      this.closeAllOverlays();
+      this.open = void 0;
       return;
     }
-    if (changes.has("open")) {
-      this.manageOpen();
-    }
-    if (changes.has("hasLongpressContent")) {
+    if (changes.has("hasLongpressContent") && typeof changes.get("hasLongpressContent") !== "undefined") {
       this.manageLongpressDescriptor();
     }
   }
@@ -127,219 +199,16 @@ const _OverlayTrigger = class 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;
   }
-  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 +216,7 @@ __decorateClass([
   property()
 ], OverlayTrigger.prototype, "type", 2);
 __decorateClass([
-  property({ type: Number, reflect: true })
+  property({ type: Number })
 ], OverlayTrigger.prototype, "offset", 2);
 __decorateClass([
   property({ reflect: true })
@@ -358,4 +227,25 @@ __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