@primer/behaviors 0.0.0-2021113221730 → 0.0.0-2022017101021

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 (73) hide show
  1. package/lib/__tests__/anchored-position.test.d.ts +1 -0
  2. package/lib/__tests__/anchored-position.test.js +388 -0
  3. package/lib/__tests__/focus-trap.test.d.ts +1 -0
  4. package/lib/__tests__/focus-trap.test.js +234 -0
  5. package/lib/__tests__/focus-zone.test.d.ts +1 -0
  6. package/lib/__tests__/focus-zone.test.js +570 -0
  7. package/lib/__tests__/iterate-focusable-elements.test.d.ts +1 -0
  8. package/lib/__tests__/iterate-focusable-elements.test.js +55 -0
  9. package/lib/__tests__/scroll-into-view.test.d.ts +1 -0
  10. package/lib/__tests__/scroll-into-view.test.js +245 -0
  11. package/lib/anchored-position.d.ts +89 -0
  12. package/lib/anchored-position.js +316 -0
  13. package/lib/focus-trap.d.ts +12 -0
  14. package/lib/focus-trap.js +179 -0
  15. package/lib/focus-zone.d.ts +137 -0
  16. package/lib/focus-zone.js +578 -0
  17. package/{dist/index.js → lib/index.d.ts} +0 -0
  18. package/lib/index.js +57 -0
  19. package/lib/polyfills/event-listener-signal.d.ts +6 -0
  20. package/lib/polyfills/event-listener-signal.js +64 -0
  21. package/lib/scroll-into-view.d.ts +7 -0
  22. package/lib/scroll-into-view.js +42 -0
  23. package/{dist/utils/index.js → lib/utils/index.d.ts} +0 -0
  24. package/lib/utils/index.js +44 -0
  25. package/lib/utils/iterate-focusable-elements.d.ts +42 -0
  26. package/lib/utils/iterate-focusable-elements.js +113 -0
  27. package/lib/utils/unique-id.d.ts +1 -0
  28. package/lib/utils/unique-id.js +12 -0
  29. package/lib/utils/user-agent.d.ts +1 -0
  30. package/lib/utils/user-agent.js +15 -0
  31. package/lib-esm/__tests__/anchored-position.test.d.ts +1 -0
  32. package/lib-esm/__tests__/anchored-position.test.js +386 -0
  33. package/lib-esm/__tests__/focus-trap.test.d.ts +1 -0
  34. package/lib-esm/__tests__/focus-trap.test.js +227 -0
  35. package/lib-esm/__tests__/focus-zone.test.d.ts +1 -0
  36. package/lib-esm/__tests__/focus-zone.test.js +487 -0
  37. package/lib-esm/__tests__/iterate-focusable-elements.test.d.ts +1 -0
  38. package/lib-esm/__tests__/iterate-focusable-elements.test.js +48 -0
  39. package/lib-esm/__tests__/scroll-into-view.test.d.ts +1 -0
  40. package/lib-esm/__tests__/scroll-into-view.test.js +243 -0
  41. package/lib-esm/anchored-position.d.ts +89 -0
  42. package/lib-esm/anchored-position.js +309 -0
  43. package/lib-esm/focus-trap.d.ts +12 -0
  44. package/lib-esm/focus-trap.js +170 -0
  45. package/lib-esm/focus-zone.d.ts +137 -0
  46. package/lib-esm/focus-zone.js +559 -0
  47. package/{dist → lib-esm}/index.d.ts +0 -0
  48. package/lib-esm/index.js +4 -0
  49. package/{dist → lib-esm}/polyfills/event-listener-signal.d.ts +0 -0
  50. package/lib-esm/polyfills/event-listener-signal.js +57 -0
  51. package/{dist → lib-esm}/scroll-into-view.d.ts +0 -0
  52. package/lib-esm/scroll-into-view.js +35 -0
  53. package/{dist → lib-esm}/utils/index.d.ts +0 -0
  54. package/lib-esm/utils/index.js +3 -0
  55. package/lib-esm/utils/iterate-focusable-elements.d.ts +42 -0
  56. package/lib-esm/utils/iterate-focusable-elements.js +102 -0
  57. package/{dist → lib-esm}/utils/unique-id.d.ts +0 -0
  58. package/lib-esm/utils/unique-id.js +5 -0
  59. package/{dist → lib-esm}/utils/user-agent.d.ts +0 -0
  60. package/lib-esm/utils/user-agent.js +8 -0
  61. package/package.json +37 -5
  62. package/dist/anchored-position.d.ts +0 -15
  63. package/dist/anchored-position.js +0 -206
  64. package/dist/focus-trap.d.ts +0 -2
  65. package/dist/focus-trap.js +0 -107
  66. package/dist/focus-zone.d.ts +0 -32
  67. package/dist/focus-zone.js +0 -406
  68. package/dist/polyfills/event-listener-signal.js +0 -40
  69. package/dist/scroll-into-view.js +0 -17
  70. package/dist/utils/iterate-focusable-elements.d.ts +0 -8
  71. package/dist/utils/iterate-focusable-elements.js +0 -57
  72. package/dist/utils/unique-id.js +0 -4
  73. package/dist/utils/user-agent.js +0 -7
@@ -0,0 +1,386 @@
1
+ import { getAnchoredPosition } from '../anchored-position.js';
2
+ /*
3
+
4
+ Note: In each test below, we check the calculation from getAnchoredPosition against exact
5
+ values. For each `expect` call, there is an accompanying comment that distills the effective
6
+ calculation from the inputs, which may help debugging in the event of a test failure.
7
+
8
+ */
9
+ // The DOMRect constructor isn't available in JSDOM, so we improvise here.
10
+
11
+ function makeDOMRect(x, y, width, height) {
12
+ return {
13
+ x,
14
+ y,
15
+ width,
16
+ height,
17
+ top: y,
18
+ left: x,
19
+ right: x + width,
20
+ bottom: y + height,
21
+
22
+ toJSON() {
23
+ return this;
24
+ }
25
+
26
+ };
27
+ } // Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
28
+ // correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
29
+
30
+
31
+ function createVirtualDOM(parentRect, anchorRect, floatingRect, parentBorders = {
32
+ top: 0,
33
+ right: 0,
34
+ bottom: 0,
35
+ left: 0
36
+ }) {
37
+ const parent = document.createElement('div');
38
+ parent.style.overflow = 'hidden';
39
+ parent.style.position = 'relative';
40
+ parent.style.borderTopWidth = `${parentBorders.top}px`;
41
+ parent.style.borderRightWidth = `${parentBorders.right}px`;
42
+ parent.style.borderBottomWidth = `${parentBorders.bottom}px`;
43
+ parent.style.borderLeftWidth = `${parentBorders.left}px`;
44
+ parent.id = 'parent';
45
+ parent.innerHTML = '<div id="float"></div><div id="anchor"></div>';
46
+ const float = parent.querySelector('#float');
47
+ const anchor = parent.querySelector('#anchor');
48
+
49
+ anchor.getBoundingClientRect = () => anchorRect;
50
+
51
+ parent.getBoundingClientRect = () => parentRect;
52
+
53
+ float.getBoundingClientRect = () => floatingRect;
54
+
55
+ return {
56
+ float,
57
+ parent,
58
+ anchor
59
+ };
60
+ }
61
+
62
+ describe('getAnchoredPosition', () => {
63
+ it('returns the correct position in the default case with no overflow', () => {
64
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
65
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
66
+ document.body.innerHTML = '<div id="float"></div><div id="anchor"></div>';
67
+ const float = document.querySelector('#float');
68
+ const anchor = document.querySelector('#anchor');
69
+
70
+ float.getBoundingClientRect = () => floatingRect;
71
+
72
+ anchor.getBoundingClientRect = () => anchorRect;
73
+
74
+ document.body.getBoundingClientRect = () => makeDOMRect(0, 0, 1920, 0);
75
+
76
+ Object.defineProperty(window, 'innerHeight', {
77
+ get: () => 1080
78
+ });
79
+ const settings = {
80
+ anchorOffset: 4
81
+ };
82
+ const {
83
+ top,
84
+ left
85
+ } = getAnchoredPosition(float, anchor, settings);
86
+ expect(top).toEqual(254);
87
+ expect(left).toEqual(300);
88
+ });
89
+ it('returns the correct position in the default case with no overflow, inside a clipping parent', () => {
90
+ const parentRect = makeDOMRect(20, 20, 500, 500);
91
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
92
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
93
+ const {
94
+ float,
95
+ anchor
96
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
97
+ const settings = {
98
+ anchorOffset: 4
99
+ };
100
+ const {
101
+ top,
102
+ left
103
+ } = getAnchoredPosition(float, anchor, settings);
104
+ expect(top).toEqual(234);
105
+ expect(left).toEqual(280);
106
+ });
107
+ it('returns the correct position for different outside side settings with no overflow', () => {
108
+ const parentRect = makeDOMRect(20, 20, 500, 500);
109
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
110
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
111
+ const {
112
+ float,
113
+ anchor
114
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
115
+ const settings = {};
116
+ let top = 0;
117
+ let left = 0; // should be the same calculation as the default settings test above
118
+
119
+ settings.side = 'outside-bottom';
120
+ ({
121
+ top,
122
+ left
123
+ } = getAnchoredPosition(float, anchor, settings));
124
+ expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
125
+
126
+ expect(left).toEqual(280); // anchorRect.left - parentRect.left
127
+
128
+ settings.side = 'outside-left';
129
+ ({
130
+ top,
131
+ left
132
+ } = getAnchoredPosition(float, anchor, settings));
133
+ expect(top).toEqual(180); // anchorRect.top - parentRect.top
134
+
135
+ expect(left).toEqual(176); // anchorRect.left - floatingRect.width - (settings.anchorOffset ?? 4) - parentRect.left
136
+
137
+ settings.side = 'outside-right';
138
+ ({
139
+ top,
140
+ left
141
+ } = getAnchoredPosition(float, anchor, settings));
142
+ expect(top).toEqual(180); // anchorRect.top - parentRect.top
143
+
144
+ expect(left).toEqual(334); // anchorRect.left + anchorRect.width + (settings.anchorOffset ?? 4) - parentRect.left
145
+
146
+ settings.side = 'outside-top';
147
+ ({
148
+ top,
149
+ left
150
+ } = getAnchoredPosition(float, anchor, settings));
151
+ expect(top).toEqual(76); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
152
+
153
+ expect(left).toEqual(280); // anchorRect.left - parentRect.left
154
+ });
155
+ it('returns the correct position for different inside side settings', () => {
156
+ const parentRect = makeDOMRect(20, 20, 500, 500);
157
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
158
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
159
+ const {
160
+ float,
161
+ anchor
162
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
163
+ const settings = {};
164
+ let top = 0;
165
+ let left = 0;
166
+ settings.side = 'inside-bottom';
167
+ ({
168
+ top,
169
+ left
170
+ } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height - (settings.anchorOffset ?? 4) - floatingRect.height - parentRect.top
171
+
172
+ expect(top).toEqual(126); // anchorRect.left + (settings.alignmentOffset ?? 4) - parentRect.left
173
+
174
+ expect(left).toEqual(284);
175
+ settings.side = 'inside-left';
176
+ ({
177
+ top,
178
+ left
179
+ } = getAnchoredPosition(float, anchor, settings));
180
+ expect(top).toEqual(184); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
181
+
182
+ expect(left).toEqual(284); // anchorRect.left + (settings.anchorOffset ?? 4) - parentRect.left
183
+
184
+ settings.side = 'inside-right';
185
+ ({
186
+ top,
187
+ left
188
+ } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
189
+
190
+ expect(top).toEqual(184); // anchorRect.left + anchorRect.width - (settings.anchorOffset ?? 4) - floatingRect.width - parentRect.left
191
+
192
+ expect(left).toEqual(226); // almost the same as inside-left, with the exception of offsets
193
+
194
+ settings.side = 'inside-top';
195
+ ({
196
+ top,
197
+ left
198
+ } = getAnchoredPosition(float, anchor, settings));
199
+ expect(top).toEqual(184); // anchorRect.top + (settings.anchorOffset ?? 4) - parentRect.top
200
+
201
+ expect(left).toEqual(284); // anchorRect.left + (settings.alignmentOffset ?? 4) - parentRect.left
202
+
203
+ settings.side = 'inside-center';
204
+ ({
205
+ top,
206
+ left
207
+ } = getAnchoredPosition(float, anchor, settings));
208
+ expect(top).toEqual(184); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
209
+
210
+ expect(left).toEqual(255); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 - parentRect.left
211
+ });
212
+ it('returns the correct position inside centering along both axes', () => {
213
+ const parentRect = makeDOMRect(20, 20, 500, 500);
214
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
215
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
216
+ const {
217
+ float,
218
+ anchor
219
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
220
+ const settings = {
221
+ side: 'inside-center',
222
+ align: 'center'
223
+ };
224
+ const {
225
+ top,
226
+ left
227
+ } = getAnchoredPosition(float, anchor, settings);
228
+ expect(top).toEqual(155); // anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2 - parentRect.top
229
+
230
+ expect(left).toEqual(255); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 - parentRect.left
231
+ });
232
+ it('returns the correct position for different alignment settings with no overflow', () => {
233
+ const parentRect = makeDOMRect(20, 20, 500, 500);
234
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
235
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
236
+ const {
237
+ float,
238
+ anchor
239
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
240
+ const settings = {};
241
+ let top = 0;
242
+ let left = 0;
243
+ settings.align = 'start';
244
+ ({
245
+ top,
246
+ left
247
+ } = getAnchoredPosition(float, anchor, settings));
248
+ expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
249
+
250
+ expect(left).toEqual(280); // anchorRect.left + (settings.alignmentOffset ?? 0) - parentRect.left
251
+
252
+ settings.align = 'center';
253
+ ({
254
+ top,
255
+ left
256
+ } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
257
+
258
+ expect(top).toEqual(234); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 + (settings.anchorOffset ?? 0) - parentRect.left
259
+
260
+ expect(left).toEqual(255);
261
+ settings.align = 'end';
262
+ ({
263
+ top,
264
+ left
265
+ } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
266
+
267
+ expect(top).toEqual(234); // anchorRect.left + anchorRect.width - floatingRect.width - (settings.alignmentOffset ?? 0) - parentRect.left
268
+
269
+ expect(left).toEqual(230);
270
+ });
271
+ it('properly flips to the opposite side if the calculated position overflows along the same axis', () => {
272
+ const parentRect = makeDOMRect(20, 20, 500, 500);
273
+ const anchorRect = makeDOMRect(300, 400, 50, 50);
274
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
275
+ const {
276
+ float,
277
+ anchor
278
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
279
+ const settings = {};
280
+ const {
281
+ top,
282
+ left
283
+ } = getAnchoredPosition(float, anchor, settings);
284
+ expect(top).toEqual(276); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
285
+
286
+ expect(left).toEqual(280); // anchorRect.left - parentRect.left
287
+ });
288
+ it('properly moves to an adjacent side if overflow happens along side edge and flipped edge', () => {
289
+ const parentRect = makeDOMRect(20, 20, 500, 200);
290
+ const anchorRect = makeDOMRect(300, 100, 50, 50);
291
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
292
+ const {
293
+ float,
294
+ anchor
295
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
296
+ const settings = {};
297
+ const {
298
+ top,
299
+ left
300
+ } = getAnchoredPosition(float, anchor, settings);
301
+ expect(top).toEqual(80); // anchorRect.top - parentRect.top
302
+
303
+ expect(left).toEqual(334); // anchorRect.left + anchorRect.width + (settings.anchorOffset ?? 4) - parentRect.left
304
+ });
305
+ it('properly adjusts the position using an alignment offset if overflow happens along the alignment edge', () => {
306
+ const parentRect = makeDOMRect(20, 20, 500, 500);
307
+ const anchorRect = makeDOMRect(300, 200, 50, 50);
308
+ const floatingRect = makeDOMRect(NaN, NaN, 400, 100);
309
+ const {
310
+ float,
311
+ anchor
312
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
313
+ const settings = {};
314
+ const {
315
+ top,
316
+ left
317
+ } = getAnchoredPosition(float, anchor, settings);
318
+ expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
319
+
320
+ expect(left).toEqual(100); // parentRect.width - floatingRect.width
321
+ });
322
+ it('properly calculates the position that needs to be flipped and offset-adjusted', () => {
323
+ const parentRect = makeDOMRect(20, 20, 500, 500);
324
+ const anchorRect = makeDOMRect(300, 400, 50, 50);
325
+ const floatingRect = makeDOMRect(NaN, NaN, 400, 100);
326
+ const {
327
+ float,
328
+ anchor
329
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
330
+ const settings = {};
331
+ const {
332
+ top,
333
+ left
334
+ } = getAnchoredPosition(float, anchor, settings);
335
+ expect(top).toEqual(276); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
336
+
337
+ expect(left).toEqual(100); // parentRect.width - floatingRect.width
338
+ });
339
+ it('properly calculates the outside position with many simultaneous settings interactions (stress test)', () => {
340
+ const parentRect = makeDOMRect(20, 20, 200, 500);
341
+ const anchorRect = makeDOMRect(95, 295, 100, 200);
342
+ const floatingRect = makeDOMRect(NaN, NaN, 175, 200);
343
+ const {
344
+ float,
345
+ anchor
346
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
347
+ const settings = {
348
+ side: 'outside-right',
349
+ align: 'center',
350
+ alignmentOffset: 10,
351
+ anchorOffset: -10
352
+ };
353
+ const {
354
+ top,
355
+ left
356
+ } = getAnchoredPosition(float, anchor, settings); // expect to try right, left, and bottom before ending on top
357
+
358
+ expect(top).toEqual(85); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
359
+ // expect center alignment to run against edge, so ignored. Also causes alignment offset to be ignored.
360
+
361
+ expect(left).toEqual(25); // parentRect.width - floatingRect.width
362
+ });
363
+ it('properly calculates the inside position with many simultaneous settings interactions (stress test)', () => {
364
+ const parentRect = makeDOMRect(20, 20, 500, 500);
365
+ const anchorRect = makeDOMRect(100, 100, 300, 300);
366
+ const floatingRect = makeDOMRect(NaN, NaN, 100, 200);
367
+ const {
368
+ float,
369
+ anchor
370
+ } = createVirtualDOM(parentRect, anchorRect, floatingRect);
371
+ const settings = {
372
+ side: 'inside-right',
373
+ align: 'center',
374
+ alignmentOffset: 10,
375
+ anchorOffset: -10
376
+ };
377
+ const {
378
+ top,
379
+ left
380
+ } = getAnchoredPosition(float, anchor, settings); // anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2 + (settings.alignmentOffset ?? 4) - parentRect.top
381
+
382
+ expect(top).toEqual(140); // anchorRect.left + anchorRect.width - floatingRect.width - (settings.anchorOffset ?? 4) - parentRect.left
383
+
384
+ expect(left).toEqual(290);
385
+ });
386
+ });
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,227 @@
1
+ import { fireEvent, render } from '@testing-library/react';
2
+ import React from 'react';
3
+ import { focusTrap } from '../focus-trap.js'; // Since we use strict `isTabbable` checks within focus trap, we need to mock these
4
+ // properties that Jest does not populate.
5
+
6
+ beforeAll(() => {
7
+ try {
8
+ Object.defineProperties(HTMLElement.prototype, {
9
+ offsetHeight: {
10
+ get: () => 42
11
+ },
12
+ offsetWidth: {
13
+ get: () => 42
14
+ },
15
+ getClientRects: {
16
+ get: () => () => [42]
17
+ }
18
+ });
19
+ } catch {// ignore
20
+ }
21
+ });
22
+ it('Should initially focus the container when activated', () => {
23
+ const {
24
+ container
25
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
26
+ tabIndex: 0
27
+ }, "Bad Apple"), /*#__PURE__*/React.createElement("div", {
28
+ id: "trapContainer"
29
+ }, /*#__PURE__*/React.createElement("button", {
30
+ tabIndex: 0
31
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
32
+ tabIndex: 0
33
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
34
+ tabIndex: 0
35
+ }, "Cantaloupe"))));
36
+ const trapContainer = container.querySelector('#trapContainer');
37
+ const controller = focusTrap(trapContainer);
38
+ expect(document.activeElement).toEqual(trapContainer);
39
+ controller.abort();
40
+ });
41
+ it('Should initially focus the initialFocus element when specified', () => {
42
+ const {
43
+ container
44
+ } = render( /*#__PURE__*/React.createElement("div", {
45
+ id: "trapContainer"
46
+ }, /*#__PURE__*/React.createElement("button", {
47
+ tabIndex: 0
48
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
49
+ tabIndex: 0
50
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
51
+ tabIndex: 0
52
+ }, "Cantaloupe")));
53
+ const trapContainer = container.querySelector('#trapContainer');
54
+ const secondButton = trapContainer.querySelectorAll('button')[1];
55
+ const controller = focusTrap(trapContainer, secondButton);
56
+ expect(document.activeElement).toEqual(secondButton);
57
+ controller.abort();
58
+ });
59
+ it('Should prevent focus from exiting the trap, returns focus to previously-focused element', async () => {
60
+ const {
61
+ container
62
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
63
+ id: "trapContainer"
64
+ }, /*#__PURE__*/React.createElement("button", {
65
+ tabIndex: 0
66
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
67
+ tabIndex: 0
68
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
69
+ tabIndex: 0
70
+ }, "Cantaloupe")), /*#__PURE__*/React.createElement("button", {
71
+ id: "durian",
72
+ tabIndex: 0
73
+ }, "Durian")));
74
+ const trapContainer = container.querySelector('#trapContainer');
75
+ const secondButton = trapContainer.querySelectorAll('button')[1];
76
+ const durianButton = container.querySelector('#durian');
77
+ const controller = focusTrap(trapContainer);
78
+ focus(durianButton);
79
+ expect(document.activeElement).toEqual(trapContainer);
80
+ focus(secondButton);
81
+ expect(document.activeElement).toEqual(secondButton);
82
+ focus(durianButton);
83
+ expect(document.activeElement).toEqual(secondButton);
84
+ controller.abort();
85
+ });
86
+ it('Should prevent focus from exiting the trap if there are no focusable children', async () => {
87
+ const {
88
+ container
89
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
90
+ id: "trapContainer"
91
+ }), /*#__PURE__*/React.createElement("button", {
92
+ id: "durian",
93
+ tabIndex: 0
94
+ }, "Durian")));
95
+ const trapContainer = container.querySelector('#trapContainer');
96
+ const durianButton = container.querySelector('#durian');
97
+ const controller = focusTrap(trapContainer);
98
+ focus(durianButton);
99
+ expect(document.activeElement === durianButton).toEqual(false);
100
+ controller.abort();
101
+ });
102
+ it('Should cycle focus from last element to first element and vice-versa', async () => {
103
+ const {
104
+ container
105
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
106
+ id: "trapContainer"
107
+ }, /*#__PURE__*/React.createElement("button", {
108
+ tabIndex: 0
109
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
110
+ tabIndex: 0
111
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
112
+ tabIndex: 0
113
+ }, "Cantaloupe")), /*#__PURE__*/React.createElement("button", {
114
+ id: "durian",
115
+ tabIndex: 0
116
+ }, "Durian")));
117
+ const trapContainer = container.querySelector('#trapContainer');
118
+ const firstButton = trapContainer.querySelector('button');
119
+ const lastButton = trapContainer.querySelectorAll('button')[2];
120
+ const controller = focusTrap(trapContainer);
121
+ lastButton.focus();
122
+ fireEvent(lastButton, new KeyboardEvent('keydown', {
123
+ bubbles: true,
124
+ key: 'Tab'
125
+ }));
126
+ expect(document.activeElement).toEqual(firstButton);
127
+ fireEvent(firstButton, new KeyboardEvent('keydown', {
128
+ bubbles: true,
129
+ key: 'Tab',
130
+ shiftKey: true
131
+ }));
132
+ expect(document.activeElement).toEqual(lastButton);
133
+ controller.abort();
134
+ });
135
+ it('Should should release the trap when the signal is aborted', async () => {
136
+ const {
137
+ container
138
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
139
+ id: "trapContainer"
140
+ }, /*#__PURE__*/React.createElement("button", {
141
+ tabIndex: 0
142
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
143
+ tabIndex: 0
144
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
145
+ tabIndex: 0
146
+ }, "Cantaloupe")), /*#__PURE__*/React.createElement("button", {
147
+ id: "durian",
148
+ tabIndex: 0
149
+ }, "Durian")));
150
+ const trapContainer = container.querySelector('#trapContainer');
151
+ const durianButton = container.querySelector('#durian');
152
+ const controller = focusTrap(trapContainer);
153
+ focus(durianButton);
154
+ expect(document.activeElement).toEqual(trapContainer);
155
+ controller.abort();
156
+ focus(durianButton);
157
+ expect(document.activeElement).toEqual(durianButton);
158
+ });
159
+ it('Should should release the trap when the container is removed from the DOM', async () => {
160
+ var _trapContainer$parent;
161
+
162
+ const {
163
+ container
164
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
165
+ id: "trapContainer"
166
+ }, /*#__PURE__*/React.createElement("button", {
167
+ tabIndex: 0
168
+ }, "Apple")), /*#__PURE__*/React.createElement("button", {
169
+ id: "durian",
170
+ tabIndex: 0
171
+ }, "Durian")));
172
+ const trapContainer = container.querySelector('#trapContainer');
173
+ const durianButton = container.querySelector('#durian');
174
+ const firstButton = trapContainer.querySelector('button');
175
+ focusTrap(trapContainer);
176
+ focus(durianButton);
177
+ expect(document.activeElement).toEqual(trapContainer); // empty trap and remove it from the DOM
178
+
179
+ trapContainer.removeChild(firstButton);
180
+ (_trapContainer$parent = trapContainer.parentElement) === null || _trapContainer$parent === void 0 ? void 0 : _trapContainer$parent.removeChild(trapContainer);
181
+ focus(durianButton);
182
+ expect(document.activeElement).toEqual(durianButton);
183
+ });
184
+ it('Should handle dynamic content', async () => {
185
+ const {
186
+ container
187
+ } = render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
188
+ id: "trapContainer"
189
+ }, /*#__PURE__*/React.createElement("button", {
190
+ tabIndex: 0
191
+ }, "Apple"), /*#__PURE__*/React.createElement("button", {
192
+ tabIndex: 0
193
+ }, "Banana"), /*#__PURE__*/React.createElement("button", {
194
+ tabIndex: 0
195
+ }, "Cantaloupe")), /*#__PURE__*/React.createElement("button", {
196
+ id: "durian",
197
+ tabIndex: 0
198
+ }, "Durian")));
199
+ const trapContainer = container.querySelector('#trapContainer');
200
+ const [firstButton, secondButton, thirdButton] = trapContainer.querySelectorAll('button');
201
+ const controller = focusTrap(trapContainer);
202
+ secondButton.focus();
203
+ trapContainer.removeChild(thirdButton);
204
+ fireEvent(secondButton, new KeyboardEvent('keydown', {
205
+ bubbles: true,
206
+ key: 'Tab'
207
+ }));
208
+ expect(document.activeElement).toEqual(firstButton);
209
+ fireEvent(firstButton, new KeyboardEvent('keydown', {
210
+ bubbles: true,
211
+ key: 'Tab',
212
+ shiftKey: true
213
+ }));
214
+ expect(document.activeElement).toEqual(secondButton);
215
+ controller.abort();
216
+ });
217
+ /**
218
+ * Helper to handle firing the focusin event, which jest/JSDOM does not do for us.
219
+ * @param element
220
+ */
221
+
222
+ function focus(element) {
223
+ element.focus();
224
+ fireEvent(element, new FocusEvent('focusin', {
225
+ bubbles: true
226
+ }));
227
+ }
@@ -0,0 +1 @@
1
+ export {};