@spectrum-web-components/tooltip 0.34.1-rc.0 → 0.35.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.
- package/custom-elements.json +153 -81
- package/package.json +5 -5
- package/src/Tooltip.d.ts +36 -10
- package/src/Tooltip.dev.js +166 -102
- package/src/Tooltip.dev.js.map +3 -3
- package/src/Tooltip.js +5 -25
- package/src/Tooltip.js.map +3 -3
- package/src/spectrum-config.js +17 -120
- package/src/spectrum-tooltip.css.dev.js +20 -20
- package/src/spectrum-tooltip.css.dev.js.map +1 -1
- package/src/spectrum-tooltip.css.js +20 -20
- package/src/spectrum-tooltip.css.js.map +1 -1
- package/src/tooltip.css.dev.js +21 -24
- package/src/tooltip.css.dev.js.map +2 -2
- package/src/tooltip.css.js +21 -24
- package/src/tooltip.css.js.map +2 -2
- package/stories/tooltip.stories.js +17 -13
- package/stories/tooltip.stories.js.map +2 -2
- package/test/tooltip.test.js +57 -21
- package/test/tooltip.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tooltip.
|
|
7
|
+
"path": "sp-tooltip.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,71 +19,24 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Tooltip.
|
|
22
|
+
"path": "src/Tooltip.js",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
26
|
"description": "",
|
|
27
|
-
"name": "
|
|
28
|
-
"
|
|
27
|
+
"name": "TooltipProxy",
|
|
28
|
+
"events": [
|
|
29
29
|
{
|
|
30
|
-
"
|
|
31
|
-
"name": "open",
|
|
30
|
+
"name": "disconnected",
|
|
32
31
|
"type": {
|
|
33
|
-
"text": "
|
|
32
|
+
"text": "Event"
|
|
34
33
|
}
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"kind": "field",
|
|
38
|
-
"name": "_open",
|
|
39
|
-
"type": {
|
|
40
|
-
"text": "boolean"
|
|
41
|
-
},
|
|
42
|
-
"privacy": "private",
|
|
43
|
-
"default": "false"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"kind": "field",
|
|
47
|
-
"name": "placement",
|
|
48
|
-
"type": {
|
|
49
|
-
"text": "Placement"
|
|
50
|
-
},
|
|
51
|
-
"attribute": "placement"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"kind": "field",
|
|
55
|
-
"name": "_placement",
|
|
56
|
-
"type": {
|
|
57
|
-
"text": "Placement"
|
|
58
|
-
},
|
|
59
|
-
"privacy": "private",
|
|
60
|
-
"default": "'top'"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"kind": "field",
|
|
64
|
-
"name": "tipElement",
|
|
65
|
-
"type": {
|
|
66
|
-
"text": "HTMLElement"
|
|
67
|
-
},
|
|
68
|
-
"readonly": true
|
|
69
|
-
}
|
|
70
|
-
],
|
|
71
|
-
"attributes": [
|
|
72
|
-
{
|
|
73
|
-
"name": "open"
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
"name": "placement",
|
|
77
|
-
"type": {
|
|
78
|
-
"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\""
|
|
79
|
-
},
|
|
80
|
-
"fieldName": "placement"
|
|
81
34
|
}
|
|
82
35
|
],
|
|
83
36
|
"superclass": {
|
|
84
37
|
"name": "HTMLElement"
|
|
85
38
|
},
|
|
86
|
-
"tagName": "
|
|
39
|
+
"tagName": "tooltip-proxy",
|
|
87
40
|
"customElement": true
|
|
88
41
|
},
|
|
89
42
|
{
|
|
@@ -101,6 +54,22 @@
|
|
|
101
54
|
}
|
|
102
55
|
],
|
|
103
56
|
"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
|
+
},
|
|
104
73
|
{
|
|
105
74
|
"kind": "field",
|
|
106
75
|
"name": "selfManaged",
|
|
@@ -123,6 +92,15 @@
|
|
|
123
92
|
"attribute": "offset",
|
|
124
93
|
"reflects": true
|
|
125
94
|
},
|
|
95
|
+
{
|
|
96
|
+
"kind": "field",
|
|
97
|
+
"name": "hadTooltipId",
|
|
98
|
+
"type": {
|
|
99
|
+
"text": "boolean"
|
|
100
|
+
},
|
|
101
|
+
"privacy": "private",
|
|
102
|
+
"default": "false"
|
|
103
|
+
},
|
|
126
104
|
{
|
|
127
105
|
"kind": "field",
|
|
128
106
|
"name": "open",
|
|
@@ -138,9 +116,10 @@
|
|
|
138
116
|
"kind": "field",
|
|
139
117
|
"name": "placement",
|
|
140
118
|
"type": {
|
|
141
|
-
"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\""
|
|
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\""
|
|
142
120
|
},
|
|
143
121
|
"privacy": "public",
|
|
122
|
+
"default": "'top'",
|
|
144
123
|
"attribute": "placement",
|
|
145
124
|
"reflects": true
|
|
146
125
|
},
|
|
@@ -150,7 +129,7 @@
|
|
|
150
129
|
"type": {
|
|
151
130
|
"text": "HTMLSpanElement"
|
|
152
131
|
},
|
|
153
|
-
"privacy": "
|
|
132
|
+
"privacy": "private"
|
|
154
133
|
},
|
|
155
134
|
{
|
|
156
135
|
"kind": "field",
|
|
@@ -170,20 +149,46 @@
|
|
|
170
149
|
"privacy": "public",
|
|
171
150
|
"attribute": "variant"
|
|
172
151
|
},
|
|
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
|
+
},
|
|
173
170
|
{
|
|
174
171
|
"kind": "field",
|
|
175
|
-
"name": "
|
|
172
|
+
"name": "_proxy",
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "HTMLElement"
|
|
175
|
+
},
|
|
176
176
|
"privacy": "private"
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
|
-
"kind": "
|
|
180
|
-
"name": "
|
|
181
|
-
"privacy": "
|
|
179
|
+
"kind": "method",
|
|
180
|
+
"name": "generateProxy",
|
|
181
|
+
"privacy": "private",
|
|
182
|
+
"return": {
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "void"
|
|
185
|
+
}
|
|
186
|
+
}
|
|
182
187
|
},
|
|
183
188
|
{
|
|
184
189
|
"kind": "method",
|
|
185
|
-
"name": "
|
|
186
|
-
"privacy": "
|
|
190
|
+
"name": "overlayWillOpenCallback",
|
|
191
|
+
"privacy": "public",
|
|
187
192
|
"return": {
|
|
188
193
|
"type": {
|
|
189
194
|
"text": "void"
|
|
@@ -191,17 +196,17 @@
|
|
|
191
196
|
},
|
|
192
197
|
"parameters": [
|
|
193
198
|
{
|
|
194
|
-
"name": "
|
|
199
|
+
"name": "{\n trigger,\n }",
|
|
195
200
|
"type": {
|
|
196
|
-
"text": "
|
|
201
|
+
"text": "{\n trigger: HTMLElement;\n }"
|
|
197
202
|
}
|
|
198
203
|
}
|
|
199
204
|
]
|
|
200
205
|
},
|
|
201
206
|
{
|
|
202
207
|
"kind": "method",
|
|
203
|
-
"name": "
|
|
204
|
-
"privacy": "
|
|
208
|
+
"name": "overlayOpenCancelledCallback",
|
|
209
|
+
"privacy": "public",
|
|
205
210
|
"return": {
|
|
206
211
|
"type": {
|
|
207
212
|
"text": "void"
|
|
@@ -209,25 +214,83 @@
|
|
|
209
214
|
},
|
|
210
215
|
"parameters": [
|
|
211
216
|
{
|
|
212
|
-
"name": "
|
|
217
|
+
"name": "{\n trigger,\n }",
|
|
213
218
|
"type": {
|
|
214
|
-
"text": "
|
|
219
|
+
"text": "{\n trigger: HTMLElement;\n }"
|
|
215
220
|
}
|
|
216
221
|
}
|
|
217
222
|
]
|
|
218
|
-
}
|
|
219
|
-
],
|
|
220
|
-
"events": [
|
|
223
|
+
},
|
|
221
224
|
{
|
|
222
|
-
"
|
|
223
|
-
"
|
|
224
|
-
|
|
225
|
+
"kind": "method",
|
|
226
|
+
"name": "overlayCloseCallback",
|
|
227
|
+
"privacy": "public",
|
|
228
|
+
"return": {
|
|
229
|
+
"type": {
|
|
230
|
+
"text": "void"
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
"parameters": [
|
|
234
|
+
{
|
|
235
|
+
"name": "{ trigger }",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "{ trigger: HTMLElement }"
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
]
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "method",
|
|
244
|
+
"name": "removeProxy",
|
|
245
|
+
"privacy": "private",
|
|
246
|
+
"return": {
|
|
247
|
+
"type": {
|
|
248
|
+
"text": "void"
|
|
249
|
+
}
|
|
225
250
|
}
|
|
226
251
|
},
|
|
227
252
|
{
|
|
228
|
-
"
|
|
253
|
+
"kind": "field",
|
|
254
|
+
"name": "closeOverlayCallback",
|
|
255
|
+
"type": {
|
|
256
|
+
"text": "Promise<() => void> | undefined"
|
|
257
|
+
},
|
|
258
|
+
"privacy": "private"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"kind": "field",
|
|
262
|
+
"name": "abortOverlay",
|
|
263
|
+
"type": {
|
|
264
|
+
"text": "(cancelled: boolean) => void"
|
|
265
|
+
},
|
|
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
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"kind": "field",
|
|
280
|
+
"name": "previousSlot",
|
|
229
281
|
"type": {
|
|
230
|
-
"text": "
|
|
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
|
+
}
|
|
231
294
|
}
|
|
232
295
|
}
|
|
233
296
|
],
|
|
@@ -235,8 +298,9 @@
|
|
|
235
298
|
{
|
|
236
299
|
"name": "placement",
|
|
237
300
|
"type": {
|
|
238
|
-
"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\""
|
|
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\""
|
|
239
302
|
},
|
|
303
|
+
"default": "'top'",
|
|
240
304
|
"fieldName": "placement",
|
|
241
305
|
"attribute": "placement"
|
|
242
306
|
},
|
|
@@ -282,12 +346,20 @@
|
|
|
282
346
|
}
|
|
283
347
|
],
|
|
284
348
|
"exports": [
|
|
349
|
+
{
|
|
350
|
+
"kind": "js",
|
|
351
|
+
"name": "TooltipProxy",
|
|
352
|
+
"declaration": {
|
|
353
|
+
"name": "TooltipProxy",
|
|
354
|
+
"module": "src/Tooltip.js"
|
|
355
|
+
}
|
|
356
|
+
},
|
|
285
357
|
{
|
|
286
358
|
"kind": "custom-element-definition",
|
|
287
|
-
"name": "
|
|
359
|
+
"name": "tooltip-proxy",
|
|
288
360
|
"declaration": {
|
|
289
|
-
"name": "
|
|
290
|
-
"module": "src/Tooltip.
|
|
361
|
+
"name": "TooltipProxy",
|
|
362
|
+
"module": "src/Tooltip.js"
|
|
291
363
|
}
|
|
292
364
|
},
|
|
293
365
|
{
|
|
@@ -295,7 +367,7 @@
|
|
|
295
367
|
"name": "Tooltip",
|
|
296
368
|
"declaration": {
|
|
297
369
|
"name": "Tooltip",
|
|
298
|
-
"module": "src/Tooltip.
|
|
370
|
+
"module": "src/Tooltip.js"
|
|
299
371
|
}
|
|
300
372
|
}
|
|
301
373
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.35.0",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.35.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@spectrum-css/tooltip": "^
|
|
64
|
+
"@spectrum-css/tooltip": "^5.0.42"
|
|
65
65
|
},
|
|
66
66
|
"types": "./src/index.d.ts",
|
|
67
67
|
"customElements": "custom-elements.json",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
73
73
|
}
|
package/src/Tooltip.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
-
import type { Placement } from '@spectrum-web-components/overlay';
|
|
3
|
-
|
|
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
|
+
}
|
|
4
6
|
/**
|
|
5
7
|
* @element sp-tooltip
|
|
6
8
|
*
|
|
@@ -9,24 +11,48 @@ import '@spectrum-web-components/overlay/sp-overlay.js';
|
|
|
9
11
|
*/
|
|
10
12
|
export declare class Tooltip extends SpectrumElement {
|
|
11
13
|
static get styles(): CSSResultArray;
|
|
14
|
+
/**
|
|
15
|
+
* @private
|
|
16
|
+
*/
|
|
17
|
+
static instanceCount: number;
|
|
18
|
+
private _tooltipId;
|
|
12
19
|
/**
|
|
13
20
|
* Automatically bind to the parent element's hover interaction. Without this, you must provide your own `overlay-trigger`.
|
|
14
21
|
*/
|
|
15
22
|
selfManaged: boolean;
|
|
16
23
|
offset: number;
|
|
24
|
+
private hadTooltipId;
|
|
17
25
|
open: boolean;
|
|
18
26
|
/**
|
|
19
|
-
* @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"}
|
|
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
28
|
* @attr
|
|
21
29
|
*/
|
|
22
|
-
placement
|
|
23
|
-
tipElement
|
|
30
|
+
placement: Placement;
|
|
31
|
+
private tipElement;
|
|
24
32
|
private _variant;
|
|
25
33
|
get variant(): string;
|
|
26
34
|
set variant(variant: string);
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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;
|
|
31
55
|
render(): TemplateResult;
|
|
56
|
+
protected update(changed: PropertyValues<this>): Promise<void>;
|
|
57
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
32
58
|
}
|