focus-trap-react 3.1.2 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 4.0.1
+
+- Fix bug that caused `returnFocusOnDeactivate: true` to be ignored when using the `active` prop to activate & deactivate the focus trap.
+
+## 4.0.0
+
+- Update focus-trap to 3.0.0, which includes [a couple of behavior changes](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#300). The key change is that focus management has been changed so that you can include tricky focusable elements like radio groups, iframes, and shadow DOM components in your trap — as long as the first and last focusable elements in the trap can still be detected by [Tabbable](https://github.com/davidtheclark/tabbable).
+  - An effect of this change is that *positive tabindexes are no longer guaranteed to work as expected*. You should avoid these.
+
+## 3.1.4
+
+- Re-add TypeScript declarations.
+
+## 3.1.3
+
+- Remove `componentWillMount` usage.
+
 ## 3.1.2
 
 - Fix TypeScript declarations so props are available on the imported namespace.

package/dist/focus-trap-react.js

@@ -16,30 +16,22 @@ var checkedProps = ['active', 'paused', 'tag', 'focusTrapOptions', '_createFocus
 var FocusTrap = function (_React$Component) {
   _inherits(FocusTrap, _React$Component);
 
-  function FocusTrap() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function FocusTrap(props) {
     _classCallCheck(this, FocusTrap);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (FocusTrap.__proto__ || Object.getPrototypeOf(FocusTrap)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FocusTrap.__proto__ || Object.getPrototypeOf(FocusTrap)).call.apply(_ref, [this].concat(args))), _this), _this.setNode = function (el) {
+    _this.setNode = function (el) {
       _this.node = el;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    };
+
+    if (typeof document !== 'undefined') {
+      _this.previouslyFocusedElement = document.activeElement;
+    }
+    return _this;
   }
 
   _createClass(FocusTrap, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      if (typeof document !== 'undefined') {
-        this.previouslyFocusedElement = document.activeElement;
-      }
-    }
-  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
       // We need to hijack the returnFocusOnDeactivate option,
@@ -69,7 +61,11 @@ var FocusTrap = function (_React$Component) {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps) {
       if (prevProps.active && !this.props.active) {
-        this.focusTrap.deactivate();
+        var returnFocusOnDeactivate = this.props.focusTrapOptions.returnFocusOnDeactivate;
+
+        var returnFocus = returnFocusOnDeactivate || false;
+        var config = { returnFocus: returnFocus };
+        this.focusTrap.deactivate(config);
       } else if (!prevProps.active && this.props.active) {
         this.focusTrap.activate();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "3.1.2",
+  "version": "4.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -19,6 +19,11 @@
     "type": "git",
     "url": "git+https://github.com/davidtheclark/focus-trap-react.git"
   },
+  "files": [
+    "dist",
+    "src",
+    "index.d.ts"
+  ],
   "keywords": [
     "react",
     "reactjs",
@@ -47,13 +52,13 @@
     "budo": "^9.4.1",
     "eslint": "^3.13.1",
     "eslint-plugin-react": "^6.10.3",
-    "jest": "^19.0.2",
+    "jest": "^23.4.0",
     "prettier": "^1.2.2",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },
   "dependencies": {
-    "focus-trap": "^2.0.1"
+    "focus-trap": "^3.0.0"
   },
   "peerDependencies": {
     "react": "0.14.x || ^15.0.0 || ^16.0.0",
@@ -72,6 +77,7 @@
     "setupFiles": [
       "<rootDir>/test/jest-setup.js"
     ],
-    "clearMocks": true
+    "clearMocks": true,
+    "testURL": "http://localhost"
   }
 }

package/src/focus-trap-react.js

@@ -10,7 +10,9 @@ const checkedProps = [
 ];
 
 class FocusTrap extends React.Component {
-  componentWillMount() {
+  constructor(props) {
+    super(props)
+
     if (typeof document !== 'undefined') {
       this.previouslyFocusedElement = document.activeElement;
     }
@@ -47,7 +49,10 @@ class FocusTrap extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.active && !this.props.active) {
-      this.focusTrap.deactivate();
+      const { returnFocusOnDeactivate } = this.props.focusTrapOptions;
+      const returnFocus = returnFocusOnDeactivate || false;
+      const config = { returnFocus };
+      this.focusTrap.deactivate(config);
     } else if (!prevProps.active && this.props.active) {
       this.focusTrap.activate();
     }

package/.eslintignore

@@ -1 +0,0 @@
-**/*-bundle.js

package/.eslintrc

@@ -1,20 +0,0 @@
-{
-  "parser": "babel-eslint",
-  "extends": "eslint:recommended",
-  "plugins": ["react"],
-  "env": {
-    "es6": true,
-    "node": true,
-    "browser": true,
-    "jest": true
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "rules": {
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error"
-  }
-}

package/.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-- 'stable'
-cache: yarn
-env:
-  global:
-  - secure: ApBNjenv66nLPxp+7ItGahjaNN9yoCPutzkYKt9VjfMha5W/wcYwDfZfAhuiKreOFrjJYngfsXTsYM3Uta+ydHi++vcbvo6phfkN7gzWA/EIvezyIoLNkjPzM7+qbpId+od+1l5nztwcuUHAvwG0QwDFLWT6D0AkFT+sXLtQvNKWq34fPqL/KN3Yd456+ecwtPm5/KfnG/nCNRQbMqF4zt/+AJCNZz+ySRNqdkXFYpwGhR4NpdTxla/7X5Uhd7Q7jKRkuN1WiuFhKsqg/ff4U52zxkUAG6qnxVNIffvKB1mpnxmEHI2CVFH1eJlc+U/jsGZvEgkvEEKUyV7+zWGO2t+yR11222XUXnkOq2kIpLb1odhxDd6tz8wrI7iWyrcWfH8W8CITHQ2s4D51KLwKGXbP+Ym1OsMSjewwkT17L03+LMhEwgSO/i9svJfcXk3jwQkaBCqnkK+lBHTs2hsgHMRGTjoFyK30aAJj+rDDaWd6i/Za1Q15J7ziyF79PzKowjfxJsWNma/FhsgtRL/Kyiipg60FSaDgaIXbgW7SZTZpoqda64BuSua23HMt2CD9oZ4FInic+9DbiSZxFu8iPpuGaCuSM6E+Mv2JlXzOkqLlx+GOgnjY4t1SGNgCx84iVEGXzYwKLFts3/KxAxhxewQ4iyhcI37xZP96Htd9lBA=
-  - secure: PFibzoXNOxfwRZGx/Qf4tCfY7Zlu1njTA/ya7D7mPHJ+iOPROYRgPBxsdo3nYAbG09bfMIXs5iarQ+29dwDbbtmVbD0eeWV5eHID4cgfAQAYB2ltRZY8is6zVg3RQ53F+ECVzsArHzlvUEbrWbckxUQb51tRVMKHRie9R+wGkoAe8qU36BUqSIHEt/Cu2Wah6yvG+ulmB3bqMPuOVfGQQI74x7xpTajEY+U81N/A5gzeYvlzSMygHgt2HRCIatSJCrGA6ddwoTMKOQo2ncCyXDFjgYuIF8t4DCxNfYc20TypuGaAPmPKICtH6G+H9Do88VnPXebLDdfqxNTfF2HCx38gxYmMzrc3kHEScn8zShS8POonPG+qoEMAmY6Q17ZUarmSsNpp2qYic7H2CGL43AwvnGU+hmFYdxFg4P02LDbSS5xMKCvZrFml+Ck73pTn+etmxAjrpwt4sQ4Rsfte12zDWBecj51aGdpVVo18q4ZuZmYlQkH96vjJTYE1OYyOCAeC9mtUzXAeJX5Dlmwa4BhWOCOXUqxtKaxWa1sANFHR3sLsesVxiVQN3NAj0uD5dPBZ/qYfXTWm3qOutKE6sqWKionJ0al9zb1NNw1uMVnOzsStbCtbsNhsQ7iYTl5KfbGj7U/HnTkApnylZjzVLOPVelmDjWVMKuW3iSTMRO0=

package/CODE_OF_CONDUCT.md

@@ -1,22 +0,0 @@
-# Contributor Code of Conduct
-
-As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
-
-We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery
-* Personal attacks
-* Trolling or insulting/derogatory comments
-* Public or private harassment
-* Publishing other's private information, such as physical or electronic addresses, without explicit permission
-* Other unethical or unprofessional conduct.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
-
-This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
-
-This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)

package/demo/index.html

@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>focus-trap-react demo</title>
-
-  <link rel="stylesheet" href="style.css">
-  <meta name="description" content="A demo of focus-trap-react">
-
-</head>
-<body>
-  <h1 tabindex="0">focus-trap-react demo</h1>
-
-  <p>
-    <span style="font-size:2em;vertical-align:middle;">☜</span>
-    <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
-  </p>
-
-  <h2>demo one</h2>
-  <p>
-    Default behavior: When this FocusTrap mounts (and activates), the first element in its tab order receives focus.
-  </p>
-  <div id="demo-one"></div>
-
-  <h2>demo two</h2>
-  <p>
-    When this FocusTrap mounts (and activates), focus jumps to a specific, manually specified element.
-  </p>
-  <p>
-    Also, the Escape key does not deactivate this trap: you have to click the button to deactivate.
-  </p>
-  <div id="demo-two"></div>
-
-  <h2>demo three</h2>
-  <p>
-    Inspect this element and you'll see that is not the default plan div,
-    but rather a section tag with an id, a class, inline styles, and an
-    arbitrary <code>data-</code>attribute.
-  </p>
-  <p>
-    Also, this FocusTrap activates and deactivates while staying mounted.
-  </p>
-  <p>
-    ALSO, when you click outside this FocusTrap, the trap deactivates and your click carries through.
-  </p>
-  <div id="demo-three"></div>
-
-  <h2>demo four</h2>
-  <p>
-    Default behavior with a twist:
-    When this FocusTrap activates, the first element in its tab order receives focus,
-    <em>but because of positive tabindex attributes the tab order is not the same as the source order</em>.
-  </p>
-  <p>
-    Also, when you deactivate this FocusTrap, the focus will not be returned to the button that activated it.
-  </p>
-  <div id="demo-four"></div>
-
-  <h2>demo five</h2>
-  <p>
-    The trap contains an input with the autofocus attribute.
-  </p>
-  <div id="demo-five"></div>
-
-  <p>
-    <span style="font-size:2em;vertical-align:middle;">☜</span>
-    <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
-  </p>
-
-  <script src="demo-bundle.js"></script>
-</body>
-</html>

package/demo/js/demo-five.js

@@ -1,61 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
-
-const container = document.getElementById('demo-five');
-
-class DemoFive extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTrap: false
-    };
-
-    this.mountTrap = this.mountTrap.bind(this);
-    this.unmountTrap = this.unmountTrap.bind(this);
-  }
-
-  mountTrap() {
-    this.setState({ activeTrap: true });
-  }
-
-  unmountTrap() {
-    this.setState({ activeTrap: false });
-  }
-
-  render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap
-          }}
-        >
-          <div className="trap">
-            <button onClick={this.unmountTrap}>
-              deactivate trap
-            </button>
-            <div>
-              <a href="#">Another focusable thing</a>
-            </div>
-            <div>
-              Autofocused input: <input autoFocus={true} />
-            </div>
-          </div>
-        </FocusTrap>
-      : false;
-
-    return (
-      <div>
-        <p>
-          <button key="button" onClick={this.mountTrap}>
-            activate trap
-          </button>
-        </p>
-        {trap}
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<DemoFive />, container);

package/demo/js/demo-four.js

@@ -1,76 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
-
-const container = document.getElementById('demo-four');
-
-class DemoFour extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTrap: false
-    };
-
-    this.mountTrap = this.mountTrap.bind(this);
-    this.unmountTrap = this.unmountTrap.bind(this);
-  }
-
-  mountTrap() {
-    this.setState({ activeTrap: true });
-  }
-
-  unmountTrap() {
-    this.setState({ activeTrap: false });
-  }
-
-  render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          className="trap"
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap,
-            returnFocusOnDeactivate: false
-          }}
-        >
-          <p>
-            <button tabIndex="3">
-              tabindex 3
-            </button>
-          </p>
-          <p>
-            <button tabIndex="2">
-              tabindex 2
-            </button>
-          </p>
-          <p>
-            <button tabIndex="4">tabindex 4</button>
-          </p>
-          <p>
-            <button>no tabindex</button>
-          </p>
-          <p>
-            <button onClick={this.unmountTrap} tabIndex="1">
-              deactivate trap (tabindex 1)
-            </button>
-          </p>
-        </FocusTrap>
-      : false;
-
-    return (
-      <div>
-        <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
-        </p>
-        <p>
-          <a href="#">other focusable element</a>
-        </p>
-        {trap}
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<DemoFour />, container);

package/demo/js/demo-one.js

@@ -1,68 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
-
-const container = document.getElementById('demo-one');
-
-class DemoOne extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTrap: false
-    };
-
-    this.mountTrap = this.mountTrap.bind(this);
-    this.unmountTrap = this.unmountTrap.bind(this);
-  }
-
-  mountTrap() {
-    this.setState({ activeTrap: true });
-  }
-
-  unmountTrap() {
-    this.setState({ activeTrap: false });
-  }
-
-  render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap
-          }}
-        >
-          <div className="trap">
-            <p>
-              Here is a focus trap
-              {' '}
-              <a href="#">with</a>
-              {' '}
-              <a href="#">some</a>
-              {' '}
-              <a href="#">focusable</a>
-              {' '}
-              parts.
-            </p>
-            <p>
-              <button onClick={this.unmountTrap}>
-                deactivate trap
-              </button>
-            </p>
-          </div>
-        </FocusTrap>
-      : false;
-
-    return (
-      <div>
-        <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
-        </p>
-        {trap}
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<DemoOne />, container);

package/demo/js/demo-three.js

@@ -1,72 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
-
-const container = document.getElementById('demo-three');
-
-class DemoThree extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTrap: false
-    };
-
-    this.mountTrap = this.mountTrap.bind(this);
-    this.unmountTrap = this.unmountTrap.bind(this);
-  }
-
-  mountTrap() {
-    this.setState({ activeTrap: true });
-  }
-
-  unmountTrap() {
-    this.setState({ activeTrap: false });
-  }
-
-  render() {
-    let trapClass = 'trap';
-    if (this.state.activeTrap) trapClass += ' is-active';
-
-    return (
-      <div>
-        <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
-        </p>
-        <FocusTrap
-          id="focus-trap-three"
-          tag="section"
-          style={{ background: '#eee' }}
-          data-whatever="nothing"
-          active={this.state.activeTrap}
-          className={trapClass}
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap,
-            clickOutsideDeactivates: true
-          }}
-        >
-          <p>
-            Here is a focus trap
-            {' '}
-            <a href="#">with</a>
-            {' '}
-            <a href="#">some</a>
-            {' '}
-            <a href="#">focusable</a>
-            {' '}
-            parts.
-          </p>
-          <p>
-            <button onClick={this.unmountTrap}>
-              deactivate trap
-            </button>
-          </p>
-        </FocusTrap>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<DemoThree />, container);

package/demo/js/demo-two.js

@@ -1,75 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const FocusTrap = require('../../dist/focus-trap-react');
-
-const container = document.getElementById('demo-two');
-
-class DemoTwo extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTrap: false
-    };
-
-    this.mountTrap = this.mountTrap.bind(this);
-    this.unmountTrap = this.unmountTrap.bind(this);
-  }
-
-  mountTrap() {
-    this.setState({ activeTrap: true });
-  }
-
-  unmountTrap() {
-    this.setState({ activeTrap: false });
-  }
-
-  render() {
-    const trap = this.state.activeTrap
-      ? <FocusTrap
-          className="trap"
-          focusTrapOptions={{
-            onDeactivate: this.unmountTrap,
-            initialFocus: '#focused-input',
-            escapeDeactivates: false
-          }}
-        >
-          <p>
-            Here is a focus trap
-            {' '}
-            <a href="#">with</a>
-            {' '}
-            <a href="#">some</a>
-            {' '}
-            <a href="#">focusable</a>
-            {' '}
-            parts.
-          </p>
-          <p>
-            <label htmlFor="focused-input" style={{ marginRight: 10 }}>
-              Initially focused input
-            </label>
-            <input ref="input" id="focused-input" />
-          </p>
-          <p>
-            <button onClick={this.unmountTrap}>
-              deactivate trap
-            </button>
-          </p>
-        </FocusTrap>
-      : false;
-
-    return (
-      <div>
-        <p>
-          <button onClick={this.mountTrap}>
-            activate trap
-          </button>
-        </p>
-        {trap}
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<DemoTwo />, container);

package/demo/js/index.js

@@ -1,5 +0,0 @@
-require('./demo-one');
-require('./demo-two');
-require('./demo-three');
-require('./demo-four');
-require('./demo-five');

package/demo/style.css

@@ -1,28 +0,0 @@
-body {
-  color: #333;
-  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.4;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  max-width: 600px;
-  margin: 0 auto 200px;
-  padding: 10px;
-}
-
-input:focus,
-a:focus,
-button:focus {
-  outline: 5px solid lightblue;
-}
-
-.trap {
-  border: 1px solid #ccc;
-  padding: 1em 2em;
-}
-
-.trap.is-active {
-  background: #FEE9FF;
-}