@spectrum-web-components/tooltip 0.35.0 → 0.35.1-rc.15

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 (20) hide show
  1. package/custom-elements.json +100 -157
  2. package/package.json +4 -4
  3. package/src/Tooltip.d.ts +11 -36
  4. package/src/Tooltip.dev.js +108 -168
  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 +19 -19
  10. package/src/spectrum-tooltip.css.dev.js.map +1 -1
  11. package/src/spectrum-tooltip.css.js +19 -19
  12. package/src/spectrum-tooltip.css.js.map +1 -1
  13. package/src/tooltip.css.dev.js +23 -20
  14. package/src/tooltip.css.dev.js.map +2 -2
  15. package/src/tooltip.css.js +23 -20
  16. package/src/tooltip.css.js.map +2 -2
  17. package/stories/tooltip.stories.js +15 -16
  18. package/stories/tooltip.stories.js.map +2 -2
  19. package/test/tooltip.test.js +24 -58
  20. 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.js",
7
+ "path": "sp-tooltip.ts",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,24 +19,71 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "src/Tooltip.js",
22
+ "path": "src/Tooltip.ts",
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
26
26
  "description": "",
27
- "name": "TooltipProxy",
28
- "events": [
27
+ "name": "TooltipOpenable",
28
+ "members": [
29
29
  {
30
- "name": "disconnected",
30
+ "kind": "field",
31
+ "name": "open",
31
32
  "type": {
32
- "text": "Event"
33
+ "text": "boolean"
33
34
  }
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"
34
81
  }
35
82
  ],
36
83
  "superclass": {
37
84
  "name": "HTMLElement"
38
85
  },
39
- "tagName": "tooltip-proxy",
86
+ "tagName": "sp-tooltip-openable",
40
87
  "customElement": true
41
88
  },
42
89
  {
@@ -54,22 +101,6 @@
54
101
  }
55
102
  ],
56
103
  "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
104
  {
74
105
  "kind": "field",
75
106
  "name": "selfManaged",
@@ -88,18 +119,8 @@
88
119
  "text": "number"
89
120
  },
90
121
  "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"
122
+ "default": "0",
123
+ "attribute": "offset"
103
124
  },
104
125
  {
105
126
  "kind": "field",
@@ -116,10 +137,9 @@
116
137
  "kind": "field",
117
138
  "name": "placement",
118
139
  "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\""
140
+ "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\""
120
141
  },
121
142
  "privacy": "public",
122
- "default": "'top'",
123
143
  "attribute": "placement",
124
144
  "reflects": true
125
145
  },
@@ -129,7 +149,16 @@
129
149
  "type": {
130
150
  "text": "HTMLSpanElement"
131
151
  },
132
- "privacy": "private"
152
+ "privacy": "public"
153
+ },
154
+ {
155
+ "kind": "field",
156
+ "name": "tipPadding",
157
+ "type": {
158
+ "text": "number | undefined"
159
+ },
160
+ "privacy": "public",
161
+ "attribute": "tipPadding"
133
162
  },
134
163
  {
135
164
  "kind": "field",
@@ -149,64 +178,20 @@
149
178
  "privacy": "public",
150
179
  "attribute": "variant"
151
180
  },
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
181
  {
171
182
  "kind": "field",
172
- "name": "_proxy",
173
- "type": {
174
- "text": "HTMLElement"
175
- },
183
+ "name": "handleOpenOverlay",
176
184
  "privacy": "private"
177
185
  },
178
186
  {
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
- ]
187
+ "kind": "field",
188
+ "name": "handleCloseOverlay",
189
+ "privacy": "protected"
205
190
  },
206
191
  {
207
192
  "kind": "method",
208
- "name": "overlayOpenCancelledCallback",
209
- "privacy": "public",
193
+ "name": "handleTransitionrun",
194
+ "privacy": "protected",
210
195
  "return": {
211
196
  "type": {
212
197
  "text": "void"
@@ -214,17 +199,17 @@
214
199
  },
215
200
  "parameters": [
216
201
  {
217
- "name": "{\n trigger,\n }",
202
+ "name": "event",
218
203
  "type": {
219
- "text": "{\n trigger: HTMLElement;\n }"
204
+ "text": "TransitionEvent"
220
205
  }
221
206
  }
222
207
  ]
223
208
  },
224
209
  {
225
210
  "kind": "method",
226
- "name": "overlayCloseCallback",
227
- "privacy": "public",
211
+ "name": "handleTransitionend",
212
+ "privacy": "protected",
228
213
  "return": {
229
214
  "type": {
230
215
  "text": "void"
@@ -232,65 +217,25 @@
232
217
  },
233
218
  "parameters": [
234
219
  {
235
- "name": "{ trigger }",
220
+ "name": "event",
236
221
  "type": {
237
- "text": "{ trigger: HTMLElement }"
222
+ "text": "TransitionEvent"
238
223
  }
239
224
  }
240
225
  ]
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
- },
226
+ }
227
+ ],
228
+ "events": [
260
229
  {
261
- "kind": "field",
262
- "name": "abortOverlay",
230
+ "name": "transitionrun",
263
231
  "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"
232
+ "text": "TransitionEvent"
233
+ }
277
234
  },
278
235
  {
279
- "kind": "field",
280
- "name": "previousSlot",
236
+ "name": "transitionend",
281
237
  "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
- }
238
+ "text": "TransitionEvent"
294
239
  }
295
240
  }
296
241
  ],
@@ -298,9 +243,8 @@
298
243
  {
299
244
  "name": "placement",
300
245
  "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\""
246
+ "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\""
302
247
  },
303
- "default": "'top'",
304
248
  "fieldName": "placement",
305
249
  "attribute": "placement"
306
250
  },
@@ -318,7 +262,7 @@
318
262
  "type": {
319
263
  "text": "number"
320
264
  },
321
- "default": "6",
265
+ "default": "0",
322
266
  "fieldName": "offset"
323
267
  },
324
268
  {
@@ -329,6 +273,13 @@
329
273
  "default": "false",
330
274
  "fieldName": "open"
331
275
  },
276
+ {
277
+ "name": "tipPadding",
278
+ "type": {
279
+ "text": "number | undefined"
280
+ },
281
+ "fieldName": "tipPadding"
282
+ },
332
283
  {
333
284
  "name": "variant",
334
285
  "type": {
@@ -346,20 +297,12 @@
346
297
  }
347
298
  ],
348
299
  "exports": [
349
- {
350
- "kind": "js",
351
- "name": "TooltipProxy",
352
- "declaration": {
353
- "name": "TooltipProxy",
354
- "module": "src/Tooltip.js"
355
- }
356
- },
357
300
  {
358
301
  "kind": "custom-element-definition",
359
- "name": "tooltip-proxy",
302
+ "name": "sp-tooltip-openable",
360
303
  "declaration": {
361
- "name": "TooltipProxy",
362
- "module": "src/Tooltip.js"
304
+ "name": "TooltipOpenable",
305
+ "module": "src/Tooltip.ts"
363
306
  }
364
307
  },
365
308
  {
@@ -367,7 +310,7 @@
367
310
  "name": "Tooltip",
368
311
  "declaration": {
369
312
  "name": "Tooltip",
370
- "module": "src/Tooltip.js"
313
+ "module": "src/Tooltip.ts"
371
314
  }
372
315
  }
373
316
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tooltip",
3
- "version": "0.35.0",
3
+ "version": "0.35.1-rc.15+9b76319e4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,8 +57,8 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.35.0",
61
- "@spectrum-web-components/overlay": "^0.35.0"
60
+ "@spectrum-web-components/base": "^0.35.1-rc.15+9b76319e4",
61
+ "@spectrum-web-components/overlay": "^0.35.1-rc.15+9b76319e4"
62
62
  },
63
63
  "devDependencies": {
64
64
  "@spectrum-css/tooltip": "^5.0.42"
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
72
+ "gitHead": "9b76319e4f1cc7cb0dd03e9d9debf544e5bed4e9"
73
73
  }
package/src/Tooltip.d.ts CHANGED
@@ -1,8 +1,6 @@
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 { Placement } from '@spectrum-web-components/overlay';
3
+ import '@spectrum-web-components/overlay/sp-overlay.js';
6
4
  /**
7
5
  * @element sp-tooltip
8
6
  *
@@ -11,48 +9,25 @@ export declare class TooltipProxy extends HTMLElement {
11
9
  */
12
10
  export declare class Tooltip extends SpectrumElement {
13
11
  static get styles(): CSSResultArray;
14
- /**
15
- * @private
16
- */
17
- static instanceCount: number;
18
- private _tooltipId;
19
12
  /**
20
13
  * Automatically bind to the parent element's hover interaction. 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;
26
18
  /**
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"}
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"}
28
20
  * @attr
29
21
  */
30
- placement: Placement;
31
- private tipElement;
22
+ placement?: Placement;
23
+ tipElement: HTMLSpanElement;
24
+ tipPadding?: number;
32
25
  private _variant;
33
26
  get variant(): string;
34
27
  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;
28
+ private handleOpenOverlay;
29
+ protected handleCloseOverlay: () => void;
30
+ protected handleTransitionrun(event: TransitionEvent): void;
31
+ protected handleTransitionend(event: TransitionEvent): void;
55
32
  render(): TemplateResult;
56
- protected update(changed: PropertyValues<this>): Promise<void>;
57
- protected updated(changed: PropertyValues<this>): void;
58
33
  }