focus-trap 7.6.4 → 7.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -1
- package/README.md +231 -53
- package/dist/focus-trap.esm.js +24 -24
- package/dist/focus-trap.esm.js.map +1 -1
- package/dist/focus-trap.esm.min.js +2 -2
- package/dist/focus-trap.esm.min.js.map +1 -1
- package/dist/focus-trap.js +24 -24
- package/dist/focus-trap.js.map +1 -1
- package/dist/focus-trap.min.js +2 -2
- package/dist/focus-trap.min.js.map +1 -1
- package/dist/focus-trap.umd.js +24 -24
- package/dist/focus-trap.umd.js.map +1 -1
- package/dist/focus-trap.umd.min.js +2 -2
- package/dist/focus-trap.umd.min.js.map +1 -1
- package/index.js +1 -1
- package/package.json +31 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 7.6.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- dcd4ae9: Update `tabbable` dependency to [6.3.0](https://github.com/focus-trap/tabbable/blob/master/CHANGELOG.md#630) for new `displayCheck` option.
|
|
8
|
+
|
|
9
|
+
## 7.6.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- d51ad78: Allow activation element in shadow DOM to be auto-focused after trap is deactivated
|
|
14
|
+
|
|
3
15
|
## 7.6.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -239,7 +251,6 @@
|
|
|
239
251
|
There may be cases where we don't want to focus the first tabbable element when a focus trap activates.
|
|
240
252
|
|
|
241
253
|
Examples use-cases:
|
|
242
|
-
|
|
243
254
|
- Modals/dialogs
|
|
244
255
|
- On mobile devices where "tabbing" doesn't make sense without a connected Bluetooth keyboard
|
|
245
256
|
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# focus-trap [](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [](./LICENSE)
|
|
2
2
|
|
|
3
3
|
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
4
|
-
[](#contributors)
|
|
5
5
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
6
6
|
|
|
7
7
|
Trap focus within a DOM node.
|
|
@@ -89,54 +89,231 @@ Returns a new focus trap on `element` (one or more "containers" of tabbable node
|
|
|
89
89
|
|
|
90
90
|
> A focus trap must have at least one container with at least one tabbable/focusable node in it to be considered valid. While nodes can be added/removed at runtime, with the trap adjusting to added/removed tabbable nodes, **an error will be thrown** if the trap ever gets into a state where it determines none of its containers have any tabbable nodes in them *and* the `fallbackFocus` option does not resolve to an alternate node where focus can go.
|
|
91
91
|
|
|
92
|
-
####
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
92
|
+
#### Trap Configuration Options
|
|
93
|
+
|
|
94
|
+
##### onActivate
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
() => void
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
A function that will be called **before** sending focus to the target element upon activation.
|
|
101
|
+
|
|
102
|
+
##### onPostActivate
|
|
103
|
+
|
|
104
|
+
```typescript
|
|
105
|
+
() => void
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
A function that will be called **after** sending focus to the target element upon activation **unless** initial focus is delayed because the [delayInitialFocus](#delayinitialfocus) is true (default).
|
|
109
|
+
|
|
110
|
+
##### onPause
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
() => void
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
A function that will be called immediately after the trap's state is updated to be paused.
|
|
117
|
+
|
|
118
|
+
##### onPostPause
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
() => void
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
A function that will be called after the trap has been completely paused and is no longer managing/trapping focus.
|
|
125
|
+
|
|
126
|
+
##### onUnpause
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
() => void
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
A function that will be called immediately after the trap's state is updated to be active again, but prior to updating its knowledge of what nodes are tabbable within its containers, and prior to actively managing/trapping focus.
|
|
133
|
+
|
|
134
|
+
##### onPostUnpause
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
() => void
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
A function that will be called after the trap has been completely unpaused and is once again managing/trapping focus.
|
|
141
|
+
|
|
142
|
+
Note that if [delayInitialFocus](#delayinitialfocus) is true, this handler will be called **before** focus is re-set on the initial focused node.
|
|
143
|
+
|
|
144
|
+
##### checkCanFocusTrap
|
|
145
|
+
|
|
146
|
+
```typescript
|
|
147
|
+
(containers: Array<HTMLElement | SVGElement>) => Promise<void>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Animated dialogs have a small delay between when `onActivate` is called and when the focus trap is focusable. `checkCanFocusTrap` expects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to the first tabbable node (in tab order) in the focus trap (or the node configured in the `initialFocus` option).
|
|
151
|
+
|
|
152
|
+
##### onDeactivate
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
() => void
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
A function that will be called **before** returning focus to the node that had focus prior to activation (or configured with the `setReturnFocus` option) upon deactivation.
|
|
159
|
+
|
|
160
|
+
##### onPostDeactivate
|
|
161
|
+
|
|
162
|
+
```typescript
|
|
163
|
+
() => void
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
A function that will be called after the trap is deactivated, after `onDeactivate`. If the `returnFocus` deactivation option was set, it will be called **after** returning focus to the node that had focus prior to activation (or configured with the `setReturnFocus` option) upon deactivation; otherwise, it will be called after deactivation completes.
|
|
167
|
+
|
|
168
|
+
##### checkCanReturnFocus
|
|
169
|
+
|
|
170
|
+
```typescript
|
|
171
|
+
(trigger: HTMLElement | SVGElement) => Promise<void>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
An animated trigger button will have a small delay between when `onDeactivate` is called and when the focus is able to be sent back to the trigger. `checkCanReturnFocus` expects a promise to be returned. When that promise settles (resolves or rejects), focus will be sent to to the node that had focus prior to the activation of the trap (or the node configured in the `setReturnFocus` option).
|
|
175
|
+
|
|
176
|
+
##### initialFocus
|
|
177
|
+
|
|
178
|
+
```typescript
|
|
179
|
+
HTMLElement | SVGElement | string | false | undefined | (() => HTMLElement | SVGElement | string | false | undefined)
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
By default (when `undefined` or the function returns `undefined`), when a focus trap is activated, the active element will receive focus if it's in the trap, otherwise, the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these. You can also set this option to `false` (or to a function that returns `false`) to prevent any initial focus at all when the trap activates.
|
|
183
|
+
|
|
184
|
+
- Setting this option to `false` (or a function that returns `false`) will prevent the `fallbackFocus` option from being used.
|
|
185
|
+
- If the option resolves to a non-focusable node (e.g. one that exists, but is hidden), the default behavior will be used (as though the option weren't set at all).
|
|
186
|
+
- If the option resolves to a non-existent node, an exception will be thrown.
|
|
187
|
+
- If the option resolves to a valid selector string (directly set, or returned from a function), but the selector doesn't match a node, the trap will fall back to the `fallbackFocus` node option. If that option also fails to yield a node, an exception will be thrown.
|
|
188
|
+
- If the option resolves to `undefined` (i.e. not set or function returns `undefined`), the default behavior will be used.
|
|
189
|
+
- ⚠️ See warning below about **[Shadow DOM](#shadow-dom)** and selector strings.
|
|
190
|
+
|
|
191
|
+
##### fallbackFocus
|
|
192
|
+
|
|
193
|
+
```typescript
|
|
194
|
+
HTMLElement | SVGElement | string | () => HTMLElement | SVGElement | string
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements. *Make sure the fallback element has a negative `tabindex` so it can be programmatically focused.* The option value can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node), or a function that returns any of these.
|
|
198
|
+
|
|
199
|
+
- If `initialFocus` is `false` (or a function that returns `false`), this function will not be called when the trap is activated, and no element will be initially focused. This function may still be called while the trap is active if things change such that there are no longer any tabbable nodes in the trap.
|
|
200
|
+
- ⚠️ See warning below about **[Shadow DOM](#shadow-dom)** and selector strings.
|
|
201
|
+
|
|
202
|
+
##### escapeDeactivates
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
boolean | (e: KeyboardEvent) => boolean
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
Default: `true`. If `false` or returns `false`, the `Escape` key will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out. Note that if a function is given, it's only called if the ESC key was pressed.
|
|
209
|
+
|
|
210
|
+
##### clickOutsideDeactivates
|
|
211
|
+
|
|
212
|
+
```typescript
|
|
213
|
+
boolean | (e: MouseEvent | TouchEvent) => boolean
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
If `true` or returns `true`, a click outside the focus trap will immediately deactivate the focus trap and allow the click event to do its thing (i.e. to pass-through to the element that was clicked). This option **takes precedence** over `allowOutsideClick` when it's set to `true`. Default: `false`.
|
|
217
|
+
|
|
218
|
+
- If a function is provided, it will be called up to **twice** (but only if the click occurs *outside* the trap's containers): First on the `mousedown` (or `touchstart` on mobile) event and, if `true` was returned, again on the `click` event. It will get the same node each time, and it's recommended that the returned value is also the same each time. Be sure to check the event type if the double call is an issue in your code.
|
|
219
|
+
- ⚠️ If you're using a password manager such as 1Password, where the app adds a clickable icon to all fillable fields, you should avoid using this option, and instead use the `allowOutsideClick` option to better control exactly when the focus trap can be deactivated. The clickable icons are usually positioned absolutely, floating on top of the fields, and therefore *not* part of the container the trap is managing. When using the `clickOutsideDeactivates` option, clicking on a field's 1Password icon will likely cause the trap to be unintentionally deactivated.
|
|
220
|
+
|
|
221
|
+
##### allowOutsideClick
|
|
222
|
+
|
|
223
|
+
```typescript
|
|
224
|
+
boolean | (e: MouseEvent | TouchEvent) => boolean
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
If set and is or returns `true`, a click outside the focus trap will not be prevented (letting focus temporarily escape the trap, without deactivating it), even if `clickOutsideDeactivates=false`. Default: `false`.
|
|
228
|
+
|
|
229
|
+
- If this is a function, it will be called up to **twice** on every click (but only if the click occurs *outside* the trap's containers): First on `mousedown` (or `touchstart` on mobile), and then on the actual `click` if the function returned `true` on the first event. Be sure to check the event type if the double call is an issue in your code.
|
|
230
|
+
- 💡 When `clickOutsideDeactivates=true`, this option is **ignored** (i.e. if it's a function, it will not be called).
|
|
231
|
+
- Use this option to control if (and even which) clicks are allowed outside the trap in conjunction with `clickOutsideDeactivates=false`.
|
|
232
|
+
|
|
233
|
+
##### returnFocusOnDeactivate
|
|
234
|
+
|
|
235
|
+
```typescript
|
|
236
|
+
boolean
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
Default: `true`. If `false`, when the trap is deactivated, focus will *not* return to the element that had focus before activation.
|
|
240
|
+
|
|
241
|
+
- 💬 When using this option in conjunction with `clickOutsideDeactivates=true`:
|
|
242
|
+
- If `returnFocusOnDeactivate=true` and the outside click causing deactivation is on a focusable element, focus will __not__ return to that element; instead, it will return to the node focused just before activation.
|
|
243
|
+
- If `returnFocusOnDeactivate=false` and the outside click is on a focusable node, focus will __remain__ on that node instead of the node focused just before activation. If the outside click is on a non-focusable node, then "nothing" will have focus post-deactivation.
|
|
244
|
+
|
|
245
|
+
##### setReturnFocus
|
|
246
|
+
|
|
247
|
+
```typescript
|
|
248
|
+
HTMLElement | SVGElement | string | (previousActiveElement: HTMLElement | SVGElement) => HTMLElement | SVGElement | string | false
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
By default, on **deactivation**, if `returnFocusOnDeactivate=true` (or if `returnFocus=true` in the [deactivation options](#trapdeactivate)), focus will be returned to the element that was focused just before activation. With this option, you can specify another element to programmatically receive focus after deactivation. It can be a DOM node, a selector string (which will be passed to `document.querySelector()` to find the DOM node **upon deactivation**), or a function that returns any of these to call **upon deactivation** (i.e. the selector and function options are only executed at the time the trap is deactivated). Can also be `false` (or return `false`) to leave focus where it is at the time of deactivation.
|
|
252
|
+
|
|
253
|
+
- 💬 Using the selector or function options is a good way to return focus to a DOM node that may not exist at the time the trap is activated.
|
|
254
|
+
- ⚠️ See warning below about **[Shadow DOM](#shadow-dom)** and selector strings.
|
|
255
|
+
|
|
256
|
+
##### preventScroll
|
|
257
|
+
|
|
258
|
+
```typescript
|
|
259
|
+
boolean
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
By default, focus() will scroll to the element if not in viewport. It can produce unintended effects like scrolling back to the top of a modal. If set to `true`, no scroll will happen.
|
|
263
|
+
|
|
264
|
+
##### delayInitialFocus
|
|
265
|
+
|
|
266
|
+
```typescript
|
|
267
|
+
boolean
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
Default: `true`. Delays the autofocus to the next execution frame when the focus trap is activated. This prevents elements within the focusable element from capturing the event that triggered the focus trap activation.
|
|
271
|
+
|
|
272
|
+
🔺 Note that when this option is `true` (default), it means the initial element to be focused will not be focused until **after** [onPostActivate](#onpostactivate) or [onPostUnpause](#onpostunpause) are called.
|
|
273
|
+
|
|
274
|
+
##### document
|
|
275
|
+
|
|
276
|
+
```typescript
|
|
277
|
+
Document
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Default: `window.document`. Document where the focus trap will be active. This enables the use of FocusTrap [inside an iFrame](https://focus-trap.github.io/focus-trap/#demo-in-iframe).
|
|
281
|
+
|
|
282
|
+
- ⚠️ Note that FocusTrap will be unable to trap focus outside the iFrame if you configure this option to be the iFrame's document. It will only trap focus _inside_ of it (as the demo shows). If you want to trap focus _outside_ as well, then your FocusTrap must be configured on an element that [contains the iFrame](https://focus-trap.github.io/focus-trap/#demo-iframe).
|
|
283
|
+
|
|
284
|
+
##### tabbableOptions
|
|
285
|
+
|
|
286
|
+
[Tabbable options](https://github.com/focus-trap/tabbable#common-options) configurable on FocusTrap (all the *common options*).
|
|
287
|
+
|
|
288
|
+
- ⚠️ See notes about **[testing in JSDom](#testing-in-jsdom)** (e.g. using Jest).
|
|
289
|
+
|
|
290
|
+
##### trapStack
|
|
291
|
+
|
|
292
|
+
```typescript
|
|
293
|
+
Array<FocusTrap>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
Define the global trap stack. This makes it possible to share the same stack in multiple instances of `focus-trap` in the same page such that auto-activation/pausing of traps is properly coordinated among all instances as activating a trap when another is already active should result in the other being auto-paused. By default, each instance will have its own internal stack, leading to conflicts if they each try to trap the focus at the same time.
|
|
297
|
+
|
|
298
|
+
##### isKeyForward
|
|
299
|
+
|
|
300
|
+
```typescript
|
|
301
|
+
(event: KeyboardEvent) => boolean
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
Determines if the given keyboard event is a "tab forward" event that will move the focus to the next trapped element in tab order. Defaults to the `TAB` key. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also see `isKeyBackward()` option.
|
|
305
|
+
|
|
306
|
+
- ⚠️ Using this option will not automatically prevent use of the `TAB` key as the browser will continue to respond to it by moving focus forward because that's what using the `TAB` key does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your own `keydown` handler to call `preventDefault()` on a `TAB` key event if you want to completely suppress the use of the `TAB` key.
|
|
307
|
+
|
|
308
|
+
##### isKeyBackward
|
|
309
|
+
|
|
310
|
+
```typescript
|
|
311
|
+
(event: KeyboardEvent) => boolean
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
Determines if the given keyboard event is a "tab backward" event that will move the focus to the previous trapped element in tab order. Defaults to the `SHIFT+TAB` key. Use this to override the trap's behavior if you want to use arrow keys to control keyboard navigation within the trap, for example. Also see `isKeyForward()` option.
|
|
315
|
+
|
|
316
|
+
- ⚠️ Using this option will not automatically prevent use of the `SHIFT+TAB` key as the browser will continue to respond to it by moving focus backward because that's what using the `SHIFT+TAB` key sequence does in a browser, but it will no longer respect the trap's container edges as it normally would. You will need to add your own `keydown` handler to call `preventDefault()` on a `TAB` key event if you want to completely suppress the use of the `SHIFT+TAB` key sequence.
|
|
140
317
|
|
|
141
318
|
#### Shadow DOM
|
|
142
319
|
|
|
@@ -400,36 +577,37 @@ In alphabetical order:
|
|
|
400
577
|
<td align="center" valign="top" width="14.28%"><a href="https://www.schilljs.com/"><img src="https://avatars.githubusercontent.com/u/213943?v=4?s=100" width="100px;" alt="Joas Schilling"/><br /><sub><b>Joas Schilling</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/pulls?q=is%3Apr+reviewed-by%3Anickvergessen" title="Reviewed Pull Requests">👀</a></td>
|
|
401
578
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/skjnldsv"><img src="https://avatars.githubusercontent.com/u/14975046?v=4?s=100" width="100px;" alt="John Molakvoæ"/><br /><sub><b>John Molakvoæ</b></sub></a><br /><a href="#ideas-skjnldsv" title="Ideas, Planning, & Feedback">🤔</a></td>
|
|
402
579
|
<td align="center" valign="top" width="14.28%"><a href="http://reload.dk"><img src="https://avatars.githubusercontent.com/u/73966?v=4?s=100" width="100px;" alt="Kasper Garnæs"/><br /><sub><b>Kasper Garnæs</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=kasperg" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Akasperg" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=kasperg" title="Code">💻</a></td>
|
|
403
|
-
<td align="center" valign="top" width="14.28%"><a href="
|
|
580
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/marioliu-block"><img src="https://avatars.githubusercontent.com/u/104794152?v=4?s=100" width="100px;" alt="Mario Liu"/><br /><sub><b>Mario Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=marioliu-block" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Amarioliu-block" title="Bug reports">🐛</a></td>
|
|
404
581
|
</tr>
|
|
405
582
|
<tr>
|
|
583
|
+
<td align="center" valign="top" width="14.28%"><a href="http://blogs.esri.com/esri/arcgis/"><img src="https://avatars.githubusercontent.com/u/1231455?v=4?s=100" width="100px;" alt="Matt Driscoll"/><br /><sub><b>Matt Driscoll</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Adriskull" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=driskull" title="Code">💻</a> <a href="#tutorial-driskull" title="Tutorials">✅</a></td>
|
|
406
584
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/msev"><img src="https://avatars.githubusercontent.com/u/1529562?v=4?s=100" width="100px;" alt="Maxime"/><br /><sub><b>Maxime</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Amsev" title="Bug reports">🐛</a></td>
|
|
407
585
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/michael-ar"><img src="https://avatars3.githubusercontent.com/u/18557997?v=4?s=100" width="100px;" alt="Michael Reynolds"/><br /><sub><b>Michael Reynolds</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Amichael-ar" title="Bug reports">🐛</a></td>
|
|
408
586
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4?s=100" width="100px;" alt="Nate Liu"/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=liunate" title="Tests">⚠️</a></td>
|
|
409
587
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/far-fetched"><img src="https://avatars.githubusercontent.com/u/11621383?v=4?s=100" width="100px;" alt="Piotr Panek"/><br /><sub><b>Piotr Panek</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Afar-fetched" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Tests">⚠️</a></td>
|
|
410
588
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/randypuro"><img src="https://avatars2.githubusercontent.com/u/2579?v=4?s=100" width="100px;" alt="Randy Puro"/><br /><sub><b>Randy Puro</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Arandypuro" title="Bug reports">🐛</a></td>
|
|
411
589
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/sadick254"><img src="https://avatars2.githubusercontent.com/u/5238135?v=4?s=100" width="100px;" alt="Sadick"/><br /><sub><b>Sadick</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Documentation">📖</a></td>
|
|
412
|
-
<td align="center" valign="top" width="14.28%"><a href="https://scottblinch.me/"><img src="https://avatars2.githubusercontent.com/u/4682114?v=4?s=100" width="100px;" alt="Scott Blinch"/><br /><sub><b>Scott Blinch</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=scottblinch" title="Documentation">📖</a></td>
|
|
413
590
|
</tr>
|
|
414
591
|
<tr>
|
|
592
|
+
<td align="center" valign="top" width="14.28%"><a href="https://scottblinch.me/"><img src="https://avatars2.githubusercontent.com/u/4682114?v=4?s=100" width="100px;" alt="Scott Blinch"/><br /><sub><b>Scott Blinch</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=scottblinch" title="Documentation">📖</a></td>
|
|
415
593
|
<td align="center" valign="top" width="14.28%"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt="Sean McPherson"/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=SeanMcP" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=SeanMcP" title="Documentation">📖</a></td>
|
|
416
594
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/skriems"><img src="https://avatars.githubusercontent.com/u/15573317?v=4?s=100" width="100px;" alt="Sebastian Kriems"/><br /><sub><b>Sebastian Kriems</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Askriems" title="Bug reports">🐛</a></td>
|
|
417
595
|
<td align="center" valign="top" width="14.28%"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4?s=100" width="100px;" alt="Slapbox"/><br /><sub><b>Slapbox</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3ASlapbox" title="Bug reports">🐛</a></td>
|
|
418
596
|
<td align="center" valign="top" width="14.28%"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4?s=100" width="100px;" alt="Stefan Cameron"/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
|
|
419
597
|
<td align="center" valign="top" width="14.28%"><a href="http://tylerhawkins.info/201R/"><img src="https://avatars0.githubusercontent.com/u/13806458?v=4?s=100" width="100px;" alt="Tyler Hawkins"/><br /><sub><b>Tyler Hawkins</b></sub></a><br /><a href="#tool-thawkin3" title="Tools">🔧</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=thawkin3" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=thawkin3" title="Documentation">📖</a></td>
|
|
420
598
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/vasiliki-b"><img src="https://avatars.githubusercontent.com/u/98032598?v=4?s=100" width="100px;" alt="Vasiliki Boutas"/><br /><sub><b>Vasiliki Boutas</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Avasiliki-b" title="Bug reports">🐛</a></td>
|
|
421
|
-
<td align="center" valign="top" width="14.28%"><a href="https://vinicius73.dev/"><img src="https://avatars.githubusercontent.com/u/1561347?v=4?s=100" width="100px;" alt="Vinicius Reis"/><br /><sub><b>Vinicius Reis</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=vinicius73" title="Code">💻</a> <a href="#ideas-vinicius73" title="Ideas, Planning, & Feedback">🤔</a></td>
|
|
422
599
|
</tr>
|
|
423
600
|
<tr>
|
|
601
|
+
<td align="center" valign="top" width="14.28%"><a href="https://vinicius73.dev/"><img src="https://avatars.githubusercontent.com/u/1561347?v=4?s=100" width="100px;" alt="Vinicius Reis"/><br /><sub><b>Vinicius Reis</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=vinicius73" title="Code">💻</a> <a href="#ideas-vinicius73" title="Ideas, Planning, & Feedback">🤔</a></td>
|
|
424
602
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/wandroll"><img src="https://avatars.githubusercontent.com/u/4492317?v=4?s=100" width="100px;" alt="Wandrille Verlut"/><br /><sub><b>Wandrille Verlut</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=wandroll" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=wandroll" title="Documentation">📖</a> <a href="#tool-wandroll" title="Tools">🔧</a></td>
|
|
425
603
|
<td align="center" valign="top" width="14.28%"><a href="http://willmruzek.com/"><img src="https://avatars.githubusercontent.com/u/108522?v=4?s=100" width="100px;" alt="Will Mruzek"/><br /><sub><b>Will Mruzek</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=mruzekw" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=mruzekw" title="Documentation">📖</a> <a href="#example-mruzekw" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=mruzekw" title="Tests">⚠️</a> <a href="#question-mruzekw" title="Answering Questions">💬</a></td>
|
|
426
604
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/zioth"><img src="https://avatars3.githubusercontent.com/u/945603?v=4?s=100" width="100px;" alt="Zioth"/><br /><sub><b>Zioth</b></sub></a><br /><a href="#ideas-zioth" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Azioth" title="Bug reports">🐛</a></td>
|
|
427
605
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/glushkova91"><img src="https://avatars.githubusercontent.com/u/13402897?v=4?s=100" width="100px;" alt="glushkova91"/><br /><sub><b>glushkova91</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=glushkova91" title="Documentation">📖</a></td>
|
|
428
606
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/jpveooys"><img src="https://avatars.githubusercontent.com/u/66470099?v=4?s=100" width="100px;" alt="jpveooys"/><br /><sub><b>jpveooys</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Ajpveooys" title="Bug reports">🐛</a></td>
|
|
429
607
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/konradr33"><img src="https://avatars.githubusercontent.com/u/32595283?v=4?s=100" width="100px;" alt="konradr33"/><br /><sub><b>konradr33</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Akonradr33" title="Bug reports">🐛</a></td>
|
|
430
|
-
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tomasvn"><img src="https://avatars.githubusercontent.com/u/17225564?v=4?s=100" width="100px;" alt="tomasvn"/><br /><sub><b>tomasvn</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=tomasvn" title="Code">💻</a></td>
|
|
431
608
|
</tr>
|
|
432
609
|
<tr>
|
|
610
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tomasvn"><img src="https://avatars.githubusercontent.com/u/17225564?v=4?s=100" width="100px;" alt="tomasvn"/><br /><sub><b>tomasvn</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=tomasvn" title="Code">💻</a></td>
|
|
433
611
|
<td align="center" valign="top" width="14.28%"><a href="https://github.com/simonxabris"><img src="https://avatars.githubusercontent.com/u/27497229?v=4?s=100" width="100px;" alt="Ábris Simon"/><br /><sub><b>Ábris Simon</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=simonxabris" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Asimonxabris" title="Bug reports">🐛</a></td>
|
|
434
612
|
</tr>
|
|
435
613
|
</tbody>
|
package/dist/focus-trap.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* focus-trap 7.6.
|
|
2
|
+
* focus-trap 7.6.6
|
|
3
3
|
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
|
|
4
4
|
*/
|
|
5
5
|
import { tabbable, focusable, isTabbable, getTabIndex, isFocusable } from 'tabbable';
|
|
@@ -53,8 +53,8 @@ function _toConsumableArray(r) {
|
|
|
53
53
|
function _toPrimitive(t, r) {
|
|
54
54
|
if ("object" != typeof t || !t) return t;
|
|
55
55
|
var e = t[Symbol.toPrimitive];
|
|
56
|
-
if (
|
|
57
|
-
var i = e.call(t, r
|
|
56
|
+
if (void 0 !== e) {
|
|
57
|
+
var i = e.call(t, r);
|
|
58
58
|
if ("object" != typeof i) return i;
|
|
59
59
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
60
60
|
}
|
|
@@ -68,7 +68,7 @@ function _unsupportedIterableToArray(r, a) {
|
|
|
68
68
|
if (r) {
|
|
69
69
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
70
70
|
var t = {}.toString.call(r).slice(8, -1);
|
|
71
|
-
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) :
|
|
71
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
@@ -103,10 +103,10 @@ var isSelectableInput = function isSelectableInput(node) {
|
|
|
103
103
|
return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
|
|
104
104
|
};
|
|
105
105
|
var isEscapeEvent = function isEscapeEvent(e) {
|
|
106
|
-
return (e === null || e ===
|
|
106
|
+
return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27;
|
|
107
107
|
};
|
|
108
108
|
var isTabEvent = function isTabEvent(e) {
|
|
109
|
-
return (e === null || e ===
|
|
109
|
+
return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;
|
|
110
110
|
};
|
|
111
111
|
|
|
112
112
|
// checks for TAB by default
|
|
@@ -133,7 +133,7 @@ var valueOrHandler = function valueOrHandler(value) {
|
|
|
133
133
|
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
134
134
|
params[_key - 1] = arguments[_key];
|
|
135
135
|
}
|
|
136
|
-
return typeof value === 'function' ? value.apply(
|
|
136
|
+
return typeof value === 'function' ? value.apply(void 0, params) : value;
|
|
137
137
|
};
|
|
138
138
|
var getActualTarget = function getActualTarget(event) {
|
|
139
139
|
// NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the
|
|
@@ -152,8 +152,8 @@ var internalTrapStack = [];
|
|
|
152
152
|
var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
153
153
|
// SSR: a live trap shouldn't be created in this type of environment so this
|
|
154
154
|
// should be safe code to execute if the `document` option isn't specified
|
|
155
|
-
var doc = (userOptions === null || userOptions ===
|
|
156
|
-
var trapStack = (userOptions === null || userOptions ===
|
|
155
|
+
var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
|
|
156
|
+
var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
|
|
157
157
|
var config = _objectSpread2({
|
|
158
158
|
returnFocusOnDeactivate: true,
|
|
159
159
|
escapeDeactivates: true,
|
|
@@ -225,7 +225,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
225
225
|
* if the element isn't found.
|
|
226
226
|
*/
|
|
227
227
|
var findContainerIndex = function findContainerIndex(element, event) {
|
|
228
|
-
var composedPath = typeof (event === null || event ===
|
|
228
|
+
var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
|
|
229
229
|
// NOTE: search `containerGroups` because it's possible a group contains no tabbable
|
|
230
230
|
// nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
|
|
231
231
|
// and we still need to find the element in there
|
|
@@ -236,7 +236,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
236
236
|
// web components if the `tabbableOptions.getShadowRoot` option was used for
|
|
237
237
|
// the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
|
|
238
238
|
// look inside web components even if open)
|
|
239
|
-
composedPath === null || composedPath ===
|
|
239
|
+
composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
|
|
240
240
|
return node === element;
|
|
241
241
|
});
|
|
242
242
|
});
|
|
@@ -263,12 +263,12 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
263
263
|
var getNodeForOption = function getNodeForOption(optionName) {
|
|
264
264
|
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
265
265
|
_ref2$hasFallback = _ref2.hasFallback,
|
|
266
|
-
hasFallback = _ref2$hasFallback ===
|
|
266
|
+
hasFallback = _ref2$hasFallback === void 0 ? false : _ref2$hasFallback,
|
|
267
267
|
_ref2$params = _ref2.params,
|
|
268
|
-
params = _ref2$params ===
|
|
268
|
+
params = _ref2$params === void 0 ? [] : _ref2$params;
|
|
269
269
|
var optionValue = config[optionName];
|
|
270
270
|
if (typeof optionValue === 'function') {
|
|
271
|
-
optionValue = optionValue.apply(
|
|
271
|
+
optionValue = optionValue.apply(void 0, _toConsumableArray(params));
|
|
272
272
|
}
|
|
273
273
|
if (optionValue === true) {
|
|
274
274
|
optionValue = undefined; // use default value
|
|
@@ -484,7 +484,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
484
484
|
var target = _ref3.target,
|
|
485
485
|
event = _ref3.event,
|
|
486
486
|
_ref3$isBackward = _ref3.isBackward,
|
|
487
|
-
isBackward = _ref3$isBackward ===
|
|
487
|
+
isBackward = _ref3$isBackward === void 0 ? false : _ref3$isBackward;
|
|
488
488
|
target = target || getActualTarget(event);
|
|
489
489
|
updateTabbableNodes();
|
|
490
490
|
var destinationNode = null;
|
|
@@ -865,15 +865,15 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
865
865
|
}
|
|
866
866
|
state.active = true;
|
|
867
867
|
state.paused = false;
|
|
868
|
-
state.nodeFocusedBeforeActivation = doc
|
|
869
|
-
onActivate === null || onActivate ===
|
|
868
|
+
state.nodeFocusedBeforeActivation = _getActiveElement(doc);
|
|
869
|
+
onActivate === null || onActivate === void 0 || onActivate();
|
|
870
870
|
var finishActivation = function finishActivation() {
|
|
871
871
|
if (checkCanFocusTrap) {
|
|
872
872
|
updateTabbableNodes();
|
|
873
873
|
}
|
|
874
874
|
addListeners();
|
|
875
875
|
updateObservedNodes();
|
|
876
|
-
onPostActivate === null || onPostActivate ===
|
|
876
|
+
onPostActivate === null || onPostActivate === void 0 || onPostActivate();
|
|
877
877
|
};
|
|
878
878
|
if (checkCanFocusTrap) {
|
|
879
879
|
checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
|
|
@@ -902,13 +902,13 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
902
902
|
var onPostDeactivate = getOption(options, 'onPostDeactivate');
|
|
903
903
|
var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
|
|
904
904
|
var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
|
|
905
|
-
onDeactivate === null || onDeactivate ===
|
|
905
|
+
onDeactivate === null || onDeactivate === void 0 || onDeactivate();
|
|
906
906
|
var finishDeactivation = function finishDeactivation() {
|
|
907
907
|
delay(function () {
|
|
908
908
|
if (returnFocus) {
|
|
909
909
|
_tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
|
|
910
910
|
}
|
|
911
|
-
onPostDeactivate === null || onPostDeactivate ===
|
|
911
|
+
onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
|
|
912
912
|
});
|
|
913
913
|
};
|
|
914
914
|
if (returnFocus && checkCanReturnFocus) {
|
|
@@ -962,18 +962,18 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
962
962
|
if (paused) {
|
|
963
963
|
var onPause = getOption(options, 'onPause');
|
|
964
964
|
var onPostPause = getOption(options, 'onPostPause');
|
|
965
|
-
onPause === null || onPause ===
|
|
965
|
+
onPause === null || onPause === void 0 || onPause();
|
|
966
966
|
removeListeners();
|
|
967
967
|
updateObservedNodes();
|
|
968
|
-
onPostPause === null || onPostPause ===
|
|
968
|
+
onPostPause === null || onPostPause === void 0 || onPostPause();
|
|
969
969
|
} else {
|
|
970
970
|
var onUnpause = getOption(options, 'onUnpause');
|
|
971
971
|
var onPostUnpause = getOption(options, 'onPostUnpause');
|
|
972
|
-
onUnpause === null || onUnpause ===
|
|
972
|
+
onUnpause === null || onUnpause === void 0 || onUnpause();
|
|
973
973
|
updateTabbableNodes();
|
|
974
974
|
addListeners();
|
|
975
975
|
updateObservedNodes();
|
|
976
|
-
onPostUnpause === null || onPostUnpause ===
|
|
976
|
+
onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
|
|
977
977
|
}
|
|
978
978
|
return this;
|
|
979
979
|
}
|