@vaadin/tooltip 25.0.0-alpha14 → 25.0.0-alpha16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha14",
-    "@vaadin/component-base": "25.0.0-alpha14",
-    "@vaadin/overlay": "25.0.0-alpha14",
-    "@vaadin/popover": "25.0.0-alpha14",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha14",
+    "@vaadin/a11y-base": "25.0.0-alpha16",
+    "@vaadin/component-base": "25.0.0-alpha16",
+    "@vaadin/overlay": "25.0.0-alpha16",
+    "@vaadin/popover": "25.0.0-alpha16",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha16",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha14",
-    "@vaadin/test-runner-commands": "25.0.0-alpha14",
+    "@vaadin/chai-plugins": "25.0.0-alpha16",
+    "@vaadin/test-runner-commands": "25.0.0-alpha16",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha14",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha16",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8ebeeeca4b5b6564eff954d6582d0d6760464e51"
+  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
 }

package/src/vaadin-tooltip-mixin.d.ts

@@ -22,7 +22,7 @@ export declare class TooltipMixinClass {
    * attribute. Supports array of multiple elements.
    * When not set, defaults to `target`.
    */
-  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+  ariaTarget: HTMLElement | HTMLElement[] | null | undefined;
 
   /**
    * Object with properties passed to `generator` and
@@ -68,8 +68,9 @@ export declare class TooltipMixinClass {
   manual: boolean;
 
   /**
-   * When true, the tooltip is opened programmatically.
-   * Only works if `manual` is set to `true`.
+   * When true, the tooltip is opened.
+   * In manual mode, this can be set programmatically.
+   * In automatic mode, this is set automatically by internal logic.
    */
   opened: boolean;
 

package/src/vaadin-tooltip-mixin.js

@@ -44,11 +44,6 @@ class TooltipStateController {
     this.host = host;
   }
 
-  /** @private */
-  get openedProp() {
-    return this.host.manual ? 'opened' : '_autoOpened';
-  }
-
   /** @private */
   get focusDelay() {
     const tooltip = this.host;
@@ -114,12 +109,12 @@ class TooltipStateController {
 
   /** @private */
   _isOpened() {
-    return this.host[this.openedProp];
+    return this.host.opened;
   }
 
   /** @private */
   _setOpened(opened) {
-    this.host[this.openedProp] = opened;
+    this.host.opened = opened;
   }
 
   /** @private */
@@ -300,12 +295,15 @@ export const TooltipMixin = (superClass) =>
         },
 
         /**
-         * When true, the tooltip is opened programmatically.
-         * Only works if `manual` is set to `true`.
+         * When true, the tooltip is opened.
+         * In manual mode, this can be set programmatically.
+         * In automatic mode, this is set automatically by internal logic.
          */
         opened: {
           type: Boolean,
           value: false,
+          reflectToAttribute: true,
+          observer: '__openedChanged',
           sync: true,
         },
 
@@ -330,17 +328,6 @@ export const TooltipMixin = (superClass) =>
           type: String,
         },
 
-        /**
-         * Set to true when the overlay is opened using auto-added
-         * event listeners: mouseenter and focusin (keyboard only).
-         * @protected
-         */
-        _autoOpened: {
-          type: Boolean,
-          observer: '__autoOpenedChanged',
-          sync: true,
-        },
-
         /**
          * Element used to link with the `aria-describedby`
          * attribute. When not set, defaults to `target`.
@@ -432,7 +419,7 @@ export const TooltipMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      if (this._autoOpened) {
+      if (this.opened && !this.manual) {
         this._stateController.close(true);
       }
       this._isConnected = false;
@@ -467,7 +454,7 @@ export const TooltipMixin = (superClass) =>
     }
 
     /** @private */
-    __autoOpenedChanged(opened, oldOpened) {
+    __openedChanged(opened, oldOpened) {
       if (opened) {
         document.addEventListener('keydown', this.__onKeyDown, true);
       } else if (oldOpened) {
@@ -530,7 +517,7 @@ export const TooltipMixin = (superClass) =>
 
       this.__focusInside = true;
 
-      if (!this.__isTargetHidden && (!this.__hoverInside || !this._autoOpened)) {
+      if (!this.__isTargetHidden && (!this.__hoverInside || !this.opened)) {
         this._stateController.open({ focus: true });
       }
     }
@@ -555,6 +542,10 @@ export const TooltipMixin = (superClass) =>
 
     /** @private */
     __onKeyDown(event) {
+      if (this.manual) {
+        return;
+      }
+
       if (event.key === 'Escape') {
         event.stopPropagation();
         this._stateController.close(true);
@@ -587,7 +578,7 @@ export const TooltipMixin = (superClass) =>
 
       this.__hoverInside = true;
 
-      if (!this.__isTargetHidden && (!this.__focusInside || !this._autoOpened)) {
+      if (!this.__isTargetHidden && (!this.__focusInside || !this.opened)) {
         this._stateController.open({ hover: true });
       }
     }
@@ -647,6 +638,10 @@ export const TooltipMixin = (superClass) =>
 
     /** @private */
     __onTargetVisibilityChange(isVisible) {
+      if (this.manual) {
+        return;
+      }
+
       const oldHidden = this.__isTargetHidden;
       this.__isTargetHidden = !isVisible;
 
@@ -657,7 +652,7 @@ export const TooltipMixin = (superClass) =>
       }
 
       // Close the overlay when the target is no longer fully visible.
-      if (!isVisible && this._autoOpened) {
+      if (!isVisible && this.opened) {
         this._stateController.close(true);
       }
     }
@@ -680,7 +675,7 @@ export const TooltipMixin = (superClass) =>
     __computeAriaTarget(ariaTarget, target) {
       const isElementNode = (el) => el && el.nodeType === Node.ELEMENT_NODE;
       const isAriaTargetSet = Array.isArray(ariaTarget) ? ariaTarget.some(isElementNode) : ariaTarget;
-      return isAriaTargetSet ? ariaTarget : target;
+      return ariaTarget === null || isAriaTargetSet ? ariaTarget : target;
     }
 
     /** @private */

package/src/vaadin-tooltip.js

@@ -76,7 +76,7 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
         id="overlay"
         .owner="${this}"
         theme="${ifDefined(this._theme)}"
-        .opened="${this._isConnected && (this.manual ? this.opened : this._autoOpened)}"
+        .opened="${this._isConnected && this.opened}"
         .positionTarget="${this.target}"
         .position="${effectivePosition}"
         ?no-horizontal-overlap="${this.__computeNoHorizontalOverlap(effectivePosition)}"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -78,7 +78,7 @@
             },
             {
               "name": "opened",
-              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
               "value": {
                 "type": [
                   "boolean",
@@ -224,7 +224,7 @@
               },
               {
                 "name": "opened",
-                "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+                "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
                 "value": {
                   "type": [
                     "boolean",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha14",
+  "version": "25.0.0-alpha16",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -28,7 +28,7 @@
             },
             {
               "name": "?opened",
-              "description": "When true, the tooltip is opened programmatically.\nOnly works if `manual` is set to `true`.",
+              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
               "value": {
                 "kind": "expression"
               }