UNPKG

react-tray

Version:

An accessible tray component useful for navigation menus

18 lines 7.89 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.ReactTray=t(require("react"),require("react-dom")):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),i=o(3),u=n(i),a=o(4),l=n(a),c=o(9),f=u["default"].unstable_renderSubtreeIntoContainer;t["default"]=s["default"].createClass({displayName:"Tray",propTypes:{isOpen:s["default"].PropTypes.bool,onBlur:s["default"].PropTypes.func,onOpen:s["default"].PropTypes.func,closeTimeoutMS:s["default"].PropTypes.number,closeOnBlur:s["default"].PropTypes.bool,maintainFocus:s["default"].PropTypes.bool,getElementToFocus:c.a11yFunction,getAriaHideElement:c.a11yFunction},getDefaultProps:function(){return{isOpen:!1,closeTimeoutMS:0,closeOnBlur:!0,maintainFocus:!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(){u["default"].unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(e){delete e.ref,f(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),i=n(s),u=o(5),a=n(u),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"]=i["default"].createClass({displayName:"TrayPortal",propTypes:{className:s.PropTypes.string,overlayClassName:s.PropTypes.string,isOpen:s.PropTypes.bool,onBlur:s.PropTypes.func,onOpen:s.PropTypes.func,closeOnBlur:s.PropTypes.bool,closeTimeoutMS:s.PropTypes.number,children:s.PropTypes.any,maintainFocus:s.PropTypes.bool,getElementToFocus:s.PropTypes.func,getAriaHideElement:s.PropTypes.func},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.props.getElementToFocus?this.props.getElementToFocus().focus():this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(e){this.focusAfterRender=e},focusContent:function(){this.refs.content.focus()},applyAriaHidden:function(e){e.setAttribute("aria-hidden",!0)},removeAriaHidden:function(e){e.removeAttribute("aria-hidden")},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.props.onOpen&&e.props.onOpen(),e.props.getAriaHideElement&&e.applyAriaHidden(e.props.getAriaHideElement()),e.setState({afterOpen:!0})})},close:function(){this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout(),this.props.getAriaHideElement&&this.removeAriaHidden(this.props.getAriaHideElement())},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()?i["default"].createElement("div",null):i["default"].createElement("div",{ref:"overlay",style:y.overlay,className:a["default"](this.buildClassName("overlay"),this.props.overlayClassName),onClick:this.handleOverlayClick},i["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 o(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var r=typeof n;if("string"===r||"number"===r)e.push(n);else if(Array.isArray(n))e.push(o.apply(null,n));else if("object"===r)for(var i in n)s.call(n,i)&&n[i]&&e.push(i)}}return e.join(" ")}var s={}.hasOwnProperty;"undefined"!=typeof e&&e.exports?e.exports=o:(n=[],r=function(){return o}.apply(t,n),!(void 0!==r&&(e.exports=r)))}()},function(e,t){"use strict";var o=null;t.markForFocusLater=function(){o=document.activeElement},t.returnFocus=function(){try{o.focus()}catch(e){console.warn("You tried to return focus to "+o+" but it is not in the DOM anymore")}o=null}},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(8),s=n(r);t["default"]=function(e,t){var o=s["default"](e),n=o[t.shiftKey?0:o.length-1],r=n===document.activeElement;return r},e.exports=t["default"]},function(e,t){/*! * Adapted from jQuery UI core * * http://jqueryui.com * * Copyright 2014 jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/ui-core/ */ "use strict";function o(e){return e.offsetWidth<=0&&e.offsetHeight<=0||"none"===e.style.display}function n(e){for(var t=e;t&&t!==document.body;){if(o(t))return!1;t=t.parentNode}return!0}function r(e,t){var o=e.nodeName.toLowerCase();return(/input|select|textarea|button|object/.test(o)?!e.disabled:"a"===o?e.href||t:t)&&n(e)}function s(e){var t=e.getAttribute("tabindex");null===t&&(t=void 0);var o=isNaN(t);return(o||t>=0)&&r(e,!o)}function i(e){return[].slice.call(e.querySelectorAll("*"),0).filter(function(e){return s(e)})}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=i,e.exports=t["default"]},function(e,t){"use strict";function o(e,t,o){return e[t]&&"function"==typeof e[t]?void 0:new Error("The prop '"+t+"' is required to make '"+o+"' fully accessible. This will greatly improve the experience for users of assistive technologies. You should provide a function that returns a DOM node.")}Object.defineProperty(t,"__esModule",{value:!0}),t.a11yFunction=o}])}); //# sourceMappingURL=react-tray.min.js.map