focus-trap-react 10.1.0 → 10.1.1
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 +6 -0
- package/README.md +42 -33
- package/dist/focus-trap-react.js +4 -0
- package/package.json +11 -11
- package/src/focus-trap-react.js +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 10.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 65c508c: Bump focus-trap to v7.4.0 for new onPost/Pause and onPost/Unpause hooks via existing `focusTrapOptions` prop. ([#948](https://github.com/focus-trap/focus-trap-react/issues/948))
|
|
8
|
+
|
|
3
9
|
## 10.1.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# focus-trap-react [](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [](https://codecov.io/gh/focus-trap/focus-trap-react) [](./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
|
A React component that traps focus.
|
|
@@ -268,6 +268,12 @@ Type: `Object`, optional
|
|
|
268
268
|
|
|
269
269
|
Pass any of the options available in focus-trap's [createOptions](https://github.com/focus-trap/focus-trap#createoptions).
|
|
270
270
|
|
|
271
|
+
> ❗️ This prop is __only read once__ on the first render. It's never looked at again. This is particularly important if you use state-dependent memoized __React Hooks__ (e.g. `const onActivate = useCallback(() => {...}, [something])`) for any of the focus-trap callbacks like `onActivate()`, `onDeactivate()`, `clickOutsideDeactivates()`, etc.
|
|
272
|
+
>
|
|
273
|
+
> If you need state-dependent callbacks, you have two options: __(1)__ Use a React component `class` (as in the examples in this README) with bound member handlers, or __(2)__ use a React Ref like `useRef({ myState: 1 })` in your callbacks and manually manage your state.
|
|
274
|
+
>
|
|
275
|
+
> See [#947](https://github.com/focus-trap/focus-trap-react/issues/947) for more details.
|
|
276
|
+
|
|
271
277
|
> ⚠️ See notes about __[testing in JSDom](#testing-in-jsdom)__ (e.g. using Jest) if that's what you currently use.
|
|
272
278
|
|
|
273
279
|
### active
|
|
@@ -324,38 +330,41 @@ In alphabetical order:
|
|
|
324
330
|
<!-- prettier-ignore-start -->
|
|
325
331
|
<!-- markdownlint-disable -->
|
|
326
332
|
<table>
|
|
327
|
-
<
|
|
328
|
-
<
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
<
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
<
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
<
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
333
|
+
<tbody>
|
|
334
|
+
<tr>
|
|
335
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/AlexKDawson"><img src="https://avatars.githubusercontent.com/u/16471362?v=4?s=100" width="100px;" alt="Alex Dawson"/><br /><sub><b>Alex Dawson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=AlexKDawson" title="Documentation">📖</a></td>
|
|
336
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Ayc0"><img src="https://avatars3.githubusercontent.com/u/22725671?v=4?s=100" width="100px;" alt="Benjamin Koltes"/><br /><sub><b>Benjamin Koltes</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AAyc0" title="Bug reports">🐛</a></td>
|
|
337
|
+
<td align="center" valign="top" width="14.28%"><a href="https://ofcr.se/"><img src="https://avatars1.githubusercontent.com/u/813865?v=4?s=100" width="100px;" alt="Benjamin Tan"/><br /><sub><b>Benjamin Tan</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=bnjmnt4n" title="Documentation">📖</a></td>
|
|
338
|
+
<td align="center" valign="top" width="14.28%"><a href="https://clintgoodman.com"><img src="https://avatars3.githubusercontent.com/u/5473697?v=4?s=100" width="100px;" alt="Clint Goodman"/><br /><sub><b>Clint Goodman</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=cgood92" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=cgood92" title="Documentation">📖</a> <a href="#example-cgood92" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=cgood92" title="Tests">⚠️</a></td>
|
|
339
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/DSil"><img src="https://avatars1.githubusercontent.com/u/6265045?v=4?s=100" width="100px;" alt="Daniel"/><br /><sub><b>Daniel</b></sub></a><br /><a href="#maintenance-DSil" title="Maintenance">🚧</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=DSil" title="Tests">⚠️</a></td>
|
|
340
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Dan503"><img src="https://avatars.githubusercontent.com/u/10610368?v=4?s=100" width="100px;" alt="Daniel Tonon"/><br /><sub><b>Daniel Tonon</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=Dan503" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=Dan503" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=Dan503" title="Tests">⚠️</a></td>
|
|
341
|
+
<td align="center" valign="top" width="14.28%"><a href="http://davidtheclark.com/"><img src="https://avatars2.githubusercontent.com/u/628431?v=4?s=100" width="100px;" alt="David Clark"/><br /><sub><b>David Clark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Adavidtheclark" title="Bug reports">🐛</a> <a href="#infra-davidtheclark" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=davidtheclark" title="Documentation">📖</a> <a href="#maintenance-davidtheclark" title="Maintenance">🚧</a></td>
|
|
342
|
+
</tr>
|
|
343
|
+
<tr>
|
|
344
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4?s=100" width="100px;" alt="Dependabot"/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td>
|
|
345
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/jhnns"><img src="https://avatars.githubusercontent.com/u/781746?v=4?s=100" width="100px;" alt="Johannes Ewald"/><br /><sub><b>Johannes Ewald</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=jhnns" title="Code">💻</a></td>
|
|
346
|
+
<td align="center" valign="top" width="14.28%"><a href="http://josuzuki.me"><img src="https://avatars1.githubusercontent.com/u/9583920?v=4?s=100" width="100px;" alt="Jonathan Suzuki"/><br /><sub><b>Jonathan Suzuki</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AJoSuzuki" title="Bug reports">🐛</a></td>
|
|
347
|
+
<td align="center" valign="top" width="14.28%"><a href="http://kathleenmcmahon.dev/"><img src="https://avatars1.githubusercontent.com/u/11621935?v=4?s=100" width="100px;" alt="Kathleen McMahon"/><br /><sub><b>Kathleen McMahon</b></sub></a><br /><a href="#maintenance-resource11" title="Maintenance">🚧</a></td>
|
|
348
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/LoganDark"><img src="https://avatars.githubusercontent.com/u/4723091?v=4?s=100" width="100px;" alt="LoganDark"/><br /><sub><b>LoganDark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ALoganDark" title="Bug reports">🐛</a></td>
|
|
349
|
+
<td align="center" valign="top" width="14.28%"><a href="https://marais.io/"><img src="https://avatars2.githubusercontent.com/u/599459?v=4?s=100" width="100px;" alt="Marais Rossouw"/><br /><sub><b>Marais Rossouw</b></sub></a><br /><a href="#infra-maraisr" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
|
|
350
|
+
<td align="center" valign="top" width="14.28%"><a href="https://www.moroshko.me"><img src="https://avatars.githubusercontent.com/u/259753?v=4?s=100" width="100px;" alt="Misha Moroshko"/><br /><sub><b>Misha Moroshko</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Amoroshko" title="Bug reports">🐛</a></td>
|
|
351
|
+
</tr>
|
|
352
|
+
<tr>
|
|
353
|
+
<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-react/commits?author=liunate" title="Tests">⚠️</a></td>
|
|
354
|
+
<td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/rivajunior/"><img src="https://avatars1.githubusercontent.com/u/11370172?v=4?s=100" width="100px;" alt="Rivaldo Junior"/><br /><sub><b>Rivaldo Junior</b></sub></a><br /><a href="#maintenance-rivajunior" title="Maintenance">🚧</a></td>
|
|
355
|
+
<td align="center" valign="top" width="14.28%"><a href="https://scottrippey.github.io/"><img src="https://avatars3.githubusercontent.com/u/430608?v=4?s=100" width="100px;" alt="Scott Rippey"/><br /><sub><b>Scott Rippey</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=scottrippey" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Ascottrippey" title="Bug reports">🐛</a></td>
|
|
356
|
+
<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-react/commits?author=SeanMcP" title="Code">💻</a></td>
|
|
357
|
+
<td align="center" valign="top" width="14.28%"><a href="http://smoores.dev"><img src="https://avatars.githubusercontent.com/u/5354254?v=4?s=100" width="100px;" alt="Shane Moore"/><br /><sub><b>Shane Moore</b></sub></a><br /><a href="#platform-SMores" title="Packaging/porting to new platform">📦</a></td>
|
|
358
|
+
<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-react/commits?author=Slapbox" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3ASlapbox" title="Bug reports">🐛</a></td>
|
|
359
|
+
<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-react/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/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-react/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
|
|
360
|
+
</tr>
|
|
361
|
+
<tr>
|
|
362
|
+
<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="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Documentation">📖</a> <a href="#example-thawkin3" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=thawkin3" title="Tests">⚠️</a> <a href="#tool-thawkin3" title="Tools">🔧</a></td>
|
|
363
|
+
<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-react/commits?author=wandroll" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap-react/commits?author=wandroll" title="Tests">⚠️</a></td>
|
|
364
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/krikienoid"><img src="https://avatars3.githubusercontent.com/u/8528227?v=4?s=100" width="100px;" alt="krikienoid"/><br /><sub><b>krikienoid</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Akrikienoid" title="Bug reports">🐛</a></td>
|
|
365
|
+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/syntactic-salt"><img src="https://avatars.githubusercontent.com/u/9385662?v=4?s=100" width="100px;" alt="syntactic-salt"/><br /><sub><b>syntactic-salt</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Asyntactic-salt" title="Bug reports">🐛</a></td>
|
|
366
|
+
</tr>
|
|
367
|
+
</tbody>
|
|
359
368
|
</table>
|
|
360
369
|
|
|
361
370
|
<!-- markdownlint-restore -->
|
package/dist/focus-trap-react.js
CHANGED
|
@@ -406,6 +406,10 @@ FocusTrap.propTypes = {
|
|
|
406
406
|
onActivate: PropTypes.func,
|
|
407
407
|
onPostActivate: PropTypes.func,
|
|
408
408
|
checkCanFocusTrap: PropTypes.func,
|
|
409
|
+
onPause: PropTypes.func,
|
|
410
|
+
onPostPause: PropTypes.func,
|
|
411
|
+
onUnpause: PropTypes.func,
|
|
412
|
+
onPostUnpause: PropTypes.func,
|
|
409
413
|
onDeactivate: PropTypes.func,
|
|
410
414
|
onPostDeactivate: PropTypes.func,
|
|
411
415
|
checkCanReturnFocus: PropTypes.func,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "focus-trap-react",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.1",
|
|
4
4
|
"description": "A React component that traps focus.",
|
|
5
5
|
"main": "dist/focus-trap-react.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -65,25 +65,25 @@
|
|
|
65
65
|
"@babel/preset-react": "^7.18.6",
|
|
66
66
|
"@changesets/cli": "^2.26.0",
|
|
67
67
|
"@testing-library/cypress": "^9.0.0",
|
|
68
|
-
"@testing-library/dom": "^
|
|
68
|
+
"@testing-library/dom": "^9.0.0",
|
|
69
69
|
"@testing-library/jest-dom": "^5.16.5",
|
|
70
|
-
"@testing-library/react": "^
|
|
70
|
+
"@testing-library/react": "^14.0.0",
|
|
71
71
|
"@testing-library/user-event": "^14.4.3",
|
|
72
72
|
"@types/jquery": "^3.5.16",
|
|
73
73
|
"all-contributors-cli": "^6.24.0",
|
|
74
|
-
"babel-jest": "^29.
|
|
74
|
+
"babel-jest": "^29.5.0",
|
|
75
75
|
"babelify": "^10.0.0",
|
|
76
76
|
"browserify": "^17.0.0",
|
|
77
77
|
"budo": "^11.8.4",
|
|
78
|
-
"cypress": "^12.
|
|
78
|
+
"cypress": "^12.7.0",
|
|
79
79
|
"cypress-plugin-tab": "^1.0.5",
|
|
80
|
-
"eslint": "^8.
|
|
81
|
-
"eslint-config-prettier": "^8.
|
|
80
|
+
"eslint": "^8.35.0",
|
|
81
|
+
"eslint-config-prettier": "^8.7.0",
|
|
82
82
|
"eslint-plugin-cypress": "^2.12.1",
|
|
83
83
|
"eslint-plugin-jest": "^27.2.1",
|
|
84
84
|
"eslint-plugin-react": "^7.32.2",
|
|
85
|
-
"jest": "^29.
|
|
86
|
-
"jest-environment-jsdom": "^29.
|
|
85
|
+
"jest": "^29.5.0",
|
|
86
|
+
"jest-environment-jsdom": "^29.5.0",
|
|
87
87
|
"jest-watch-typeahead": "^2.2.2",
|
|
88
88
|
"onchange": "^7.1.0",
|
|
89
89
|
"prettier": "^2.8.4",
|
|
@@ -91,11 +91,11 @@
|
|
|
91
91
|
"react": "^18.2.0",
|
|
92
92
|
"react-dom": "^18.2.0",
|
|
93
93
|
"regenerator-runtime": "^0.13.11",
|
|
94
|
-
"start-server-and-test": "^
|
|
94
|
+
"start-server-and-test": "^2.0.0",
|
|
95
95
|
"typescript": "^4.9.5"
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
98
|
-
"focus-trap": "^7.
|
|
98
|
+
"focus-trap": "^7.4.0",
|
|
99
99
|
"tabbable": "^6.1.1"
|
|
100
100
|
},
|
|
101
101
|
"peerDependencies": {
|
package/src/focus-trap-react.js
CHANGED
|
@@ -423,6 +423,10 @@ FocusTrap.propTypes = {
|
|
|
423
423
|
onActivate: PropTypes.func,
|
|
424
424
|
onPostActivate: PropTypes.func,
|
|
425
425
|
checkCanFocusTrap: PropTypes.func,
|
|
426
|
+
onPause: PropTypes.func,
|
|
427
|
+
onPostPause: PropTypes.func,
|
|
428
|
+
onUnpause: PropTypes.func,
|
|
429
|
+
onPostUnpause: PropTypes.func,
|
|
426
430
|
onDeactivate: PropTypes.func,
|
|
427
431
|
onPostDeactivate: PropTypes.func,
|
|
428
432
|
checkCanReturnFocus: PropTypes.func,
|