		@@ -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=o(1),r=o(2);e.exports=r.createClass({displayName:"exports",mixins:[s],propTypes:{active:r.PropTypes.bool,onExit:r.PropTypes.func.isRequired,role:r.PropTypes.string.isRequired},getDefaultProps:function(){return{active:!0,className:"focus-trap-inner",element:"section",role:"dialog"}},getBackdrop:function(){return r.createElement("div",{className:"focus-trap-backdrop","aria-hidden":!0,onClick:this.props.onExit})},getInner:function(){var e=this.props,t=e.className,o=e.element,s=e.children;return r.createElement(o,{className:t},s)},render:function(){var e=this.props,t=e.active,o=e.role;return t?r.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,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 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=o(1),r=o(2);e.exports=r.createClass({displayName:"exports",mixins:[s],propTypes:{active:r.PropTypes.bool,onExit:r.PropTypes.func.isRequired,role:r.PropTypes.string.isRequired},getDefaultProps:function(){return{active:!1,className:"focus-trap-inner",element:"div",role:"dialog"}},getBackdrop:function(){return r.createElement("div",{className:"focus-trap-backdrop","aria-hidden":!0,onClick:this.props.onExit})},getInner:function(){var e=this.props,t=e.className,o=e.element,s=e.children;return r.createElement(o,{className:t},s)},render:function(){var e=this.props,t=e.active,o=e.role;return t?r.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,s){t.exports=e}])});

package.json

		{
		"name": "react-focus-trap",
		"version": "0.3.0",
		"version": "0.4.0",
		"description": "",
		@@ -5,0 +5,0 @@ "main": "dist/focus-trap.js",

readme.md

		# React Focus Trap

		A generic focus management tool for components such as dialogs and dropdowns
		A generic focus management tool for components such as dialogs and dropdowns.

		## Usage

		React Focus Trap is a container element that will manage focus for its children

		```javascript
		let Modal = React.createClass({

		render() {
		<FocusTrap onExit={ this._onExit }>
		Amazing stuff goes here
		</FocusTrap>
		}
		})
		```

		When Focus Trap is active, it will do several things:

		1. Ensure focus remains on its content
		2. Exits when clicks outside of the container occur
		3. Exists when the escape key is pressed

		## Props

		\| Name \| Default \| Description \|
		\| ---------- \| -------------------- \| ----------------------------------------------------- \|
		\| active \| false \| Should the FocusTrap render? \|
		\| className \| 'focus-trap-inner' \| The class of the inner container that maintains focus \|
		\| onExit \| null (but required) \| Callback when escape or an outside click occurs \|
		\| element \| 'div' \| The tag name of the inner container \|
		\| role \| 'dialog' \| The aria role for the inner container \|

src/index.js

		@@ -16,5 +16,5 @@ let Focus = require('./mixins/focus')
		return {
		active : true,
		active : false,
		className : 'focus-trap-inner',
		element : 'section',
		element : 'div',
		role : "dialog"
		@@ -21,0 +21,0 @@ }

react-focus-trap - npm Package Compare versions

Improved metrics