focus-trap-react 5.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,8 +1,30 @@
 # Changelog
 
+## 7.0.1
+
+- Fix: PropTypes definition now supports server-side rendering. #83
+
+## 7.0.0
+
+- Add: Prop types for `<FocusTrap>`.
+- Update: `focus-trap` dependency from 4.0.2 to [5.1.0](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#510) for the latest features/fixes it provides. #71
+- **BREAKING** Update: Only React 16.0+ is supported going forward. #55
+- **BREAKING** Update: All dependencies updated to their latest versions.
+- Fix: `children`'s type is `React.ReactNode`, not `React.ReactElement`. #66
+- Fix: Allow mutable object refs to be used for FocusTrap child. #72
+- Fix: `specifiedFocusTrapOptions.includes(optionName)` statement in `componentDidMount()` was causing an exception because `includes()` is not a function defined on `Object`.
+
+## 6.0.0
+
+- Update focus-trap to 4.0.2, which includes [a queue of traps](https://github.com/davidtheclark/focus-trap/blob/master/CHANGELOG.md#400), so when a trap is paused because another trap activates, it will be unpaused when that other trap deactivates. If Trap A was automatically paused because Trap B activated (existing behavior), when Trap B is deactivated Trap A will be automatically unpaused (new behavior).
+
+## 5.0.1
+
+- Fix TypeScript declarations.
+
 ## 5.0.0
 
-- **Breaking change:** `<FocusTrap>` now expects exactly one child element which can be any HTML element or other React component that contains focusable elements. The `tag` prop has been removed, as has support for additional props that are passed through to the `tag`, because it is no longer necessary: you should provide your own element, with whatever props you want, as a child of `<FocusTrap>`.
+- **BREAKING:** `<FocusTrap>` now expects exactly one child element which can be any HTML element or other React component that contains focusable elements. The `tag` prop has been removed, as has support for additional props that are passed through to the `tag`, because it is no longer necessary: you should provide your own element, with whatever props you want, as a child of `<FocusTrap>`.
 
 ## 4.0.1
 

package/README.md

@@ -1,5 +1,12 @@
 # focus-trap-react [![Build Status](https://travis-ci.org/davidtheclark/focus-trap-react.svg?branch=master)](https://travis-ci.org/davidtheclark/focus-trap-react)
 
+---
+
+**SEEKING CO-MAINTAINERS!** Continued development of this project is going to require the work of one or more dedicated co-maintainers (or forkers). If you're interested, please comment in [this issue](https://github.com/davidtheclark/focus-trap-react/issues/48).
+
+---
+
+
 A React component that traps focus.
 
 This component is a light wrapper around [focus-trap](https://github.com/davidtheclark/focus-trap),
@@ -7,12 +14,6 @@ tailored to your React-specific needs.
 
 You might want it for, say, building [an accessible modal](https://github.com/davidtheclark/react-aria-modal)?
 
----
-
-**Looking for co-maintainers!** If you'd like to help maintain this project, please let me know.
-
----
-
 ## What it does
 
 [Check out the demo](http://davidtheclark.github.io/focus-trap-react/demo/).
@@ -167,8 +168,12 @@ If you would like to pause or unpause the focus trap (see [`focus-trap`'s docume
 
 Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
 
+Format with `npm run format`.
+
 Lint with `npm run lint`.
 
 Run the demos with `npm start`.
 
-Test with `npm run test`.
+Test with `npm run test` (checks formatting, checks lint, runs tests).
+
+Unit test (only) with `npm run test-unit`.

package/dist/focus-trap-react.js

@@ -1,37 +1,67 @@
-'use strict';
+"use strict";
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var React = require('react');
+
 var ReactDOM = require('react-dom');
-var createFocusTrap = require('focus-trap');
 
-var FocusTrap = function (_React$Component) {
+var PropTypes = require('prop-types');
+
+var createFocusTrap = require('focus-trap'); // TODO: These issues are related to older React features which we'll likely need
+//  to fix in order to move the code forward to the next major version of React.
+//  @see https://github.com/davidtheclark/focus-trap-react/issues/77
+
+/* eslint-disable react/no-find-dom-node */
+
+
+var FocusTrap = /*#__PURE__*/function (_React$Component) {
   _inherits(FocusTrap, _React$Component);
 
+  var _super = _createSuper(FocusTrap);
+
   function FocusTrap(props) {
+    var _this;
+
     _classCallCheck(this, FocusTrap);
 
-    var _this = _possibleConstructorReturn(this, (FocusTrap.__proto__ || Object.getPrototypeOf(FocusTrap)).call(this, props));
+    _this = _super.call(this, props);
 
-    _this.setFocusTrapElement = function (element) {
+    _defineProperty(_assertThisInitialized(_this), "setFocusTrapElement", function (element) {
       _this.focusTrapElement = element;
-    };
+    });
 
     if (typeof document !== 'undefined') {
       _this.previouslyFocusedElement = document.activeElement;
     }
+
     return _this;
   }
 
   _createClass(FocusTrap, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       // We need to hijack the returnFocusOnDeactivate option,
       // because React can move focus into the element before we arrived at
@@ -42,30 +72,40 @@ var FocusTrap = function (_React$Component) {
       var tailoredFocusTrapOptions = {
         returnFocusOnDeactivate: false
       };
+
       for (var optionName in specifiedFocusTrapOptions) {
-        if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
-        if (optionName === 'returnFocusOnDeactivate') continue;
+        if (!Object.prototype.hasOwnProperty.call(specifiedFocusTrapOptions, optionName)) {
+          continue;
+        }
+
+        if (optionName === 'returnFocusOnDeactivate') {
+          continue;
+        }
+
         tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName];
       }
 
-      var focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement);
+      var focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement); // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
 
       this.focusTrap = this.props._createFocusTrap(focusTrapElementDOMNode, tailoredFocusTrapOptions);
+
       if (this.props.active) {
         this.focusTrap.activate();
       }
+
       if (this.props.paused) {
         this.focusTrap.pause();
       }
     }
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.active && !this.props.active) {
         var returnFocusOnDeactivate = this.props.focusTrapOptions.returnFocusOnDeactivate;
-
         var returnFocus = returnFocusOnDeactivate || false;
-        var config = { returnFocus: returnFocus };
+        var config = {
+          returnFocus: returnFocus
+        };
         this.focusTrap.deactivate(config);
       } else if (!prevProps.active && this.props.active) {
         this.focusTrap.activate();
@@ -78,15 +118,16 @@ var FocusTrap = function (_React$Component) {
       }
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.focusTrap.deactivate();
+
       if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement && this.previouslyFocusedElement.focus) {
         this.previouslyFocusedElement.focus();
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
@@ -94,25 +135,52 @@ var FocusTrap = function (_React$Component) {
 
       var composedRefCallback = function composedRefCallback(element) {
         _this2.setFocusTrapElement(element);
+
         if (typeof child.ref === 'function') {
           child.ref(element);
+        } else if (child.ref) {
+          child.ref.current = element;
         }
       };
 
-      var childWithRef = React.cloneElement(child, { ref: composedRefCallback });
-
+      var childWithRef = React.cloneElement(child, {
+        ref: composedRefCallback
+      });
       return childWithRef;
     }
   }]);
 
   return FocusTrap;
-}(React.Component);
+}(React.Component); // support server-side rendering where `Element` will not be defined
+
+
+var ElementType = typeof Element === 'undefined' ? Function : Element;
+FocusTrap.propTypes = {
+  active: PropTypes.bool,
+  paused: PropTypes.bool,
+  focusTrapOptions: PropTypes.shape({
+    onActivate: PropTypes.func,
+    onDeactivate: PropTypes.func,
+    initialFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    fallbackFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    escapeDeactivates: PropTypes.bool,
+    clickOutsideDeactivates: PropTypes.bool,
+    returnFocusOnDeactivate: PropTypes.bool,
+    setReturnFocus: PropTypes.oneOfType([PropTypes.instanceOf(ElementType), PropTypes.string, PropTypes.func]),
+    allowOutsideClick: PropTypes.func,
+    preventScroll: PropTypes.bool
+  }),
+  children: PropTypes.oneOfType([PropTypes.element, // React element
+  PropTypes.instanceOf(ElementType) // DOM element
+  ]) // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
+  //  specify it here. It's expected to be set to the function returned from
+  //  require('focus-trap'), or one with a compatible interface.
 
+};
 FocusTrap.defaultProps = {
   active: true,
   paused: false,
   focusTrapOptions: {},
   _createFocusTrap: createFocusTrap
 };
-
 module.exports = FocusTrap;

package/index.d.ts

@@ -5,7 +5,7 @@ export = FocusTrap;
 
 declare namespace FocusTrap {
   export interface Props extends React.AllHTMLAttributes<any> {
-    children: React.ReactElement;
+    children: React.ReactNode;
     active?: boolean;
     paused?: boolean;
     focusTrapOptions?: FocusTrapOptions;

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "focus-trap-react",
-  "version": "5.0.0",
+  "version": "7.0.1",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
   "scripts": {
     "demo-bundle": "browserify demo/js -t babelify --extension=.jsx -o demo/demo-bundle.js",
+    "prestart": "yarn build",
     "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live -- -t babelify --extension=.jsx",
-    "lint": "eslint .",
-    "format": "prettier --single-quote --write src/*.js test/*.js demo/js/*.js",
+    "lint": "eslint \"src/**/*.js\" \"test/**/*.js\" \"demo/**/*.js\"",
+    "format": "prettier --write \"src/**/*.js\" \"test/**/*.js\" \"demo/js/**/*.js\"",
+    "format-check": "prettier --check \"src/**/*.js\" \"test/**/*.js\" \"demo/js/**/*.js\"",
     "build": "babel src -d dist",
-    "jest": "jest",
-    "pretest": "npm run lint && npm run build",
-    "test": "jest",
-    "prepublishOnly": "npm run build"
+    "test-unit": "jest",
+    "test": "yarn format-check && yarn lint && jest",
+    "prepublishOnly": "yarn test && yarn build"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/davidtheclark/focus-trap-react.git"
   },
   "files": [
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
     "dist",
     "src",
     "index.d.ts"
@@ -36,48 +40,51 @@
     "keyboard"
   ],
   "author": "David Clark",
+  "contributors": [
+    {
+      "name": "David Clark",
+      "url": "http://davidtheclark.com/"
+    },
+    {
+      "name": "Stefan Cameron",
+      "url": "https://stefancameron.com/"
+    },
+    {
+      "name": "Marais Rossouw",
+      "url": "https://marais.io/"
+    }
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/davidtheclark/focus-trap-react/issues"
   },
   "homepage": "https://github.com/davidtheclark/focus-trap-react#readme",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babelify": "^7.3.0",
-    "browserify": "^14.3.0",
-    "budo": "^9.4.1",
-    "eslint": "^3.13.1",
-    "eslint-plugin-react": "^6.10.3",
-    "jest": "^23.4.0",
-    "prettier": "^1.2.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "@babel/cli": "^7.10.3",
+    "@babel/core": "^7.10.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.1",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.1",
+    "budo": "^11.6.3",
+    "eslint": "^7.3.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-react": "^7.20.0",
+    "jest": "^26.0.1",
+    "prettier": "^2.0.5",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "dependencies": {
-    "focus-trap": "^3.0.0"
+    "focus-trap": "^5.1.0"
   },
   "peerDependencies": {
-    "react": "0.14.x || ^15.0.0 || ^16.0.0",
-    "react-dom": "0.14.x || ^15.0.0 || ^16.0.0"
-  },
-  "babel": {
-    "presets": [
-      "react",
-      "es2015"
-    ],
-    "plugins": [
-      "transform-class-properties"
-    ]
-  },
-  "jest": {
-    "setupFiles": [
-      "<rootDir>/test/jest-setup.js"
-    ],
-    "clearMocks": true,
-    "testURL": "http://localhost"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "prop-types": "^15.7.2"
   }
 }

package/src/focus-trap-react.js

@@ -1,10 +1,16 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
+const PropTypes = require('prop-types');
 const createFocusTrap = require('focus-trap');
 
+// TODO: These issues are related to older React features which we'll likely need
+//  to fix in order to move the code forward to the next major version of React.
+//  @see https://github.com/davidtheclark/focus-trap-react/issues/77
+/* eslint-disable react/no-find-dom-node */
+
 class FocusTrap extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
     if (typeof document !== 'undefined') {
       this.previouslyFocusedElement = document.activeElement;
@@ -21,15 +27,28 @@ class FocusTrap extends React.Component {
     const tailoredFocusTrapOptions = {
       returnFocusOnDeactivate: false
     };
+
     for (const optionName in specifiedFocusTrapOptions) {
-      if (!specifiedFocusTrapOptions.hasOwnProperty(optionName)) continue;
-      if (optionName === 'returnFocusOnDeactivate') continue;
+      if (
+        !Object.prototype.hasOwnProperty.call(
+          specifiedFocusTrapOptions,
+          optionName
+        )
+      ) {
+        continue;
+      }
+
+      if (optionName === 'returnFocusOnDeactivate') {
+        continue;
+      }
+
       tailoredFocusTrapOptions[optionName] =
         specifiedFocusTrapOptions[optionName];
     }
 
     const focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement);
 
+    // eslint-disable-next-line react/prop-types -- _createFocusTrap is an internal prop
     this.focusTrap = this.props._createFocusTrap(
       focusTrapElementDOMNode,
       tailoredFocusTrapOptions
@@ -70,26 +89,70 @@ class FocusTrap extends React.Component {
     }
   }
 
-  setFocusTrapElement = element => {
+  setFocusTrapElement = (element) => {
     this.focusTrapElement = element;
   };
 
   render() {
     const child = React.Children.only(this.props.children);
 
-    const composedRefCallback = element => {
+    const composedRefCallback = (element) => {
       this.setFocusTrapElement(element);
       if (typeof child.ref === 'function') {
         child.ref(element);
+      } else if (child.ref) {
+        child.ref.current = element;
       }
-    }
+    };
 
-    const childWithRef = React.cloneElement(child, { ref: composedRefCallback });
+    const childWithRef = React.cloneElement(child, {
+      ref: composedRefCallback
+    });
 
     return childWithRef;
   }
 }
 
+// support server-side rendering where `Element` will not be defined
+const ElementType = typeof Element === 'undefined' ? Function : Element;
+
+FocusTrap.propTypes = {
+  active: PropTypes.bool,
+  paused: PropTypes.bool,
+  focusTrapOptions: PropTypes.shape({
+    onActivate: PropTypes.func,
+    onDeactivate: PropTypes.func,
+    initialFocus: PropTypes.oneOfType([
+      PropTypes.instanceOf(ElementType),
+      PropTypes.string,
+      PropTypes.func
+    ]),
+    fallbackFocus: PropTypes.oneOfType([
+      PropTypes.instanceOf(ElementType),
+      PropTypes.string,
+      PropTypes.func
+    ]),
+    escapeDeactivates: PropTypes.bool,
+    clickOutsideDeactivates: PropTypes.bool,
+    returnFocusOnDeactivate: PropTypes.bool,
+    setReturnFocus: PropTypes.oneOfType([
+      PropTypes.instanceOf(ElementType),
+      PropTypes.string,
+      PropTypes.func
+    ]),
+    allowOutsideClick: PropTypes.func,
+    preventScroll: PropTypes.bool
+  }),
+  children: PropTypes.oneOfType([
+    PropTypes.element, // React element
+    PropTypes.instanceOf(ElementType) // DOM element
+  ])
+
+  // NOTE: _createFocusTrap is internal, for testing purposes only, so we don't
+  //  specify it here. It's expected to be set to the function returned from
+  //  require('focus-trap'), or one with a compatible interface.
+};
+
 FocusTrap.defaultProps = {
   active: true,
   paused: false,