@vaadin/tooltip 23.3.0-alpha1 → 23.3.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,11 +35,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
-    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
+    "@vaadin/component-base": "23.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -50,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
+  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
 }

package/src/vaadin-tooltip-overlay.js

@@ -64,6 +64,17 @@ class TooltipOverlay extends PositionMixin(OverlayElement) {
     };
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // When setting `manual` and `opened` attributes, the overlay is already moved to body
+    // by the time when `ready()` callback of the `vaadin-tooltip` is executed by Polymer,
+    // so querySelector() would return null. So we use this workaround to set properties.
+    this.owner = this.__dataHost;
+    this.owner._overlayElement = this;
+  }
+
   requestContentUpdate() {
     super.requestContentUpdate();
 

package/src/vaadin-tooltip.d.ts

@@ -78,8 +78,9 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
   static setDefaultHoverDelay(delay: number): void;
 
   /**
-   * Object with properties passed to `textGenerator`
-   * function to be used for generating tooltip text.
+   * Object with properties passed to `generator` and
+   * `shouldShow` functions for generating tooltip text
+   * or detecting whether to show the tooltip or not.
    */
   context: Record<string, unknown>;
 
@@ -135,10 +136,11 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
   /**
    * Function used to detect whether to show the tooltip based on a condition,
    * called every time the tooltip is about to be shown on hover and focus.
-   * The function accepts a reference to the target element as a parameter.
+   * The function takes two parameters: `target` and `context`, which contain
+   * values of the corresponding tooltip properties at the time of calling.
    * The tooltip is only shown when the function invocation returns `true`.
    */
-  shouldShow: (target: HTMLElement) => boolean;
+  shouldShow: (target: HTMLElement, context?: Record<string, unknown>) => boolean;
 
   /**
    * Reference to the element used as a tooltip trigger.
@@ -158,7 +160,7 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
    * Use the `context` property to provide argument
    * that can be passed to the generator function.
    */
-  textGenerator: (context: Record<string, unknown>) => string;
+  generator: (context: Record<string, unknown>) => string;
 }
 
 declare global {

package/src/vaadin-tooltip.js

@@ -89,6 +89,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         no-vertical-overlap$="[[__computeNoVerticalOverlap(position)]]"
         horizontal-align="[[__computeHorizontalAlign(position)]]"
         vertical-align="[[__computeVerticalAlign(position)]]"
+        on-mouseleave="__onOverlayMouseLeave"
         modeless
       ></vaadin-tooltip-overlay>
     `;
@@ -97,8 +98,9 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   static get properties() {
     return {
       /**
-       * Object with properties passed to `textGenerator`
-       * function to be used for generating tooltip text.
+       * Object with properties passed to `generator` and
+       * `shouldShow` functions for generating tooltip text
+       * or detecting whether to show the tooltip or not.
        */
       context: {
         type: Object,
@@ -177,13 +179,14 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       /**
        * Function used to detect whether to show the tooltip based on a condition,
        * called every time the tooltip is about to be shown on hover and focus.
-       * The function accepts a reference to the target element as a parameter.
+       * The function takes two parameters: `target` and `context`, which contain
+       * values of the corresponding tooltip properties at the time of calling.
        * The tooltip is only shown when the function invocation returns `true`.
        */
       shouldShow: {
         type: Object,
         value: () => {
-          return (_target) => true;
+          return (_target, _context) => true;
         },
       },
 
@@ -211,7 +214,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        * Use the `context` property to provide argument
        * that can be passed to the generator function.
        */
-      textGenerator: {
+      generator: {
         type: Object,
       },
 
@@ -237,7 +240,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   static get observers() {
-    return ['__textGeneratorChanged(_overlayElement, textGenerator, context)'];
+    return ['__generatorChanged(_overlayElement, generator, context)'];
   }
 
   /**
@@ -291,14 +294,6 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     );
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay');
-    this._overlayElement.owner = this;
-  }
-
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -335,7 +330,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   __tooltipRenderer(root) {
-    root.textContent = typeof this.textGenerator === 'function' ? this.textGenerator(this.context) : this.text;
+    root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
   }
 
   /** @private */
@@ -381,7 +376,10 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       target.addEventListener('focusout', this.__onFocusout);
       target.addEventListener('mousedown', this.__onMouseDown);
 
-      this.__targetVisibilityObserver.observe(target);
+      // Wait before observing to avoid Chrome issue.
+      requestAnimationFrame(() => {
+        this.__targetVisibilityObserver.observe(target);
+      });
 
       addValueToAttribute(target, 'aria-describedby', this._uniqueId);
     }
@@ -389,6 +387,10 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   __onFocusin(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Only open on keyboard focus.
     if (!isKeyboardActive()) {
       return;
@@ -399,7 +401,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       return;
     }
 
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (!this.__isShouldShow()) {
       return;
     }
 
@@ -412,6 +414,10 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   __onFocusout(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Do not close when moving focus within a component.
     if (this.target.contains(event.relatedTarget)) {
       return;
@@ -439,7 +445,11 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
   /** @private */
   __onMouseEnter() {
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (this.manual) {
+      return;
+    }
+
+    if (!this.__isShouldShow()) {
       return;
     }
 
@@ -456,7 +466,25 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __onMouseLeave() {
+  __onMouseLeave(event) {
+    if (event.relatedTarget !== this._overlayElement) {
+      this.__handleMouseLeave();
+    }
+  }
+
+  /** @private */
+  __onOverlayMouseLeave(event) {
+    if (event.relatedTarget !== this.target) {
+      this.__handleMouseLeave();
+    }
+  }
+
+  /** @private */
+  __handleMouseLeave() {
+    if (this.manual) {
+      return;
+    }
+
     this.__hoverInside = false;
 
     if (!this.__focusInside) {
@@ -481,6 +509,15 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     }
   }
 
+  /** @private */
+  __isShouldShow() {
+    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target, this.context) !== true) {
+      return false;
+    }
+
+    return true;
+  }
+
   /**
    * Schedule opening the tooltip.
    * @param {boolean} immediate
@@ -632,13 +669,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __textGeneratorChanged(overlayElement, textGenerator, context) {
+  __generatorChanged(overlayElement, generator, context) {
     if (overlayElement) {
-      if (textGenerator !== this.__oldTextGenerator || context !== this.__oldContext) {
+      if (generator !== this.__oldTextGenerator || context !== this.__oldContext) {
         overlayElement.requestContentUpdate();
       }
 
-      this.__oldTextGenerator = textGenerator;
+      this.__oldTextGenerator = generator;
       this.__oldContext = context;
     }
   }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "focus-delay",
@@ -114,7 +114,7 @@
             "properties": [
               {
                 "name": "context",
-                "description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
+                "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
                 "value": {
                   "type": [
                     "Object",
@@ -202,7 +202,7 @@
               },
               {
                 "name": "shouldShow",
-                "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
+                "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
                 "value": {
                   "type": [
                     "Object",
@@ -234,7 +234,7 @@
                 }
               },
               {
-                "name": "textGenerator",
+                "name": "generator",
                 "description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
                 "value": {
                   "type": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -35,7 +35,7 @@
             },
             {
               "name": ".context",
-              "description": "Object with properties passed to `textGenerator`\nfunction to be used for generating tooltip text.",
+              "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
               "value": {
                 "kind": "expression"
               }
@@ -77,7 +77,7 @@
             },
             {
               "name": ".shouldShow",
-              "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function accepts a reference to the target element as a parameter.\nThe tooltip is only shown when the function invocation returns `true`.",
+              "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
               "value": {
                 "kind": "expression"
               }
@@ -97,7 +97,7 @@
               }
             },
             {
-              "name": ".textGenerator",
+              "name": ".generator",
               "description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
               "value": {
                 "kind": "expression"