@spectrum-web-components/overlay 0.19.4-overlay.8 → 0.19.4

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 (156) hide show
  1. package/active-overlay.d.ts +6 -0
  2. package/active-overlay.dev.js +4 -0
  3. package/{test/overlay-element.test-vrt.js.map → active-overlay.dev.js.map} +3 -3
  4. package/active-overlay.js +2 -0
  5. package/{sp-overlay.js.map → active-overlay.js.map} +4 -4
  6. package/custom-elements.json +1212 -0
  7. package/package.json +25 -50
  8. package/src/ActiveOverlay.d.ts +84 -0
  9. package/src/ActiveOverlay.dev.js +517 -0
  10. package/src/ActiveOverlay.dev.js.map +7 -0
  11. package/src/ActiveOverlay.js +16 -0
  12. package/src/ActiveOverlay.js.map +7 -0
  13. package/src/OverlayTrigger.d.ts +31 -18
  14. package/src/OverlayTrigger.dev.js +246 -138
  15. package/src/OverlayTrigger.dev.js.map +3 -3
  16. package/src/OverlayTrigger.js +22 -54
  17. package/src/OverlayTrigger.js.map +3 -3
  18. package/src/VirtualTrigger.dev.js +2 -0
  19. package/src/VirtualTrigger.dev.js.map +2 -2
  20. package/src/VirtualTrigger.js +1 -1
  21. package/src/VirtualTrigger.js.map +3 -3
  22. package/src/active-overlay.css.dev.js +13 -0
  23. package/src/active-overlay.css.dev.js.map +7 -0
  24. package/src/active-overlay.css.js +10 -0
  25. package/src/active-overlay.css.js.map +7 -0
  26. package/src/index.d.ts +3 -1
  27. package/src/index.dev.js +3 -1
  28. package/src/index.dev.js.map +2 -2
  29. package/src/index.js +1 -1
  30. package/src/index.js.map +2 -2
  31. package/src/loader.d.ts +2 -0
  32. package/src/loader.dev.js +21 -0
  33. package/src/loader.dev.js.map +7 -0
  34. package/src/loader.js +2 -0
  35. package/src/loader.js.map +7 -0
  36. package/src/overlay-stack.d.ts +50 -0
  37. package/src/overlay-stack.dev.js +514 -0
  38. package/src/overlay-stack.dev.js.map +7 -0
  39. package/src/overlay-stack.js +33 -0
  40. package/src/overlay-stack.js.map +7 -0
  41. package/src/overlay-trigger.css.dev.js +1 -1
  42. package/src/overlay-trigger.css.dev.js.map +1 -1
  43. package/src/overlay-trigger.css.js +1 -1
  44. package/src/overlay-trigger.css.js.map +1 -1
  45. package/src/overlay-types.d.ts +2 -2
  46. package/src/overlay-types.dev.js +0 -1
  47. package/src/overlay-types.dev.js.map +3 -3
  48. package/src/overlay-types.js +1 -1
  49. package/src/overlay-types.js.map +3 -3
  50. package/src/overlay-utils.d.ts +3 -0
  51. package/src/overlay-utils.dev.js +31 -0
  52. package/src/overlay-utils.dev.js.map +7 -0
  53. package/src/overlay-utils.js +2 -0
  54. package/src/overlay-utils.js.map +7 -0
  55. package/src/overlay.d.ts +59 -0
  56. package/src/overlay.dev.js +127 -0
  57. package/src/overlay.dev.js.map +7 -0
  58. package/src/overlay.js +2 -0
  59. package/src/overlay.js.map +7 -0
  60. package/stories/overlay-story-components.js +6 -1
  61. package/stories/overlay-story-components.js.map +2 -2
  62. package/stories/overlay.stories.js +689 -648
  63. package/stories/overlay.stories.js.map +2 -2
  64. package/sync/overlay-trigger.d.ts +0 -4
  65. package/sync/overlay-trigger.dev.js +4 -1
  66. package/sync/overlay-trigger.dev.js.map +2 -2
  67. package/sync/overlay-trigger.js +1 -1
  68. package/sync/overlay-trigger.js.map +3 -3
  69. package/test/benchmark/basic-test.js +1 -1
  70. package/test/benchmark/basic-test.js.map +1 -1
  71. package/test/index.js +9 -3
  72. package/test/index.js.map +2 -2
  73. package/test/overlay-lifecycle.test.js +74 -34
  74. package/test/overlay-lifecycle.test.js.map +2 -2
  75. package/test/overlay-trigger-click.test.js +2 -3
  76. package/test/overlay-trigger-click.test.js.map +2 -2
  77. package/test/overlay-trigger-extended.test.js +6 -1
  78. package/test/overlay-trigger-extended.test.js.map +2 -2
  79. package/test/overlay-trigger-hover-click.test.js +1 -1
  80. package/test/overlay-trigger-hover-click.test.js.map +2 -2
  81. package/test/overlay-trigger-hover.test.js +2 -2
  82. package/test/overlay-trigger-hover.test.js.map +2 -2
  83. package/test/overlay-trigger-longpress.test.js +377 -1
  84. package/test/overlay-trigger-longpress.test.js.map +2 -2
  85. package/test/overlay-trigger-sync.test.js +3 -1
  86. package/test/overlay-trigger-sync.test.js.map +2 -2
  87. package/test/overlay-trigger.test.js +3 -1
  88. package/test/overlay-trigger.test.js.map +2 -2
  89. package/test/overlay-update.test.js +4 -4
  90. package/test/overlay-update.test.js.map +2 -2
  91. package/test/overlay.test.js +154 -100
  92. package/test/overlay.test.js.map +2 -2
  93. package/sp-overlay.d.ts +0 -6
  94. package/sp-overlay.dev.js +0 -4
  95. package/sp-overlay.dev.js.map +0 -7
  96. package/sp-overlay.js +0 -2
  97. package/src/Overlay.d.ts +0 -22
  98. package/src/Overlay.dev.js +0 -63
  99. package/src/Overlay.dev.js.map +0 -7
  100. package/src/Overlay.js +0 -2
  101. package/src/Overlay.js.map +0 -7
  102. package/src/OverlayBase.d.ts +0 -93
  103. package/src/OverlayBase.dev.js +0 -564
  104. package/src/OverlayBase.dev.js.map +0 -7
  105. package/src/OverlayBase.js +0 -18
  106. package/src/OverlayBase.js.map +0 -7
  107. package/src/OverlayDialog.d.ts +0 -8
  108. package/src/OverlayDialog.dev.js +0 -43
  109. package/src/OverlayDialog.dev.js.map +0 -7
  110. package/src/OverlayDialog.js +0 -2
  111. package/src/OverlayDialog.js.map +0 -7
  112. package/src/OverlayNoPopover.d.ts +0 -8
  113. package/src/OverlayNoPopover.dev.js +0 -62
  114. package/src/OverlayNoPopover.dev.js.map +0 -7
  115. package/src/OverlayNoPopover.js +0 -2
  116. package/src/OverlayNoPopover.js.map +0 -7
  117. package/src/OverlayPopover.d.ts +0 -8
  118. package/src/OverlayPopover.dev.js +0 -81
  119. package/src/OverlayPopover.dev.js.map +0 -7
  120. package/src/OverlayPopover.js +0 -2
  121. package/src/OverlayPopover.js.map +0 -7
  122. package/src/OverlayStack.d.ts +0 -24
  123. package/src/OverlayStack.dev.js +0 -113
  124. package/src/OverlayStack.dev.js.map +0 -7
  125. package/src/OverlayStack.js +0 -2
  126. package/src/OverlayStack.js.map +0 -7
  127. package/src/PlacementController.d.ts +0 -35
  128. package/src/PlacementController.dev.js +0 -172
  129. package/src/PlacementController.dev.js.map +0 -7
  130. package/src/PlacementController.js +0 -2
  131. package/src/PlacementController.js.map +0 -7
  132. package/src/fullSizePlugin.d.ts +0 -12
  133. package/src/fullSizePlugin.dev.js +0 -39
  134. package/src/fullSizePlugin.dev.js.map +0 -7
  135. package/src/fullSizePlugin.js +0 -2
  136. package/src/fullSizePlugin.js.map +0 -7
  137. package/src/overlay-base.css.dev.js +0 -9
  138. package/src/overlay-base.css.dev.js.map +0 -7
  139. package/src/overlay-base.css.js +0 -6
  140. package/src/overlay-base.css.js.map +0 -7
  141. package/src/placement.d.ts +0 -21
  142. package/src/placement.dev.js +0 -111
  143. package/src/placement.dev.js.map +0 -7
  144. package/src/placement.js +0 -2
  145. package/src/placement.js.map +0 -7
  146. package/src/topLayerOverTransforms.d.ts +0 -22
  147. package/src/topLayerOverTransforms.dev.js +0 -161
  148. package/src/topLayerOverTransforms.dev.js.map +0 -7
  149. package/src/topLayerOverTransforms.js +0 -2
  150. package/src/topLayerOverTransforms.js.map +0 -7
  151. package/stories/overlay-element.stories.js +0 -229
  152. package/stories/overlay-element.stories.js.map +0 -7
  153. package/test/overlay-element.test-vrt.js +0 -5
  154. package/test/overlay-element.test.js +0 -759
  155. package/test/overlay-element.test.js.map +0 -7
  156. /package/src/{overlay-base.css.d.ts → active-overlay.css.d.ts} +0 -0
@@ -1,759 +0,0 @@
1
- "use strict";
2
- import {
3
- aTimeout,
4
- elementUpdated,
5
- expect,
6
- fixture,
7
- html,
8
- nextFrame,
9
- oneEvent
10
- } from "@open-wc/testing";
11
- import "@spectrum-web-components/overlay/sp-overlay.js";
12
- import "@spectrum-web-components/tooltip/sp-tooltip.js";
13
- import "@spectrum-web-components/theme/sp-theme.js";
14
- import "@spectrum-web-components/theme/src/themes.js";
15
- import "@spectrum-web-components/button/sp-button.js";
16
- import { sendMouse } from "../../../test/plugins/browser.js";
17
- const OVERLAY_TYPES = ["modal", "page", "hint", "auto", "manual"];
18
- async function styledFixture(story) {
19
- const test = await fixture(html`
20
- <sp-theme theme="spectrum" scale="medium" color="light">
21
- ${story}
22
- </sp-theme>
23
- `);
24
- return test.children[0];
25
- }
26
- describe("sp-overlay", () => {
27
- function opensDeclaratively(overlayType) {
28
- it(`as [type="'${overlayType}'"]`, async () => {
29
- const el = await styledFixture(html`
30
- <sp-overlay open type=${overlayType}>
31
- <sp-tooltip>Content</sp-tooltip>
32
- </sp-overlay>
33
- `);
34
- const content = el.children[0];
35
- let opened = oneEvent(el, "sp-opened");
36
- await opened;
37
- await aTimeout(150);
38
- await elementUpdated(el);
39
- expect(content.open).to.be.true;
40
- await nextFrame();
41
- const closed = oneEvent(el, "sp-closed");
42
- el.open = false;
43
- await closed;
44
- await aTimeout(150);
45
- await elementUpdated(el);
46
- expect(content.open).to.be.false;
47
- await nextFrame();
48
- opened = oneEvent(el, "sp-opened");
49
- el.open = true;
50
- await opened;
51
- await aTimeout(150);
52
- await elementUpdated(el);
53
- expect(content.open).to.be.true;
54
- });
55
- }
56
- describe('[type="modal"]', () => {
57
- opensDeclaratively("modal");
58
- xit("closes all other overlay types when opening", async () => {
59
- const test = await styledFixture(html`
60
- <div>
61
- ${OVERLAY_TYPES.map(
62
- (type) => html`
63
- <sp-overlay type=${type}>
64
- <sp-tooltip>${type} Content</sp-tooltip>
65
- </sp-overlay>
66
- `
67
- )}
68
- </div>
69
- `);
70
- const modal = test.querySelector('[type="modal"]');
71
- const page = test.querySelector('[type="page"]');
72
- const hint = test.querySelector('[type="hint"]');
73
- const auto = test.querySelector('[type="auto"]');
74
- const manual = test.querySelector('[type="manual"]');
75
- expect(modal.open).to.be.false;
76
- expect(page.open).to.be.false;
77
- expect(hint.open).to.be.false;
78
- expect(auto.open).to.be.false;
79
- expect(manual.open).to.be.false;
80
- let opened = oneEvent(page, "sp-opened");
81
- page.open = true;
82
- await opened;
83
- await elementUpdated(page);
84
- expect(modal.open).to.be.false;
85
- expect(page.open).to.be.true;
86
- expect(hint.open).to.be.false;
87
- expect(auto.open).to.be.false;
88
- expect(manual.open).to.be.false;
89
- await nextFrame();
90
- opened = oneEvent(modal, "sp-opened");
91
- let closed = oneEvent(page, "sp-closed");
92
- modal.open = true;
93
- await opened;
94
- await closed;
95
- await elementUpdated(page);
96
- await elementUpdated(modal);
97
- expect(modal.open).to.be.true;
98
- expect(page.open).to.be.false;
99
- expect(hint.open).to.be.false;
100
- expect(auto.open).to.be.false;
101
- expect(manual.open).to.be.false;
102
- await nextFrame();
103
- closed = oneEvent(modal, "sp-closed");
104
- modal.open = false;
105
- await closed;
106
- await elementUpdated(page);
107
- expect(modal.open).to.be.false;
108
- expect(page.open).to.be.false;
109
- expect(hint.open).to.be.false;
110
- expect(auto.open).to.be.false;
111
- expect(manual.open).to.be.false;
112
- await nextFrame();
113
- opened = oneEvent(hint, "sp-opened");
114
- hint.open = true;
115
- await opened;
116
- await elementUpdated(hint);
117
- expect(modal.open).to.be.false;
118
- expect(page.open).to.be.false;
119
- expect(hint.open).to.be.true;
120
- expect(auto.open).to.be.false;
121
- expect(manual.open).to.be.false;
122
- await nextFrame();
123
- opened = oneEvent(modal, "sp-opened");
124
- closed = oneEvent(hint, "sp-closed");
125
- modal.open = true;
126
- await opened;
127
- await closed;
128
- await elementUpdated(page);
129
- await elementUpdated(modal);
130
- expect(modal.open).to.be.true;
131
- expect(page.open).to.be.false;
132
- expect(hint.open).to.be.false;
133
- expect(auto.open).to.be.false;
134
- expect(manual.open).to.be.false;
135
- await nextFrame();
136
- closed = oneEvent(modal, "sp-closed");
137
- modal.open = false;
138
- await closed;
139
- await elementUpdated(page);
140
- expect(modal.open).to.be.false;
141
- expect(page.open).to.be.false;
142
- expect(hint.open).to.be.false;
143
- expect(auto.open).to.be.false;
144
- expect(manual.open).to.be.false;
145
- await nextFrame();
146
- opened = oneEvent(auto, "sp-opened");
147
- auto.open = true;
148
- await opened;
149
- await elementUpdated(auto);
150
- expect(modal.open).to.be.false;
151
- expect(page.open).to.be.false;
152
- expect(hint.open).to.be.false;
153
- expect(auto.open).to.be.true;
154
- expect(manual.open).to.be.false;
155
- await nextFrame();
156
- opened = oneEvent(modal, "sp-opened");
157
- closed = oneEvent(auto, "sp-closed");
158
- modal.open = true;
159
- await opened;
160
- await closed;
161
- await elementUpdated(auto);
162
- await elementUpdated(modal);
163
- expect(modal.open).to.be.true;
164
- expect(page.open).to.be.false;
165
- expect(hint.open).to.be.false;
166
- expect(auto.open).to.be.false;
167
- expect(manual.open).to.be.false;
168
- await nextFrame();
169
- closed = oneEvent(modal, "sp-closed");
170
- modal.open = false;
171
- await closed;
172
- await elementUpdated(modal);
173
- expect(modal.open).to.be.false;
174
- expect(page.open).to.be.false;
175
- expect(hint.open).to.be.false;
176
- expect(auto.open).to.be.false;
177
- expect(manual.open).to.be.false;
178
- await nextFrame();
179
- opened = oneEvent(manual, "sp-opened");
180
- manual.open = true;
181
- await opened;
182
- await elementUpdated(manual);
183
- expect(modal.open).to.be.false;
184
- expect(page.open).to.be.false;
185
- expect(hint.open).to.be.false;
186
- expect(auto.open).to.be.false;
187
- expect(manual.open).to.be.true;
188
- await nextFrame();
189
- opened = oneEvent(modal, "sp-opened");
190
- closed = oneEvent(manual, "sp-closed");
191
- modal.open = true;
192
- await opened;
193
- await closed;
194
- await elementUpdated(page);
195
- await elementUpdated(manual);
196
- expect(modal.open).to.be.true;
197
- expect(page.open).to.be.false;
198
- expect(hint.open).to.be.false;
199
- expect(auto.open).to.be.false;
200
- expect(manual.open).to.be.false;
201
- });
202
- });
203
- describe('[type="page"]', () => {
204
- opensDeclaratively("page");
205
- xit("closes all other overlay types when opening", async () => {
206
- const test = await styledFixture(html`
207
- <div>
208
- ${OVERLAY_TYPES.map(
209
- (type) => html`
210
- <sp-overlay type=${type}>
211
- <sp-tooltip>${type} Content</sp-tooltip>
212
- </sp-overlay>
213
- `
214
- )}
215
- </div>
216
- `);
217
- const modal = test.querySelector('[type="modal"]');
218
- const page = test.querySelector('[type="page"]');
219
- const hint = test.querySelector('[type="hint"]');
220
- const auto = test.querySelector('[type="auto"]');
221
- const manual = test.querySelector('[type="manual"]');
222
- expect(modal.open).to.be.false;
223
- expect(page.open).to.be.false;
224
- expect(hint.open).to.be.false;
225
- expect(auto.open).to.be.false;
226
- expect(manual.open).to.be.false;
227
- let opened = oneEvent(modal, "sp-opened");
228
- modal.open = true;
229
- await opened;
230
- await elementUpdated(modal);
231
- expect(modal.open).to.be.true;
232
- expect(page.open).to.be.false;
233
- expect(hint.open).to.be.false;
234
- expect(auto.open).to.be.false;
235
- expect(manual.open).to.be.false;
236
- await nextFrame();
237
- opened = oneEvent(page, "sp-opened");
238
- let closed = oneEvent(modal, "sp-closed");
239
- page.open = true;
240
- await opened;
241
- await closed;
242
- await elementUpdated(page);
243
- await elementUpdated(modal);
244
- expect(modal.open).to.be.false;
245
- expect(page.open).to.be.true;
246
- expect(hint.open).to.be.false;
247
- expect(auto.open).to.be.false;
248
- expect(manual.open).to.be.false;
249
- await nextFrame();
250
- closed = oneEvent(page, "sp-closed");
251
- page.open = false;
252
- await closed;
253
- await elementUpdated(page);
254
- expect(modal.open).to.be.false;
255
- expect(page.open).to.be.false;
256
- expect(hint.open).to.be.false;
257
- expect(auto.open).to.be.false;
258
- expect(manual.open).to.be.false;
259
- await nextFrame();
260
- opened = oneEvent(hint, "sp-opened");
261
- hint.open = true;
262
- await opened;
263
- await elementUpdated(hint);
264
- expect(modal.open).to.be.false;
265
- expect(page.open).to.be.false;
266
- expect(hint.open).to.be.true;
267
- expect(auto.open).to.be.false;
268
- expect(manual.open).to.be.false;
269
- await nextFrame();
270
- opened = oneEvent(page, "sp-opened");
271
- closed = oneEvent(hint, "sp-closed");
272
- page.open = true;
273
- await opened;
274
- await closed;
275
- await elementUpdated(page);
276
- await elementUpdated(hint);
277
- expect(modal.open).to.be.false;
278
- expect(page.open).to.be.true;
279
- expect(hint.open).to.be.false;
280
- expect(auto.open).to.be.false;
281
- expect(manual.open).to.be.false;
282
- await nextFrame();
283
- closed = oneEvent(page, "sp-closed");
284
- page.open = false;
285
- await closed;
286
- await elementUpdated(page);
287
- expect(modal.open).to.be.false;
288
- expect(page.open).to.be.false;
289
- expect(hint.open).to.be.false;
290
- expect(auto.open).to.be.false;
291
- expect(manual.open).to.be.false;
292
- await nextFrame();
293
- opened = oneEvent(auto, "sp-opened");
294
- auto.open = true;
295
- await opened;
296
- await elementUpdated(auto);
297
- expect(modal.open).to.be.false;
298
- expect(page.open).to.be.false;
299
- expect(hint.open).to.be.false;
300
- expect(auto.open).to.be.true;
301
- expect(manual.open).to.be.false;
302
- await nextFrame();
303
- opened = oneEvent(page, "sp-opened");
304
- closed = oneEvent(auto, "sp-closed");
305
- page.open = true;
306
- await opened;
307
- await closed;
308
- await elementUpdated(auto);
309
- await elementUpdated(page);
310
- expect(modal.open).to.be.false;
311
- expect(page.open).to.be.true;
312
- expect(hint.open).to.be.false;
313
- expect(auto.open).to.be.false;
314
- expect(manual.open).to.be.false;
315
- await nextFrame();
316
- closed = oneEvent(page, "sp-closed");
317
- page.open = false;
318
- await closed;
319
- await elementUpdated(page);
320
- expect(modal.open).to.be.false;
321
- expect(page.open).to.be.false;
322
- expect(hint.open).to.be.false;
323
- expect(auto.open).to.be.false;
324
- expect(manual.open).to.be.false;
325
- await nextFrame();
326
- opened = oneEvent(manual, "sp-opened");
327
- manual.open = true;
328
- await opened;
329
- await elementUpdated(manual);
330
- expect(modal.open).to.be.false;
331
- expect(page.open).to.be.false;
332
- expect(hint.open).to.be.false;
333
- expect(auto.open).to.be.false;
334
- expect(manual.open).to.be.true;
335
- await nextFrame();
336
- opened = oneEvent(page, "sp-opened");
337
- closed = oneEvent(manual, "sp-closed");
338
- page.open = true;
339
- await opened;
340
- await closed;
341
- await elementUpdated(page);
342
- await elementUpdated(manual);
343
- expect(modal.open).to.be.false;
344
- expect(page.open).to.be.true;
345
- expect(hint.open).to.be.false;
346
- expect(auto.open).to.be.false;
347
- expect(manual.open).to.be.false;
348
- });
349
- });
350
- describe('[type="hint"]', () => {
351
- opensDeclaratively("hint");
352
- it("closes other `[type=hint]` overlays when opening", async () => {
353
- const test = await styledFixture(html`
354
- <div>
355
- ${[1, 2].map(
356
- (overlay) => html`
357
- <sp-overlay type="hint" class="hint-${overlay}">
358
- <sp-tooltip>Hint ${overlay} Content</sp-tooltip>
359
- </sp-overlay>
360
- `
361
- )}
362
- </div>
363
- `);
364
- const hint1 = test.querySelector(".hint-1");
365
- const hint2 = test.querySelector(".hint-2");
366
- expect(hint1.open).to.be.false;
367
- expect(hint2.open).to.be.false;
368
- let opened = oneEvent(hint1, "sp-opened");
369
- hint1.open = true;
370
- await opened;
371
- await aTimeout(150);
372
- await elementUpdated(hint1);
373
- expect(hint1.open).to.be.true;
374
- expect(hint2.open).to.be.false;
375
- opened = oneEvent(hint2, "sp-opened");
376
- let closed = oneEvent(hint1, "sp-closed");
377
- hint2.open = true;
378
- await opened;
379
- await aTimeout(150);
380
- await closed;
381
- await elementUpdated(hint1);
382
- await elementUpdated(hint2);
383
- expect(hint1.open).to.be.false;
384
- expect(hint2.open).to.be.true;
385
- opened = oneEvent(hint1, "sp-opened");
386
- closed = oneEvent(hint2, "sp-closed");
387
- hint1.open = true;
388
- await opened;
389
- await closed;
390
- await elementUpdated(hint1);
391
- await elementUpdated(hint2);
392
- expect(hint1.open).to.be.true;
393
- expect(hint2.open).to.be.false;
394
- });
395
- xit("stays open when pointer enters overlay from trigger element", async () => {
396
- const test = await styledFixture(
397
- html`
398
- <div>
399
- <sp-button id="test-button">
400
- This is a button.
401
- </sp-button>
402
- <sp-overlay
403
- trigger="test-button@hover"
404
- placement="bottom"
405
- offset="-5"
406
- >
407
- <sp-tooltip>Help text.</sp-tooltip>
408
- </sp-overlay>
409
- </div>
410
- `
411
- );
412
- const button = test.querySelector("sp-button");
413
- const overlay = test.querySelector(
414
- "sp-overlay"
415
- );
416
- const el = test.querySelector("sp-tooltip");
417
- const buttonRect = button.getBoundingClientRect();
418
- const buttonPoint = [
419
- buttonRect.x + buttonRect.width / 2,
420
- buttonRect.y + buttonRect.height / 2
421
- ];
422
- await elementUpdated(overlay);
423
- await expect(button).to.be.accessible();
424
- let opened = oneEvent(button, "sp-opened");
425
- await sendMouse({
426
- steps: [
427
- {
428
- type: "move",
429
- position: buttonPoint
430
- }
431
- ]
432
- });
433
- await nextFrame();
434
- await nextFrame();
435
- const tooltipRect = el.shadowRoot.querySelector("#tooltip").getBoundingClientRect();
436
- const tooltipPoint = [
437
- tooltipRect.x + tooltipRect.width / 2,
438
- tooltipRect.y + tooltipRect.height / 2
439
- ];
440
- await sendMouse({
441
- steps: [
442
- {
443
- type: "move",
444
- position: tooltipPoint
445
- }
446
- ]
447
- });
448
- await opened;
449
- await elementUpdated(el);
450
- expect(el.open).to.be.true;
451
- await expect(button).to.be.accessible();
452
- let closed = oneEvent(button, "sp-closed");
453
- await sendMouse({
454
- steps: [
455
- {
456
- type: "move",
457
- position: buttonPoint
458
- }
459
- ]
460
- });
461
- await sendMouse({
462
- steps: [
463
- {
464
- type: "move",
465
- position: [
466
- buttonRect.x + buttonRect.width * 2,
467
- buttonRect.y + buttonRect.height * 2
468
- ]
469
- }
470
- ]
471
- });
472
- await closed;
473
- await elementUpdated(el);
474
- expect(el.open).to.be.false;
475
- opened = oneEvent(button, "sp-opened");
476
- await sendMouse({
477
- steps: [
478
- {
479
- type: "move",
480
- position: buttonPoint
481
- }
482
- ]
483
- });
484
- await opened;
485
- await elementUpdated(el);
486
- closed = oneEvent(button, "sp-closed");
487
- await sendMouse({
488
- steps: [
489
- {
490
- type: "move",
491
- position: [
492
- buttonRect.x + buttonRect.width * 2,
493
- buttonRect.y + buttonRect.height * 2
494
- ]
495
- }
496
- ]
497
- });
498
- await closed;
499
- await elementUpdated(el);
500
- });
501
- it("stays open when pointer enters overlay from trigger element", async () => {
502
- const button = await styledFixture(
503
- html`
504
- <sp-button>
505
- This is a button.
506
- <sp-tooltip self-managed placement="bottom">
507
- Help text.
508
- </sp-tooltip>
509
- </sp-button>
510
- `
511
- );
512
- const el = button.querySelector("sp-tooltip");
513
- const buttonRect = button.getBoundingClientRect();
514
- const buttonPoint = [
515
- buttonRect.x + buttonRect.width / 2,
516
- buttonRect.y + buttonRect.height / 2
517
- ];
518
- await elementUpdated(el);
519
- await expect(button).to.be.accessible();
520
- let opened = oneEvent(button, "sp-opened");
521
- await sendMouse({
522
- steps: [
523
- {
524
- type: "move",
525
- position: buttonPoint
526
- }
527
- ]
528
- });
529
- await nextFrame();
530
- await nextFrame();
531
- const tooltipRect = el.shadowRoot.querySelector("#tooltip").getBoundingClientRect();
532
- const tooltipPoint = [
533
- tooltipRect.x + tooltipRect.width / 2,
534
- tooltipRect.y + tooltipRect.height / 2
535
- ];
536
- await sendMouse({
537
- steps: [
538
- {
539
- type: "move",
540
- position: tooltipPoint
541
- }
542
- ]
543
- });
544
- await opened;
545
- await aTimeout(150);
546
- await elementUpdated(el);
547
- expect(el.open).to.be.true;
548
- await expect(button).to.be.accessible();
549
- let closed = oneEvent(button, "sp-closed");
550
- await sendMouse({
551
- steps: [
552
- {
553
- type: "move",
554
- position: buttonPoint
555
- }
556
- ]
557
- });
558
- await sendMouse({
559
- steps: [
560
- {
561
- type: "move",
562
- position: [
563
- buttonRect.x + buttonRect.width * 2,
564
- buttonRect.y + buttonRect.height * 2
565
- ]
566
- }
567
- ]
568
- });
569
- await closed;
570
- await aTimeout(150);
571
- await elementUpdated(el);
572
- expect(el.open).to.be.false;
573
- opened = oneEvent(button, "sp-opened");
574
- await sendMouse({
575
- steps: [
576
- {
577
- type: "move",
578
- position: buttonPoint
579
- }
580
- ]
581
- });
582
- await opened;
583
- await aTimeout(150);
584
- expect(el.open).to.be.true;
585
- closed = oneEvent(button, "sp-closed");
586
- sendMouse({
587
- steps: [
588
- {
589
- type: "move",
590
- position: [
591
- buttonRect.x + buttonRect.width * 2,
592
- buttonRect.y + buttonRect.height * 2
593
- ]
594
- }
595
- ]
596
- });
597
- await closed;
598
- await elementUpdated(el);
599
- expect(el.open).to.be.false;
600
- });
601
- });
602
- describe('[type="auto"]', () => {
603
- opensDeclaratively("auto");
604
- });
605
- describe('[type="manual"]', () => {
606
- opensDeclaratively("manual");
607
- it("does not close other overlay types when opening", async () => {
608
- const test = await styledFixture(html`
609
- <div>
610
- ${OVERLAY_TYPES.map(
611
- (type) => html`
612
- <sp-overlay type=${type}>
613
- <sp-tooltip>${type} Content</sp-tooltip>
614
- </sp-overlay>
615
- `
616
- )}
617
- </div>
618
- `);
619
- const modal = test.querySelector('[type="modal"]');
620
- const page = test.querySelector('[type="page"]');
621
- const hint = test.querySelector('[type="hint"]');
622
- const auto = test.querySelector('[type="auto"]');
623
- const manual = test.querySelector('[type="manual"]');
624
- expect(modal.open).to.be.false;
625
- expect(page.open).to.be.false;
626
- expect(hint.open).to.be.false;
627
- expect(auto.open).to.be.false;
628
- expect(manual.open).to.be.false;
629
- let opened = oneEvent(modal, "sp-opened");
630
- modal.open = true;
631
- await opened;
632
- await aTimeout(150);
633
- await elementUpdated(modal);
634
- expect(modal.open).to.be.true;
635
- expect(page.open).to.be.false;
636
- expect(hint.open).to.be.false;
637
- expect(auto.open).to.be.false;
638
- expect(manual.open).to.be.false;
639
- await nextFrame();
640
- opened = oneEvent(manual, "sp-opened");
641
- manual.open = true;
642
- await opened;
643
- await aTimeout(150);
644
- await elementUpdated(manual);
645
- expect(modal.open).to.be.true;
646
- expect(page.open).to.be.false;
647
- expect(hint.open).to.be.false;
648
- expect(auto.open).to.be.false;
649
- expect(manual.open).to.be.true;
650
- await nextFrame();
651
- let closed = oneEvent(modal, "sp-closed");
652
- let manualClosed = oneEvent(manual, "sp-closed");
653
- modal.open = false;
654
- manual.open = false;
655
- await closed;
656
- await manualClosed;
657
- await aTimeout(150);
658
- await elementUpdated(modal);
659
- await elementUpdated(manual);
660
- expect(modal.open).to.be.false;
661
- expect(page.open).to.be.false;
662
- expect(hint.open).to.be.false;
663
- expect(auto.open).to.be.false;
664
- expect(manual.open).to.be.false;
665
- await nextFrame();
666
- opened = oneEvent(page, "sp-opened");
667
- page.open = true;
668
- await opened;
669
- await aTimeout(150);
670
- await elementUpdated(page);
671
- expect(modal.open).to.be.false;
672
- expect(page.open).to.be.true;
673
- expect(hint.open).to.be.false;
674
- expect(auto.open).to.be.false;
675
- expect(manual.open).to.be.false;
676
- await nextFrame();
677
- opened = oneEvent(manual, "sp-opened");
678
- manual.open = true;
679
- await opened;
680
- await aTimeout(150);
681
- await elementUpdated(manual);
682
- expect(modal.open).to.be.false;
683
- expect(page.open).to.be.true;
684
- expect(hint.open).to.be.false;
685
- expect(auto.open).to.be.false;
686
- expect(manual.open).to.be.true;
687
- await nextFrame();
688
- closed = oneEvent(page, "sp-closed");
689
- manualClosed = oneEvent(manual, "sp-closed");
690
- page.open = false;
691
- manual.open = false;
692
- await closed;
693
- await aTimeout(150);
694
- await manualClosed;
695
- await elementUpdated(page);
696
- await elementUpdated(manual);
697
- expect(modal.open).to.be.false;
698
- expect(page.open).to.be.false;
699
- expect(hint.open).to.be.false;
700
- expect(auto.open).to.be.false;
701
- expect(manual.open).to.be.false;
702
- await nextFrame();
703
- opened = oneEvent(hint, "sp-opened");
704
- hint.open = true;
705
- await opened;
706
- await aTimeout(150);
707
- await elementUpdated(hint);
708
- expect(modal.open).to.be.false;
709
- expect(page.open).to.be.false;
710
- expect(hint.open).to.be.true;
711
- expect(auto.open).to.be.false;
712
- expect(manual.open).to.be.false;
713
- await nextFrame();
714
- opened = oneEvent(manual, "sp-opened");
715
- manual.open = true;
716
- await opened;
717
- await elementUpdated(manual);
718
- expect(modal.open).to.be.false;
719
- expect(page.open).to.be.false;
720
- expect(hint.open).to.be.true;
721
- expect(auto.open).to.be.false;
722
- expect(manual.open).to.be.true;
723
- await nextFrame();
724
- closed = oneEvent(hint, "sp-closed");
725
- manualClosed = oneEvent(manual, "sp-closed");
726
- hint.open = false;
727
- manual.open = false;
728
- await closed;
729
- await elementUpdated(hint);
730
- await elementUpdated(manual);
731
- expect(modal.open).to.be.false;
732
- expect(page.open).to.be.false;
733
- expect(hint.open).to.be.false;
734
- expect(auto.open).to.be.false;
735
- expect(manual.open).to.be.false;
736
- await nextFrame();
737
- opened = oneEvent(auto, "sp-opened");
738
- auto.open = true;
739
- await opened;
740
- await elementUpdated(auto);
741
- expect(modal.open).to.be.false;
742
- expect(page.open).to.be.false;
743
- expect(hint.open).to.be.false;
744
- expect(auto.open).to.be.true;
745
- expect(manual.open).to.be.false;
746
- await nextFrame();
747
- opened = oneEvent(manual, "sp-opened");
748
- manual.open = true;
749
- await opened;
750
- await elementUpdated(manual);
751
- expect(modal.open).to.be.false;
752
- expect(page.open).to.be.false;
753
- expect(hint.open).to.be.false;
754
- expect(auto.open).to.be.true;
755
- expect(manual.open).to.be.true;
756
- });
757
- });
758
- });
759
- //# sourceMappingURL=overlay-element.test.js.map