@vaadin/tooltip - npm Package Compare versions

Comparing version 23.3.0-alpha1 to 23.3.0-alpha2

package.json

 {
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "publishConfig": {
@@ -38,7 +38,7 @@ "access": "public"
     "@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"
   },
@@ -54,3 +54,3 @@ "devDependencies": {
   ],
-  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
+  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
 }

src/vaadin-tooltip-overlay.js

@@ -67,2 +67,13 @@ /**
 
+  /** @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() {
@@ -69,0 +80,0 @@ super.requestContentUpdate();

src/vaadin-tooltip.d.ts

@@ -81,4 +81,5 @@ /**
   /**
-   * 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.
    */
@@ -139,6 +140,7 @@ context: Record<string, unknown>;
    * 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;
 
@@ -163,3 +165,3 @@ /**
    */
-  textGenerator: (context: Record<string, unknown>) => string;
+  generator: (context: Record<string, unknown>) => string;
 }
@@ -166,0 +168,0 @@

src/vaadin-tooltip.js

@@ -92,2 +92,3 @@ /**
         vertical-align="[[__computeVerticalAlign(position)]]"
+        on-mouseleave="__onOverlayMouseLeave"
         modeless
@@ -101,4 +102,5 @@ ></vaadin-tooltip-overlay>
       /**
-       * 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.
        */
@@ -182,3 +184,4 @@ context: {
        * 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`.
@@ -189,3 +192,3 @@ */
         value: () => {
-          return (_target) => true;
+          return (_target, _context) => true;
         },
@@ -218,3 +221,3 @@ },
        */
-      textGenerator: {
+      generator: {
         type: Object,
@@ -245,3 +248,3 @@ },
   static get observers() {
-    return ['__textGeneratorChanged(_overlayElement, textGenerator, context)'];
+    return ['__generatorChanged(_overlayElement, generator, context)'];
   }
@@ -301,10 +304,2 @@
   /** @protected */
-  ready() {
-    super.ready();
-
-    this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay');
-    this._overlayElement.owner = this;
-  }
-
-  /** @protected */
   disconnectedCallback() {
@@ -345,3 +340,3 @@ super.disconnectedCallback();
   __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;
   }
@@ -392,3 +387,6 @@
 
-      this.__targetVisibilityObserver.observe(target);
+      // Wait before observing to avoid Chrome issue.
+      requestAnimationFrame(() => {
+        this.__targetVisibilityObserver.observe(target);
+      });
 
@@ -401,2 +399,6 @@ addValueToAttribute(target, 'aria-describedby', this._uniqueId);
   __onFocusin(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Only open on keyboard focus.
@@ -412,3 +414,3 @@ if (!isKeyboardActive()) {
 
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (!this.__isShouldShow()) {
       return;
@@ -426,2 +428,6 @@ }
   __onFocusout(event) {
+    if (this.manual) {
+      return;
+    }
+
     // Do not close when moving focus within a component.
@@ -454,6 +460,10 @@ if (this.target.contains(event.relatedTarget)) {
   __onMouseEnter() {
-    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target) !== true) {
+    if (this.manual) {
       return;
     }
 
+    if (!this.__isShouldShow()) {
+      return;
+    }
+
     if (this.__hoverInside) {
@@ -472,3 +482,21 @@ // Already hovering inside the element, do nothing.
   /** @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;
@@ -498,2 +526,11 @@
 
+  /** @private */
+  __isShouldShow() {
+    if (typeof this.shouldShow === 'function' && this.shouldShow(this.target, this.context) !== true) {
+      return false;
+    }
+
+    return true;
+  }
+
   /**
@@ -650,9 +687,9 @@ * Schedule opening the tooltip.
   /** @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;
@@ -659,0 +696,0 @@ }

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
@@ -11,3 +11,3 @@ "contributions": {
           "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": [
@@ -118,3 +118,3 @@ {
                 "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": {
@@ -207,3 +207,3 @@ "type": [
                 "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": {
@@ -240,3 +240,3 @@ "type": [
               {
-                "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.",
@@ -243,0 +243,0 @@ "value": {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha1",
+  "version": "23.3.0-alpha2",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "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,
@@ -39,3 +39,3 @@ "attributes": [
               "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": {
@@ -82,3 +82,3 @@ "kind": "expression"
               "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": {
@@ -103,3 +103,3 @@ "kind": "expression"
             {
-              "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.",
@@ -106,0 +106,0 @@ "value": {

No alert changes

Improved metrics

Total package byte prevSize

60576

increased by2.44%

Lines of code

1282

increased by3.39%

Dependency changes

• + Added@vaadin/component-base@23.3.0-alpha2(transitive)

• + Added@vaadin/icon@23.3.0-alpha2(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.3.0-alpha2(transitive)

• + Added@vaadin/vaadin-material-styles@23.3.0-alpha2(transitive)

• + Added@vaadin/vaadin-overlay@23.3.0-alpha2(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.3.0-alpha2(transitive)

• - Removed@vaadin/component-base@23.3.0-alpha1(transitive)

• - Removed@vaadin/icon@23.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@23.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-overlay@23.3.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.3.0-alpha1(transitive)

• Updated@vaadin/component-base@23.3.0-alpha2

• Updated@vaadin/vaadin-lumo-styles@23.3.0-alpha2

• Updated@vaadin/vaadin-material-styles@23.3.0-alpha2

• Updated@vaadin/vaadin-overlay@23.3.0-alpha2

• Updated@vaadin/vaadin-themable-mixin@23.3.0-alpha2