@vaadin/tooltip 24.3.0-alpha1 → 24.3.0-alpha3

package/src/vaadin-tooltip-overlay-mixin.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+
+/**
+ * A mixin providing common tooltip overlay functionality.
+ *
+ * @polymerMixin
+ * @mixes PositionMixin
+ * @mixes OverlayMixin
+ */
+export const TooltipOverlayMixin = (superClass) =>
+  class TooltipOverlayMixinClass extends PositionMixin(OverlayMixin(superClass)) {
+    static get properties() {
+      return {
+        position: {
+          type: String,
+          reflectToAttribute: true,
+        },
+      };
+    }
+
+    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`;
+      }
+    }
+  };

package/src/vaadin-tooltip-overlay-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const tooltipOverlayStyles: CSSResult;

package/src/vaadin-tooltip-overlay-styles.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export 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;
+    }
+  }
+`;

package/src/vaadin-tooltip-overlay.js

@@ -6,46 +6,10 @@
 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 { 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;
-    }
-  }
-`;
+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';
 
 registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles], {
   moduleId: 'vaadin-tooltip-overlay-styles',
@@ -57,12 +21,11 @@ registerStyles('vaadin-tooltip-overlay', [overlayStyles, tooltipOverlayStyles],
  * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes PositionMixin
  * @mixes ThemableMixin
+ * @mixes TooltipOverlayMixin
  * @private
  */
-class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }
@@ -76,15 +39,6 @@ class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(P
     `;
   }
 
-  static get properties() {
-    return {
-      position: {
-        type: String,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
   /** @protected */
   ready() {
     super.ready();
@@ -95,66 +49,6 @@ class TooltipOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(P
     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,22 +5,10 @@
  */
 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 type TooltipPosition =
-  | 'bottom-end'
-  | 'bottom-start'
-  | 'bottom'
-  | 'end-bottom'
-  | 'end-top'
-  | 'end'
-  | 'start-bottom'
-  | 'start-top'
-  | 'start'
-  | 'top-end'
-  | 'top-start'
-  | 'top';
+export { TooltipPosition } from './vaadin-tooltip-mixin.js';
 
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
@@ -60,117 +48,7 @@ export type TooltipPosition =
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-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 class Tooltip extends TooltipMixin(ThemePropertyMixin(ControllerMixin(ElementMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {