@spectrum-web-components/overlay 0.19.6-overlay.18 → 0.30.1-overlay.30

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 (55) hide show
  1. package/overlay-trigger.dev.js +2 -1
  2. package/overlay-trigger.dev.js.map +2 -2
  3. package/overlay-trigger.js +1 -1
  4. package/overlay-trigger.js.map +3 -3
  5. package/package.json +7 -7
  6. package/sp-overlay.dev.js +2 -1
  7. package/sp-overlay.dev.js.map +2 -2
  8. package/sp-overlay.js +1 -1
  9. package/sp-overlay.js.map +3 -3
  10. package/src/Overlay.js.map +1 -1
  11. package/src/OverlayBase.d.ts +11 -1
  12. package/src/OverlayBase.dev.js +141 -91
  13. package/src/OverlayBase.dev.js.map +2 -2
  14. package/src/OverlayBase.js +6 -7
  15. package/src/OverlayBase.js.map +3 -3
  16. package/src/OverlayDialog.js.map +1 -1
  17. package/src/OverlayNoPopover.js.map +1 -1
  18. package/src/OverlayPopover.dev.js +22 -2
  19. package/src/OverlayPopover.dev.js.map +2 -2
  20. package/src/OverlayPopover.js +1 -1
  21. package/src/OverlayPopover.js.map +3 -3
  22. package/src/OverlayStack.dev.js +18 -8
  23. package/src/OverlayStack.dev.js.map +2 -2
  24. package/src/OverlayStack.js +1 -1
  25. package/src/OverlayStack.js.map +3 -3
  26. package/src/OverlayTrigger.dev.js +1 -0
  27. package/src/OverlayTrigger.dev.js.map +2 -2
  28. package/src/OverlayTrigger.js +1 -0
  29. package/src/OverlayTrigger.js.map +2 -2
  30. package/src/PlacementController.js.map +1 -1
  31. package/src/overlay-base.css.dev.js +1 -1
  32. package/src/overlay-base.css.dev.js.map +1 -1
  33. package/src/overlay-base.css.js +1 -1
  34. package/src/overlay-base.css.js.map +1 -1
  35. package/src/placement.js.map +1 -1
  36. package/src/topLayerOverTransforms.dev.js +4 -0
  37. package/src/topLayerOverTransforms.dev.js.map +2 -2
  38. package/src/topLayerOverTransforms.js +1 -1
  39. package/src/topLayerOverTransforms.js.map +2 -2
  40. package/test/index.js +113 -106
  41. package/test/index.js.map +2 -2
  42. package/test/overlay-element.test.js +345 -411
  43. package/test/overlay-element.test.js.map +2 -2
  44. package/test/overlay-lifecycle.test.js +1 -33
  45. package/test/overlay-lifecycle.test.js.map +2 -2
  46. package/test/overlay-trigger-extended.test.js +1 -1
  47. package/test/overlay-trigger-extended.test.js.map +2 -2
  48. package/test/overlay-trigger-hover-click.test.js +23 -23
  49. package/test/overlay-trigger-hover-click.test.js.map +2 -2
  50. package/test/overlay-trigger-hover.test.js +42 -36
  51. package/test/overlay-trigger-hover.test.js.map +2 -2
  52. package/test/overlay-trigger-longpress.test.js +51 -51
  53. package/test/overlay-trigger-longpress.test.js.map +2 -2
  54. package/test/overlay.test.js +8 -12
  55. package/test/overlay.test.js.map +2 -2
package/test/overlay-element.test.js CHANGED
@@ -46,296 +46,244 @@ describe("sp-overlay", () => {
46
46
  }
47
47
  describe('[type="modal"]', () => {
48
48
  opensDeclaratively("modal");
49
- xit("closes all other overlay types when opening", async () => {
50
- const test = await styledFixture(html`
51
- <div>
52
- ${OVERLAY_TYPES.map(
53
- (type) => html`
54
- <sp-overlay type=${type}>
55
- <sp-tooltip>${type} Content</sp-tooltip>
56
- </sp-overlay>
57
- `
58
- )}
59
- </div>
60
- `);
61
- const modal = test.querySelector('[type="modal"]');
62
- const page = test.querySelector('[type="page"]');
63
- const hint = test.querySelector('[type="hint"]');
64
- const auto = test.querySelector('[type="auto"]');
65
- const manual = test.querySelector('[type="manual"]');
66
- expect(modal.open).to.be.false;
67
- expect(page.open).to.be.false;
68
- expect(hint.open).to.be.false;
69
- expect(auto.open).to.be.false;
70
- expect(manual.open).to.be.false;
71
- let opened = oneEvent(page, "sp-opened");
72
- page.open = true;
73
- await opened;
74
- await elementUpdated(page);
75
- expect(modal.open).to.be.false;
76
- expect(page.open).to.be.true;
77
- expect(hint.open).to.be.false;
78
- expect(auto.open).to.be.false;
79
- expect(manual.open).to.be.false;
80
- await nextFrame();
81
- opened = oneEvent(modal, "sp-opened");
82
- let closed = oneEvent(page, "sp-closed");
83
- modal.open = true;
84
- await opened;
85
- await closed;
86
- await elementUpdated(page);
87
- await elementUpdated(modal);
88
- expect(modal.open).to.be.true;
89
- expect(page.open).to.be.false;
90
- expect(hint.open).to.be.false;
91
- expect(auto.open).to.be.false;
92
- expect(manual.open).to.be.false;
93
- await nextFrame();
94
- closed = oneEvent(modal, "sp-closed");
95
- modal.open = false;
96
- await closed;
97
- await elementUpdated(page);
98
- expect(modal.open).to.be.false;
99
- expect(page.open).to.be.false;
100
- expect(hint.open).to.be.false;
101
- expect(auto.open).to.be.false;
102
- expect(manual.open).to.be.false;
103
- await nextFrame();
104
- opened = oneEvent(hint, "sp-opened");
105
- hint.open = true;
106
- await opened;
107
- await elementUpdated(hint);
108
- expect(modal.open).to.be.false;
109
- expect(page.open).to.be.false;
110
- expect(hint.open).to.be.true;
111
- expect(auto.open).to.be.false;
112
- expect(manual.open).to.be.false;
113
- await nextFrame();
114
- opened = oneEvent(modal, "sp-opened");
115
- closed = oneEvent(hint, "sp-closed");
116
- modal.open = true;
117
- await opened;
118
- await closed;
119
- await elementUpdated(page);
120
- await elementUpdated(modal);
121
- expect(modal.open).to.be.true;
122
- expect(page.open).to.be.false;
123
- expect(hint.open).to.be.false;
124
- expect(auto.open).to.be.false;
125
- expect(manual.open).to.be.false;
126
- await nextFrame();
127
- closed = oneEvent(modal, "sp-closed");
128
- modal.open = false;
129
- await closed;
130
- await elementUpdated(page);
131
- expect(modal.open).to.be.false;
132
- expect(page.open).to.be.false;
133
- expect(hint.open).to.be.false;
134
- expect(auto.open).to.be.false;
135
- expect(manual.open).to.be.false;
136
- await nextFrame();
137
- opened = oneEvent(auto, "sp-opened");
138
- auto.open = true;
139
- await opened;
140
- await elementUpdated(auto);
141
- expect(modal.open).to.be.false;
142
- expect(page.open).to.be.false;
143
- expect(hint.open).to.be.false;
144
- expect(auto.open).to.be.true;
145
- expect(manual.open).to.be.false;
146
- await nextFrame();
147
- opened = oneEvent(modal, "sp-opened");
148
- closed = oneEvent(auto, "sp-closed");
149
- modal.open = true;
150
- await opened;
151
- await closed;
152
- await elementUpdated(auto);
153
- await elementUpdated(modal);
154
- expect(modal.open).to.be.true;
155
- expect(page.open).to.be.false;
156
- expect(hint.open).to.be.false;
157
- expect(auto.open).to.be.false;
158
- expect(manual.open).to.be.false;
159
- await nextFrame();
160
- closed = oneEvent(modal, "sp-closed");
161
- modal.open = false;
162
- await closed;
163
- await elementUpdated(modal);
164
- expect(modal.open).to.be.false;
165
- expect(page.open).to.be.false;
166
- expect(hint.open).to.be.false;
167
- expect(auto.open).to.be.false;
168
- expect(manual.open).to.be.false;
169
- await nextFrame();
170
- opened = oneEvent(manual, "sp-opened");
171
- manual.open = true;
172
- await opened;
173
- await elementUpdated(manual);
174
- expect(modal.open).to.be.false;
175
- expect(page.open).to.be.false;
176
- expect(hint.open).to.be.false;
177
- expect(auto.open).to.be.false;
178
- expect(manual.open).to.be.true;
179
- await nextFrame();
180
- opened = oneEvent(modal, "sp-opened");
181
- closed = oneEvent(manual, "sp-closed");
182
- modal.open = true;
183
- await opened;
184
- await closed;
185
- await elementUpdated(page);
186
- await elementUpdated(manual);
187
- expect(modal.open).to.be.true;
188
- expect(page.open).to.be.false;
189
- expect(hint.open).to.be.false;
190
- expect(auto.open).to.be.false;
191
- expect(manual.open).to.be.false;
49
+ describe("interaction with other non-ancestor overlays", function() {
50
+ beforeEach(async function() {
51
+ this.fixture = await styledFixture(html`
52
+ <div>
53
+ ${OVERLAY_TYPES.map(
54
+ (type) => html`
55
+ <sp-overlay type=${type}>
56
+ <sp-tooltip>${type} Content</sp-tooltip>
57
+ </sp-overlay>
58
+ `
59
+ )}
60
+ </div>
61
+ `);
62
+ this.modal = this.fixture.querySelector(
63
+ '[type="modal"]'
64
+ );
65
+ this.page = this.fixture.querySelector(
66
+ '[type="page"]'
67
+ );
68
+ this.hint = this.fixture.querySelector(
69
+ '[type="hint"]'
70
+ );
71
+ this.auto = this.fixture.querySelector(
72
+ '[type="auto"]'
73
+ );
74
+ this.manual = this.fixture.querySelector(
75
+ '[type="manual"]'
76
+ );
77
+ expect(this.modal.open).to.be.false;
78
+ expect(this.page.open).to.be.false;
79
+ expect(this.hint.open).to.be.false;
80
+ expect(this.auto.open).to.be.false;
81
+ expect(this.manual.open).to.be.false;
82
+ });
83
+ afterEach(async function() {
84
+ const closed = oneEvent(this.modal, "sp-closed");
85
+ this.modal.open = false;
86
+ await closed;
87
+ });
88
+ it('closes "page" overlays when opening', async function() {
89
+ let opened = oneEvent(this.page, "sp-opened");
90
+ this.page.open = true;
91
+ await opened;
92
+ expect(this.modal.open).to.be.false;
93
+ expect(this.page.open).to.be.true;
94
+ expect(this.hint.open).to.be.false;
95
+ expect(this.auto.open).to.be.false;
96
+ expect(this.manual.open).to.be.false;
97
+ opened = oneEvent(this.modal, "sp-opened");
98
+ const closed = oneEvent(this.page, "sp-closed");
99
+ this.modal.open = true;
100
+ await opened;
101
+ await closed;
102
+ expect(this.modal.open).to.be.true;
103
+ expect(this.page.open).to.be.false;
104
+ expect(this.hint.open).to.be.false;
105
+ expect(this.auto.open).to.be.false;
106
+ expect(this.manual.open).to.be.false;
107
+ });
108
+ it('closes "hint" overlays when opening', async function() {
109
+ let opened = oneEvent(this.hint, "sp-opened");
110
+ this.hint.open = true;
111
+ await opened;
112
+ expect(this.modal.open).to.be.false;
113
+ expect(this.page.open).to.be.false;
114
+ expect(this.hint.open).to.be.true;
115
+ expect(this.auto.open).to.be.false;
116
+ expect(this.manual.open).to.be.false;
117
+ opened = oneEvent(this.modal, "sp-opened");
118
+ const closed = oneEvent(this.hint, "sp-closed");
119
+ this.modal.open = true;
120
+ await opened;
121
+ await closed;
122
+ expect(this.modal.open).to.be.true;
123
+ expect(this.page.open).to.be.false;
124
+ expect(this.hint.open).to.be.false;
125
+ expect(this.auto.open).to.be.false;
126
+ expect(this.manual.open).to.be.false;
127
+ });
128
+ it('closes "auto" overlays when opening', async function() {
129
+ let opened = oneEvent(this.auto, "sp-opened");
130
+ this.auto.open = true;
131
+ await opened;
132
+ expect(this.modal.open).to.be.false;
133
+ expect(this.page.open).to.be.false;
134
+ expect(this.hint.open).to.be.false;
135
+ expect(this.auto.open).to.be.true;
136
+ expect(this.manual.open).to.be.false;
137
+ opened = oneEvent(this.modal, "sp-opened");
138
+ const closed = oneEvent(this.auto, "sp-closed");
139
+ this.modal.open = true;
140
+ await opened;
141
+ await closed;
142
+ expect(this.modal.open).to.be.true;
143
+ expect(this.page.open).to.be.false;
144
+ expect(this.hint.open).to.be.false;
145
+ expect(this.auto.open).to.be.false;
146
+ expect(this.manual.open).to.be.false;
147
+ });
148
+ it('does not close "manual" overlays when opening', async function() {
149
+ let opened = oneEvent(this.manual, "sp-opened");
150
+ this.manual.open = true;
151
+ await opened;
152
+ expect(this.modal.open).to.be.false;
153
+ expect(this.page.open).to.be.false;
154
+ expect(this.hint.open).to.be.false;
155
+ expect(this.auto.open).to.be.false;
156
+ expect(this.manual.open).to.be.true;
157
+ opened = oneEvent(this.modal, "sp-opened");
158
+ this.modal.open = true;
159
+ await opened;
160
+ expect(this.modal.open).to.be.true;
161
+ expect(this.page.open).to.be.false;
162
+ expect(this.hint.open).to.be.false;
163
+ expect(this.auto.open).to.be.false;
164
+ expect(this.manual.open).to.be.true;
165
+ });
192
166
  });
193
167
  });
194
168
  describe('[type="page"]', () => {
195
169
  opensDeclaratively("page");
196
- xit("closes all other overlay types when opening", async () => {
197
- const test = await styledFixture(html`
198
- <div>
199
- ${OVERLAY_TYPES.map(
200
- (type) => html`
201
- <sp-overlay type=${type}>
202
- <sp-tooltip>${type} Content</sp-tooltip>
203
- </sp-overlay>
204
- `
205
- )}
206
- </div>
207
- `);
208
- const modal = test.querySelector('[type="modal"]');
209
- const page = test.querySelector('[type="page"]');
210
- const hint = test.querySelector('[type="hint"]');
211
- const auto = test.querySelector('[type="auto"]');
212
- const manual = test.querySelector('[type="manual"]');
213
- expect(modal.open).to.be.false;
214
- expect(page.open).to.be.false;
215
- expect(hint.open).to.be.false;
216
- expect(auto.open).to.be.false;
217
- expect(manual.open).to.be.false;
218
- let opened = oneEvent(modal, "sp-opened");
219
- modal.open = true;
220
- await opened;
221
- await elementUpdated(modal);
222
- expect(modal.open).to.be.true;
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
- await nextFrame();
228
- opened = oneEvent(page, "sp-opened");
229
- let closed = oneEvent(modal, "sp-closed");
230
- page.open = true;
231
- await opened;
232
- await closed;
233
- await elementUpdated(page);
234
- await elementUpdated(modal);
235
- expect(modal.open).to.be.false;
236
- expect(page.open).to.be.true;
237
- expect(hint.open).to.be.false;
238
- expect(auto.open).to.be.false;
239
- expect(manual.open).to.be.false;
240
- await nextFrame();
241
- closed = oneEvent(page, "sp-closed");
242
- page.open = false;
243
- await closed;
244
- await elementUpdated(page);
245
- expect(modal.open).to.be.false;
246
- expect(page.open).to.be.false;
247
- expect(hint.open).to.be.false;
248
- expect(auto.open).to.be.false;
249
- expect(manual.open).to.be.false;
250
- await nextFrame();
251
- opened = oneEvent(hint, "sp-opened");
252
- hint.open = true;
253
- await opened;
254
- await elementUpdated(hint);
255
- expect(modal.open).to.be.false;
256
- expect(page.open).to.be.false;
257
- expect(hint.open).to.be.true;
258
- expect(auto.open).to.be.false;
259
- expect(manual.open).to.be.false;
260
- await nextFrame();
261
- opened = oneEvent(page, "sp-opened");
262
- closed = oneEvent(hint, "sp-closed");
263
- page.open = true;
264
- await opened;
265
- await closed;
266
- await elementUpdated(page);
267
- await elementUpdated(hint);
268
- expect(modal.open).to.be.false;
269
- expect(page.open).to.be.true;
270
- expect(hint.open).to.be.false;
271
- expect(auto.open).to.be.false;
272
- expect(manual.open).to.be.false;
273
- await nextFrame();
274
- closed = oneEvent(page, "sp-closed");
275
- page.open = false;
276
- await closed;
277
- await elementUpdated(page);
278
- expect(modal.open).to.be.false;
279
- expect(page.open).to.be.false;
280
- expect(hint.open).to.be.false;
281
- expect(auto.open).to.be.false;
282
- expect(manual.open).to.be.false;
283
- await nextFrame();
284
- opened = oneEvent(auto, "sp-opened");
285
- auto.open = true;
286
- await opened;
287
- await elementUpdated(auto);
288
- expect(modal.open).to.be.false;
289
- expect(page.open).to.be.false;
290
- expect(hint.open).to.be.false;
291
- expect(auto.open).to.be.true;
292
- expect(manual.open).to.be.false;
293
- await nextFrame();
294
- opened = oneEvent(page, "sp-opened");
295
- closed = oneEvent(auto, "sp-closed");
296
- page.open = true;
297
- await opened;
298
- await closed;
299
- await elementUpdated(auto);
300
- await elementUpdated(page);
301
- expect(modal.open).to.be.false;
302
- expect(page.open).to.be.true;
303
- expect(hint.open).to.be.false;
304
- expect(auto.open).to.be.false;
305
- expect(manual.open).to.be.false;
306
- await nextFrame();
307
- closed = oneEvent(page, "sp-closed");
308
- page.open = false;
309
- await closed;
310
- await elementUpdated(page);
311
- expect(modal.open).to.be.false;
312
- expect(page.open).to.be.false;
313
- expect(hint.open).to.be.false;
314
- expect(auto.open).to.be.false;
315
- expect(manual.open).to.be.false;
316
- await nextFrame();
317
- opened = oneEvent(manual, "sp-opened");
318
- manual.open = true;
319
- await opened;
320
- await elementUpdated(manual);
321
- expect(modal.open).to.be.false;
322
- expect(page.open).to.be.false;
323
- expect(hint.open).to.be.false;
324
- expect(auto.open).to.be.false;
325
- expect(manual.open).to.be.true;
326
- await nextFrame();
327
- opened = oneEvent(page, "sp-opened");
328
- closed = oneEvent(manual, "sp-closed");
329
- page.open = true;
330
- await opened;
331
- await closed;
332
- await elementUpdated(page);
333
- await elementUpdated(manual);
334
- expect(modal.open).to.be.false;
335
- expect(page.open).to.be.true;
336
- expect(hint.open).to.be.false;
337
- expect(auto.open).to.be.false;
338
- expect(manual.open).to.be.false;
170
+ describe("interaction with other non-ancestor overlays", function() {
171
+ beforeEach(async function() {
172
+ this.fixture = await styledFixture(html`
173
+ <div>
174
+ ${OVERLAY_TYPES.map(
175
+ (type) => html`
176
+ <sp-overlay type=${type}>
177
+ <sp-tooltip>${type} Content</sp-tooltip>
178
+ </sp-overlay>
179
+ `
180
+ )}
181
+ </div>
182
+ `);
183
+ this.modal = this.fixture.querySelector(
184
+ '[type="modal"]'
185
+ );
186
+ this.page = this.fixture.querySelector(
187
+ '[type="page"]'
188
+ );
189
+ this.hint = this.fixture.querySelector(
190
+ '[type="hint"]'
191
+ );
192
+ this.auto = this.fixture.querySelector(
193
+ '[type="auto"]'
194
+ );
195
+ this.manual = this.fixture.querySelector(
196
+ '[type="manual"]'
197
+ );
198
+ expect(this.modal.open).to.be.false;
199
+ expect(this.page.open).to.be.false;
200
+ expect(this.hint.open).to.be.false;
201
+ expect(this.auto.open).to.be.false;
202
+ expect(this.manual.open).to.be.false;
203
+ });
204
+ afterEach(async function() {
205
+ const closed = oneEvent(this.page, "sp-closed");
206
+ this.page.open = false;
207
+ await closed;
208
+ });
209
+ it('closes "page" overlays when opening', async function() {
210
+ let opened = oneEvent(this.modal, "sp-opened");
211
+ this.modal.open = true;
212
+ await opened;
213
+ expect(this.modal.open).to.be.true;
214
+ expect(this.page.open).to.be.false;
215
+ expect(this.hint.open).to.be.false;
216
+ expect(this.auto.open).to.be.false;
217
+ expect(this.manual.open).to.be.false;
218
+ opened = oneEvent(this.page, "sp-opened");
219
+ const closed = oneEvent(this.modal, "sp-closed");
220
+ this.page.open = true;
221
+ await opened;
222
+ await closed;
223
+ expect(this.modal.open).to.be.false;
224
+ expect(this.page.open).to.be.true;
225
+ expect(this.hint.open).to.be.false;
226
+ expect(this.auto.open).to.be.false;
227
+ expect(this.manual.open).to.be.false;
228
+ });
229
+ it('closes "hint" overlays when opening', async function() {
230
+ let opened = oneEvent(this.hint, "sp-opened");
231
+ this.hint.open = true;
232
+ await opened;
233
+ expect(this.modal.open).to.be.false;
234
+ expect(this.page.open).to.be.false;
235
+ expect(this.hint.open).to.be.true;
236
+ expect(this.auto.open).to.be.false;
237
+ expect(this.manual.open).to.be.false;
238
+ opened = oneEvent(this.page, "sp-opened");
239
+ const closed = oneEvent(this.hint, "sp-closed");
240
+ this.page.open = true;
241
+ await opened;
242
+ await closed;
243
+ expect(this.modal.open).to.be.false;
244
+ expect(this.page.open).to.be.true;
245
+ expect(this.hint.open).to.be.false;
246
+ expect(this.auto.open).to.be.false;
247
+ expect(this.manual.open).to.be.false;
248
+ });
249
+ it('closes "auto" overlays when opening', async function() {
250
+ let opened = oneEvent(this.auto, "sp-opened");
251
+ this.auto.open = true;
252
+ await opened;
253
+ expect(this.modal.open).to.be.false;
254
+ expect(this.page.open).to.be.false;
255
+ expect(this.hint.open).to.be.false;
256
+ expect(this.auto.open).to.be.true;
257
+ expect(this.manual.open).to.be.false;
258
+ opened = oneEvent(this.page, "sp-opened");
259
+ const closed = oneEvent(this.auto, "sp-closed");
260
+ this.page.open = true;
261
+ await opened;
262
+ await closed;
263
+ expect(this.modal.open).to.be.false;
264
+ expect(this.page.open).to.be.true;
265
+ expect(this.hint.open).to.be.false;
266
+ expect(this.auto.open).to.be.false;
267
+ expect(this.manual.open).to.be.false;
268
+ });
269
+ it('does not close "manual" overlays when opening', async function() {
270
+ let opened = oneEvent(this.manual, "sp-opened");
271
+ this.manual.open = true;
272
+ await opened;
273
+ expect(this.modal.open).to.be.false;
274
+ expect(this.page.open).to.be.false;
275
+ expect(this.hint.open).to.be.false;
276
+ expect(this.auto.open).to.be.false;
277
+ expect(this.manual.open).to.be.true;
278
+ opened = oneEvent(this.page, "sp-opened");
279
+ this.page.open = true;
280
+ await opened;
281
+ expect(this.modal.open).to.be.false;
282
+ expect(this.page.open).to.be.true;
283
+ expect(this.hint.open).to.be.false;
284
+ expect(this.auto.open).to.be.false;
285
+ expect(this.manual.open).to.be.true;
286
+ });
339
287
  });
340
288
  });
341
289
  describe('[type="hint"]', () => {
@@ -599,131 +547,117 @@ describe("sp-overlay", () => {
599
547
  });
600
548
  describe('[type="manual"]', () => {
601
549
  opensDeclaratively("manual");
602
- it("does not close other overlay types when opening", async () => {
603
- const test = await styledFixture(html`
604
- <div>
605
- ${OVERLAY_TYPES.map(
606
- (type) => html`
607
- <sp-overlay type=${type}>
608
- <sp-tooltip>${type} Content</sp-tooltip>
609
- </sp-overlay>
610
- `
611
- )}
612
- </div>
613
- `);
614
- const modal = test.querySelector('[type="modal"]');
615
- const page = test.querySelector('[type="page"]');
616
- const hint = test.querySelector('[type="hint"]');
617
- const auto = test.querySelector('[type="auto"]');
618
- const manual = test.querySelector('[type="manual"]');
619
- expect(modal.open).to.be.false;
620
- expect(page.open).to.be.false;
621
- expect(hint.open).to.be.false;
622
- expect(auto.open).to.be.false;
623
- expect(manual.open).to.be.false;
624
- let opened = oneEvent(modal, "sp-opened");
625
- modal.open = true;
626
- await opened;
627
- expect(modal.open).to.be.true;
628
- expect(page.open).to.be.false;
629
- expect(hint.open).to.be.false;
630
- expect(auto.open).to.be.false;
631
- expect(manual.open).to.be.false;
632
- opened = oneEvent(manual, "sp-opened");
633
- manual.open = true;
634
- await opened;
635
- expect(modal.open).to.be.true;
636
- expect(page.open).to.be.false;
637
- expect(hint.open).to.be.false;
638
- expect(auto.open).to.be.false;
639
- expect(manual.open).to.be.true;
640
- await nextFrame();
641
- let closed = oneEvent(modal, "sp-closed");
642
- let manualClosed = oneEvent(manual, "sp-closed");
643
- modal.open = false;
644
- manual.open = false;
645
- await closed;
646
- await manualClosed;
647
- expect(modal.open).to.be.false;
648
- expect(page.open).to.be.false;
649
- expect(hint.open).to.be.false;
650
- expect(auto.open).to.be.false;
651
- expect(manual.open).to.be.false;
652
- await nextFrame();
653
- opened = oneEvent(page, "sp-opened");
654
- page.open = true;
655
- await opened;
656
- expect(modal.open).to.be.false;
657
- expect(page.open).to.be.true;
658
- expect(hint.open).to.be.false;
659
- expect(auto.open).to.be.false;
660
- expect(manual.open).to.be.false;
661
- await nextFrame();
662
- opened = oneEvent(manual, "sp-opened");
663
- manual.open = true;
664
- await opened;
665
- expect(modal.open).to.be.false;
666
- expect(page.open).to.be.true;
667
- expect(hint.open).to.be.false;
668
- expect(auto.open).to.be.false;
669
- expect(manual.open).to.be.true;
670
- await nextFrame();
671
- closed = oneEvent(page, "sp-closed");
672
- manualClosed = oneEvent(manual, "sp-closed");
673
- page.open = false;
674
- manual.open = false;
675
- await closed;
676
- await manualClosed;
677
- expect(modal.open).to.be.false;
678
- expect(page.open).to.be.false;
679
- expect(hint.open).to.be.false;
680
- expect(auto.open).to.be.false;
681
- expect(manual.open).to.be.false;
682
- await nextFrame();
683
- opened = oneEvent(hint, "sp-opened");
684
- hint.open = true;
685
- await opened;
686
- expect(modal.open).to.be.false;
687
- expect(page.open).to.be.false;
688
- expect(hint.open).to.be.true;
689
- expect(auto.open).to.be.false;
690
- expect(manual.open).to.be.false;
691
- await nextFrame();
692
- opened = oneEvent(manual, "sp-opened");
693
- manual.open = true;
694
- await opened;
695
- expect(modal.open).to.be.false;
696
- expect(page.open).to.be.false;
697
- expect(hint.open).to.be.true;
698
- expect(auto.open).to.be.false;
699
- expect(manual.open).to.be.true;
700
- await nextFrame();
701
- closed = oneEvent(hint, "sp-closed");
702
- manualClosed = oneEvent(manual, "sp-closed");
703
- hint.open = false;
704
- manual.open = false;
705
- await closed;
706
- expect(modal.open).to.be.false;
707
- expect(page.open).to.be.false;
708
- expect(hint.open).to.be.false;
709
- expect(auto.open).to.be.false;
710
- expect(manual.open).to.be.false;
711
- opened = oneEvent(auto, "sp-opened");
712
- auto.open = true;
713
- await opened;
714
- expect(modal.open).to.be.false;
715
- expect(page.open).to.be.false;
716
- expect(hint.open).to.be.false;
717
- expect(auto.open).to.be.true;
718
- expect(manual.open).to.be.false;
719
- opened = oneEvent(manual, "sp-opened");
720
- manual.open = true;
721
- await opened;
722
- expect(modal.open).to.be.false;
723
- expect(page.open).to.be.false;
724
- expect(hint.open).to.be.false;
725
- expect(auto.open).to.be.true;
726
- expect(manual.open).to.be.true;
550
+ describe("interaction with other non-ancestor overlays", function() {
551
+ beforeEach(async function() {
552
+ this.fixture = await styledFixture(html`
553
+ <div>
554
+ ${OVERLAY_TYPES.map(
555
+ (type) => html`
556
+ <sp-overlay type=${type}>
557
+ <sp-tooltip>${type} Content</sp-tooltip>
558
+ </sp-overlay>
559
+ `
560
+ )}
561
+ </div>
562
+ `);
563
+ this.modal = this.fixture.querySelector(
564
+ '[type="modal"]'
565
+ );
566
+ this.page = this.fixture.querySelector(
567
+ '[type="page"]'
568
+ );
569
+ this.hint = this.fixture.querySelector(
570
+ '[type="hint"]'
571
+ );
572
+ this.auto = this.fixture.querySelector(
573
+ '[type="auto"]'
574
+ );
575
+ this.manual = this.fixture.querySelector(
576
+ '[type="manual"]'
577
+ );
578
+ expect(this.modal.open).to.be.false;
579
+ expect(this.page.open).to.be.false;
580
+ expect(this.hint.open).to.be.false;
581
+ expect(this.auto.open).to.be.false;
582
+ expect(this.manual.open).to.be.false;
583
+ });
584
+ afterEach(async function() {
585
+ const closed = oneEvent(this.manual, "sp-closed");
586
+ this.manual.open = false;
587
+ await closed;
588
+ });
589
+ it('does not close "modal" overlays when opening', async function() {
590
+ let opened = oneEvent(this.modal, "sp-opened");
591
+ this.modal.open = true;
592
+ await opened;
593
+ expect(this.modal.open).to.be.true;
594
+ expect(this.page.open).to.be.false;
595
+ expect(this.hint.open).to.be.false;
596
+ expect(this.auto.open).to.be.false;
597
+ expect(this.manual.open).to.be.false;
598
+ opened = oneEvent(this.manual, "sp-opened");
599
+ this.manual.open = true;
600
+ await opened;
601
+ expect(this.modal.open).to.be.true;
602
+ expect(this.page.open).to.be.false;
603
+ expect(this.hint.open).to.be.false;
604
+ expect(this.auto.open).to.be.false;
605
+ expect(this.manual.open).to.be.true;
606
+ });
607
+ it('does not close "modal" overlays when opening', async function() {
608
+ let opened = oneEvent(this.page, "sp-opened");
609
+ this.page.open = true;
610
+ await opened;
611
+ expect(this.modal.open).to.be.false;
612
+ expect(this.page.open).to.be.true;
613
+ expect(this.hint.open).to.be.false;
614
+ expect(this.auto.open).to.be.false;
615
+ expect(this.manual.open).to.be.false;
616
+ opened = oneEvent(this.manual, "sp-opened");
617
+ this.manual.open = true;
618
+ await opened;
619
+ expect(this.modal.open).to.be.false;
620
+ expect(this.page.open).to.be.true;
621
+ expect(this.hint.open).to.be.false;
622
+ expect(this.auto.open).to.be.false;
623
+ expect(this.manual.open).to.be.true;
624
+ });
625
+ it('does not close "hint" overlays when opening', async function() {
626
+ let opened = oneEvent(this.hint, "sp-opened");
627
+ this.hint.open = true;
628
+ await opened;
629
+ expect(this.modal.open).to.be.false;
630
+ expect(this.page.open).to.be.false;
631
+ expect(this.hint.open).to.be.true;
632
+ expect(this.auto.open).to.be.false;
633
+ expect(this.manual.open).to.be.false;
634
+ opened = oneEvent(this.manual, "sp-opened");
635
+ this.manual.open = true;
636
+ await opened;
637
+ expect(this.modal.open).to.be.false;
638
+ expect(this.page.open).to.be.false;
639
+ expect(this.hint.open).to.be.true;
640
+ expect(this.auto.open).to.be.false;
641
+ expect(this.manual.open).to.be.true;
642
+ });
643
+ it('does not close "auto" overlays when opening', async function() {
644
+ let opened = oneEvent(this.auto, "sp-opened");
645
+ this.auto.open = true;
646
+ await opened;
647
+ expect(this.modal.open).to.be.false;
648
+ expect(this.page.open).to.be.false;
649
+ expect(this.hint.open).to.be.false;
650
+ expect(this.auto.open).to.be.true;
651
+ expect(this.manual.open).to.be.false;
652
+ opened = oneEvent(this.manual, "sp-opened");
653
+ this.manual.open = true;
654
+ await opened;
655
+ expect(this.modal.open).to.be.false;
656
+ expect(this.page.open).to.be.false;
657
+ expect(this.hint.open).to.be.false;
658
+ expect(this.auto.open).to.be.true;
659
+ expect(this.manual.open).to.be.true;
660
+ });
727
661
  });
728
662
  });
729
663
  });