@vaadin/tooltip 24.2.0-beta3 → 24.2.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "24.2.0-beta3",
+  "version": "24.2.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/vaadin-lit-tooltip-overlay.js",
-    "!src/vaadin-lit-tooltip.d.ts",
-    "!src/vaadin-lit-tooltip.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,14 +34,13 @@
     "web-component"
   ],
   "dependencies": {
-    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-beta3",
-    "@vaadin/component-base": "24.2.0-beta3",
-    "@vaadin/overlay": "24.2.0-beta3",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-material-styles": "24.2.0-beta3",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-beta3"
+    "@vaadin/a11y-base": "24.2.0-beta4",
+    "@vaadin/component-base": "24.2.0-beta4",
+    "@vaadin/overlay": "24.2.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-material-styles": "24.2.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "91ea11e7ad706065340acdb93b92316919ce5e69"
+  "gitHead": "04da1e1e5c5713ea45e4b7d659dc6ac6b4604f4c"
 }

package/src/vaadin-tooltip-overlay.js

@@ -6,10 +6,46 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
-import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
+import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const tooltipOverlayStyles = css`
+  :host {
+    z-index: 1100;
+  }
+
+  [part='overlay'] {
+    max-width: 40ch;
+  }
+
+  :host([position^='top'][top-aligned]) [part='overlay'],
+  :host([position^='bottom'][top-aligned]) [part='overlay'] {
+    margin-top: var(--vaadin-tooltip-offset-top, 0);
+  }
+
+  :host([position^='top'][bottom-aligned]) [part='overlay'],
+  :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
+    margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
+  }
+
+  :host([position^='start'][start-aligned]) [part='overlay'],
+  :host([position^='end'][start-aligned]) [part='overlay'] {
+    margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
+  }
+
+  :host([position^='start'][end-aligned]) [part='overlay'],
+  :host([position^='end'][end-aligned]) [part='overlay'] {
+    margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
+  }
+
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 1px dashed;
+    }
+  }
+`;
 
 registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles], {
   moduleId: 'vaadin-tooltip-overlay-styles',
@@ -21,11 +57,12 @@ registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles],
  * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes PositionMixin
  * @mixes ThemableMixin
- * @mixes TooltipOverlayMixin
  * @private
  */
-class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }
@@ -39,6 +76,15 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerE
     `;
   }
 
+  static get properties() {
+    return {
+      position: {
+        type: String,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -49,6 +95,66 @@ class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerE
     this.owner = this.__dataHost;
     this.owner._overlayElement = this;
   }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    this.toggleAttribute('hidden', this.textContent.trim() === '');
+
+    // Copy custom properties from the tooltip
+    if (this.positionTarget && this.owner) {
+      const style = getComputedStyle(this.owner);
+      ['top', 'bottom', 'start', 'end'].forEach((prop) => {
+        this.style.setProperty(
+          `--vaadin-tooltip-offset-${prop}`,
+          style.getPropertyValue(`--vaadin-tooltip-offset-${prop}`),
+        );
+      });
+    }
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _updatePosition() {
+    super._updatePosition();
+
+    if (!this.positionTarget) {
+      return;
+    }
+
+    // Center the tooltip overlay horizontally
+    if (this.position === 'bottom' || this.position === 'top') {
+      const targetRect = this.positionTarget.getBoundingClientRect();
+      const overlayRect = this.$.overlay.getBoundingClientRect();
+
+      const offset = targetRect.width / 2 - overlayRect.width / 2;
+
+      if (this.style.left) {
+        const left = overlayRect.left + offset;
+        if (left > 0) {
+          this.style.left = `${left}px`;
+        }
+      }
+
+      if (this.style.right) {
+        const right = parseFloat(this.style.right) + offset;
+        if (right > 0) {
+          this.style.right = `${right}px`;
+        }
+      }
+    }
+
+    // Center the tooltip overlay vertically
+    if (this.position === 'start' || this.position === 'end') {
+      const targetRect = this.positionTarget.getBoundingClientRect();
+      const overlayRect = this.$.overlay.getBoundingClientRect();
+
+      const offset = targetRect.height / 2 - overlayRect.height / 2;
+      this.style.top = `${overlayRect.top + offset}px`;
+    }
+  }
 }
 
 defineCustomElement(TooltipOverlay);

package/src/vaadin-tooltip.d.ts

@@ -5,10 +5,22 @@
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { TooltipMixin } from './vaadin-tooltip-mixin.js';
 
-export { TooltipPosition } from './vaadin-tooltip-mixin.js';
+export type TooltipPosition =
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'end-bottom'
+  | 'end-top'
+  | 'end'
+  | 'start-bottom'
+  | 'start-top'
+  | 'start'
+  | 'top-end'
+  | 'top-start'
+  | 'top';
 
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
@@ -48,7 +60,117 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Tooltip extends TooltipMixin(ThemePropertyMixin(ControllerMixin(ElementMixin(HTMLElement)))) {}
+declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ControllerMixin(ElementMixin(HTMLElement)))) {
+  /**
+   * Sets the default focus delay to be used by all tooltip instances,
+   * except for those that have focus delay configured using property.
+   */
+  static setDefaultFocusDelay(focusDelay: number): void;
+
+  /**
+   * Sets the default hide delay to be used by all tooltip instances,
+   * except for those that have hide delay configured using property.
+   */
+  static setDefaultHideDelay(hideDelay: number): void;
+
+  /**
+   * Sets the default hover delay to be used by all tooltip instances,
+   * except for those that have hover delay configured using property.
+   */
+  static setDefaultHoverDelay(delay: number): void;
+
+  /**
+   * Element used to link with the `aria-describedby`
+   * attribute. Supports array of multiple elements.
+   * When not set, defaults to `target`.
+   */
+  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+
+  /**
+   * 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>;
+
+  /**
+   * The delay in milliseconds before the tooltip
+   * is opened on keyboard focus, when not in manual mode.
+   * @attr {number} focus-delay
+   */
+  focusDelay: number;
+
+  /**
+   * The id of the element used as a tooltip trigger.
+   * The element should be in the DOM by the time when
+   * the attribute is set, otherwise a warning is shown.
+   */
+  for: string | undefined;
+
+  /**
+   * The delay in milliseconds before the tooltip
+   * is closed on losing hover, when not in manual mode.
+   * On blur, the tooltip is closed immediately.
+   * @attr {number} hide-delay
+   */
+  hideDelay: number;
+
+  /**
+   * The delay in milliseconds before the tooltip
+   * is opened on hover, when not in manual mode.
+   * @attr {number} hover-delay
+   */
+  hoverDelay: number;
+
+  /**
+   * When true, the tooltip is controlled programmatically
+   * instead of reacting to focus and mouse events.
+   */
+  manual: boolean;
+
+  /**
+   * When true, the tooltip is opened programmatically.
+   * Only works if `manual` is set to `true`.
+   */
+  opened: boolean;
+
+  /**
+   * Position of the tooltip with respect to its target.
+   * Supported values: `top-start`, `top`, `top-end`,
+   * `bottom-start`, `bottom`, `bottom-end`, `start-top`,
+   * `start`, `start-bottom`, `end-top`, `end`, `end-bottom`.
+   */
+  position: TooltipPosition;
+
+  /**
+   * 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 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, context?: Record<string, unknown>) => boolean;
+
+  /**
+   * Reference to the element used as a tooltip trigger.
+   * The target must be placed in the same shadow scope.
+   * Defaults to an element referenced with `for`.
+   */
+  target: HTMLElement | undefined;
+
+  /**
+   * String used as a tooltip content.
+   */
+  text: string | null | undefined;
+
+  /**
+   * Function used to generate the tooltip content.
+   * When provided, it overrides the `text` property.
+   * Use the `context` property to provide argument
+   * that can be passed to the generator function.
+   */
+  generator: (context: Record<string, unknown>) => string;
+}
 
 declare global {
   interface HTMLElementTagNameMap {