focus-trap-react - npm Package Compare versions

Comparing version 8.4.1 to 8.4.2

CHANGELOG.md

 # Changelog
 
+## 8.4.2
+
+### Patch Changes
+
+- f9a6d1a: Throw an error if a Fragment is given as the child container (currently, it appears to work, but the trap is actually not activated because focus-trap can't find the DOM element for the Fragment "container"). (Fixes #268)
+
 ## 8.4.1
@@ -4,0 +10,0 @@

dist/focus-trap-react.js

@@ -191,2 +191,6 @@ "use strict";
       if (child) {
+        if (child.type && child.type === React.Fragment) {
+          throw new Error('A focus-trap cannot use a Fragment as its child container. Try replacing it with a <div> element.');
+        }
+
         var composedRefCallback = function composedRefCallback(element) {
@@ -193,0 +197,0 @@ var containerElements = _this2.props.containerElements;

package.json

 {
   "name": "focus-trap-react",
-  "version": "8.4.1",
+  "version": "8.4.2",
   "description": "A React component that traps focus.",
@@ -59,13 +59,13 @@ "main": "dist/focus-trap-react.js",
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@changesets/cli": "^2.12.0",
+    "@babel/cli": "^7.12.13",
+    "@babel/core": "^7.12.13",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
+    "@changesets/cli": "^2.14.0",
     "@testing-library/cypress": "^7.0.3",
     "@testing-library/dom": "^7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.6.3",
     "@types/jquery": "^3.5.5",
@@ -79,6 +79,6 @@ "all-contributors-cli": "^6.19.0",
     "codecov": "^3.8.1",
-    "cypress": "^6.2.1",
+    "cypress": "^6.4.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -94,3 +94,3 @@ "eslint-plugin-react": "^7.22.0",
     "regenerator-runtime": "^0.13.7",
-    "start-server-and-test": "^1.11.7",
+    "start-server-and-test": "^1.12.0",
     "typescript": "^4.1.3"
@@ -97,0 +97,0 @@ },

README.md

@@ -46,3 +46,3 @@ # 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)
 
-You wrap any element that you want to act as a focus trap with the `<FocusTrap>` component. `<FocusTrap>` expects exactly one child element which can be any HTML element or other React component that contains focusable elements.
+You wrap any element that you want to act as a focus trap with the `<FocusTrap>` component. `<FocusTrap>` expects exactly one child element which can be any HTML element or other React component that contains focusable elements. __It cannot be a Fragment__ because `<FocusTrap>` needs to be able to get a reference to the underlying HTML element, and Fragments do not have any representation in the DOM.
 
@@ -73,7 +73,5 @@ For example:
 const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
+const FocusTrap = require('focus-trap-react');
 
-const container = document.getElementById('demo-one');
-
-class DemoOne extends React.Component {
+class Demo extends React.Component {
   constructor(props) {
@@ -90,9 +88,9 @@ super(props);
 
-  mountTrap() {
+  mountTrap = () => {
     this.setState({ activeTrap: true });
-  }
+  };
 
-  unmountTrap() {
+  unmountTrap = () => {
     this.setState({ activeTrap: false });
-  }
+  };
 
@@ -140,3 +138,3 @@ render() {
 
-ReactDOM.render(<DemoOne />, container);
+ReactDOM.render(<Demo />, document.getElementById('root'));
 ```
@@ -143,0 +141,0 @@

src/focus-trap-react.js

@@ -145,2 +145,8 @@ const React = require('react');
     if (child) {
+      if (child.type && child.type === React.Fragment) {
+        throw new Error(
+          'A focus-trap cannot use a Fragment as its child container. Try replacing it with a <div> element.'
+        );
+      }
+
       const composedRefCallback = (element) => {
@@ -147,0 +153,0 @@ const { containerElements } = this.props;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48140

increased by1.72%

Lines of code

410

increased by1.99%

Worsened metrics

Number of lines in readme file

213

decreased by-0.93%

No dependency changes