@vaadin/tooltip 24.0.0-alpha1 → 24.0.0-alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +7 -7
  2. package/src/vaadin-tooltip-overlay.js +4 -1
  3. package/src/vaadin-tooltip.d.ts +3 -2
  4. package/src/vaadin-tooltip.js +45 -29
  5. package/web-types.json +24 -2
  6. package/web-types.lit.json +9 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/tooltip",
3
- "version": "24.0.0-alpha1",
3
+ "version": "24.0.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,11 +35,11 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@polymer/polymer": "^3.0.0",
38
- "@vaadin/component-base": "24.0.0-alpha1",
39
- "@vaadin/overlay": "24.0.0-alpha1",
40
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
41
- "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
42
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
38
+ "@vaadin/component-base": "24.0.0-alpha10",
39
+ "@vaadin/overlay": "24.0.0-alpha10",
40
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
41
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
42
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@esm-bundle/chai": "^4.3.4",
@@ -50,5 +50,5 @@
50
50
  "web-types.json",
51
51
  "web-types.lit.json"
52
52
  ],
53
- "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
53
+ "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
54
54
  }
package/src/vaadin-tooltip-overlay.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2022 Vaadin Ltd.
3
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
@@ -54,6 +54,9 @@ class TooltipOverlay extends PositionMixin(Overlay) {
54
54
  if (!memoizedTemplate) {
55
55
  memoizedTemplate = super.template.cloneNode(true);
56
56
  memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
57
+
58
+ // Remove whitespace text nodes around the content slot to allow "white-space: pre"
59
+ memoizedTemplate.content.querySelector('[part~="content"]').innerHTML = '<slot></slot>';
57
60
  }
58
61
 
59
62
  return memoizedTemplate;
package/src/vaadin-tooltip.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2022 Vaadin Ltd.
3
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
7
+ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
7
8
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
8
9
 
9
10
  export type TooltipPosition =
@@ -58,7 +59,7 @@ export type TooltipPosition =
58
59
  *
59
60
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
60
61
  */
61
- declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
62
+ declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
62
63
  /**
63
64
  * Sets the default focus delay to be used by all tooltip instances,
64
65
  * except for those that have focus delay configured using property.
package/src/vaadin-tooltip.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2022 Vaadin Ltd.
3
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-tooltip-overlay.js';
@@ -8,10 +8,11 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
8
8
  import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
9
9
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
10
  import { isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
11
+ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
11
12
  import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
12
13
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
13
14
 
14
- const DEFAULT_DELAY = 0;
15
+ const DEFAULT_DELAY = 500;
15
16
 
16
17
  let defaultFocusDelay = DEFAULT_DELAY;
17
18
  let defaultHoverDelay = DEFAULT_DELAY;
@@ -31,6 +32,29 @@ class TooltipStateController {
31
32
  this.host = host;
32
33
  }
33
34
 
35
+ /** @private */
36
+ get openedProp() {
37
+ return this.host.manual ? 'opened' : '_autoOpened';
38
+ }
39
+
40
+ /** @private */
41
+ get focusDelay() {
42
+ const tooltip = this.host;
43
+ return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
44
+ }
45
+
46
+ /** @private */
47
+ get hoverDelay() {
48
+ const tooltip = this.host;
49
+ return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
50
+ }
51
+
52
+ /** @private */
53
+ get hideDelay() {
54
+ const tooltip = this.host;
55
+ return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
56
+ }
57
+
34
58
  /**
35
59
  * Schedule opening the tooltip.
36
60
  * @param {Object} options
@@ -68,29 +92,6 @@ class TooltipStateController {
68
92
  }
69
93
  }
70
94
 
71
- /** @private */
72
- get openedProp() {
73
- return this.host.manual ? 'opened' : '_autoOpened';
74
- }
75
-
76
- /** @private */
77
- get focusDelay() {
78
- const tooltip = this.host;
79
- return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
80
- }
81
-
82
- /** @private */
83
- get hoverDelay() {
84
- const tooltip = this.host;
85
- return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
86
- }
87
-
88
- /** @private */
89
- get hideDelay() {
90
- const tooltip = this.host;
91
- return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
92
- }
93
-
94
95
  /** @private */
95
96
  _isOpened() {
96
97
  return this.host[this.openedProp];
@@ -231,9 +232,10 @@ class TooltipStateController {
231
232
  *
232
233
  * @extends HTMLElement
233
234
  * @mixes ElementMixin
235
+ * @mixes OverlayClassMixin
234
236
  * @mixes ThemePropertyMixin
235
237
  */
236
- class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
238
+ class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))) {
237
239
  static get is() {
238
240
  return 'vaadin-tooltip';
239
241
  }
@@ -410,9 +412,6 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
410
412
  computed: '__computePosition(position, _position)',
411
413
  },
412
414
 
413
- /** @protected */
414
- _overlayElement: Object,
415
-
416
415
  /** @private */
417
416
  __isTargetHidden: {
418
417
  type: Boolean,
@@ -472,6 +471,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
472
471
  this.__onMouseEnter = this.__onMouseEnter.bind(this);
473
472
  this.__onMouseLeave = this.__onMouseLeave.bind(this);
474
473
  this.__onKeyDown = this.__onKeyDown.bind(this);
474
+ this.__onOverlayOpen = this.__onOverlayOpen.bind(this);
475
475
 
476
476
  this.__targetVisibilityObserver = new IntersectionObserver(
477
477
  ([entry]) => {
@@ -488,6 +488,8 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
488
488
  super.connectedCallback();
489
489
 
490
490
  this._isConnected = true;
491
+
492
+ document.body.addEventListener('vaadin-overlay-open', this.__onOverlayOpen);
491
493
  }
492
494
 
493
495
  /** @protected */
@@ -498,6 +500,8 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
498
500
  this._stateController.close(true);
499
501
  }
500
502
  this._isConnected = false;
503
+
504
+ document.body.removeEventListener('vaadin-overlay-open', this.__onOverlayOpen);
501
505
  }
502
506
 
503
507
  /** @private */
@@ -694,6 +698,18 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
694
698
  }
695
699
  }
696
700
 
701
+ /** @private */
702
+ __onOverlayOpen() {
703
+ if (this.manual) {
704
+ return;
705
+ }
706
+
707
+ // Close tooltip if another overlay is opened on top of the tooltip's overlay
708
+ if (this._overlayElement.opened && !this._overlayElement._last) {
709
+ this._stateController.close(true);
710
+ }
711
+ }
712
+
697
713
  /** @private */
698
714
  __onTargetVisibilityChange(isVisible) {
699
715
  const oldHidden = this.__isTargetHidden;
package/web-types.json CHANGED
@@ -1,15 +1,26 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tooltip",
4
- "version": "24.0.0-alpha1",
4
+ "version": "24.0.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-tooltip",
11
- "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/24.0.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.",
11
+ "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/24.0.0-alpha10/#/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.",
12
12
  "attributes": [
13
+ {
14
+ "name": "overlay-class",
15
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
16
+ "value": {
17
+ "type": [
18
+ "string",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
13
24
  {
14
25
  "name": "focus-delay",
15
26
  "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
@@ -112,6 +123,17 @@
112
123
  ],
113
124
  "js": {
114
125
  "properties": [
126
+ {
127
+ "name": "overlayClass",
128
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
129
+ "value": {
130
+ "type": [
131
+ "string",
132
+ "null",
133
+ "undefined"
134
+ ]
135
+ }
136
+ },
115
137
  {
116
138
  "name": "context",
117
139
  "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/tooltip",
4
- "version": "24.0.0-alpha1",
4
+ "version": "24.0.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-tooltip",
19
- "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/24.0.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.",
19
+ "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/24.0.0-alpha10/#/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.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -33,6 +33,13 @@
33
33
  "kind": "expression"
34
34
  }
35
35
  },
36
+ {
37
+ "name": ".overlayClass",
38
+ "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
36
43
  {
37
44
  "name": ".context",
38
45
  "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",