@spectrum-web-components/tooltip 0.36.0 → 0.37.0

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 (22) hide show
  1. package/custom-elements.json +127 -167
  2. package/package.json +5 -4
  3. package/src/Tooltip.d.ts +14 -37
  4. package/src/Tooltip.dev.js +173 -170
  5. package/src/Tooltip.dev.js.map +3 -3
  6. package/src/Tooltip.js +26 -5
  7. package/src/Tooltip.js.map +3 -3
  8. package/src/spectrum-config.js +120 -17
  9. package/src/spectrum-tooltip.css.dev.js +18 -18
  10. package/src/spectrum-tooltip.css.dev.js.map +1 -1
  11. package/src/spectrum-tooltip.css.js +18 -18
  12. package/src/spectrum-tooltip.css.js.map +1 -1
  13. package/src/tooltip.css.dev.js +22 -19
  14. package/src/tooltip.css.dev.js.map +2 -2
  15. package/src/tooltip.css.js +22 -19
  16. package/src/tooltip.css.js.map +2 -2
  17. package/stories/tooltip.stories.js +27 -16
  18. package/stories/tooltip.stories.js.map +2 -2
  19. package/test/benchmark/test-basic.js +4 -1
  20. package/test/benchmark/test-basic.js.map +2 -2
  21. package/test/tooltip.test.js +65 -56
  22. package/test/tooltip.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -24,19 +24,91 @@
24
24
  {
25
25
  "kind": "class",
26
26
  "description": "",
27
- "name": "TooltipProxy",
28
- "events": [
27
+ "name": "TooltipOpenable",
28
+ "members": [
29
+ {
30
+ "kind": "method",
31
+ "name": "redispatchEvent",
32
+ "return": {
33
+ "type": {
34
+ "text": "void"
35
+ }
36
+ },
37
+ "parameters": [
38
+ {
39
+ "name": "event",
40
+ "type": {
41
+ "text": "Event"
42
+ }
43
+ }
44
+ ]
45
+ },
29
46
  {
30
- "name": "disconnected",
47
+ "kind": "field",
48
+ "name": "tooltip",
31
49
  "type": {
32
- "text": "Event"
50
+ "text": "Tooltip"
51
+ },
52
+ "readonly": true
53
+ },
54
+ {
55
+ "kind": "field",
56
+ "name": "open",
57
+ "type": {
58
+ "text": "boolean"
33
59
  }
60
+ },
61
+ {
62
+ "kind": "field",
63
+ "name": "_open",
64
+ "type": {
65
+ "text": "boolean"
66
+ },
67
+ "privacy": "private",
68
+ "default": "false"
69
+ },
70
+ {
71
+ "kind": "field",
72
+ "name": "placement",
73
+ "type": {
74
+ "text": "Placement"
75
+ },
76
+ "attribute": "placement"
77
+ },
78
+ {
79
+ "kind": "field",
80
+ "name": "_placement",
81
+ "type": {
82
+ "text": "Placement"
83
+ },
84
+ "privacy": "private",
85
+ "default": "'top'"
86
+ },
87
+ {
88
+ "kind": "field",
89
+ "name": "tipElement",
90
+ "type": {
91
+ "text": "HTMLElement"
92
+ },
93
+ "readonly": true
94
+ }
95
+ ],
96
+ "attributes": [
97
+ {
98
+ "name": "open"
99
+ },
100
+ {
101
+ "name": "placement",
102
+ "type": {
103
+ "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
104
+ },
105
+ "fieldName": "placement"
34
106
  }
35
107
  ],
36
108
  "superclass": {
37
109
  "name": "HTMLElement"
38
110
  },
39
- "tagName": "tooltip-proxy",
111
+ "tagName": "sp-tooltip-openable",
40
112
  "customElement": true
41
113
  },
42
114
  {
@@ -54,22 +126,6 @@
54
126
  }
55
127
  ],
56
128
  "members": [
57
- {
58
- "kind": "field",
59
- "name": "instanceCount",
60
- "type": {
61
- "text": "number"
62
- },
63
- "static": true,
64
- "default": "0",
65
- "privacy": "private"
66
- },
67
- {
68
- "kind": "field",
69
- "name": "_tooltipId",
70
- "privacy": "private",
71
- "default": "`sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`"
72
- },
73
129
  {
74
130
  "kind": "field",
75
131
  "name": "selfManaged",
@@ -78,7 +134,7 @@
78
134
  },
79
135
  "privacy": "public",
80
136
  "default": "false",
81
- "description": "Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.",
137
+ "description": "Automatically bind to the parent element of the assigned `slot` or the parent element of the `sp-tooltip`.\nWithout this, you must provide your own `overlay-trigger`.",
82
138
  "attribute": "self-managed"
83
139
  },
84
140
  {
@@ -88,18 +144,8 @@
88
144
  "text": "number"
89
145
  },
90
146
  "privacy": "public",
91
- "default": "6",
92
- "attribute": "offset",
93
- "reflects": true
94
- },
95
- {
96
- "kind": "field",
97
- "name": "hadTooltipId",
98
- "type": {
99
- "text": "boolean"
100
- },
101
- "privacy": "private",
102
- "default": "false"
147
+ "default": "0",
148
+ "attribute": "offset"
103
149
  },
104
150
  {
105
151
  "kind": "field",
@@ -112,14 +158,21 @@
112
158
  "attribute": "open",
113
159
  "reflects": true
114
160
  },
161
+ {
162
+ "kind": "field",
163
+ "name": "overlayElement",
164
+ "type": {
165
+ "text": "Overlay | undefined"
166
+ },
167
+ "privacy": "public"
168
+ },
115
169
  {
116
170
  "kind": "field",
117
171
  "name": "placement",
118
172
  "type": {
119
- "text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\""
173
+ "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
120
174
  },
121
175
  "privacy": "public",
122
- "default": "'top'",
123
176
  "attribute": "placement",
124
177
  "reflects": true
125
178
  },
@@ -129,7 +182,16 @@
129
182
  "type": {
130
183
  "text": "HTMLSpanElement"
131
184
  },
132
- "privacy": "private"
185
+ "privacy": "public"
186
+ },
187
+ {
188
+ "kind": "field",
189
+ "name": "tipPadding",
190
+ "type": {
191
+ "text": "number | undefined"
192
+ },
193
+ "privacy": "public",
194
+ "attribute": "tipPadding"
133
195
  },
134
196
  {
135
197
  "kind": "field",
@@ -149,82 +211,20 @@
149
211
  "privacy": "public",
150
212
  "attribute": "variant"
151
213
  },
152
- {
153
- "kind": "method",
154
- "name": "onOverlayQuery",
155
- "privacy": "public",
156
- "return": {
157
- "type": {
158
- "text": "void"
159
- }
160
- },
161
- "parameters": [
162
- {
163
- "name": "event",
164
- "type": {
165
- "text": "CustomEvent<OverlayDisplayQueryDetail>"
166
- }
167
- }
168
- ]
169
- },
170
214
  {
171
215
  "kind": "field",
172
- "name": "_proxy",
173
- "type": {
174
- "text": "HTMLElement"
175
- },
216
+ "name": "handleOpenOverlay",
176
217
  "privacy": "private"
177
218
  },
178
219
  {
179
- "kind": "method",
180
- "name": "generateProxy",
181
- "privacy": "private",
182
- "return": {
183
- "type": {
184
- "text": "void"
185
- }
186
- }
187
- },
188
- {
189
- "kind": "method",
190
- "name": "overlayWillOpenCallback",
191
- "privacy": "public",
192
- "return": {
193
- "type": {
194
- "text": "void"
195
- }
196
- },
197
- "parameters": [
198
- {
199
- "name": "{\n trigger,\n }",
200
- "type": {
201
- "text": "{\n trigger: HTMLElement;\n }"
202
- }
203
- }
204
- ]
205
- },
206
- {
207
- "kind": "method",
208
- "name": "overlayOpenCancelledCallback",
209
- "privacy": "public",
210
- "return": {
211
- "type": {
212
- "text": "void"
213
- }
214
- },
215
- "parameters": [
216
- {
217
- "name": "{\n trigger,\n }",
218
- "type": {
219
- "text": "{\n trigger: HTMLElement;\n }"
220
- }
221
- }
222
- ]
220
+ "kind": "field",
221
+ "name": "handleCloseOverlay",
222
+ "privacy": "protected"
223
223
  },
224
224
  {
225
225
  "kind": "method",
226
- "name": "overlayCloseCallback",
227
- "privacy": "public",
226
+ "name": "forwardTransitionEvent",
227
+ "privacy": "protected",
228
228
  "return": {
229
229
  "type": {
230
230
  "text": "void"
@@ -232,65 +232,27 @@
232
232
  },
233
233
  "parameters": [
234
234
  {
235
- "name": "{ trigger }",
235
+ "name": "event",
236
236
  "type": {
237
- "text": "{ trigger: HTMLElement }"
237
+ "text": "TransitionEvent"
238
238
  }
239
239
  }
240
240
  ]
241
241
  },
242
- {
243
- "kind": "method",
244
- "name": "removeProxy",
245
- "privacy": "private",
246
- "return": {
247
- "type": {
248
- "text": "void"
249
- }
250
- }
251
- },
252
- {
253
- "kind": "field",
254
- "name": "closeOverlayCallback",
255
- "type": {
256
- "text": "Promise<() => void> | undefined"
257
- },
258
- "privacy": "private"
259
- },
260
242
  {
261
243
  "kind": "field",
262
- "name": "abortOverlay",
244
+ "name": "triggerElement",
263
245
  "type": {
264
- "text": "(cancelled: boolean) => void"
246
+ "text": "HTMLElement"
265
247
  },
266
- "privacy": "private"
267
- },
268
- {
269
- "kind": "field",
270
- "name": "openOverlay",
271
- "privacy": "private"
272
- },
273
- {
274
- "kind": "field",
275
- "name": "closeOverlay",
276
- "privacy": "private"
277
- },
248
+ "privacy": "private",
249
+ "readonly": true
250
+ }
251
+ ],
252
+ "events": [
278
253
  {
279
- "kind": "field",
280
- "name": "previousSlot",
281
254
  "type": {
282
- "text": "string | undefined"
283
- },
284
- "privacy": "private"
285
- },
286
- {
287
- "kind": "method",
288
- "name": "manageTooltip",
289
- "privacy": "private",
290
- "return": {
291
- "type": {
292
- "text": "void"
293
- }
255
+ "text": "TransitionEvent"
294
256
  }
295
257
  }
296
258
  ],
@@ -298,9 +260,8 @@
298
260
  {
299
261
  "name": "placement",
300
262
  "type": {
301
- "text": "\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\""
263
+ "text": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\""
302
264
  },
303
- "default": "'top'",
304
265
  "fieldName": "placement",
305
266
  "attribute": "placement"
306
267
  },
@@ -310,7 +271,7 @@
310
271
  "text": "boolean"
311
272
  },
312
273
  "default": "false",
313
- "description": "Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.",
274
+ "description": "Automatically bind to the parent element of the assigned `slot` or the parent element of the `sp-tooltip`.\nWithout this, you must provide your own `overlay-trigger`.",
314
275
  "fieldName": "selfManaged"
315
276
  },
316
277
  {
@@ -318,7 +279,7 @@
318
279
  "type": {
319
280
  "text": "number"
320
281
  },
321
- "default": "6",
282
+ "default": "0",
322
283
  "fieldName": "offset"
323
284
  },
324
285
  {
@@ -329,6 +290,13 @@
329
290
  "default": "false",
330
291
  "fieldName": "open"
331
292
  },
293
+ {
294
+ "name": "tipPadding",
295
+ "type": {
296
+ "text": "number | undefined"
297
+ },
298
+ "fieldName": "tipPadding"
299
+ },
332
300
  {
333
301
  "name": "variant",
334
302
  "type": {
@@ -346,19 +314,11 @@
346
314
  }
347
315
  ],
348
316
  "exports": [
349
- {
350
- "kind": "js",
351
- "name": "TooltipProxy",
352
- "declaration": {
353
- "name": "TooltipProxy",
354
- "module": "src/Tooltip.js"
355
- }
356
- },
357
317
  {
358
318
  "kind": "custom-element-definition",
359
- "name": "tooltip-proxy",
319
+ "name": "sp-tooltip-openable",
360
320
  "declaration": {
361
- "name": "TooltipProxy",
321
+ "name": "TooltipOpenable",
362
322
  "module": "src/Tooltip.js"
363
323
  }
364
324
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tooltip",
3
- "version": "0.36.0",
3
+ "version": "0.37.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,8 +57,9 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.36.0",
61
- "@spectrum-web-components/overlay": "^0.36.0"
60
+ "@spectrum-web-components/base": "^0.37.0",
61
+ "@spectrum-web-components/overlay": "^0.37.0",
62
+ "@spectrum-web-components/shared": "^0.37.0"
62
63
  },
63
64
  "devDependencies": {
64
65
  "@spectrum-css/tooltip": "^5.1.3"
@@ -69,5 +70,5 @@
69
70
  "./sp-*.js",
70
71
  "./**/*.dev.js"
71
72
  ],
72
- "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
73
+ "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
73
74
  }
package/src/Tooltip.d.ts CHANGED
@@ -1,8 +1,5 @@
1
- import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
- import type { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
3
- export declare class TooltipProxy extends HTMLElement {
4
- disconnectedCallback(): void;
5
- }
1
+ import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
+ import type { Overlay, Placement } from '@spectrum-web-components/overlay';
6
3
  /**
7
4
  * @element sp-tooltip
8
5
  *
@@ -12,47 +9,27 @@ export declare class TooltipProxy extends HTMLElement {
12
9
  export declare class Tooltip extends SpectrumElement {
13
10
  static get styles(): CSSResultArray;
14
11
  /**
15
- * @private
16
- */
17
- static instanceCount: number;
18
- private _tooltipId;
19
- /**
20
- * Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.
12
+ * Automatically bind to the parent element of the assigned `slot` or the parent element of the `sp-tooltip`.
13
+ * Without this, you must provide your own `overlay-trigger`.
21
14
  */
22
15
  selfManaged: boolean;
23
16
  offset: number;
24
- private hadTooltipId;
25
17
  open: boolean;
18
+ overlayElement?: Overlay;
26
19
  /**
27
- * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
20
+ * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
28
21
  * @attr
29
22
  */
30
- placement: Placement;
31
- private tipElement;
23
+ placement?: Placement;
24
+ tipElement: HTMLSpanElement;
25
+ tipPadding?: number;
32
26
  private _variant;
33
27
  get variant(): string;
34
28
  set variant(variant: string);
35
- constructor();
36
- onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
37
- private _proxy;
38
- private generateProxy;
39
- overlayWillOpenCallback({ trigger, }: {
40
- trigger: HTMLElement;
41
- }): void;
42
- overlayOpenCancelledCallback({ trigger, }: {
43
- trigger: HTMLElement;
44
- }): void;
45
- overlayCloseCallback({ trigger }: {
46
- trigger: HTMLElement;
47
- }): void;
48
- private removeProxy;
49
- private closeOverlayCallback?;
50
- private abortOverlay;
51
- private openOverlay;
52
- private closeOverlay;
53
- private previousSlot?;
54
- private manageTooltip;
29
+ private handleOpenOverlay;
30
+ protected handleCloseOverlay: () => void;
31
+ protected forwardTransitionEvent(event: TransitionEvent): void;
32
+ private get triggerElement();
55
33
  render(): TemplateResult;
56
- protected update(changed: PropertyValues<this>): Promise<void>;
57
- protected updated(changed: PropertyValues<this>): void;
34
+ connectedCallback(): void;
58
35
  }