Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-modal
Advanced tools
react-modal - npm Package Compare versions
Comparing version 3.2.1 to 3.3.1
@@ -0,1 +1,11 @@ | ||
| v3.3.1 - Wed, 21 Feb 2018 09:53:44 UTC | ||
| -------------------------------------- | ||
| - [0c6d966](../../commit/0c6d966) [added] htmlOpenClassName will follow the same rules like... bodyOpenClassName. | ||
| - [088e68e](../../commit/088e68e) [added] add class to html when modal is open | ||
| - [e6159b6](../../commit/e6159b6) [chore] Fix README table of contents | ||
| - [241b8a6](../../commit/241b8a6) [chore] Move API documentation from README to gitbook | ||
| - [4c1e590](../../commit/4c1e590) Expand documentation | ||
| v3.2.1 - Thu, 15 Feb 2018 09:07:28 UTC | ||
@@ -2,0 +12,0 @@ -------------------------------------- |
@@ -1,2 +0,2 @@ | ||
| !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.ReactModal=t(require("react"),require("react-dom")):e.ReactModal=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=9)}([function(e,t,n){"use strict";function o(e){return function(){return e}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function o(e,t,n,o,a,u,s,i){if(r(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,a,u,s,i],f=0;l=new Error(t.replace(/%s/g,function(){return c[f++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var r=function(e){};r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")},e.exports=o},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n){t.exports=e},function(e,t,n){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,r=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o};e.exports=n(12)(r,!0)},function(e,t,n){"use strict";var o=n(0),r=o;!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var r=0,a="Warning: "+e.replace(/%s/g,function(){return n[r++]});"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}};r=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var o=arguments.length,r=Array(o>2?o-2:0),a=2;a<o;a++)r[a-2]=arguments[a];e.apply(void 0,[n].concat(r))}}}(),e.exports=r},function(e,t,n){"use strict";function o(e){var t=e.offsetWidth<=0&&e.offsetHeight<=0;if(t&&!e.innerHTML)return!0;var n=window.getComputedStyle(e);return t?"visible"!==n.getPropertyValue("overflow"):"none"==n.getPropertyValue("display")}function r(e){for(var t=e;t&&t!==document.body;){if(o(t))return!1;t=t.parentNode}return!0}function a(e,t){var n=e.nodeName.toLowerCase();return(i.test(n)&&!e.disabled||("a"===n?e.href||t:t))&&r(e)}function u(e){var t=e.getAttribute("tabindex");null===t&&(t=void 0);var n=isNaN(t);return(n||t>=0)&&a(e,!n)}function s(e){return[].slice.call(e.querySelectorAll("*"),0).filter(u)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=s;/*! | ||
| !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.ReactModal=t(require("react"),require("react-dom")):e.ReactModal=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=9)}([function(e,t,n){"use strict";function o(e){return function(){return e}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function o(e,t,n,o,a,u,s,l){if(r(t),!e){var i;if(void 0===t)i=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,a,u,s,l],f=0;i=new Error(t.replace(/%s/g,function(){return c[f++]})),i.name="Invariant Violation"}throw i.framesToPop=1,i}}var r=function(e){};r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")},e.exports=o},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n){t.exports=e},function(e,t,n){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,r=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o};e.exports=n(12)(r,!0)},function(e,t,n){"use strict";var o=n(0),r=o;!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];var r=0,a="Warning: "+e.replace(/%s/g,function(){return n[r++]});"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}};r=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var o=arguments.length,r=Array(o>2?o-2:0),a=2;a<o;a++)r[a-2]=arguments[a];e.apply(void 0,[n].concat(r))}}}(),e.exports=r},function(e,t,n){"use strict";function o(e){var t=e.offsetWidth<=0&&e.offsetHeight<=0;if(t&&!e.innerHTML)return!0;var n=window.getComputedStyle(e);return t?"visible"!==n.getPropertyValue("overflow"):"none"==n.getPropertyValue("display")}function r(e){for(var t=e;t&&t!==document.body;){if(o(t))return!1;t=t.parentNode}return!0}function a(e,t){var n=e.nodeName.toLowerCase();return(l.test(n)&&!e.disabled||("a"===n?e.href||t:t))&&r(e)}function u(e){var t=e.getAttribute("tabindex");null===t&&(t=void 0);var n=isNaN(t);return(n||t>=0)&&a(e,!n)}function s(e){return[].slice.call(e.querySelectorAll("*"),0).filter(u)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=s;/*! | ||
| * Adapted from jQuery UI core | ||
@@ -12,3 +12,3 @@ * | ||
| */ | ||
| var i=/input|select|textarea|button|object/;e.exports=t.default},function(e,t,n){"use strict";function o(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function r(e){var t=e;if("string"==typeof t){var n=document.querySelectorAll(t);o(n,t),t="length"in n?n[0]:n}return p=t||p}function a(e){return!(!e&&!p)||((0,f.default)(!1,["react-modal: App element is not defined.","Please use `Modal.setAppElement(el)` or set `appElement={el}`.","This is needed so screen readers don't see main content","when modal is opened. It is not recommended, but you can opt-out","by setting `ariaHideApp={false}`."].join(" ")),!1)}function u(e){a(e)&&(e||p).setAttribute("aria-hidden","true")}function s(e){a(e)&&(e||p).removeAttribute("aria-hidden")}function i(){p=null}function l(){p=null}Object.defineProperty(t,"__esModule",{value:!0}),t.assertNodeList=o,t.setElement=r,t.validateElement=a,t.hide=u,t.show=s,t.documentNotReadyOrSSRTesting=i,t.resetForTesting=l;var c=n(18),f=function(e){return e&&e.__esModule?e:{default:e}}(c),p=null},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=void 0;var o=n(20),r=function(e){return e&&e.__esModule?e:{default:e}}(o),a=r.default,u=a.canUseDOM?window.HTMLElement:{};t.canUseDOM=a.canUseDOM;t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),r=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default=r.default,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return e()}Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=n(3),f=o(c),p=n(11),d=o(p),y=n(4),h=o(y),v=n(15),m=o(v),b=n(7),O=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(b),C=n(8),g=o(C),w=t.portalClassName="ReactModalPortal",R=t.bodyOpenClassName="ReactModal__Body--open",E=void 0!==d.default.createPortal,T=E?d.default.createPortal:d.default.unstable_renderSubtreeIntoContainer,_=function(e){function t(){var e,n,o,u;r(this,t);for(var l=arguments.length,c=Array(l),p=0;p<l;p++)c[p]=arguments[p];return n=o=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),o.removePortal=function(){!E&&d.default.unmountComponentAtNode(o.node),s(o.props.parentSelector).removeChild(o.node)},o.portalRef=function(e){o.portal=e},o.renderPortal=function(e){var n=T(o,f.default.createElement(m.default,i({defaultStyles:t.defaultStyles},e)),o.node);o.portalRef(n)},u=n,a(o,u)}return u(t,e),l(t,[{key:"componentDidMount",value:function(){if(C.canUseDOM){E||(this.node=document.createElement("div")),this.node.className=this.props.portalClassName;s(this.props.parentSelector).appendChild(this.node),!E&&this.renderPortal(this.props)}}},{key:"componentWillReceiveProps",value:function(e){if(C.canUseDOM){var t=e.isOpen;if(this.props.isOpen||t){var n=s(this.props.parentSelector),o=s(e.parentSelector);o!==n&&(n.removeChild(this.node),o.appendChild(this.node)),!E&&this.renderPortal(e)}}}},{key:"componentWillUpdate",value:function(e){C.canUseDOM&&e.portalClassName!==this.props.portalClassName&&(this.node.className=e.portalClassName)}},{key:"componentWillUnmount",value:function(){if(C.canUseDOM&&this.node&&this.portal){var e=this.portal.state,t=Date.now(),n=e.isOpen&&this.props.closeTimeoutMS&&(e.closesAt||t+this.props.closeTimeoutMS);n?(e.beforeClose||this.portal.closeWithTimeout(),setTimeout(this.removePortal,n-t)):this.removePortal()}}},{key:"render",value:function(){return C.canUseDOM&&E?(!this.node&&E&&(this.node=document.createElement("div")),T(f.default.createElement(m.default,i({ref:this.portalRef,defaultStyles:t.defaultStyles},this.props)),this.node)):null}}],[{key:"setAppElement",value:function(e){O.setElement(e)}}]),t}(c.Component);_.propTypes={isOpen:h.default.bool.isRequired,style:h.default.shape({content:h.default.object,overlay:h.default.object}),portalClassName:h.default.string,bodyOpenClassName:h.default.string,className:h.default.oneOfType([h.default.string,h.default.shape({base:h.default.string.isRequired,afterOpen:h.default.string.isRequired,beforeClose:h.default.string.isRequired})]),overlayClassName:h.default.oneOfType([h.default.string,h.default.shape({base:h.default.string.isRequired,afterOpen:h.default.string.isRequired,beforeClose:h.default.string.isRequired})]),appElement:h.default.instanceOf(g.default),onAfterOpen:h.default.func,onRequestClose:h.default.func,closeTimeoutMS:h.default.number,ariaHideApp:h.default.bool,shouldFocusAfterRender:h.default.bool,shouldCloseOnOverlayClick:h.default.bool,shouldReturnFocusAfterClose:h.default.bool,parentSelector:h.default.func,aria:h.default.object,role:h.default.string,contentLabel:h.default.string,shouldCloseOnEsc:h.default.bool,overlayRef:h.default.func,contentRef:h.default.func},_.defaultProps={isOpen:!1,portalClassName:w,bodyOpenClassName:R,ariaHideApp:!0,closeTimeoutMS:0,shouldFocusAfterRender:!0,shouldCloseOnEsc:!0,shouldCloseOnOverlayClick:!0,shouldReturnFocusAfterClose:!0,parentSelector:function(){return document.body}},_.defaultStyles={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255, 255, 255, 0.75)"},content:{position:"absolute",top:"40px",left:"40px",right:"40px",bottom:"40px",border:"1px solid #ccc",background:"#fff",overflow:"auto",WebkitOverflowScrolling:"touch",borderRadius:"4px",outline:"none",padding:"20px"}},t.default=_},function(e,n){e.exports=t},function(e,t,n){"use strict";var o=n(0),r=n(1),a=n(5),u=n(2),s=n(13);e.exports=function(e,t){function n(e){var t=e&&(E&&e[E]||e[T]);if("function"==typeof t)return t}function i(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function c(e){function n(n,i,c,f,p,d,y){if(f=f||_,d=d||c,y!==u)if(t)r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("undefined"!=typeof console){var h=f+":"+c;!o[h]&&s<3&&(a(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",d,f),o[h]=!0,s++)}return null==i[c]?n?new l(null===i[c]?"The "+p+" `"+d+"` is marked as required in `"+f+"`, but its value is `null`.":"The "+p+" `"+d+"` is marked as required in `"+f+"`, but its value is `undefined`."):null:e(i,c,f,p,d)}var o={},s=0,i=n.bind(null,!1);return i.isRequired=n.bind(null,!0),i}function f(e){function t(t,n,o,r,a,u){var s=t[n];if(C(s)!==e)return new l("Invalid "+r+" `"+a+"` of type `"+g(s)+"` supplied to `"+o+"`, expected `"+e+"`.");return null}return c(t)}function p(e){function t(t,n,o,r,a){if("function"!=typeof e)return new l("Property `"+a+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){return new l("Invalid "+r+" `"+a+"` of type `"+C(s)+"` supplied to `"+o+"`, expected an array.")}for(var i=0;i<s.length;i++){var c=e(s,i,o,r,a+"["+i+"]",u);if(c instanceof Error)return c}return null}return c(t)}function d(e){function t(t,n,o,r,a){if(!(t[n]instanceof e)){var u=e.name||_;return new l("Invalid "+r+" `"+a+"` of type `"+R(t[n])+"` supplied to `"+o+"`, expected instance of `"+u+"`.")}return null}return c(t)}function y(e){function t(t,n,o,r,a){for(var u=t[n],s=0;s<e.length;s++)if(i(u,e[s]))return null;return new l("Invalid "+r+" `"+a+"` of value `"+u+"` supplied to `"+o+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?c(t):(a(!1,"Invalid argument supplied to oneOf, expected an instance of array."),o.thatReturnsNull)}function h(e){function t(t,n,o,r,a){if("function"!=typeof e)return new l("Property `"+a+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],i=C(s);if("object"!==i)return new l("Invalid "+r+" `"+a+"` of type `"+i+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(s.hasOwnProperty(c)){var f=e(s,c,o,r,a+"."+c,u);if(f instanceof Error)return f}return null}return c(t)}function v(e){function t(t,n,o,r,a){for(var s=0;s<e.length;s++){if(null==(0,e[s])(t,n,o,r,a,u))return null}return new l("Invalid "+r+" `"+a+"` supplied to `"+o+"`.")}if(!Array.isArray(e))return a(!1,"Invalid argument supplied to oneOfType, expected an instance of array."),o.thatReturnsNull;for(var n=0;n<e.length;n++){var r=e[n];if("function"!=typeof r)return a(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",w(r),n),o.thatReturnsNull}return c(t)}function m(e){function t(t,n,o,r,a){var s=t[n],i=C(s);if("object"!==i)return new l("Invalid "+r+" `"+a+"` of type `"+i+"` supplied to `"+o+"`, expected `object`.");for(var c in e){var f=e[c];if(f){var p=f(s,c,o,r,a+"."+c,u);if(p)return p}}return null}return c(t)}function b(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(b);if(null===t||e(t))return!0;var o=n(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!b(r.value))return!1}else for(;!(r=a.next()).done;){var u=r.value;if(u&&!b(u[1]))return!1}return!0;default:return!1}}function O(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function C(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":O(t,e)?"symbol":t}function g(e){if(void 0===e||null===e)return""+e;var t=C(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function w(e){var t=g(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function R(e){return e.constructor&&e.constructor.name?e.constructor.name:_}var E="function"==typeof Symbol&&Symbol.iterator,T="@@iterator",_="<<anonymous>>",P={array:f("array"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:function(){return c(o.thatReturnsNull)}(),arrayOf:p,element:function(){function t(t,n,o,r,a){var u=t[n];if(!e(u)){return new l("Invalid "+r+" `"+a+"` of type `"+C(u)+"` supplied to `"+o+"`, expected a single ReactElement.")}return null}return c(t)}(),instanceOf:d,node:function(){function e(e,t,n,o,r){return b(e[t])?null:new l("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")}return c(e)}(),objectOf:h,oneOf:y,oneOfType:v,shape:m};return l.prototype=Error.prototype,P.checkPropTypes=s,P.PropTypes=P,P}},function(e,t,n){"use strict";function o(e,t,n,o,i){for(var l in e)if(e.hasOwnProperty(l)){var c;try{r("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",o||"React class",n,l),c=e[l](t,l,o,n,null,u)}catch(e){c=e}if(a(!c||c instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",n,l,typeof c),c instanceof Error&&!(c.message in s)){s[c.message]=!0;var f=i?i():"";a(!1,"Failed %s type: %s%s",n,c.message,null!=f?f:"")}}}var r=n(1),a=n(5),u=n(2),s={};e.exports=o},function(e,t,n){"use strict";var o=n(0),r=n(1),a=n(2);e.exports=function(){function e(e,t,n,o,u,s){s!==a&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(3),p=r(f),d=n(4),y=r(d),h=n(16),v=o(h),m=n(17),b=r(m),O=n(7),C=o(O),g=n(19),w=o(g),R=n(8),E=r(R),T={overlay:"ReactModal__Overlay",content:"ReactModal__Content"},_=9,P=27,j=0,M=function(e){function t(e){a(this,t);var n=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.setFocusAfterRender=function(e){n.focusAfterRender=n.props.shouldFocusAfterRender&&e},n.setOverlayRef=function(e){n.overlay=e,n.props.overlayRef&&n.props.overlayRef(e)},n.setContentRef=function(e){n.content=e,n.props.contentRef&&n.props.contentRef(e)},n.afterClose=function(){var e=n.props,t=e.appElement,o=e.ariaHideApp;w.remove(n.props.bodyOpenClassName),o&&j>0&&0===(j-=1)&&C.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(v.returnFocus(),v.teardownScopedFocus()):v.popWithoutFocus())},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(v.setupScopedFocus(n.node),v.markForFocusLater()),n.setState({isOpen:!0},function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen()}))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus()},n.closeWithTimeout=function(){var e=Date.now()+n.props.closeTimeoutMS;n.setState({beforeClose:!0,closesAt:e},function(){n.closeTimer=setTimeout(n.closeWithoutTimeout,n.state.closesAt-Date.now())})},n.closeWithoutTimeout=function(){n.setState({beforeClose:!1,isOpen:!1,afterOpen:!1,closesAt:null},n.afterClose)},n.handleKeyDown=function(e){e.keyCode===_&&(0,b.default)(n.content,e),n.props.shouldCloseOnEsc&&e.keyCode===P&&(e.stopPropagation(),n.requestClose(e))},n.handleOverlayOnClick=function(e){null===n.shouldClose&&(n.shouldClose=!0),n.shouldClose&&n.props.shouldCloseOnOverlayClick&&(n.ownerHandlesClose()?n.requestClose(e):n.focusContent()),n.shouldClose=null,n.moveFromContentToOverlay=null},n.handleOverlayOnMouseUp=function(){null===n.moveFromContentToOverlay&&(n.shouldClose=!1),n.props.shouldCloseOnOverlayClick&&(n.shouldClose=!0)},n.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault(),n.moveFromContentToOverlay=!1},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!1,n.moveFromContentToOverlay=!1},n.requestClose=function(e){return n.ownerHandlesClose()&&n.props.onRequestClose(e)},n.ownerHandlesClose=function(){return n.props.onRequestClose},n.shouldBeClosed=function(){return!n.state.isOpen&&!n.state.beforeClose},n.contentHasFocus=function(){return document.activeElement===n.content||n.content.contains(document.activeElement)},n.buildClassName=function(e,t){var o="object"===(void 0===t?"undefined":l(t))?t:{base:T[e],afterOpen:T[e]+"--after-open",beforeClose:T[e]+"--before-close"},r=o.base;return n.state.afterOpen&&(r=r+" "+o.afterOpen),n.state.beforeClose&&(r=r+" "+o.beforeClose),"string"==typeof t&&t?r+" "+t:r},n.ariaAttributes=function(e){return Object.keys(e).reduce(function(t,n){return t["aria-"+n]=e[n],t},{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return s(t,e),c(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())}},{key:"componentWillReceiveProps",value:function(e){e.bodyOpenClassName!==this.props.bodyOpenClassName&&console.warn('React-Modal: "bodyOpenClassName" prop has been modified. This may cause unexpected behavior when multiple modals are open.'),!this.props.isOpen&&e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()}},{key:"componentDidUpdate",value:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))}},{key:"componentWillUnmount",value:function(){this.afterClose(),clearTimeout(this.closeTimer)}},{key:"beforeOpen",value:function(){var e=this.props,t=e.appElement,n=e.ariaHideApp,o=e.bodyOpenClassName;w.add(o),n&&(j+=1,C.hide(t))}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.overlayClassName,o=e.defaultStyles,r=t?{}:o.content,a=n?{}:o.overlay;return this.shouldBeClosed()?null:p.default.createElement("div",{ref:this.setOverlayRef,className:this.buildClassName("overlay",n),style:i({},a,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown,onMouseUp:this.handleOverlayOnMouseUp,"aria-modal":"true"},p.default.createElement("div",i({ref:this.setContentRef,style:i({},r,this.props.style.content),className:this.buildClassName("content",t),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.ariaAttributes(this.props.aria||{})),this.props.children))}}]),t}(f.Component);M.defaultProps={style:{overlay:{},content:{}}},M.propTypes={isOpen:y.default.bool.isRequired,defaultStyles:y.default.shape({content:y.default.object,overlay:y.default.object}),style:y.default.shape({content:y.default.object,overlay:y.default.object}),className:y.default.oneOfType([y.default.string,y.default.object]),overlayClassName:y.default.oneOfType([y.default.string,y.default.object]),bodyOpenClassName:y.default.string,ariaHideApp:y.default.bool,appElement:y.default.instanceOf(E.default),onAfterOpen:y.default.func,onRequestClose:y.default.func,closeTimeoutMS:y.default.number,shouldFocusAfterRender:y.default.bool,shouldCloseOnOverlayClick:y.default.bool,shouldReturnFocusAfterClose:y.default.bool,role:y.default.string,contentLabel:y.default.string,aria:y.default.object,children:y.default.node,shouldCloseOnEsc:y.default.bool,overlayRef:y.default.func,contentRef:y.default.func},t.default=M,e.exports=t.default},function(e,t,n){"use strict";function o(){y=!0}function r(){if(y){if(y=!1,!d)return;setTimeout(function(){if(!d.contains(document.activeElement)){((0,f.default)(d)[0]||d).focus()}},0)}}function a(){p.push(document.activeElement)}function u(){var e=null;try{return void(0!==p.length&&(e=p.pop(),e.focus()))}catch(t){console.warn(["You tried to return focus to",e,"but it is not in the DOM anymore"].join(" "))}}function s(){p.length>0&&p.pop()}function i(e){d=e,window.addEventListener?(window.addEventListener("blur",o,!1),document.addEventListener("focus",r,!0)):(window.attachEvent("onBlur",o),document.attachEvent("onFocus",r))}function l(){d=null,window.addEventListener?(window.removeEventListener("blur",o),document.removeEventListener("focus",r)):(window.detachEvent("onBlur",o),document.detachEvent("onFocus",r))}Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=o,t.handleFocus=r,t.markForFocusLater=a,t.returnFocus=u,t.popWithoutFocus=s,t.setupScopedFocus=i,t.teardownScopedFocus=l;var c=n(6),f=function(e){return e&&e.__esModule?e:{default:e}}(c),p=[],d=null,y=!1},function(e,t,n){"use strict";function o(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=t.shiftKey,r=n[0],u=n[n.length-1];if(e===document.activeElement){if(!o)return;s=u}var s;if(u!==document.activeElement||o||(s=r),r===document.activeElement&&o&&(s=u),s)return t.preventDefault(),void s.focus();var i=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null!=i&&"Chrome"!=i[1]&&null==/\biPod\b|\biPad\b/g.exec(navigator.userAgent)){var l=n.indexOf(document.activeElement);l>-1&&(l+=o?-1:1),t.preventDefault(),n[l].focus()}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(6),a=function(e){return e&&e.__esModule?e:{default:e}}(r);e.exports=t.default},function(e,t,n){"use strict";var o=function(){};o=function(e,t,n){var o=arguments.length;n=new Array(o>2?o-2:0);for(var r=2;r<o;r++)n[r-2]=arguments[r];if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(t.length<10||/^[s\W]*$/.test(t))throw new Error("The warning format should be able to uniquely identify this warning. Please, use a more descriptive format than: "+t);if(!e){var a=0,u="Warning: "+t.replace(/%s/g,function(){return n[a++]});"undefined"!=typeof console&&console.error(u);try{throw new Error(u)}catch(e){}}},e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o={},r=function(e){return o[e]||(o[e]=0),o[e]+=1,e},a=function(e){return o[e]&&(o[e]-=1),e},u=function(e){e.split(" ").map(r).forEach(function(e){return document.body.classList.add(e)})},s=function(e){e.split(" ").map(a).filter(function(e){return 0===o[e]}).forEach(function(e){return document.body.classList.remove(e)})};t.add=u,t.remove=s},function(e,t,n){var o;/*! | ||
| var l=/input|select|textarea|button|object/;e.exports=t.default},function(e,t,n){"use strict";function o(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function r(e){var t=e;if("string"==typeof t){var n=document.querySelectorAll(t);o(n,t),t="length"in n?n[0]:n}return d=t||d}function a(e){return!(!e&&!d)||((0,f.default)(!1,["react-modal: App element is not defined.","Please use `Modal.setAppElement(el)` or set `appElement={el}`.","This is needed so screen readers don't see main content","when modal is opened. It is not recommended, but you can opt-out","by setting `ariaHideApp={false}`."].join(" ")),!1)}function u(e){a(e)&&(e||d).setAttribute("aria-hidden","true")}function s(e){a(e)&&(e||d).removeAttribute("aria-hidden")}function l(){d=null}function i(){d=null}Object.defineProperty(t,"__esModule",{value:!0}),t.assertNodeList=o,t.setElement=r,t.validateElement=a,t.hide=u,t.show=s,t.documentNotReadyOrSSRTesting=l,t.resetForTesting=i;var c=n(18),f=function(e){return e&&e.__esModule?e:{default:e}}(c),d=null},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=void 0;var o=n(20),r=function(e){return e&&e.__esModule?e:{default:e}}(o),a=r.default,u=a.canUseDOM?window.HTMLElement:{};t.canUseDOM=a.canUseDOM;t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(10),r=function(e){return e&&e.__esModule?e:{default:e}}(o);t.default=r.default,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e){return e()}Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=n(3),f=o(c),d=n(11),p=o(d),y=n(4),h=o(y),m=n(15),v=o(m),b=n(7),O=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(b),C=n(8),g=o(C),w=t.portalClassName="ReactModalPortal",R=t.bodyOpenClassName="ReactModal__Body--open",T=void 0!==p.default.createPortal,E=T?p.default.createPortal:p.default.unstable_renderSubtreeIntoContainer,_=function(e){function t(){var e,n,o,u;r(this,t);for(var i=arguments.length,c=Array(i),d=0;d<i;d++)c[d]=arguments[d];return n=o=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),o.removePortal=function(){!T&&p.default.unmountComponentAtNode(o.node),s(o.props.parentSelector).removeChild(o.node)},o.portalRef=function(e){o.portal=e},o.renderPortal=function(e){var n=E(o,f.default.createElement(v.default,l({defaultStyles:t.defaultStyles},e)),o.node);o.portalRef(n)},u=n,a(o,u)}return u(t,e),i(t,[{key:"componentDidMount",value:function(){if(C.canUseDOM){T||(this.node=document.createElement("div")),this.node.className=this.props.portalClassName;s(this.props.parentSelector).appendChild(this.node),!T&&this.renderPortal(this.props)}}},{key:"componentWillReceiveProps",value:function(e){if(C.canUseDOM){var t=e.isOpen;if(this.props.isOpen||t){var n=s(this.props.parentSelector),o=s(e.parentSelector);o!==n&&(n.removeChild(this.node),o.appendChild(this.node)),!T&&this.renderPortal(e)}}}},{key:"componentWillUpdate",value:function(e){C.canUseDOM&&e.portalClassName!==this.props.portalClassName&&(this.node.className=e.portalClassName)}},{key:"componentWillUnmount",value:function(){if(C.canUseDOM&&this.node&&this.portal){var e=this.portal.state,t=Date.now(),n=e.isOpen&&this.props.closeTimeoutMS&&(e.closesAt||t+this.props.closeTimeoutMS);n?(e.beforeClose||this.portal.closeWithTimeout(),setTimeout(this.removePortal,n-t)):this.removePortal()}}},{key:"render",value:function(){return C.canUseDOM&&T?(!this.node&&T&&(this.node=document.createElement("div")),E(f.default.createElement(v.default,l({ref:this.portalRef,defaultStyles:t.defaultStyles},this.props)),this.node)):null}}],[{key:"setAppElement",value:function(e){O.setElement(e)}}]),t}(c.Component);_.propTypes={isOpen:h.default.bool.isRequired,style:h.default.shape({content:h.default.object,overlay:h.default.object}),portalClassName:h.default.string,bodyOpenClassName:h.default.string,htmlOpenClassName:h.default.string,className:h.default.oneOfType([h.default.string,h.default.shape({base:h.default.string.isRequired,afterOpen:h.default.string.isRequired,beforeClose:h.default.string.isRequired})]),overlayClassName:h.default.oneOfType([h.default.string,h.default.shape({base:h.default.string.isRequired,afterOpen:h.default.string.isRequired,beforeClose:h.default.string.isRequired})]),appElement:h.default.instanceOf(g.default),onAfterOpen:h.default.func,onRequestClose:h.default.func,closeTimeoutMS:h.default.number,ariaHideApp:h.default.bool,shouldFocusAfterRender:h.default.bool,shouldCloseOnOverlayClick:h.default.bool,shouldReturnFocusAfterClose:h.default.bool,parentSelector:h.default.func,aria:h.default.object,role:h.default.string,contentLabel:h.default.string,shouldCloseOnEsc:h.default.bool,overlayRef:h.default.func,contentRef:h.default.func},_.defaultProps={isOpen:!1,portalClassName:w,bodyOpenClassName:R,ariaHideApp:!0,closeTimeoutMS:0,shouldFocusAfterRender:!0,shouldCloseOnEsc:!0,shouldCloseOnOverlayClick:!0,shouldReturnFocusAfterClose:!0,parentSelector:function(){return document.body}},_.defaultStyles={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(255, 255, 255, 0.75)"},content:{position:"absolute",top:"40px",left:"40px",right:"40px",bottom:"40px",border:"1px solid #ccc",background:"#fff",overflow:"auto",WebkitOverflowScrolling:"touch",borderRadius:"4px",outline:"none",padding:"20px"}},t.default=_},function(e,n){e.exports=t},function(e,t,n){"use strict";var o=n(0),r=n(1),a=n(5),u=n(2),s=n(13);e.exports=function(e,t){function n(e){var t=e&&(T&&e[T]||e[E]);if("function"==typeof t)return t}function l(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function i(e){this.message=e,this.stack=""}function c(e){function n(n,l,c,f,d,p,y){if(f=f||_,p=p||c,y!==u)if(t)r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("undefined"!=typeof console){var h=f+":"+c;!o[h]&&s<3&&(a(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",p,f),o[h]=!0,s++)}return null==l[c]?n?new i(null===l[c]?"The "+d+" `"+p+"` is marked as required in `"+f+"`, but its value is `null`.":"The "+d+" `"+p+"` is marked as required in `"+f+"`, but its value is `undefined`."):null:e(l,c,f,d,p)}var o={},s=0,l=n.bind(null,!1);return l.isRequired=n.bind(null,!0),l}function f(e){function t(t,n,o,r,a,u){var s=t[n];if(C(s)!==e)return new i("Invalid "+r+" `"+a+"` of type `"+g(s)+"` supplied to `"+o+"`, expected `"+e+"`.");return null}return c(t)}function d(e){function t(t,n,o,r,a){if("function"!=typeof e)return new i("Property `"+a+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var s=t[n];if(!Array.isArray(s)){return new i("Invalid "+r+" `"+a+"` of type `"+C(s)+"` supplied to `"+o+"`, expected an array.")}for(var l=0;l<s.length;l++){var c=e(s,l,o,r,a+"["+l+"]",u);if(c instanceof Error)return c}return null}return c(t)}function p(e){function t(t,n,o,r,a){if(!(t[n]instanceof e)){var u=e.name||_;return new i("Invalid "+r+" `"+a+"` of type `"+R(t[n])+"` supplied to `"+o+"`, expected instance of `"+u+"`.")}return null}return c(t)}function y(e){function t(t,n,o,r,a){for(var u=t[n],s=0;s<e.length;s++)if(l(u,e[s]))return null;return new i("Invalid "+r+" `"+a+"` of value `"+u+"` supplied to `"+o+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?c(t):(a(!1,"Invalid argument supplied to oneOf, expected an instance of array."),o.thatReturnsNull)}function h(e){function t(t,n,o,r,a){if("function"!=typeof e)return new i("Property `"+a+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],l=C(s);if("object"!==l)return new i("Invalid "+r+" `"+a+"` of type `"+l+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(s.hasOwnProperty(c)){var f=e(s,c,o,r,a+"."+c,u);if(f instanceof Error)return f}return null}return c(t)}function m(e){function t(t,n,o,r,a){for(var s=0;s<e.length;s++){if(null==(0,e[s])(t,n,o,r,a,u))return null}return new i("Invalid "+r+" `"+a+"` supplied to `"+o+"`.")}if(!Array.isArray(e))return a(!1,"Invalid argument supplied to oneOfType, expected an instance of array."),o.thatReturnsNull;for(var n=0;n<e.length;n++){var r=e[n];if("function"!=typeof r)return a(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",w(r),n),o.thatReturnsNull}return c(t)}function v(e){function t(t,n,o,r,a){var s=t[n],l=C(s);if("object"!==l)return new i("Invalid "+r+" `"+a+"` of type `"+l+"` supplied to `"+o+"`, expected `object`.");for(var c in e){var f=e[c];if(f){var d=f(s,c,o,r,a+"."+c,u);if(d)return d}}return null}return c(t)}function b(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(b);if(null===t||e(t))return!0;var o=n(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!b(r.value))return!1}else for(;!(r=a.next()).done;){var u=r.value;if(u&&!b(u[1]))return!1}return!0;default:return!1}}function O(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function C(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":O(t,e)?"symbol":t}function g(e){if(void 0===e||null===e)return""+e;var t=C(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function w(e){var t=g(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function R(e){return e.constructor&&e.constructor.name?e.constructor.name:_}var T="function"==typeof Symbol&&Symbol.iterator,E="@@iterator",_="<<anonymous>>",M={array:f("array"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:function(){return c(o.thatReturnsNull)}(),arrayOf:d,element:function(){function t(t,n,o,r,a){var u=t[n];if(!e(u)){return new i("Invalid "+r+" `"+a+"` of type `"+C(u)+"` supplied to `"+o+"`, expected a single ReactElement.")}return null}return c(t)}(),instanceOf:p,node:function(){function e(e,t,n,o,r){return b(e[t])?null:new i("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")}return c(e)}(),objectOf:h,oneOf:y,oneOfType:m,shape:v};return i.prototype=Error.prototype,M.checkPropTypes=s,M.PropTypes=M,M}},function(e,t,n){"use strict";function o(e,t,n,o,l){for(var i in e)if(e.hasOwnProperty(i)){var c;try{r("function"==typeof e[i],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",o||"React class",n,i),c=e[i](t,i,o,n,null,u)}catch(e){c=e}if(a(!c||c instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",n,i,typeof c),c instanceof Error&&!(c.message in s)){s[c.message]=!0;var f=l?l():"";a(!1,"Failed %s type: %s%s",n,c.message,null!=f?f:"")}}}var r=n(1),a=n(5),u=n(2),s={};e.exports=o},function(e,t,n){"use strict";var o=n(0),r=n(1),a=n(2);e.exports=function(){function e(e,t,n,o,u,s){s!==a&&r(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(3),d=r(f),p=n(4),y=r(p),h=n(16),m=o(h),v=n(17),b=r(v),O=n(7),C=o(O),g=n(19),w=o(g),R=n(8),T=r(R),E={overlay:"ReactModal__Overlay",content:"ReactModal__Content"},_=9,M=27,P=0,j=function(e){function t(e){a(this,t);var n=u(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.setFocusAfterRender=function(e){n.focusAfterRender=n.props.shouldFocusAfterRender&&e},n.setOverlayRef=function(e){n.overlay=e,n.props.overlayRef&&n.props.overlayRef(e)},n.setContentRef=function(e){n.content=e,n.props.contentRef&&n.props.contentRef(e)},n.afterClose=function(){var e=n.props,t=e.appElement,o=e.ariaHideApp,r=e.htmlOpenClassName,a=e.bodyOpenClassName;w.remove(document.body,a),r&&w.remove(document.getElementsByTagName("html")[0],r),o&&P>0&&0===(P-=1)&&C.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(m.returnFocus(),m.teardownScopedFocus()):m.popWithoutFocus())},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(m.setupScopedFocus(n.node),m.markForFocusLater()),n.setState({isOpen:!0},function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen()}))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus()},n.closeWithTimeout=function(){var e=Date.now()+n.props.closeTimeoutMS;n.setState({beforeClose:!0,closesAt:e},function(){n.closeTimer=setTimeout(n.closeWithoutTimeout,n.state.closesAt-Date.now())})},n.closeWithoutTimeout=function(){n.setState({beforeClose:!1,isOpen:!1,afterOpen:!1,closesAt:null},n.afterClose)},n.handleKeyDown=function(e){e.keyCode===_&&(0,b.default)(n.content,e),n.props.shouldCloseOnEsc&&e.keyCode===M&&(e.stopPropagation(),n.requestClose(e))},n.handleOverlayOnClick=function(e){null===n.shouldClose&&(n.shouldClose=!0),n.shouldClose&&n.props.shouldCloseOnOverlayClick&&(n.ownerHandlesClose()?n.requestClose(e):n.focusContent()),n.shouldClose=null,n.moveFromContentToOverlay=null},n.handleOverlayOnMouseUp=function(){null===n.moveFromContentToOverlay&&(n.shouldClose=!1),n.props.shouldCloseOnOverlayClick&&(n.shouldClose=!0)},n.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault(),n.moveFromContentToOverlay=!1},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!1,n.moveFromContentToOverlay=!1},n.requestClose=function(e){return n.ownerHandlesClose()&&n.props.onRequestClose(e)},n.ownerHandlesClose=function(){return n.props.onRequestClose},n.shouldBeClosed=function(){return!n.state.isOpen&&!n.state.beforeClose},n.contentHasFocus=function(){return document.activeElement===n.content||n.content.contains(document.activeElement)},n.buildClassName=function(e,t){var o="object"===(void 0===t?"undefined":i(t))?t:{base:E[e],afterOpen:E[e]+"--after-open",beforeClose:E[e]+"--before-close"},r=o.base;return n.state.afterOpen&&(r=r+" "+o.afterOpen),n.state.beforeClose&&(r=r+" "+o.beforeClose),"string"==typeof t&&t?r+" "+t:r},n.ariaAttributes=function(e){return Object.keys(e).reduce(function(t,n){return t["aria-"+n]=e[n],t},{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return s(t,e),c(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())}},{key:"componentWillReceiveProps",value:function(e){e.bodyOpenClassName!==this.props.bodyOpenClassName&&console.warn('React-Modal: "bodyOpenClassName" prop has been modified. This may cause unexpected behavior when multiple modals are open.'),e.htmlOpenClassName!==this.props.htmlOpenClassName&&console.warn('React-Modal: "htmlOpenClassName" prop has been modified. This may cause unexpected behavior when multiple modals are open.'),!this.props.isOpen&&e.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!e.isOpen&&this.close()}},{key:"componentDidUpdate",value:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))}},{key:"componentWillUnmount",value:function(){this.afterClose(),clearTimeout(this.closeTimer)}},{key:"beforeOpen",value:function(){var e=this.props,t=e.appElement,n=e.ariaHideApp,o=e.htmlOpenClassName,r=e.bodyOpenClassName;w.add(document.body,r),o&&w.add(document.getElementsByTagName("html")[0],o),n&&(P+=1,C.hide(t))}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.overlayClassName,o=e.defaultStyles,r=t?{}:o.content,a=n?{}:o.overlay;return this.shouldBeClosed()?null:d.default.createElement("div",{ref:this.setOverlayRef,className:this.buildClassName("overlay",n),style:l({},a,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown,onMouseUp:this.handleOverlayOnMouseUp,"aria-modal":"true"},d.default.createElement("div",l({ref:this.setContentRef,style:l({},r,this.props.style.content),className:this.buildClassName("content",t),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.ariaAttributes(this.props.aria||{})),this.props.children))}}]),t}(f.Component);j.defaultProps={style:{overlay:{},content:{}}},j.propTypes={isOpen:y.default.bool.isRequired,defaultStyles:y.default.shape({content:y.default.object,overlay:y.default.object}),style:y.default.shape({content:y.default.object,overlay:y.default.object}),className:y.default.oneOfType([y.default.string,y.default.object]),overlayClassName:y.default.oneOfType([y.default.string,y.default.object]),bodyOpenClassName:y.default.string,htmlOpenClassName:y.default.string,ariaHideApp:y.default.bool,appElement:y.default.instanceOf(T.default),onAfterOpen:y.default.func,onRequestClose:y.default.func,closeTimeoutMS:y.default.number,shouldFocusAfterRender:y.default.bool,shouldCloseOnOverlayClick:y.default.bool,shouldReturnFocusAfterClose:y.default.bool,role:y.default.string,contentLabel:y.default.string,aria:y.default.object,children:y.default.node,shouldCloseOnEsc:y.default.bool,overlayRef:y.default.func,contentRef:y.default.func},t.default=j,e.exports=t.default},function(e,t,n){"use strict";function o(){y=!0}function r(){if(y){if(y=!1,!p)return;setTimeout(function(){if(!p.contains(document.activeElement)){((0,f.default)(p)[0]||p).focus()}},0)}}function a(){d.push(document.activeElement)}function u(){var e=null;try{return void(0!==d.length&&(e=d.pop(),e.focus()))}catch(t){console.warn(["You tried to return focus to",e,"but it is not in the DOM anymore"].join(" "))}}function s(){d.length>0&&d.pop()}function l(e){p=e,window.addEventListener?(window.addEventListener("blur",o,!1),document.addEventListener("focus",r,!0)):(window.attachEvent("onBlur",o),document.attachEvent("onFocus",r))}function i(){p=null,window.addEventListener?(window.removeEventListener("blur",o),document.removeEventListener("focus",r)):(window.detachEvent("onBlur",o),document.detachEvent("onFocus",r))}Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=o,t.handleFocus=r,t.markForFocusLater=a,t.returnFocus=u,t.popWithoutFocus=s,t.setupScopedFocus=l,t.teardownScopedFocus=i;var c=n(6),f=function(e){return e&&e.__esModule?e:{default:e}}(c),d=[],p=null,y=!1},function(e,t,n){"use strict";function o(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=t.shiftKey,r=n[0],u=n[n.length-1];if(e===document.activeElement){if(!o)return;s=u}var s;if(u!==document.activeElement||o||(s=r),r===document.activeElement&&o&&(s=u),s)return t.preventDefault(),void s.focus();var l=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null!=l&&"Chrome"!=l[1]&&null==/\biPod\b|\biPad\b/g.exec(navigator.userAgent)){var i=n.indexOf(document.activeElement);i>-1&&(i+=o?-1:1),t.preventDefault(),n[i].focus()}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(6),a=function(e){return e&&e.__esModule?e:{default:e}}(r);e.exports=t.default},function(e,t,n){"use strict";var o=function(){};o=function(e,t,n){var o=arguments.length;n=new Array(o>2?o-2:0);for(var r=2;r<o;r++)n[r-2]=arguments[r];if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(t.length<10||/^[s\W]*$/.test(t))throw new Error("The warning format should be able to uniquely identify this warning. Please, use a more descriptive format than: "+t);if(!e){var a=0,u="Warning: "+t.replace(/%s/g,function(){return n[a++]});"undefined"!=typeof console&&console.error(u);try{throw new Error(u)}catch(e){}}},e.exports=o},function(e,t,n){"use strict";function o(){var e=document.getElementsByTagName("html")[0].className,t="Show tracked classes:\n\n";t+="<html /> ("+e+"):\n";for(var n in r)t+=" "+n+" "+r[n]+"\n";e=document.body.className,t+="\n\ndoc.body ("+e+"):\n";for(var o in a)t+=" "+o+" "+a[o]+"\n";t+="\n",console.log(t)}Object.defineProperty(t,"__esModule",{value:!0}),t.dumpClassLists=o;var r={},a={},u=function(e,t){return e[t]||(e[t]=0),e[t]+=1,t},s=function(e,t){return e[t]&&(e[t]-=1),t},l=function(e,t,n){n.forEach(function(n){u(t,n),e.add(n)})},i=function(e,t,n){n.forEach(function(n){s(t,n),0===t[n]&&e.remove(n)})};t.add=function(e,t){return l(e.classList,"html"==e.nodeName.toLowerCase()?r:a,t.split(" "))},t.remove=function(e,t){return i(e.classList,"html"==e.nodeName.toLowerCase()?r:a,t.split(" "))}},function(e,t,n){var o;/*! | ||
| Copyright (c) 2015 Jed Watson. | ||
@@ -15,0 +15,0 @@ Based on code that is Copyright 2013-2015, Facebook, Inc. |
@@ -7,3 +7,3 @@ # react-modal | ||
| ## Installation | ||
| ## Installation {#installation} | ||
@@ -17,5 +17,7 @@ To install the stable version you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com): | ||
| ## General Usage | ||
| ## General Usage {#usage} | ||
| The following is an example of using react-modal specifying all the possible props and options: | ||
| The only required prop for the modal object is `isOpen`, which indicates | ||
| whether the modal should be displayed. The following is an example of using | ||
| react-modal specifying all the possible props and options: | ||
@@ -73,2 +75,8 @@ ```js | ||
| /* | ||
| String className to be applied to the document.html (must be a constant string). | ||
| This attribute is `null` by default. | ||
| See the `Styles` section for more details. | ||
| */ | ||
| htmlOpenClassName="ReactModal__Html--open" | ||
| /* | ||
| Boolean indicating if the appElement should be hidden | ||
@@ -94,3 +102,3 @@ */ | ||
| */ | ||
| shouldReturnFocusAfterClose={true} | ||
| shouldReturnFocusAfterClose={true} | ||
| /* | ||
@@ -111,7 +119,7 @@ String indicating the role of the modal, allowing the 'dialog' role to be applied if desired. | ||
| }} | ||
| /* | ||
| /* | ||
| Overlay ref callback. | ||
| */ | ||
| overlayRef={setOverlayRef} | ||
| /* | ||
| /* | ||
| Content ref callback. | ||
@@ -123,4 +131,44 @@ */ | ||
| ## License | ||
| ## Using a custom parent node {#custom-parent} | ||
| By default, the modal portal will be appended to the document's body. You can | ||
| choose a different parent element by providing a function to the | ||
| `parentSelector` prop that returns the element to be used: | ||
| ```jsx | ||
| function getParent() { | ||
| return document.querySelector('#root'); | ||
| } | ||
| <Modal | ||
| ... | ||
| parentSelector={getParent} | ||
| ... | ||
| > | ||
| <p>Modal Content.</p> | ||
| </Modal> | ||
| ``` | ||
| If you do this, please ensure that your | ||
| [app element](accessibility/README.md#app-element) is set correctly. The app | ||
| element should not be a parent of the modal, to prevent modal content from | ||
| being hidden to screenreaders while it is open. | ||
| ## Refs {#refs} | ||
| You can use ref callbacks to get the overlay and content DOM nodes directly: | ||
| ```jsx | ||
| <Modal | ||
| ... | ||
| overlayRef={node => this.overlayRef = node} | ||
| contentRef={node => this.contentRef = node} | ||
| ... | ||
| > | ||
| <p>Modal Content.</p> | ||
| </Modal> | ||
| ``` | ||
| ## License {#license} | ||
| MIT |
| ### CSS Classes | ||
| Sometimes it may be preferable to use CSS classes rather than inline styles. | ||
| react-modal can be configured to use CSS classes to style the modal content and | ||
| overlay, as well as the document body and the portal within which the modal is | ||
| mounted. | ||
| You can use the `className` and `overlayClassName` props to specify a given CSS | ||
| class for each of those. | ||
| #### For the content and overlay | ||
| You can use the `className` and `overlayClassName` props to control the CSS | ||
| classes that are applied to the modal content and the overlay, respectively. | ||
| Each of these props may be a single string containing the class name to apply | ||
| to the component. | ||
| Alternatively, you may pass an object with the `base`, `afterOpen` and | ||
| `beforeClose` keys, where the value corresponding to each key is a class name. | ||
| The `base` class will always be applied to the component, the `afterOpen` class | ||
| will be applied after the modal has been opened and the `beforeClose` class | ||
| will be applied after the modal has requested to be closed (e.g. when the user | ||
| presses the escape key or clicks on the overlay). | ||
| Please note that the `beforeClose` class will have no effect unless the | ||
| `closeTimeoutMS` prop is set to a non-zero value, since otherwise the modal | ||
| will be closed immediately when requested. Thus, if you are using the | ||
| `afterOpen` and `beforeClose` classes to provide transitions, you may want to | ||
| set `closeTimeoutMS` to the length (in milliseconds) of your closing | ||
| transition. | ||
| If you specify `className`, the [default content styles](README.md) will not be | ||
| applied. Likewise, if you specify `overlayClassName`, the default overlay | ||
| styles will not be applied. | ||
| If no class names are specified for the overlay, the default classes | ||
| `ReactModal__Overlay`, `ReactModal__Overlay--after-open` and | ||
| `ReactModal__Overlay--before-close` will be applied; the default classes for | ||
| the content use the analogous prefix `ReactModal__Content`. Please note that | ||
| any styles applied using these default classes will not override the default | ||
| styles as they would if specified using the `className` or `overlayClassName` | ||
| props. | ||
| #### For the document.body and html tag | ||
| You can override the default class that is added to `document.body` when the | ||
| modal is open by defining a property `bodyOpenClassName`. | ||
| It's required that `bodyOpenClassName` must be `constant string`, otherwise we | ||
| would end up with a complex system to manage which class name should appear or | ||
| be removed from `document.body` from which modal (if using multiple modals | ||
| simultaneously). | ||
| The `bodyOpenClassName` prop must be a *constant string*; otherwise, we would | ||
| require a complex system to manage which class name should be added to or | ||
| removed from `document.body` from which modal (if using multiple modals | ||
| simultaneously). The default value is `ReactModal__Body--open`. | ||
@@ -19,5 +54,31 @@ `bodyOpenClassName` can support adding multiple classes to `document.body` when | ||
| Note: If you provide those props all default styles will not be applied, leaving | ||
| all styles under control of the CSS class. | ||
| One potential application for the body class is to remove scrolling on the body | ||
| when the modal is open. To do this for all modals (except those that specify a | ||
| non-default `bodyOpenClassName`), you could use the following CSS: | ||
| The `portalClassName` can also be used however there are no styles by default applied | ||
| ```CSS | ||
| .ReactModal__Body--open { | ||
| overflow: hidden; | ||
| } | ||
| ``` | ||
| You can define a class to be added to the html tag, using the `htmlOpenClassName` | ||
| attribute, which can be helpeful to stop the page to scroll to the top when open | ||
| a modal. | ||
| This attribute follows the same rules as `bodyOpenClassName`, it must be a *constant string*; | ||
| Here is an example that can help preventing this behavior: | ||
| ```CSS | ||
| .ReactModal__Body--open, | ||
| .ReactModal__Html--open { | ||
| overflow: hidden; | ||
| } | ||
| ``` | ||
| #### For the entire portal | ||
| To specify a class to be applied to the entire portal, you may use the | ||
| `portalClassName` prop. By default, there are no styles applied to the portal | ||
| itself. |
| ## Styles | ||
| Styles passed into the Modal via the `style` prop are merged with the defaults. The default styles are: | ||
| Styles passed into the Modal via the `style` prop are merged with the defaults. | ||
| The default styles are defined in the `Modal.defaultStyles` object and are | ||
| shown below. | ||
@@ -35,1 +37,5 @@ ```jsx | ||
| ``` | ||
| You can change the default styles by modifying `Modal.defaultStyles`. Please | ||
| note that specifying a [CSS class](classes.md) for the overlay or the content | ||
| will disable the default styles for that component. |
| # Summary | ||
| * [Read Me](/README.md) | ||
| * [Overview](/README.md) | ||
| * [Installation](/README.md#installation) | ||
| * [Usage summary](/README.md#usage) | ||
| * [Using a custom parent node](/README.md#custom-parent) | ||
| * [Refs](/README.md#refs) | ||
| * [License](/README.md#license) | ||
| * [Development](dev/README.md) | ||
| * [Accessibility](accessibility/README.md) | ||
| * [The app element](accessibility/README.md#app-element) | ||
| * [Keyboard navigation](accessibility/README.md#keyboard) | ||
| * [ARIA attributes](accessibility/README.md#aria) | ||
| * [Styles](styles/README.md) | ||
| * [Using CSS Classes](styles/classes.md) | ||
| * [Overriding Defaults](styles/defaults.md) | ||
| * [Transitions](styles/transitions.md) | ||
@@ -23,1 +31,2 @@ * [Testing](testing/README.md) | ||
| * [Contributing](contributing/README.md) | ||
| * [Development setup](contributing/development.md) |
@@ -182,2 +182,3 @@ "use strict"; | ||
| bodyOpenClassName: _propTypes2.default.string, | ||
| htmlOpenClassName: _propTypes2.default.string, | ||
| className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({ | ||
@@ -184,0 +185,0 @@ base: _propTypes2.default.string.isRequired, |
@@ -33,5 +33,5 @@ "use strict"; | ||
| var _bodyClassList = require("../helpers/bodyClassList"); | ||
| var _classList = require("../helpers/classList"); | ||
| var bodyClassList = _interopRequireWildcard(_bodyClassList); | ||
| var classList = _interopRequireWildcard(_classList); | ||
@@ -88,8 +88,12 @@ var _safeHTMLElement = require("../helpers/safeHTMLElement"); | ||
| appElement = _this$props.appElement, | ||
| ariaHideApp = _this$props.ariaHideApp; | ||
| ariaHideApp = _this$props.ariaHideApp, | ||
| htmlOpenClassName = _this$props.htmlOpenClassName, | ||
| bodyOpenClassName = _this$props.bodyOpenClassName; | ||
| // Remove body class | ||
| // Remove classes. | ||
| bodyClassList.remove(_this.props.bodyOpenClassName); | ||
| classList.remove(document.body, bodyOpenClassName); | ||
| htmlOpenClassName && classList.remove(document.getElementsByTagName("html")[0], htmlOpenClassName); | ||
| // Reset aria-hidden attribute if all modals have been removed | ||
@@ -285,2 +289,6 @@ if (ariaHideApp && ariaHiddenInstances > 0) { | ||
| } | ||
| if (newProps.htmlOpenClassName !== this.props.htmlOpenClassName) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn('React-Modal: "htmlOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open."); | ||
| } | ||
| } | ||
@@ -315,7 +323,11 @@ // Focus only needs to be set once when the modal is being opened | ||
| ariaHideApp = _props.ariaHideApp, | ||
| htmlOpenClassName = _props.htmlOpenClassName, | ||
| bodyOpenClassName = _props.bodyOpenClassName; | ||
| // Add body class | ||
| bodyClassList.add(bodyOpenClassName); | ||
| // Add aria-hidden to appElement | ||
| // Add classes. | ||
| classList.add(document.body, bodyOpenClassName); | ||
| htmlOpenClassName && classList.add(document.getElementsByTagName("html")[0], htmlOpenClassName); | ||
| if (ariaHideApp) { | ||
@@ -393,2 +405,3 @@ ariaHiddenInstances += 1; | ||
| bodyOpenClassName: _propTypes2.default.string, | ||
| htmlOpenClassName: _propTypes2.default.string, | ||
| ariaHideApp: _propTypes2.default.bool, | ||
@@ -395,0 +408,0 @@ appElement: _propTypes2.default.instanceOf(_safeHTMLElement2.default), |
| { | ||
| "name": "react-modal", | ||
| "version": "3.2.1", | ||
| "version": "3.3.1", | ||
| "description": "Accessible modal dialog component for React.JS", | ||
@@ -5,0 +5,0 @@ "main": "./lib/index.js", |
240
README.md
@@ -13,6 +13,4 @@ # react-modal | ||
| * [Installation](#installation) | ||
| * [Usage](#usage) | ||
| * [Styles](#styles) | ||
| * [API documentation](#api-documentation) | ||
| * [Examples](#examples) | ||
| * [Testing](#testing) | ||
| * [Demos](#demos) | ||
@@ -29,197 +27,12 @@ | ||
| ## Usage | ||
| ## API documentation | ||
| The Modal object has one required prop: | ||
| The primary documentation for react-modal is the | ||
| [reference book](https://reactjs.github.io/react-modal), which describes the API | ||
| and gives examples of its usage. | ||
| - `isOpen` to render its children. | ||
| Example: | ||
| ```jsx | ||
| <Modal | ||
| isOpen={bool} | ||
| onAfterOpen={afterOpenFn} | ||
| onRequestClose={requestCloseFn} | ||
| closeTimeoutMS={n} | ||
| style={customStyle} | ||
| contentLabel="Modal" | ||
| > | ||
| <h1>Modal Content</h1> | ||
| <p>Etc.</p> | ||
| </Modal> | ||
| ``` | ||
| > Use the prop `contentLabel` which adds `aria-label` to the modal if there is no label text visible on the screen, otherwise specify the element including the label text using `aria-labelledby` | ||
| ### App Element | ||
| The app element allows you to specify the portion | ||
| of your app that should be hidden (via aria-hidden) | ||
| to prevent assistive technologies such as screenreaders | ||
| from reading content outside of the content of | ||
| your modal. | ||
| If you are doing server-side rendering, you should use | ||
| this property. | ||
| It can be specified in the following ways: | ||
| - DOMElement | ||
| ```js | ||
| Modal.setAppElement(appElement); | ||
| ``` | ||
| - query selector - uses the first element found if you pass in a class. | ||
| ```js | ||
| Modal.setAppElement('#your-app-element'); | ||
| ``` | ||
| ### Additional Aria Attributes | ||
| Use the property `aria` to pass any additional aria attributes. It accepts | ||
| an object where the keys are the names of the attributes without the prefix | ||
| `aria-`. | ||
| Example: | ||
| ```jsx | ||
| <Modal | ||
| isOpen={modalIsOpen} | ||
| aria={{ | ||
| labelledby: "heading", | ||
| describedby: "full_description" | ||
| }}> | ||
| <h1 id="heading">H1</h1> | ||
| <div id="full_description"> | ||
| <p>Description goes here.</p> | ||
| </div> | ||
| </Modal> | ||
| ``` | ||
| ## Styles | ||
| Styles are passed with the `style` prop, an object with 2 keys, 'overlay' and 'content' like so | ||
| ```jsx | ||
| <Modal | ||
| ... | ||
| style={{ | ||
| overlay: { | ||
| position: 'fixed', | ||
| top: 0, | ||
| left: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| backgroundColor: 'rgba(255, 255, 255, 0.75)' | ||
| }, | ||
| content: { | ||
| position: 'absolute', | ||
| top: '40px', | ||
| left: '40px', | ||
| right: '40px', | ||
| bottom: '40px', | ||
| border: '1px solid #ccc', | ||
| background: '#fff', | ||
| overflow: 'auto', | ||
| WebkitOverflowScrolling: 'touch', | ||
| borderRadius: '4px', | ||
| outline: 'none', | ||
| padding: '20px' | ||
| } | ||
| }} | ||
| ... | ||
| > | ||
| ``` | ||
| Styles passed to the modal are merged in with the above defaults and applied to their respective elements. | ||
| At this time, media queries will need to be handled by the consumer. | ||
| ### Using CSS Classes | ||
| If you prefer not to use inline styles or are unable to do so in your project, | ||
| you can pass `className` and `overlayClassName` props to the Modal. If you do | ||
| this then none of the default styles will apply and you will have full control | ||
| over styling via CSS. | ||
| If you want to override default content and overlay classes you can pass object | ||
| with three required properties: `base`, `afterOpen`, `beforeClose`. | ||
| ```jsx | ||
| <Modal | ||
| ... | ||
| className={{ | ||
| base: 'myClass', | ||
| afterOpen: 'myClass_after-open', | ||
| beforeClose: 'myClass_before-close' | ||
| }} | ||
| overlayClassName={{ | ||
| base: 'myOverlayClass', | ||
| afterOpen: 'myOverlayClass_after-open', | ||
| beforeClose: 'myOverlayClass_before-close' | ||
| }} | ||
| ... | ||
| > | ||
| ``` | ||
| You can also pass a `portalClassName` to change the wrapper's class (*ReactModalPortal*). | ||
| This doesn't affect styling as no styles are applied to this element by default. | ||
| ### Overriding styles globally | ||
| The default styles above are available on `Modal.defaultStyles`. Changes to this | ||
| object will apply to all instances of the modal. | ||
| ### Appended to custom node | ||
| You can choose an element for the modal to be appended to, rather than using | ||
| body tag. To do this, provide a function to `parentSelector` prop that return | ||
| the element to be used. | ||
| ```jsx | ||
| function getParent() { | ||
| return document.querySelector('#root'); | ||
| } | ||
| <Modal | ||
| ... | ||
| parentSelector={getParent} | ||
| ... | ||
| > | ||
| <p>Modal Content.</p> | ||
| </Modal> | ||
| ``` | ||
| ### Body class | ||
| When the modal is opened a `ReactModal__Body--open` class is added to the `body` tag. | ||
| You can use this to remove scrolling on the body while the modal is open. | ||
| ```CSS | ||
| /* Remove scroll on the body when react-modal is open */ | ||
| .ReactModal__Body--open { | ||
| overflow: hidden; | ||
| } | ||
| ``` | ||
| ### Refs | ||
| You can use ref callbacks to get overlay and content DOM nodes: | ||
| ```jsx | ||
| <Modal | ||
| ... | ||
| overlayRef={node => this.overlayRef = node} | ||
| contentRef={node => this.contentRef = node} | ||
| ... | ||
| > | ||
| <p>Modal Content.</p> | ||
| </Modal> | ||
| ``` | ||
| ## Examples | ||
| Inside an app: | ||
| Here is a simple example of react-modal being used in an app with some custom | ||
| styles and focusable input elements within the modal content: | ||
@@ -299,31 +112,16 @@ ```jsx | ||
| ## Testing | ||
| You can find more examples in the `examples` directory, which you can run in a | ||
| local development server using `npm start` or `yarn run start`. | ||
| When using React Test Utils with this library, here are some things to keep in mind: | ||
| ## Demos | ||
| - You need to set `isOpen={true}` on the modal component for it to render its children. | ||
| - You need to use the `.portal` property, as in `ReactDOM.findDOMNode(renderedModal.portal)` or `TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class')` to acquire a handle to the inner contents of your modal. | ||
| There are several demos hosted on [CodePen](https://codepen.io) which | ||
| demonstrate various features of react-modal: | ||
| By default the modal is closed when clicking outside of it (the overlay area). If you want to prevent this behavior you can | ||
| pass the 'shouldCloseOnOverlayClick' prop with 'false' value. | ||
| ```jsx | ||
| <Modal | ||
| isOpen={bool} | ||
| onAfterOpen={afterOpenFn} | ||
| onRequestClose={requestCloseFn} | ||
| closeTimeoutMS={n} | ||
| shouldCloseOnOverlayClick={false} | ||
| style={customStyle} | ||
| contentLabel="No Overlay Click Modal" | ||
| > | ||
| <h1>Force Modal</h1> | ||
| <p>Modal cannot be closed when clicking the overlay area</p> | ||
| <button onClick={handleCloseFunc}>Close Modal...</button> | ||
| </Modal> | ||
| ``` | ||
| ## Demos | ||
| * http://reactjs.github.io/react-modal/ | ||
| * [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav) | ||
| * [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ) | ||
| * [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx) | ||
| * [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo) | ||
| * [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz) | ||
| * [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG) | ||
| * [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.04%
450378
- Number of package files
- increased by4.88%
43
- Lines of code
- increased by4.88%
3075
Worsened metrics
- Number of lines in readme file
- decreased by-61.77%
125
No dependency changes