@spectrum-web-components/tooltip 0.11.16-overlay.8 → 0.11.16

package/custom-elements.json

@@ -0,0 +1,374 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "sp-tooltip.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sp-tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "/src/Tooltip.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/Tooltip.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TooltipProxy",
+          "events": [
+            {
+              "name": "disconnected",
+              "type": {
+                "text": "Event"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "tooltip-proxy",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Tooltip",
+          "slots": [
+            {
+              "description": "the icon element appearing at the start of the label",
+              "name": "icon"
+            },
+            {
+              "description": "the text label of the Tooltip",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "instanceCount",
+              "type": {
+                "text": "number"
+              },
+              "static": true,
+              "default": "0",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_tooltipId",
+              "privacy": "private",
+              "default": "`sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`"
+            },
+            {
+              "kind": "field",
+              "name": "selfManaged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "self-managed"
+            },
+            {
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "default": "6",
+              "attribute": "offset",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hadTooltipId",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "\"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\""
+              },
+              "privacy": "public",
+              "default": "'top'",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tipElement",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_variant",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "attribute": "variant"
+            },
+            {
+              "kind": "method",
+              "name": "onOverlayQuery",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<OverlayDisplayQueryDetail>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_proxy",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "generateProxy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "overlayWillOpenCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "{\n        trigger,\n    }",
+                  "type": {
+                    "text": "{\n        trigger: HTMLElement;\n    }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "overlayOpenCancelledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "{\n        trigger,\n    }",
+                  "type": {
+                    "text": "{\n        trigger: HTMLElement;\n    }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "overlayCloseCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "{ trigger }",
+                  "type": {
+                    "text": "{ trigger: HTMLElement }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "removeProxy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "closeOverlayCallback",
+              "type": {
+                "text": "Promise<() => void> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "abortOverlay",
+              "type": {
+                "text": "(cancelled: boolean) => void"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "openOverlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "closeOverlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previousSlot",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "manageTooltip",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placement",
+              "type": {
+                "text": "\"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\""
+              },
+              "default": "'top'",
+              "fieldName": "placement",
+              "attribute": "placement"
+            },
+            {
+              "name": "self-managed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selfManaged"
+            },
+            {
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "default": "6",
+              "fieldName": "offset"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "open"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SpectrumElement",
+            "package": "@spectrum-web-components/base"
+          },
+          "tagName": "sp-tooltip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TooltipProxy",
+          "declaration": {
+            "name": "TooltipProxy",
+            "module": "src/Tooltip.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "tooltip-proxy",
+          "declaration": {
+            "name": "TooltipProxy",
+            "module": "src/Tooltip.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "src/Tooltip.js"
+          }
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tooltip",
-    "version": "0.11.16-overlay.8+eef228d8d",
+    "version": "0.11.16",
     "publishConfig": {
         "access": "public"
     },
@@ -57,8 +57,8 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.5-overlay.236+eef228d8d",
-        "@spectrum-web-components/overlay": "^0.19.4-overlay.8+eef228d8d"
+        "@spectrum-web-components/base": "^0.7.5",
+        "@spectrum-web-components/overlay": "^0.19.4"
     },
     "devDependencies": {
         "@spectrum-css/tooltip": "^4.0.10"
@@ -69,5 +69,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "eef228d8defcf04fe32713c7232fd0873828752b"
+    "gitHead": "fe316a3ee9fc753f0de98aece11e04227df73ab7"
 }

package/src/Tooltip.d.ts

@@ -1,6 +1,8 @@
-import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
-import type { Placement } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/overlay/sp-overlay.js';
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import type { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
+export declare class TooltipProxy extends HTMLElement {
+    disconnectedCallback(): void;
+}
 /**
  * @element sp-tooltip
  *
@@ -13,20 +15,41 @@ export declare class Tooltip extends SpectrumElement {
      * @private
      */
     static instanceCount: number;
+    private _tooltipId;
     selfManaged: boolean;
     offset: number;
+    private hadTooltipId;
     open: boolean;
     /**
      * @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;
-    tipElement: HTMLSpanElement;
+    private tipElement;
     private _variant;
     get variant(): string;
     set variant(variant: string);
-    private handleOpenOverlay;
-    protected handleCloseOverlay: () => void;
-    protected handleTransitionend(): void;
+    constructor();
+    onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
+    private _proxy;
+    private generateProxy;
+    overlayWillOpenCallback({ trigger, }: {
+        trigger: HTMLElement;
+    }): void;
+    overlayOpenCancelledCallback({ trigger, }: {
+        trigger: HTMLElement;
+    }): void;
+    overlayCloseCallback({ trigger }: {
+        trigger: HTMLElement;
+    }): void;
+    private removeProxy;
+    private closeOverlayCallback?;
+    private abortOverlay;
+    private openOverlay;
+    private closeOverlay;
+    private previousSlot?;
+    private manageTooltip;
     render(): TemplateResult;
+    protected update(changed: PropertyValues<this>): Promise<void>;
+    protected updated(changed: PropertyValues<this>): void;
 }

package/src/Tooltip.dev.js

@@ -18,23 +18,69 @@ import {
   property,
   query
 } from "@spectrum-web-components/base/src/decorators.js";
-import "@spectrum-web-components/overlay/sp-overlay.js";
+import { openOverlay } from "@spectrum-web-components/overlay/src/loader.js";
 import tooltipStyles from "./tooltip.css.js";
-export class Tooltip extends SpectrumElement {
+export class TooltipProxy extends HTMLElement {
+  disconnectedCallback() {
+    this.dispatchEvent(new Event("disconnected"));
+  }
+}
+customElements.define("tooltip-proxy", TooltipProxy);
+const _Tooltip = class extends SpectrumElement {
   constructor() {
-    super(...arguments);
+    super();
+    this._tooltipId = `sp-tooltip-describedby-helper-${_Tooltip.instanceCount++}`;
     this.selfManaged = false;
     this.offset = 6;
+    this.hadTooltipId = false;
     this.open = false;
     this.placement = "top";
     /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
     this._variant = "";
-    this.handleOpenOverlay = () => {
-      this.open = true;
+    this.abortOverlay = () => {
+      return;
+    };
+    this.openOverlay = () => {
+      const parentElement = this.parentElement;
+      const abortPromise = new Promise((res) => {
+        this.abortOverlay = res;
+      });
+      if (true) {
+        window.__swc.ignoreWarningLevels.deprecation = true;
+      }
+      this.closeOverlayCallback = openOverlay(parentElement, "hover", this, {
+        abortPromise,
+        offset: this.offset,
+        placement: this.placement
+      });
+      if (true) {
+        window.__swc.ignoreWarningLevels.deprecation = false;
+      }
     };
-    this.handleCloseOverlay = () => {
-      this.open = false;
+    this.closeOverlay = async (event) => {
+      const pointerIsEnteringTooltip = event && event.type === "pointerleave" && event.relatedTarget === this;
+      if (pointerIsEnteringTooltip) {
+        this.addEventListener(
+          "pointerleave",
+          (event2) => {
+            const pointerIsEnteringParnet = event2.relatedTarget === this.parentElement;
+            if (pointerIsEnteringParnet) {
+              return;
+            }
+            this.closeOverlay(event2);
+          },
+          { once: true }
+        );
+        return;
+      }
+      if (this.abortOverlay)
+        this.abortOverlay(true);
+      if (!this.closeOverlayCallback)
+        return;
+      (await this.closeOverlayCallback)();
+      delete this.closeOverlayCallback;
     };
+    this.addEventListener("sp-overlay-query", this.onOverlayQuery);
   }
   static get styles() {
     return [tooltipStyles];
@@ -54,42 +100,121 @@ export class Tooltip extends SpectrumElement {
     this.removeAttribute("variant");
     this._variant = "";
   }
-  handleTransitionend() {
-    this.dispatchEvent(
-      new Event("transitionend", {
-        bubbles: true,
-        composed: true
-      })
-    );
+  onOverlayQuery(event) {
+    if (!event.target)
+      return;
+    const target = event.target;
+    if (target !== this)
+      return;
+    event.detail.overlayContentTipElement = this.tipElement;
   }
-  render() {
-    const tooltip = html`
-            <span id="tooltip" @transitionend=${this.handleTransitionend}>
-                <slot name="icon"></slot>
-                <span id="label"><slot></slot></span>
-                <span id="tip"></span>
-            </span>
-        `;
+  generateProxy() {
+    if (this._proxy) {
+      return;
+    }
+    this._proxy = document.createElement("tooltip-proxy");
+    this._proxy.id = this._tooltipId;
+    this._proxy.hidden = true;
+    this._proxy.slot = "hidden-tooltip-content";
+    this._proxy.setAttribute("role", "tooltip");
+    this._proxy.addEventListener("disconnected", this.closeOverlay);
+  }
+  overlayWillOpenCallback({
+    trigger
+  }) {
+    this.setAttribute("aria-hidden", "true");
+    this.generateProxy();
+    this._proxy.textContent = this.textContent;
+    const ariaDescribedby = trigger.getAttribute("aria-describedby") || "";
+    this.hadTooltipId = ariaDescribedby.search(this._tooltipId) > -1;
+    this.insertAdjacentElement("beforebegin", this._proxy);
+    if (this.hadTooltipId)
+      return;
+    if (ariaDescribedby) {
+      trigger.setAttribute(
+        "aria-describedby",
+        `${ariaDescribedby} ${this._tooltipId}`
+      );
+    } else {
+      trigger.setAttribute("aria-describedby", `${this._tooltipId}`);
+    }
+  }
+  overlayOpenCancelledCallback({
+    trigger
+  }) {
+    this.overlayCloseCallback({ trigger });
+  }
+  overlayCloseCallback({ trigger }) {
+    const ariaDescribedby = trigger.getAttribute("aria-describedby") || "";
+    let descriptors = ariaDescribedby.split(/\s+/);
+    if (!this.hadTooltipId) {
+      descriptors = descriptors.filter(
+        (descriptor) => descriptor !== this._tooltipId
+      );
+    }
+    if (descriptors.length) {
+      trigger.setAttribute("aria-describedby", descriptors.join(" "));
+    } else {
+      trigger.removeAttribute("aria-describedby");
+    }
+    this.removeAttribute("aria-hidden");
+    this.removeProxy();
+  }
+  removeProxy() {
+    this._proxy.remove();
+  }
+  manageTooltip() {
+    const parentElement = this.parentElement;
     if (this.selfManaged) {
-      return html`
-                <sp-overlay
-                    ?open=${this.open}
-                    offset=${this.offset}
-                    type="hint"
-                    .placement=${this.placement}
-                    .triggerElement=${this.parentElement}
-                    .triggerInteraction=${"hover"}
-                    @sp-opened=${this.handleOpenOverlay}
-                    @sp-closed=${this.handleCloseOverlay}
-                >
-                    ${tooltip}
-                </sp-overlay>
-            `;
+      if (this.slot) {
+        this.previousSlot = this.slot;
+      }
+      this.slot = "self-managed-tooltip";
+      parentElement.addEventListener("pointerenter", this.openOverlay);
+      parentElement.addEventListener("focusin", this.openOverlay);
+      parentElement.addEventListener("pointerleave", this.closeOverlay);
+      parentElement.addEventListener("focusout", this.closeOverlay);
     } else {
-      return tooltip;
+      if (this.previousSlot) {
+        this.slot = this.previousSlot;
+      } else if (this.slot === "self-managed-tooltip") {
+        this.removeAttribute("slot");
+      }
+      parentElement.removeEventListener("pointerenter", this.openOverlay);
+      parentElement.removeEventListener("focusin", this.openOverlay);
+      parentElement.removeEventListener(
+        "pointerleave",
+        this.closeOverlay
+      );
+      parentElement.removeEventListener("focusout", this.closeOverlay);
     }
   }
-}
+  render() {
+    return html`
+            <slot name="icon"></slot>
+            <span id="label"><slot></slot></span>
+            <span id="tip"></span>
+        `;
+  }
+  async update(changed) {
+    if (changed.has("open") && this.selfManaged) {
+      if (this.open) {
+        this.openOverlay();
+      } else {
+        this.closeOverlay();
+      }
+    }
+    this.generateProxy();
+    super.update(changed);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("selfManaged")) {
+      this.manageTooltip();
+    }
+  }
+};
+export let Tooltip = _Tooltip;
 /**
  * @private
  */