🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

focus-trap-react

Package Overview
Dependencies
Maintainers
4
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

focus-trap-react - npm Package Compare versions

Comparing version

11.0.1
to
11.0.2

6

CHANGELOG.md
# Changelog
## 11.0.2
### Patch Changes
- e766841: Fix deprecation warning in React 19 when accessing ref the pre-v19 way
## 11.0.1

@@ -4,0 +10,0 @@

26

dist/focus-trap-react.js
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _exec$, _exec;
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }

@@ -24,2 +25,8 @@ function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }

/**
* The major version of React currently running.
* @type {number}
*/
var reactVerMajor = parseInt((_exec$ = (_exec = /^(\d+)\./.exec(React.version)) === null || _exec === void 0 ? void 0 : _exec[1]) !== null && _exec$ !== void 0 ? _exec$ : 0, 10);
/**
* @type {import('../index.d.ts').FocusTrap}

@@ -377,6 +384,17 @@ */

if (child) {
if (typeof child.ref === 'function') {
child.ref(element);
} else if (child.ref) {
child.ref.current = element;
// React 19 moved the `ref` to an official prop
if (reactVerMajor >= 19) {
if (typeof child.props.ref === 'function') {
child.props.ref(element);
} else if (child.props.ref) {
child.props.ref.current = element;
}
} else {
// older versions of React had the `ref` separate from props (still works in R19
// but results in a deprecation warning in Dev builds)
if (typeof child.ref === 'function') {
child.ref(element);
} else if (child.ref) {
child.ref.current = element;
}
}

@@ -383,0 +401,0 @@ }

18

package.json
{
"name": "focus-trap-react",
"version": "11.0.1",
"version": "11.0.2",
"description": "A React component that traps focus.",

@@ -66,3 +66,3 @@ "main": "dist/focus-trap-react.js",

"@babel/preset-react": "^7.26.3",
"@changesets/cli": "^2.27.10",
"@changesets/cli": "^2.27.11",
"@testing-library/cypress": "^10.0.2",

@@ -74,4 +74,4 @@ "@testing-library/dom": "^10.4.0",

"@types/jquery": "^3.5.32",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"all-contributors-cli": "^6.26.1",

@@ -82,3 +82,3 @@ "babel-jest": "^29.7.0",

"budo": "^11.8.4",
"cypress": "^13.16.1",
"cypress": "^13.17.0",
"cypress-plugin-tab": "^1.0.5",

@@ -88,4 +88,4 @@ "eslint": "^8.57.0",

"eslint-plugin-cypress": "^3.6.0",
"eslint-plugin-jest": "^28.9.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-jest": "^28.10.0",
"eslint-plugin-react": "^7.37.3",
"jest": "^29.7.0",

@@ -96,4 +96,4 @@ "jest-environment-jsdom": "^29.7.0",

"prettier": "^3.4.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"regenerator-runtime": "^0.14.1",

@@ -100,0 +100,0 @@ "start-server-and-test": "^2.0.9",

9

README.md
# focus-trap-react [![CI](https://github.com/focus-trap/focus-trap-react/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap-react/actions?query=workflow:CI+branch:master) [![Codecov](https://img.shields.io/codecov/c/github/focus-trap/focus-trap-react)](https://codecov.io/gh/focus-trap/focus-trap-react) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-29-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-30-orange.svg?style=flat-square)](#contributors)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

@@ -351,2 +351,3 @@

<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>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/VercammenJens"><img src="https://avatars.githubusercontent.com/u/19661051?v=4?s=100" width="100px;" alt="Jens Vercammen"/><br /><sub><b>Jens Vercammen</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AVercammenJens" title="Bug reports">🐛</a></td>
<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>

@@ -357,5 +358,5 @@ <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>

<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>
<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>
</tr>
<tr>
<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>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Mathias-S"><img src="https://avatars.githubusercontent.com/u/225531?v=4?s=100" width="100px;" alt="Mathias Stang"/><br /><sub><b>Mathias Stang</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3AMathias-S" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap-react/pulls?q=is%3Apr+reviewed-by%3AMathias-S" title="Reviewed Pull Requests">👀</a></td>

@@ -367,5 +368,5 @@ <td align="center" valign="top" width="14.28%"><a href="https://github.com/StackOverflowIsBetterThanAnyAI"><img src="https://avatars.githubusercontent.com/u/140268904?v=4?s=100" width="100px;" alt="Michael"/><br /><sub><b>Michael</b></sub></a><br /><a href="#example-StackOverflowIsBetterThanAnyAI" title="Examples">💡</a></td>

<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>
<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>
</tr>
<tr>
<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>
<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>

@@ -377,5 +378,5 @@ <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>

<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>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/robert-westenberger"><img src="https://avatars.githubusercontent.com/u/44252092?v=4?s=100" width="100px;" alt="robert-westenberger"/><br /><sub><b>robert-westenberger</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=robert-westenberger" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Arobert-westenberger" title="Bug reports">🐛</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/robert-westenberger"><img src="https://avatars.githubusercontent.com/u/44252092?v=4?s=100" width="100px;" alt="robert-westenberger"/><br /><sub><b>robert-westenberger</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap-react/commits?author=robert-westenberger" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap-react/issues?q=author%3Arobert-westenberger" title="Bug reports">🐛</a></td>
<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>

@@ -382,0 +383,0 @@ </tr>

25

src/focus-trap-react.js

@@ -6,2 +6,8 @@ const React = require('react');

/**
* The major version of React currently running.
* @type {number}
*/
const reactVerMajor = parseInt(/^(\d+)\./.exec(React.version)?.[1] ?? 0, 10);
/**
* @type {import('../index.d.ts').FocusTrap}

@@ -395,6 +401,17 @@ */

if (child) {
if (typeof child.ref === 'function') {
child.ref(element);
} else if (child.ref) {
child.ref.current = element;
// React 19 moved the `ref` to an official prop
if (reactVerMajor >= 19) {
if (typeof child.props.ref === 'function') {
child.props.ref(element);
} else if (child.props.ref) {
child.props.ref.current = element;
}
} else {
// older versions of React had the `ref` separate from props (still works in R19
// but results in a deprecation warning in Dev builds)
if (typeof child.ref === 'function') {
child.ref(element);
} else if (child.ref) {
child.ref.current = element;
}
}

@@ -401,0 +418,0 @@ }