focus-trap-react 4.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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>`.
+
+## 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).

package/README.md

@@ -7,6 +7,12 @@ 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/).
@@ -41,9 +47,28 @@ Why? Because this module's core functionality comes from focus-trap, which uses
 
 ## Usage
 
-Read code in `demo/` (it's very simple), and [see how it works](http://davidtheclark.github.io/focus-trap-react/demo/).
+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.
+
+For example:
+
+```js
+<FocusTrap>
+  <div id="modal-dialog" className="modal" >
+    <button>Ok</button>
+    <button>Cancel</button>
+  </div>
+</FocusTrap>
+```
+
+```js
+<FocusTrap>
+  <ModalDialog okButtonText="Ok" cancelButtonText="Cancel" />
+</FocusTrap>
+```
 
-Here's one simple example:
+You can read further code examples in `demo/` (it's very simple), and [see how it works](http://davidtheclark.github.io/focus-trap-react/demo/).
+
+Here's one more simple example:
 
 ```js
 const React = require('react');
@@ -138,16 +163,6 @@ Type: `Boolean`, optional
 
 If you would like to pause or unpause the focus trap (see [`focus-trap`'s documentation](https://github.com/davidtheclark/focus-trap#focustrappause)), toggle this prop.
 
-#### tag
-
-Type: `String`, Default: `div`, optional
-
-An HTML tag for the FocusTrap's DOM node.
-
-#### additional props
-
-All props not mentioned above are passed directly to the rendered DOM element. This means that you can pass `id`, `className`, `style`, `aria-`attributes, `data-`attributes, or any other arbitrary property that you want to use to customize the element.
-
 ## Contributing & Development
 
 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.

package/dist/focus-trap-react.js

@@ -9,10 +9,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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; }
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var createFocusTrap = require('focus-trap');
 
-var checkedProps = ['active', 'paused', 'tag', 'focusTrapOptions', '_createFocusTrap'];
-
 var FocusTrap = function (_React$Component) {
   _inherits(FocusTrap, _React$Component);
 
@@ -21,8 +20,8 @@ var FocusTrap = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (FocusTrap.__proto__ || Object.getPrototypeOf(FocusTrap)).call(this, props));
 
-    _this.setNode = function (el) {
-      _this.node = el;
+    _this.setFocusTrapElement = function (element) {
+      _this.focusTrapElement = element;
     };
 
     if (typeof document !== 'undefined') {
@@ -49,7 +48,9 @@ var FocusTrap = function (_React$Component) {
         tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName];
       }
 
-      this.focusTrap = this.props._createFocusTrap(this.node, tailoredFocusTrapOptions);
+      var focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement);
+
+      this.focusTrap = this.props._createFocusTrap(focusTrapElementDOMNode, tailoredFocusTrapOptions);
       if (this.props.active) {
         this.focusTrap.activate();
       }
@@ -61,7 +62,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();
       }
@@ -83,18 +88,20 @@ var FocusTrap = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var elementProps = {
-        ref: this.setNode
+      var _this2 = this;
+
+      var child = React.Children.only(this.props.children);
+
+      var composedRefCallback = function composedRefCallback(element) {
+        _this2.setFocusTrapElement(element);
+        if (typeof child.ref === 'function') {
+          child.ref(element);
+        }
       };
 
-      // This will get id, className, style, etc. -- arbitrary element props
-      for (var prop in this.props) {
-        if (!this.props.hasOwnProperty(prop)) continue;
-        if (checkedProps.indexOf(prop) !== -1) continue;
-        elementProps[prop] = this.props[prop];
-      }
+      var childWithRef = React.cloneElement(child, { ref: composedRefCallback });
 
-      return React.createElement(this.props.tag, elementProps, this.props.children);
+      return childWithRef;
     }
   }]);
 
@@ -103,7 +110,6 @@ var FocusTrap = function (_React$Component) {
 
 FocusTrap.defaultProps = {
   active: true,
-  tag: 'div',
   paused: false,
   focusTrapOptions: {},
   _createFocusTrap: createFocusTrap

package/index.d.ts

@@ -5,13 +5,11 @@ export = FocusTrap;
 
 declare namespace FocusTrap {
   export interface Props extends React.AllHTMLAttributes<any> {
+    children: React.ReactElement<any>;
     active?: boolean;
     paused?: boolean;
-    tag?: string;
     focusTrapOptions?: FocusTrapOptions;
-    // Allow through any properties that weren't picked up
-    [prop: string]: any;
   }
 }
 
-declare class FocusTrap extends React.Component<FocusTrap.Props> {}
+declare class FocusTrap extends React.Component<FocusTrap.Props> { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap-react",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "A React component that traps focus.",
   "main": "dist/focus-trap-react.js",
   "types": "index.d.ts",
@@ -58,7 +58,7 @@
     "react-dom": "^16.0.0"
   },
   "dependencies": {
-    "focus-trap": "^3.0.0"
+    "focus-trap": "^4.0.2"
   },
   "peerDependencies": {
     "react": "0.14.x || ^15.0.0 || ^16.0.0",

package/src/focus-trap-react.js

@@ -1,14 +1,7 @@
 const React = require('react');
+const ReactDOM = require('react-dom');
 const createFocusTrap = require('focus-trap');
 
-const checkedProps = [
-  'active',
-  'paused',
-  'tag',
-  'focusTrapOptions',
-  '_createFocusTrap'
-];
-
 class FocusTrap extends React.Component {
   constructor(props) {
     super(props)
@@ -35,8 +28,10 @@ class FocusTrap extends React.Component {
         specifiedFocusTrapOptions[optionName];
     }
 
+    const focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement);
+
     this.focusTrap = this.props._createFocusTrap(
-      this.node,
+      focusTrapElementDOMNode,
       tailoredFocusTrapOptions
     );
     if (this.props.active) {
@@ -49,7 +44,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();
     }
@@ -72,33 +70,28 @@ class FocusTrap extends React.Component {
     }
   }
 
-  setNode = el => {
-    this.node = el;
+  setFocusTrapElement = element => {
+    this.focusTrapElement = element;
   };
 
   render() {
-    const elementProps = {
-      ref: this.setNode
-    };
+    const child = React.Children.only(this.props.children);
 
-    // This will get id, className, style, etc. -- arbitrary element props
-    for (const prop in this.props) {
-      if (!this.props.hasOwnProperty(prop)) continue;
-      if (checkedProps.indexOf(prop) !== -1) continue;
-      elementProps[prop] = this.props[prop];
+    const composedRefCallback = element => {
+      this.setFocusTrapElement(element);
+      if (typeof child.ref === 'function') {
+        child.ref(element);
+      }
     }
 
-    return React.createElement(
-      this.props.tag,
-      elementProps,
-      this.props.children
-    );
+    const childWithRef = React.cloneElement(child, { ref: composedRefCallback });
+
+    return childWithRef;
   }
 }
 
 FocusTrap.defaultProps = {
   active: true,
-  tag: 'div',
   paused: false,
   focusTrapOptions: {},
   _createFocusTrap: createFocusTrap