@spectrum-web-components/tooltip 0.33.3-overlay.61 → 0.34.0

package/README.md

@@ -41,6 +41,24 @@ Tooltips can be top, bottom, left, or right.
 <sp-tooltip open placement="right">Label</sp-tooltip>
 ```
 
+### Self-managed overlays
+
+By default, Tooltip provides styling without behavior.
+You must combine it with an [Overlay Trigger](https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#%22hover%22-content-only) in order to manage its overlay behavior.
+
+You can instead apply the `self-managed` attribute for this common case,
+which automaticaly binds to the parent element's hover interaction:
+
+```html
+<sp-action-button>
+    Trigger
+    <sp-tooltip self-managed>Content</sp-tooltip>
+</sp-action-button>
+```
+
+This is especially useful when inserting an intermediate `<overlay-trigger>` would interfere with
+parent/child relationships, such as between `<sp-action-group>` and `<sp-action-button>`.
+
 ## Variants
 
 ### Informative

package/custom-elements.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "sp-tooltip.ts",
+      "path": "sp-tooltip.js",
       "declarations": [],
       "exports": [
         {
@@ -19,71 +19,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/Tooltip.ts",
+      "path": "src/Tooltip.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "TooltipOpenable",
-          "members": [
+          "name": "TooltipProxy",
+          "events": [
             {
-              "kind": "field",
-              "name": "open",
+              "name": "disconnected",
               "type": {
-                "text": "boolean"
+                "text": "Event"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_open",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "attribute": "placement"
-            },
-            {
-              "kind": "field",
-              "name": "_placement",
-              "type": {
-                "text": "Placement"
-              },
-              "privacy": "private",
-              "default": "'top'"
-            },
-            {
-              "kind": "field",
-              "name": "tipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open"
-            },
-            {
-              "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\""
-              },
-              "fieldName": "placement"
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "sp-tooltip-openable",
+          "tagName": "tooltip-proxy",
           "customElement": true
         },
         {
@@ -111,6 +64,12 @@
               "default": "0",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_tooltipId",
+              "privacy": "private",
+              "default": "`sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`"
+            },
             {
               "kind": "field",
               "name": "selfManaged",
@@ -119,6 +78,7 @@
               },
               "privacy": "public",
               "default": "false",
+              "description": "Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.",
               "attribute": "self-managed"
             },
             {
@@ -132,6 +92,15 @@
               "attribute": "offset",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hadTooltipId",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -147,9 +116,10 @@
               "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\""
+                "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
             },
@@ -159,7 +129,7 @@
               "type": {
                 "text": "HTMLSpanElement"
               },
-              "privacy": "public"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -179,20 +149,46 @@
               "privacy": "public",
               "attribute": "variant"
             },
+            {
+              "kind": "method",
+              "name": "onOverlayQuery",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<OverlayDisplayQueryDetail>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
-              "name": "handleOpenOverlay",
+              "name": "_proxy",
+              "type": {
+                "text": "HTMLElement"
+              },
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleCloseOverlay",
-              "privacy": "protected"
+              "kind": "method",
+              "name": "generateProxy",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "handleTransitionrun",
-              "privacy": "protected",
+              "name": "overlayWillOpenCallback",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -200,17 +196,17 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "{\n        trigger,\n    }",
                   "type": {
-                    "text": "TransitionEvent"
+                    "text": "{\n        trigger: HTMLElement;\n    }"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleTransitionend",
-              "privacy": "protected",
+              "name": "overlayOpenCancelledCallback",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -218,25 +214,83 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "{\n        trigger,\n    }",
                   "type": {
-                    "text": "TransitionEvent"
+                    "text": "{\n        trigger: HTMLElement;\n    }"
                   }
                 }
               ]
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "transitionrun",
-              "type": {
-                "text": "TransitionEvent"
+              "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"
+                }
               }
             },
             {
-              "name": "transitionend",
+              "kind": "field",
+              "name": "closeOverlayCallback",
+              "type": {
+                "text": "Promise<() => void> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "abortOverlay",
               "type": {
-                "text": "TransitionEvent"
+                "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"
+                }
               }
             }
           ],
@@ -244,8 +298,9 @@
             {
               "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\""
+                "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"
             },
@@ -255,6 +310,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.",
               "fieldName": "selfManaged"
             },
             {
@@ -290,12 +346,20 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "TooltipProxy",
+          "declaration": {
+            "name": "TooltipProxy",
+            "module": "src/Tooltip.js"
+          }
+        },
         {
           "kind": "custom-element-definition",
-          "name": "sp-tooltip-openable",
+          "name": "tooltip-proxy",
           "declaration": {
-            "name": "TooltipOpenable",
-            "module": "src/Tooltip.ts"
+            "name": "TooltipProxy",
+            "module": "src/Tooltip.js"
           }
         },
         {
@@ -303,7 +367,7 @@
           "name": "Tooltip",
           "declaration": {
             "name": "Tooltip",
-            "module": "src/Tooltip.ts"
+            "module": "src/Tooltip.js"
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/tooltip",
-    "version": "0.33.3-overlay.61+af969dcc2",
+    "version": "0.34.0",
     "publishConfig": {
         "access": "public"
     },
@@ -57,8 +57,8 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.33.3-overlay.61+af969dcc2",
-        "@spectrum-web-components/overlay": "^0.33.3-overlay.61+af969dcc2"
+        "@spectrum-web-components/base": "^0.34.0",
+        "@spectrum-web-components/overlay": "^0.34.0"
     },
     "devDependencies": {
         "@spectrum-css/tooltip": "^4.0.10"
@@ -69,5 +69,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "af969dcc2f8c905648b3e5a5fad982d1f81ee080"
+    "gitHead": "f9b3294d67cdd52b2c36897cdc1c20ceaeb019cf"
 }

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,21 +15,44 @@ export declare class Tooltip extends SpectrumElement {
      * @private
      */
     static instanceCount: number;
+    private _tooltipId;
+    /**
+     * Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.
+     */
     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"}
+     * @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;
+    placement: Placement;
+    private tipElement;
     private _variant;
     get variant(): string;
     set variant(variant: string);
-    private handleOpenOverlay;
-    protected handleCloseOverlay: () => void;
-    protected handleTransitionrun(event: TransitionEvent): void;
-    protected handleTransitionend(event: TransitionEvent): 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;
 }