{"_id":"@benjamminj/use-focus-trap","_rev":"3-b4a79aec076c2ed1f762064003a32cdb","name":"@benjamminj/use-focus-trap","dist-tags":{"latest":"1.0.0"},"versions":{"0.2.4":{"version":"0.2.4","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","e2e":"yarn cypress open","e2e:run":"yarn cypress run","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","size:fresh":"rm -rf dist && yarn build && yarn size","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"jest":{"globals":{"ts-jest":{"diagnostics":false}}},"name":"@benjamminj/use-focus-trap","author":{"name":"Ben Johnson"},"module":"dist/use-focus-trap.esm.js","size-limit":[{"path":"dist/use-focus-trap.cjs.production.min.js","limit":"1 KB"},{"path":"dist/use-focus-trap.esm.js","limit":"1 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.7.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.9","cypress":"^5.6.0","cypress-plugin-tab":"^1.0.5","husky":"^4.3.0","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.7.0","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.0.5"},"dependencies":{},"description":"<!-- TODO: badges -->","licenseText":"MIT License\n\nCopyright (c) 2020 Ben Johnson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@benjamminj/use-focus-trap@0.2.4","dist":{"shasum":"067c7e953c0d03322676cd44fe8db05ba01da990","integrity":"sha512-67tEHWyvRmyTogeYfwRK1ilZY/aPUdXvLS3CaIuIEfSqjEVdH2SE8uDHYjh4RPwQYTW7tEDjDno6rDi5CFHZDA==","tarball":"https://registry.npmjs.org/@benjamminj/use-focus-trap/-/use-focus-trap-0.2.4.tgz","fileCount":15,"unpackedSize":36782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuZZnCRA9TVsSAnZWagAAbMUP/j211/jinTHQuil9Jyge\nU813XrCUjitGcFSRoSh0XRnq5F8Rf0C6RT4PK1Kzms+7gU3wIcNEupioN29g\nqCSqqz0xuBjMpxU8KKKueXzx5sdmDSkT4kkRYUQjEL252Vd/jYfUpvnSUqBq\nBJi0w52/T/e9gPJVI8e4gP2wOoCc+1Wxq0aGGCBWUKEyZr02vYKGL8iD65/H\nOSm0T6FD6k6o5xlVn89UAKJDZIyqxsPjQXRbLVoIvHRCMOS2AE9g299ts5/T\nR7a1Jsp42GBwXXHaCF1HmQQHG9bV/TR1hCxVJ82AmNHckghTZkyCh2peljB0\nkG5LLwVD5zs2ZoHaguKFUhTqmM2Xn9fBB1a9pJ5rd2q1dR44WcW4vj1FBaJn\nYfRAKC7dIte80ndkKQ8fxqWHE8crLa31LUQ3DGbydGmWwmKnD5u6QqhnyM+V\nz+fO/hPfg2/TBzJxoHVWjhL7QyUPt5KxHUK4D07Q/rCKLm5M9fnxujIR+g3k\nJmPcaJqde1EpP8EOvIgYwXFsKoisrU0F5CWvi+Us3CR5CfOliw7eQGPwlloD\nh575z+Brjd3bcZuOACv221CJNuY52S27INGU7h3EMnGsbFj2DPS5IpUnQLnP\npLK1cykIg1GbLlGlSTgdP5slBNABOw3t0E43XUuMF42EtLGeD4IVNufPeQni\n3Kbr\r\n=QvKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCueHGKoxU6HprWmpzeuqfmE0VZIANih6fxfqEQsDtkbwIhAI1XuVcoO27CC10PM0jaTNlcuDBMtQ+8wR7nFjclxcWu"}]},"_npmUser":{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"},"directories":{},"maintainers":[{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-focus-trap_0.2.4_1605998182680_0.020858901259608764"},"_hasShrinkwrap":false},"0.2.5":{"version":"0.2.5","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","e2e":"yarn cypress open","e2e:run":"yarn cypress run","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","size:fresh":"rm -rf dist && yarn build && yarn size","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"jest":{"globals":{"ts-jest":{"diagnostics":false}}},"name":"@benjamminj/use-focus-trap","author":{"name":"Ben Johnson"},"module":"dist/use-focus-trap.esm.js","size-limit":[{"path":"dist/use-focus-trap.cjs.production.min.js","limit":"1 KB"},{"path":"dist/use-focus-trap.esm.js","limit":"1 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.7.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.9","cypress":"^5.6.0","cypress-plugin-tab":"^1.0.5","husky":"^4.3.0","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.7.0","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.0.5"},"dependencies":{},"description":"<!-- TODO: badges -->","licenseText":"MIT License\n\nCopyright (c) 2020 Ben Johnson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@benjamminj/use-focus-trap@0.2.5","dist":{"shasum":"10319048b8e3cf121eb179a3db3af97dbfda7fb3","integrity":"sha512-Mr1Nxo1Mn3w6JVPa+0Pg8l2hssDkGMFxopxzBG7ScUUCCFBxxanM9BQO7ZOlY6IWvwK9UzUwQ789wZRw7wlm+w==","tarball":"https://registry.npmjs.org/@benjamminj/use-focus-trap/-/use-focus-trap-0.2.5.tgz","fileCount":15,"unpackedSize":36782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuZapCRA9TVsSAnZWagAARPwP/A1rrFWK6d+oE6b0k0O6\nd2l/p+Y2i2XcyTOod6qsIjot4Yr89LoXaWtbm+mf3lJOuPXPge6gNfShyDRc\n0Hp10LuhtsbdFpA1W5Add4TYPqPJ7imjiDyJrEFOOSbH9hYElj1Mg1+kjFnX\nINchx87+tb4L2IY1f7214lxq+x85sokeIqyMuEqSUhvsPPthNKkahgeUkecn\nzwh/NYQB2J4x/EKZs8geOr/Q0bH5dcKoVTmST9ukr6jyBbo1MUW9Et/JA8+g\nh3IsSolD8IB+Jz3x5v4BHiZ4mFXDPZ5kRehe+N2PZdv3V9cgtuFfr63BIKXj\njqgJk2SahZ8EHdDO7er5R+hed1C1rHJPbKefiVlAwwINuE96VtzLwgg9WLGK\nhO4JUs3s4f98EfFwxFm0vQxGwOjf7JqAzD+nQ87DfSdloHW7EvesQX/HdZtb\nf/+p4h0Vr3R9VpoB1FWIHmDhTCFuiJyhOBwGJDsu8kFHYJ4hrsiyqwFUaGIi\nKfFySjWALWBJsH3nwoFvWeF2cyAIgzrAG3aaqD2Qg8xtBg6sYPihwutChhx9\nracQTplrhBqpu0V350FZY16m3HvWiYHdDrolTmRj6XmiFp4FgTDGKOQrMKRv\nbVnMDxEz2YFJGuJIVFqG3P4HrxIZHb/eXoc5khfUvn1wW+gZuJGNZLWkZ4N5\n/Vxg\r\n=xKuZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+0EWmaEfl8cn1MvGDyPzI+rE0cvGEl0aMDlrf295xAAIgQkttoKn452DbcUJVUiOmPw3Qy03wNF0Var+/8fbdf+4="}]},"_npmUser":{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"},"directories":{},"maintainers":[{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-focus-trap_0.2.5_1605998248826_0.11553444744489494"},"_hasShrinkwrap":false},"1.0.0":{"version":"1.0.0","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","e2e":"yarn cypress open","e2e:run":"yarn cypress run","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","size:fresh":"rm -rf dist && yarn build && yarn size","analyze":"size-limit --why"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"jest":{"globals":{"ts-jest":{"diagnostics":false}}},"name":"@benjamminj/use-focus-trap","author":{"name":"Ben Johnson"},"module":"dist/use-focus-trap.esm.js","size-limit":[{"path":"dist/use-focus-trap.cjs.production.min.js","limit":"1 KB"},{"path":"dist/use-focus-trap.esm.js","limit":"1 KB"}],"devDependencies":{"@size-limit/preset-small-lib":"^4.7.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.9","cypress":"^5.6.0","cypress-plugin-tab":"^1.0.5","husky":"^4.3.0","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.7.0","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.0.5"},"dependencies":{},"description":"React hook that traps focus within a DOM element. Gives you full control of rendering the container and the triggering element.","licenseText":"MIT License\n\nCopyright (c) 2020 Ben Johnson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@benjamminj/use-focus-trap@1.0.0","dist":{"shasum":"6c1c73eb8faf42408c7bf6375dca85b385fc4eb4","integrity":"sha512-HOrvcaxJxhipNokBCOEOuxaqoqsBn2R0Z2rz3MUbXnyThJOPOFeGDGLPoPRSyYdFhosTqmT4QdDH69rBRUBZLA==","tarball":"https://registry.npmjs.org/@benjamminj/use-focus-trap/-/use-focus-trap-1.0.0.tgz","fileCount":15,"unpackedSize":40204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvF3oCRA9TVsSAnZWagAAOyUP+wSwzLWsYloEIWSf3Xm/\n4h6qRmez/NYc2C/ORVis27ZkmyWuxHpvT5bXpXJOoXuZsUmthXcA0TfVy6va\nGAghrrHcs0/XZVCYrQt49h+IXaS36hk9M6xaOi9txHQVrR+ILKQz7B519Q6F\ne3DQPpcTbkbPOFIEaIdiNXQ4fpRyo+PW7CxglrDwW8mFZ113hf3kSjVK/bu0\nraM3kFT0abb4w2Tk2si+3NbNw1rqUpBCVlsYrpxbuhIYfnDWJ2SqF6tUFlbO\neZ/gbWmXTyIg6556FavZikZxS3o0jySrMe0zY0rkB/1TYRXd8ruOZoEN2TrC\nGC+xTxs170nIxwuUt1kitLUCyAovFuxf1LD3J0+Y6rs8qNlDXnj+MrC7M5ho\n1HJTAuIMHn/becb/vJrUP3ZxxvSYj2RK11fljIgbc9jUgRzjXU5DSp/xtjps\n9fAK973BDUhPMjgPCpAoqpIXGL9Ai/N/2JGwNjscNRxsYCQIg8JNpI4dsfZN\n6xlF2de3fx+4EGUqcsRE5sK9OtOEblqEciTEDVDqdS64VeF8PIZxaw3zMZfc\n+eBDAAbC+JT0K//qs5SQBIh1AYjijhv453RJ5rq5yaQyB9Pit1yQB6Cw/11P\nhlFbJL+FqujbPYeF1vBgE9qCCyfWYUnDDkQwAZu69Vx9raTmnmCySBB6Z0G9\nIYSr\r\n=Ih6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX+G83OyXthC24ni6r7d8uD0t72yCl7nrRms6sUQNjQQIhAOlVXUMM8sAizvi46C4dpWIWbZvlpPjsciA9rGvQrIAp"}]},"_npmUser":{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"},"directories":{},"maintainers":[{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-focus-trap_1.0.0_1606180328077_0.9013338229198868"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-21T22:36:22.648Z","0.2.4":"2020-11-21T22:36:22.830Z","modified":"2022-04-04T18:22:55.284Z","0.2.5":"2020-11-21T22:37:29.008Z","1.0.0":"2020-11-24T01:12:08.200Z"},"maintainers":[{"name":"benjamminj","email":"benjamindavjohnson@gmail.com"}],"description":"React hook that traps focus within a DOM element. Gives you full control of rendering the container and the triggering element.","author":{"name":"Ben Johnson"},"license":"MIT","readme":"# use-focus-trap 🔁\n\nReact hook that traps focus within a DOM element. Gives you full control of rendering the container and the triggering element.\n\n## Overview\n\nSometimes when you're building complex UIs you'll need to make sure that user focus stays within a certain element. For example, when you have a modal, you want to keep the user from exiting the modal when they press `Tab` / `Shift + Tab`.\n\nThis React hook allows you to create a focus trap and attach it to any DOM element.\n\nWhen the focus trap is enabled, it will:\n\n- Automatically focus the **first** focusable element within the trap.\n- Set focus to the **first** focusable element when pressing `Tab` on the **last** item in the trap.\n- Set focus to the **last** focusable element when pressing `Shift + Tab` on the **first** item in the trap.\n- Return focus to the trigger element when closing the trap (with some configuration)\n\n## Install\n\n```bash\nnpm install @benjamminj/use-focus-trap\n```\n\nOr, if you prefer `yarn`:\n\n```bash\nyarn add @benjamminj/use-focus-trap\n```\n\n## Usage\n\n### Default usage\n\nBy default, `useFocusTrap` will trap any incoming tab events after it is rendered.\n\n```jsx\nimport { useFocusTrap } from '@benjamminj/use-focus-trap';\n\nconst App = () => {\n  const focusTrapRef = useFocusTrap();\n\n  return (\n    <div>\n      {/* Focus will be trapped inside of this div */}\n      <div ref={focusTrapRef}>\n        <button>item #1</button>\n        <button>item #2</button>\n        <button>item #3</button>\n      </div>\n\n      {/* This button will not receive focus while the trap is active */}\n      <button>outside!</button>\n    </div>\n  );\n};\n```\n\n### Manually toggling the trap on/off\n\nYou can also manually control whether the focus trap is enabled or disabled.\n\n```jsx\nimport { useFocusTrap } from '@benjamminj/use-focus-trap';\n\nconst App = () => {\n  const [isEnabled, setIsEnabled] = useState(false);\n  const focusTrapRef = useFocusTrap({ enabled: isEnabled });\n  return (\n    <div>\n      <button onClick={() => setIsEnabled(true)}>enable</button>\n\n      <div></div>\n    </div>\n  );\n};\n```\n\n### Returning focus to a trigger element when the trap closes\n\nYou can have the trap automatically shift focus to an element of your choosing upon closing the trap.\n\n```jsx\nimport { useFocusTrap } from '@benjamminj/use-focus-trap';\n\nconst App = () => {\n  const [isEnabled, setIsEnabled] = useState(false);\n  const triggerRef = useRef(null);\n  const focusTrapRef = useFocusTrap({\n    enabled: isEnabled,\n    trigger: triggerRef,\n  });\n\n  return (\n    <div>\n      <button onClick={() => setIsEnabled(true)} ref={triggerRef}>\n        enable\n      </button>\n\n      <div ref={focusTrapRef}>\n        <button>inner 1</button>\n        <button>inner 2</button>\n      </div>\n    </div>\n  );\n};\n```\n\n## TypeScript\n\n`useFocusTrap` is written in TypeScript and accepts 1 generic parameter. You can use this to customize the type of ref that the hook returns.\n\n```tsx\nconst App = () => {\n  const focusTrapRef = useFocusTrap<HTMLDivElement>();\n  return (\n    <div>\n      <div ref={focusTrapRef}>\n        <button>inside trap 1</button>\n        <button>inside trap 2</button>\n      </div>\n      <button>outside</button>\n    </div>\n  );\n};\n```\n\n## Contributing\n\nAny PRs and issues are welcome!\n","readmeFilename":"README.md"}