diff --git a/CHANGELOG.md b/CHANGELOG.md index d24e99a..352fd9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +v1.0.0 - Fri, 08 Jul 2016 21:20:29 GMT +-------------------------------------- + +- [720c1ce](../../commit/720c1ce) [changed] Maintain focus inside of tray + + v0.3.0 - Thu, 05 Nov 2015 22:29:26 GMT -------------------------------------- diff --git a/dist/react-tray.js b/dist/react-tray.js index daa47c9..482cfa5 100644 --- a/dist/react-tray.js +++ b/dist/react-tray.js @@ -91,14 +91,16 @@ return /******/ (function(modules) { // webpackBootstrap isOpen: _react2['default'].PropTypes.bool, onBlur: _react2['default'].PropTypes.func, closeTimeoutMS: _react2['default'].PropTypes.number, - closeOnBlur: _react2['default'].PropTypes.bool + closeOnBlur: _react2['default'].PropTypes.bool, + maintainFocus: _react2['default'].PropTypes.bool }, getDefaultProps: function getDefaultProps() { return { isOpen: false, closeTimeoutMS: 0, - closeOnBlur: true + closeOnBlur: true, + maintainFocus: false }; }, @@ -170,6 +172,10 @@ return /******/ (function(modules) { // webpackBootstrap var _helpersIsLeavingNode2 = _interopRequireDefault(_helpersIsLeavingNode); + var _helpersTabbable = __webpack_require__(8); + + var _helpersTabbable2 = _interopRequireDefault(_helpersTabbable); + var styles = { overlay: { position: 'fixed', @@ -222,7 +228,8 @@ return /******/ (function(modules) { // webpackBootstrap onBlur: _react.PropTypes.func, closeOnBlur: _react.PropTypes.bool, closeTimeoutMS: _react.PropTypes.number, - children: _react.PropTypes.any + children: _react.PropTypes.any, + maintainFocus: _react.PropTypes.bool }, getInitialState: function getInitialState() { @@ -275,6 +282,15 @@ return /******/ (function(modules) { // webpackBootstrap this.props.onBlur(); } + // Keep focus inside the tray if maintainFocus is true + if (e.keyCode === 9 && this.props.maintainFocus && (0, _helpersIsLeavingNode2['default'])(this.refs.content, e)) { + e.preventDefault(); + var tabbable = (0, _helpersTabbable2['default'])(this.refs.content); + var target = tabbable[e.shiftKey ? tabbable.length - 1 : 0]; + target.focus(); + return; + } + // Treat tabbing away from content as blur/close if closeOnBlur if (e.keyCode === 9 && this.props.closeOnBlur && (0, _helpersIsLeavingNode2['default'])(this.refs.content, e)) { e.preventDefault(); @@ -362,8 +378,8 @@ return /******/ (function(modules) { // webpackBootstrap /* 5 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_RESULT__;/*! - Copyright (c) 2015 Jed Watson. + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! + Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ @@ -375,7 +391,7 @@ return /******/ (function(modules) { // webpackBootstrap var hasOwn = {}.hasOwnProperty; function classNames () { - var classes = ''; + var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; @@ -384,28 +400,28 @@ return /******/ (function(modules) { // webpackBootstrap var argType = typeof arg; if (argType === 'string' || argType === 'number') { - classes += ' ' + arg; + classes.push(arg); } else if (Array.isArray(arg)) { - classes += ' ' + classNames.apply(null, arg); + classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { - classes += ' ' + key; + classes.push(key); } } } } - return classes.substr(1); + return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (true) { // register as 'classnames', consistent with npm package name - !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { return classNames; - }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else { window.classNames = classNames; } diff --git a/dist/react-tray.min.js b/dist/react-tray.min.js index 1b32b7f..ffec9ba 100644 --- a/dist/react-tray.min.js +++ b/dist/react-tray.min.js @@ -1,9 +1,9 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactTray=t(require("React"),require("ReactDOM")):e.ReactTray=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].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";e.exports=o(1)},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(2),s=n(r),u=o(3),i=n(u),a=o(4),l=n(a),c=i["default"].unstable_renderSubtreeIntoContainer;t["default"]=s["default"].createClass({displayName:"Tray",propTypes:{isOpen:s["default"].PropTypes.bool,onBlur:s["default"].PropTypes.func,closeTimeoutMS:s["default"].PropTypes.number,closeOnBlur:s["default"].PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,closeTimeoutMS:0,closeOnBlur:!0}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactTrayPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(e){this.renderPortal(e)},componentWillUnmount:function(){i["default"].unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(e){delete e.ref,c(this,s["default"].createElement(l["default"],e),this.node)},render:function(){return null}}),e.exports=t["default"]},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(e===t)return!0;for(var o=t;o=o.parentNode;)if(o===e)return!0;return!1}Object.defineProperty(t,"__esModule",{value:!0});var s=o(2),u=n(s),i=o(5),a=n(i),l=o(6),c=n(l),f=o(7),p=n(f),d={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0},content:{position:"absolute",background:"#fff"}},h={overlay:{base:"ReactTray__Overlay",afterOpen:"ReactTray__Overlay--after-open",beforeClose:"ReactTray__Overlay--before-close"},content:{base:"ReactTray__Content",afterOpen:"ReactTray__Content--after-open",beforeClose:"ReactTray__Content--before-close"}};t["default"]=u["default"].createClass({displayName:"TrayPortal",propTypes:{className:s.PropTypes.string,overlayClassName:s.PropTypes.string,isOpen:s.PropTypes.bool,onBlur:s.PropTypes.func,closeOnBlur:s.PropTypes.bool,closeTimeoutMS:s.PropTypes.number,children:s.PropTypes.any},getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(e){e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(e){this.focusAfterRender=e},focusContent:function(){this.refs.content.focus()},handleOverlayClick:function(e){r(this.refs.content,e.target)||this.props.onBlur()},handleContentKeyDown:function(e){27===e.keyCode&&this.props.onBlur(),9===e.keyCode&&this.props.closeOnBlur&&p["default"](this.refs.content,e)&&(e.preventDefault(),this.props.onBlur())},open:function(){var e=this;c["default"].markForFocusLater(),this.setState({isOpen:!0},function(){e.setState({afterOpen:!0})})},close:function(){this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout()},closeWithTimeout:function(){var e=this;this.setState({beforeClose:!0},function(){setTimeout(e.closeWithoutTimeout,e.props.closeTimeoutMS)})},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){c["default"].returnFocus()},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},buildClassName:function(e){var t=h[e].base;return this.state.afterOpen&&(t+=" "+h[e].afterOpen),this.state.beforeClose&&(t+=" "+h[e].beforeClose),t},render:function(){return this.shouldBeClosed()?u["default"].createElement("div",null):u["default"].createElement("div",{ref:"overlay",style:d.overlay,className:a["default"](this.buildClassName("overlay"),this.props.overlayClassName),onClick:this.handleOverlayClick},u["default"].createElement("div",{ref:"content",style:d.content,className:a["default"](this.buildClassName("content"),this.props.className),onKeyDown:this.handleContentKeyDown,tabIndex:"-1"},this.props.children))}}),e.exports=t["default"]},function(e,t,o){var n;/*! - Copyright (c) 2015 Jed Watson. +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactTray=t(require("React"),require("ReactDOM")):e.ReactTray=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].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";e.exports=o(1)},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(2),s=n(r),u=o(3),i=n(u),a=o(4),l=n(a),c=i["default"].unstable_renderSubtreeIntoContainer;t["default"]=s["default"].createClass({displayName:"Tray",propTypes:{isOpen:s["default"].PropTypes.bool,onBlur:s["default"].PropTypes.func,closeTimeoutMS:s["default"].PropTypes.number,closeOnBlur:s["default"].PropTypes.bool,maintainFocus:s["default"].PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,closeTimeoutMS:0,closeOnBlur:!0,maintainFocus:!1}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactTrayPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(e){this.renderPortal(e)},componentWillUnmount:function(){i["default"].unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(e){delete e.ref,c(this,s["default"].createElement(l["default"],e),this.node)},render:function(){return null}}),e.exports=t["default"]},function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(e===t)return!0;for(var o=t;o=o.parentNode;)if(o===e)return!0;return!1}Object.defineProperty(t,"__esModule",{value:!0});var s=o(2),u=n(s),i=o(5),a=n(i),l=o(6),c=n(l),f=o(7),p=n(f),d=o(8),h=n(d),y={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0},content:{position:"absolute",background:"#fff"}},m={overlay:{base:"ReactTray__Overlay",afterOpen:"ReactTray__Overlay--after-open",beforeClose:"ReactTray__Overlay--before-close"},content:{base:"ReactTray__Content",afterOpen:"ReactTray__Content--after-open",beforeClose:"ReactTray__Content--before-close"}};t["default"]=u["default"].createClass({displayName:"TrayPortal",propTypes:{className:s.PropTypes.string,overlayClassName:s.PropTypes.string,isOpen:s.PropTypes.bool,onBlur:s.PropTypes.func,closeOnBlur:s.PropTypes.bool,closeTimeoutMS:s.PropTypes.number,children:s.PropTypes.any,maintainFocus:s.PropTypes.bool},getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(e){e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(e){this.focusAfterRender=e},focusContent:function(){this.refs.content.focus()},handleOverlayClick:function(e){r(this.refs.content,e.target)||this.props.onBlur()},handleContentKeyDown:function(e){if(27===e.keyCode&&this.props.onBlur(),9===e.keyCode&&this.props.maintainFocus&&p["default"](this.refs.content,e)){e.preventDefault();var t=h["default"](this.refs.content),o=t[e.shiftKey?t.length-1:0];return void o.focus()}9===e.keyCode&&this.props.closeOnBlur&&p["default"](this.refs.content,e)&&(e.preventDefault(),this.props.onBlur())},open:function(){var e=this;c["default"].markForFocusLater(),this.setState({isOpen:!0},function(){e.setState({afterOpen:!0})})},close:function(){this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout()},closeWithTimeout:function(){var e=this;this.setState({beforeClose:!0},function(){setTimeout(e.closeWithoutTimeout,e.props.closeTimeoutMS)})},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){c["default"].returnFocus()},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},buildClassName:function(e){var t=m[e].base;return this.state.afterOpen&&(t+=" "+m[e].afterOpen),this.state.beforeClose&&(t+=" "+m[e].beforeClose),t},render:function(){return this.shouldBeClosed()?u["default"].createElement("div",null):u["default"].createElement("div",{ref:"overlay",style:y.overlay,className:a["default"](this.buildClassName("overlay"),this.props.overlayClassName),onClick:this.handleOverlayClick},u["default"].createElement("div",{ref:"content",style:y.content,className:a["default"](this.buildClassName("content"),this.props.className),onKeyDown:this.handleContentKeyDown,tabIndex:"-1"},this.props.children))}}),e.exports=t["default"]},function(e,t,o){var n,r;/*! + Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";function r(){for(var e="",t=0;t