react-focus-trap - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

 # CHANGELOG
 
+## 0.3.0
+
+- Added the ability to set the inner container element using the `element` property
+
+## 0.2.0
+
+- Add handling for when element is not defined
+- Add property to define inner container element
+
 ## 0.1.1
@@ -4,0 +13,0 @@

dist/focus-trap.js

@@ -1,1 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var o=t("object"==typeof exports?require("react"):e.react);for(var s in o)("object"==typeof exports?exports:e)[s]=o[s]}}(this,function(e){return function(e){function t(s){if(o[s])return o[s].exports;var r=o[s]={exports:{},id:s,loaded:!1};return e[s].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";var s=function(e){return e&&e.__esModule?e:{"default":e}};t.__esModule=!0;var r=o(1),i=s(r),n=o(2),u=s(n);t["default"]=u["default"].createClass({displayName:"index",mixins:[i["default"]],propTypes:{active:u["default"].PropTypes.bool,onExit:u["default"].PropTypes.func.isRequired,role:u["default"].PropTypes.string.isRequired},getDefaultProps:function(){return{active:!0,role:"dialog"}},render:function(){var e=this.props,t=e.active,o=e.role;return t?u["default"].createElement("div",{className:"focus-trap",tabIndex:"0",role:o,onKeyUp:this._onKeyUp},u["default"].createElement("div",{className:"focus-trap-backdrop","aria-hidden":!0,onClick:this.props.onExit}),u["default"].createElement("section",{className:"focus-trap-inner"},this.props.children)):null},_onKeyUp:function(e){"Escape"===e.key&&this.props.onExit()}}),e.exports=t["default"]},function(e,t,o){"use strict";t.__esModule=!0,t["default"]={_pushFocus:function(){this.setState({previousFocus:document.activeElement}),this.getDOMNode().focus()},_popFocus:function(){this.state.previousFocus&&(this.state.previousFocus.focus(),this._clearTrap())},_focus:function(){this.getDOMNode().focus()},_trapFocus:function(){this._focusTimer=setTimeout(this._focus,10)},_clearTrap:function(){clearTimeout(this._focusTimer)},componentDidMount:function(){var e=this.getDOMNode();e.addEventListener("focusin",this._clearTrap),e.addEventListener("focusout",this._trapFocus),this._pushFocus()},componentWillUnmount:function(){var e=this.getDOMNode();this._popFocus(),e.removeEventListener("focusin",this._clearTrap),e.removeEventListener("focusout",this._trapFocus)}},e.exports=t["default"]},function(t,o,s){t.exports=e}])});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var o=t("object"==typeof exports?require("react"):e.react);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var s=o[r]={exports:{},id:r,loaded:!1};return e[r].call(s.exports,s,s.exports,t),s.loaded=!0,s.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";var r=o(1),s=o(2);e.exports=s.createClass({displayName:"exports",mixins:[r],propTypes:{active:s.PropTypes.bool,onExit:s.PropTypes.func.isRequired,role:s.PropTypes.string.isRequired},getDefaultProps:function(){return{active:!0,element:"section",role:"dialog"}},getBackdrop:function(){return s.createElement("div",{className:"focus-trap-backdrop","aria-hidden":!0,onClick:this.props.onExit})},getInner:function(){var e=this.props,t=e.element,o=e.children;return s.createElement(t,{className:"focus-trap-inner"},o)},render:function(){var e=this.props,t=e.active,o=e.role;return t?s.createElement("div",{className:"focus-trap",tabIndex:"0",role:o,onKeyUp:this._onKeyUp},this.getBackdrop(),this.getInner()):null},_onKeyUp:function(e){"Escape"===e.key&&this.props.onExit()}})},function(e,t,o){"use strict";e.exports={_pushFocus:function(){this.setState({previousFocus:document.activeElement}),this._focus()},_popFocus:function(){this.state.previousFocus&&(this.state.previousFocus.focus(),this._clearTrap())},_focus:function(){var e=this.getDOMNode();e&&e.focus()},_trapFocus:function(){this._focusTimer=setTimeout(this._focus,10)},_clearTrap:function(){clearTimeout(this._focusTimer)},componentDidMount:function(){var e=this.getDOMNode();e&&(e.addEventListener("focusin",this._clearTrap),e.addEventListener("focusout",this._trapFocus)),this._pushFocus()},componentWillUnmount:function(){var e=this.getDOMNode();this._popFocus(),e&&(e.removeEventListener("focusin",this._clearTrap),e.removeEventListener("focusout",this._trapFocus))}}},function(t,o,r){t.exports=e}])});

package.json

 {
   "name": "react-focus-trap",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "",
@@ -24,5 +24,5 @@ "main": "dist/focus-trap.js",
   },
-  "peerDependencies": {
+  "dependencies": {
     "react": ">= 0.11.x"
   }
 }

src/index.js

@@ -1,5 +0,5 @@
-import Focus from './mixins/focus'
-import React from 'react'
+let Focus = require('./mixins/focus')
+let React = require('react')
 
-export default React.createClass({
+module.exports = React.createClass({
 
@@ -16,7 +16,17 @@ mixins: [ Focus ],
     return {
-      active : true,
-      role   : "dialog"
+      active  : true,
+      element : 'section',
+      role    : "dialog"
     }
   },
 
+  getBackdrop() {
+    return (<div className="focus-trap-backdrop" aria-hidden={ true } onClick={ this.props.onExit } />)
+  },
+
+  getInner() {
+    let { element, children } = this.props
+    return React.createElement(element, { className: 'focus-trap-inner' }, children)
+  },
+
   render() {
@@ -26,10 +36,5 @@ let { active, role } = this.props
     return active ? (
-      <div className="focus-trap" tabIndex="0" role={ role } onKeyUp={ this._onKeyUp }>
-
-        <div className="focus-trap-backdrop" aria-hidden={ true } onClick={ this.props.onExit }></div>
-
-        <section className="focus-trap-inner">
-          { this.props.children }
-        </section>
-
+        <div className="focus-trap" tabIndex="0" role={ role } onKeyUp={ this._onKeyUp }>
+        { this.getBackdrop() }
+      { this.getInner() }
       </div>
@@ -36,0 +41,0 @@ ) : null

src/mixins/focus.js

@@ -8,3 +8,3 @@ /**
 
-export default {
+module.exports = {
 
@@ -16,3 +16,3 @@ _pushFocus() {
 
-    this.getDOMNode().focus()
+    this._focus()
   },
@@ -28,3 +28,7 @@
   _focus() {
-    this.getDOMNode().focus()
+    let el = this.getDOMNode()
+
+    if (el) {
+      el.focus()
+    }
   },
@@ -45,4 +49,6 @@
 
-    el.addEventListener('focusin', this._clearTrap)
-    el.addEventListener('focusout', this._trapFocus)
+    if (el) {
+      el.addEventListener('focusin', this._clearTrap)
+      el.addEventListener('focusout', this._trapFocus)
+    }
 
@@ -57,6 +63,8 @@ this._pushFocus()
 
-    el.removeEventListener('focusin', this._clearTrap)
-    el.removeEventListener('focusout', this._trapFocus)
+    if (el) {
+      el.removeEventListener('focusin', this._clearTrap)
+      el.removeEventListener('focusout', this._trapFocus)
+    }
   }
 
 }

No alert changes

Improved metrics

Total package byte prevSize

14275

increased by2.42%

Lines of code

124

increased by11.71%

Dependency changes

• + Addedreact@>= 0.11.x