From a29494f4dbc1b0182a72a1ef5414973819e8d49f Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Fri, 14 May 2021 11:17:45 -0300 Subject: [PATCH 1/3] [fixed] `appElement` detection... We can't use window.HTMLElement to check the `appElement` when combined in a iframe. window.HTMLElement !== window.HTMLElement (on the iframe) --- src/components/Modal.js | 2 +- src/components/ModalPortal.js | 2 +- src/helpers/safeHTMLElement.js | 18 +++++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/Modal.js b/src/components/Modal.js index cb6bc53d..eb47cb7f 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -57,7 +57,7 @@ class Modal extends Component { }) ]), appElement: PropTypes.oneOfType([ - PropTypes.instanceOf(SafeHTMLElement), + SafeHTMLElement, PropTypes.instanceOf(SafeHTMLCollection), PropTypes.instanceOf(SafeNodeList), PropTypes.arrayOf(PropTypes.instanceOf(SafeHTMLElement)) diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index b7ac6cea..a6639916 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -47,7 +47,7 @@ export default class ModalPortal extends Component { htmlOpenClassName: PropTypes.string, ariaHideApp: PropTypes.bool, appElement: PropTypes.oneOfType([ - PropTypes.instanceOf(SafeHTMLElement), + SafeHTMLElement, PropTypes.instanceOf(SafeHTMLCollection), PropTypes.instanceOf(SafeNodeList), PropTypes.arrayOf(PropTypes.instanceOf(SafeHTMLElement)) diff --git a/src/helpers/safeHTMLElement.js b/src/helpers/safeHTMLElement.js index 8ae67884..1505eb43 100644 --- a/src/helpers/safeHTMLElement.js +++ b/src/helpers/safeHTMLElement.js @@ -2,7 +2,23 @@ import ExecutionEnvironment from "exenv"; const EE = ExecutionEnvironment; -const SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {}; +const NodeTypeElement = 1; + +const IHTMLElement = function(props, propName) { + const element = props[propName]; + + if (!element || element.nodeType !== NodeTypeElement) return; + + const isValid = Boolean(element.setAttribute && element.removeAttribute); + + if (!isValid) { + return new Error( + `Warning: Invalid prop \`${propName}\` supplied to \`Modal\`` + ); + } +}; + +export const SafeHTMLElement = EE.canUseDOM ? IHTMLElement : {}; export const SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {}; From 7517be6d341c6e625eccefdce6b7a88982766aa0 Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Fri, 14 May 2021 11:17:45 -0300 Subject: [PATCH 2/3] [fixed] `appElement` detection... We can't use window.HTMLElement to check the `appElement` when combined in a iframe. window.HTMLElement !== window.HTMLElement (on the iframe) --- src/components/Modal.js | 2 +- src/components/ModalPortal.js | 2 +- src/helpers/safeHTMLElement.js | 18 +++++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/Modal.js b/src/components/Modal.js index c064b213..27a2ebcc 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -59,7 +59,7 @@ class Modal extends Component { }) ]), appElement: PropTypes.oneOfType([ - PropTypes.instanceOf(SafeHTMLElement), + SafeHTMLElement, PropTypes.instanceOf(SafeHTMLCollection), PropTypes.instanceOf(SafeNodeList), PropTypes.arrayOf(PropTypes.instanceOf(SafeHTMLElement)) diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index b7ac6cea..a6639916 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -47,7 +47,7 @@ export default class ModalPortal extends Component { htmlOpenClassName: PropTypes.string, ariaHideApp: PropTypes.bool, appElement: PropTypes.oneOfType([ - PropTypes.instanceOf(SafeHTMLElement), + SafeHTMLElement, PropTypes.instanceOf(SafeHTMLCollection), PropTypes.instanceOf(SafeNodeList), PropTypes.arrayOf(PropTypes.instanceOf(SafeHTMLElement)) diff --git a/src/helpers/safeHTMLElement.js b/src/helpers/safeHTMLElement.js index 8ae67884..1505eb43 100644 --- a/src/helpers/safeHTMLElement.js +++ b/src/helpers/safeHTMLElement.js @@ -2,7 +2,23 @@ import ExecutionEnvironment from "exenv"; const EE = ExecutionEnvironment; -const SafeHTMLElement = EE.canUseDOM ? window.HTMLElement : {}; +const NodeTypeElement = 1; + +const IHTMLElement = function(props, propName) { + const element = props[propName]; + + if (!element || element.nodeType !== NodeTypeElement) return; + + const isValid = Boolean(element.setAttribute && element.removeAttribute); + + if (!isValid) { + return new Error( + `Warning: Invalid prop \`${propName}\` supplied to \`Modal\`` + ); + } +}; + +export const SafeHTMLElement = EE.canUseDOM ? IHTMLElement : {}; export const SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {}; From 07ba54a6a01e8faeba7b134e425f3a997c8e3b73 Mon Sep 17 00:00:00 2001 From: Bruno Dias Date: Tue, 18 May 2021 20:50:45 -0300 Subject: [PATCH 3/3] added precompiled files. --- dist/react-modal.js | 12 +- dist/react-modal.min.js | 12 +- lib/components/Modal.js | 300 ++++++++++++++++++++ lib/components/ModalPortal.js | 426 +++++++++++++++++++++++++++++ lib/helpers/ariaAppHider.js | 138 ++++++++++ lib/helpers/bodyTrap.js | 93 +++++++ lib/helpers/classList.js | 130 +++++++++ lib/helpers/focusManager.js | 116 ++++++++ lib/helpers/portalOpenInstances.js | 78 ++++++ lib/helpers/safeHTMLElement.js | 38 +++ lib/helpers/scopeTab.js | 89 ++++++ lib/helpers/tabbable.js | 60 ++++ lib/index.js | 14 + package.json | 4 +- 14 files changed, 1496 insertions(+), 14 deletions(-) create mode 100644 lib/components/Modal.js create mode 100644 lib/components/ModalPortal.js create mode 100644 lib/helpers/ariaAppHider.js create mode 100644 lib/helpers/bodyTrap.js create mode 100644 lib/helpers/classList.js create mode 100644 lib/helpers/focusManager.js create mode 100644 lib/helpers/portalOpenInstances.js create mode 100644 lib/helpers/safeHTMLElement.js create mode 100644 lib/helpers/scopeTab.js create mode 100644 lib/helpers/tabbable.js create mode 100644 lib/index.js diff --git a/dist/react-modal.js b/dist/react-modal.js index 9016ab79..9a5518bc 100644 --- a/dist/react-modal.js +++ b/dist/react-modal.js @@ -1,4 +1,4 @@ -!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)}(window,(function(e,t){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}([function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=t.SafeNodeList=t.SafeHTMLCollection=void 0;var o,r=n(21);var a=((o=r)&&o.__esModule?o:{default:o}).default,i=a.canUseDOM?window.HTMLElement:{};t.SafeHTMLCollection=a.canUseDOM?window.HTMLCollection:{},t.SafeNodeList=a.canUseDOM?window.NodeList:{},t.canUseDOM=a.canUseDOM;t.default=i},function(t,n){t.exports=e},function(e,t,n){var o=n(4);e.exports=n(13)(o.isElement,!0)},function(e,t,n){"use strict";e.exports=n(12)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return[].slice.call(e.querySelectorAll("*"),0).filter(i)}; +!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)}(window,(function(e,t){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}([function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=t.SafeNodeList=t.SafeHTMLCollection=t.SafeHTMLElement=void 0;var o,r=n(21);var a=((o=r)&&o.__esModule?o:{default:o}).default,l=t.SafeHTMLElement=a.canUseDOM?function(e,t){var n=e[t];if(n&&1===n.nodeType)return Boolean(n.setAttribute&&n.removeAttribute)?void 0:new Error("Warning: Invalid prop `"+t+"` supplied to `Modal`")}:{};t.SafeHTMLCollection=a.canUseDOM?window.HTMLCollection:{},t.SafeNodeList=a.canUseDOM?window.NodeList:{},t.canUseDOM=a.canUseDOM;t.default=l},function(t,n){t.exports=e},function(e,t,n){var o=n(4);e.exports=n(13)(o.isElement,!0)},function(e,t,n){"use strict";e.exports=n(12)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return[].slice.call(e.querySelectorAll("*"),0).filter(l)}; /*! * Adapted from jQuery UI core * @@ -10,7 +10,7 @@ * * http://api.jqueryui.com/category/ui-core/ */ -var o=/input|select|textarea|button|object/;function r(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")||e.scrollWidth<=0&&e.scrollHeight<=0:"none"==n.getPropertyValue("display")}function a(e,t){var n=e.nodeName.toLowerCase();return(o.test(n)&&!e.disabled||"a"===n&&e.href||t)&&function(e){for(var t=e;t&&t!==document.body;){if(r(t))return!1;t=t.parentNode}return!0}(e)}function i(e){var t=e.getAttribute("tabindex");null===t&&(t=void 0);var n=isNaN(t);return(n||t>=0)&&a(e,!n)}e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.assertNodeList=l,t.setElement=function(e){var t=e;if("string"==typeof t&&i.canUseDOM){var n=document.querySelectorAll(t);l(n,t),t=n}return s=t||s},t.validateElement=u,t.hide=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.setAttribute("aria-hidden","true")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.show=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.removeAttribute("aria-hidden")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.documentNotReadyOrSSRTesting=function(){s=null},t.resetForTesting=function(){s=null};var o,r=n(20),a=(o=r)&&o.__esModule?o:{default:o},i=n(1);var s=null;function l(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function u(e){var t=e||s;return t?Array.isArray(t)||t instanceof HTMLCollection||t instanceof NodeList?t:[t]:((0,a.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(" ")),[])}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=new function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.register=function(e){-1===t.openInstances.indexOf(e)?(t.openInstances.push(e),t.emit("register")):console.warn("React-Modal: Cannot register modal instance that's already open")},this.deregister=function(e){var n=t.openInstances.indexOf(e);-1!==n?(t.openInstances.splice(n,1),t.emit("deregister")):console.warn("React-Modal: Unable to deregister "+e+" as it was never registered")},this.subscribe=function(e){t.subscribers.push(e)},this.emit=function(e){t.subscribers.forEach((function(n){return n(e,t.openInstances.slice())}))},this.openInstances=[],this.subscribers=[]};t.default=o,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(9),a=(o=r)&&o.__esModule?o:{default:o};t.default=a.default,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var o=Object.assign||function(e){for(var t=1;t=0)&&a(e,!n)}e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){i&&(i.removeAttribute?i.removeAttribute("aria-hidden"):null!=i.length?i.forEach((function(e){return e.removeAttribute("aria-hidden")})):document.querySelectorAll(i).forEach((function(e){return e.removeAttribute("aria-hidden")})));i=null},t.log=function(){0;var e=i||{};console.log("ariaAppHider ----------"),console.log(e.nodeName,e.className,e.id),console.log("end ariaAppHider ----------")},t.assertNodeList=s,t.setElement=function(e){var t=e;if("string"==typeof t&&l.canUseDOM){var n=document.querySelectorAll(t);s(n,t),t=n}return i=t||i},t.validateElement=u,t.hide=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.setAttribute("aria-hidden","true")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.show=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.removeAttribute("aria-hidden")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.documentNotReadyOrSSRTesting=function(){i=null};var o,r=n(20),a=(o=r)&&o.__esModule?o:{default:o},l=n(1);var i=null;function s(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function u(e){var t=e||i;return t?Array.isArray(t)||t instanceof HTMLCollection||t instanceof NodeList?t:[t]:((0,a.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(" ")),[])}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.log=function(){console.log("portalOpenInstances ----------"),console.log(r.openInstances.length),r.openInstances.forEach((function(e){return console.log(e)})),console.log("end portalOpenInstances ----------")},t.resetState=function(){r=new o};var o=function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.register=function(e){-1===t.openInstances.indexOf(e)?(t.openInstances.push(e),t.emit("register")):console.warn("React-Modal: Cannot register modal instance that's already open")},this.deregister=function(e){var n=t.openInstances.indexOf(e);-1!==n?(t.openInstances.splice(n,1),t.emit("deregister")):console.warn("React-Modal: Unable to deregister "+e+" as it was never registered")},this.subscribe=function(e){t.subscribers.push(e)},this.emit=function(e){t.subscribers.forEach((function(n){return n(e,t.openInstances.slice())}))},this.openInstances=[],this.subscribers=[]},r=new o;t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(9),a=(o=r)&&o.__esModule?o:{default:o};t.default=a.default,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var o=Object.assign||function(e){for(var t=1;t>";return new p("Invalid "+r+" `"+a+"` of type `"+function(e){if(!e.constructor||!e.constructor.name)return"<>";return e.constructor.name}(t[n])+"` supplied to `"+o+"`, expected instance of `"+i+"`.")}return null}))},node:d((function(e,t,n,o,r){return m(e[t])?null:new p("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")})),objectOf:function(e){return d((function(t,n,o,r,i){if("function"!=typeof e)return new p("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var l=t[n],u=h(l);if("object"!==u)return new p("Invalid "+r+" `"+i+"` of type `"+u+"` supplied to `"+o+"`, expected an object.");for(var c in l)if(s(l,c)){var f=e(l,c,o,r,i+"."+c,a);if(f instanceof Error)return f}return null}))},oneOf:function(e){if(!Array.isArray(e))return l(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),u;function t(t,n,o,r,a){for(var i=t[n],s=0;s>",f=f||s,d!==a){if(t){var y=new Error("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");throw y.name="Invariant Violation",y}if("undefined"!=typeof console){var m=u+":"+s;!n[m]&&o<3&&(l("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+u+"`. 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."),n[m]=!0,o++)}}return null==i[s]?r?null===i[s]?new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `null`."):new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `undefined`."):null:e(i,s,u,c,f)}var i=r.bind(null,!1);return i.isRequired=r.bind(null,!0),i}function y(e){return d((function(t,n,o,r,a,i){var s=t[n];return h(s)!==e?new p("Invalid "+r+" `"+a+"` of type `"+v(s)+"` supplied to `"+o+"`, expected `"+e+"`."):null}))}function m(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(m);if(null===t||e(t))return!0;var o=function(e){var t=e&&(n&&e[n]||e["@@iterator"]);if("function"==typeof t)return t}(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!m(r.value))return!1}else for(;!(r=a.next()).done;){var i=r.value;if(i&&!m(i[1]))return!1}return!0;default:return!1}}function h(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function v(e){if(null==e)return""+e;var t=h(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){var t=v(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return p.prototype=Error.prototype,c.checkPropTypes=i,c.resetWarningCache=i.resetWarningCache,c.PropTypes=c,c}},function(e,t,n){"use strict"; + */(function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,o=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,l=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,s=e?Symbol.for("react.context"):60110,u=e?Symbol.for("react.async_mode"):60111,c=e?Symbol.for("react.concurrent_mode"):60111,f=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,d=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,v=e?Symbol.for("react.block"):60121,h=e?Symbol.for("react.fundamental"):60117,b=e?Symbol.for("react.responder"):60118,g=e?Symbol.for("react.scope"):60119;function O(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:var d=e.type;switch(d){case u:case c:case r:case l:case a:case p:return d;default:var v=d&&d.$$typeof;switch(v){case s:case f:case m:case y:case i:return v;default:return t}}case o:return t}}}var w=u,C=c,S=s,E=i,_=n,M=f,j=r,P=m,T=y,x=o,R=l,N=a,A=p,k=!1;function F(e){return O(e)===c}t.AsyncMode=w,t.ConcurrentMode=C,t.ContextConsumer=S,t.ContextProvider=E,t.Element=_,t.ForwardRef=M,t.Fragment=j,t.Lazy=P,t.Memo=T,t.Portal=x,t.Profiler=R,t.StrictMode=N,t.Suspense=A,t.isAsyncMode=function(e){return k||(k=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||O(e)===u},t.isConcurrentMode=F,t.isContextConsumer=function(e){return O(e)===s},t.isContextProvider=function(e){return O(e)===i},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return O(e)===f},t.isFragment=function(e){return O(e)===r},t.isLazy=function(e){return O(e)===m},t.isMemo=function(e){return O(e)===y},t.isPortal=function(e){return O(e)===o},t.isProfiler=function(e){return O(e)===l},t.isStrictMode=function(e){return O(e)===a},t.isSuspense=function(e){return O(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===r||e===c||e===l||e===a||e===p||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===y||e.$$typeof===i||e.$$typeof===s||e.$$typeof===f||e.$$typeof===h||e.$$typeof===b||e.$$typeof===g||e.$$typeof===v)},t.typeOf=O})()},function(e,t,n){"use strict";var o=n(4),r=n(14),a=n(0),l=n(15),i=Function.call.bind(Object.prototype.hasOwnProperty),s=function(){};function u(){return null}s=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}},e.exports=function(e,t){var n="function"==typeof Symbol&&Symbol.iterator;var c={array:y("array"),bool:y("boolean"),func:y("function"),number:y("number"),object:y("object"),string:y("string"),symbol:y("symbol"),any:d(u),arrayOf:function(e){return d((function(t,n,o,r,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var i=t[n];if(!Array.isArray(i))return new p("Invalid "+r+" `"+l+"` of type `"+v(i)+"` supplied to `"+o+"`, expected an array.");for(var s=0;s>";return new p("Invalid "+r+" `"+a+"` of type `"+function(e){if(!e.constructor||!e.constructor.name)return"<>";return e.constructor.name}(t[n])+"` supplied to `"+o+"`, expected instance of `"+l+"`.")}return null}))},node:d((function(e,t,n,o,r){return m(e[t])?null:new p("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")})),objectOf:function(e){return d((function(t,n,o,r,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],u=v(s);if("object"!==u)return new p("Invalid "+r+" `"+l+"` of type `"+u+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(i(s,c)){var f=e(s,c,o,r,l+"."+c,a);if(f instanceof Error)return f}return null}))},oneOf:function(e){if(!Array.isArray(e))return s(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),u;function t(t,n,o,r,a){for(var l=t[n],i=0;i>",f=f||i,d!==a){if(t){var y=new Error("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");throw y.name="Invariant Violation",y}if("undefined"!=typeof console){var m=u+":"+i;!n[m]&&o<3&&(s("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+u+"`. 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."),n[m]=!0,o++)}}return null==l[i]?r?null===l[i]?new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `null`."):new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `undefined`."):null:e(l,i,u,c,f)}var l=r.bind(null,!1);return l.isRequired=r.bind(null,!0),l}function y(e){return d((function(t,n,o,r,a,l){var i=t[n];return v(i)!==e?new p("Invalid "+r+" `"+a+"` of type `"+h(i)+"` supplied to `"+o+"`, expected `"+e+"`."):null}))}function m(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(m);if(null===t||e(t))return!0;var o=function(e){var t=e&&(n&&e[n]||e["@@iterator"]);if("function"==typeof t)return t}(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!m(r.value))return!1}else for(;!(r=a.next()).done;){var l=r.value;if(l&&!m(l[1]))return!1}return!0;default:return!1}}function v(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function h(e){if(null==e)return""+e;var t=v(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){var t=h(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return p.prototype=Error.prototype,c.checkPropTypes=l,c.resetWarningCache=l.resetWarningCache,c.PropTypes=c,c}},function(e,t,n){"use strict"; /* object-assign (c) Sindre Sorhus @license MIT -*/var o=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,s,l=i(e),u=1;u0&&0===(b-=1)&&c.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(l.returnFocus(n.props.preventScroll),l.teardownScopedFocus()):l.popWithoutFocus()),n.props.onAfterClose&&n.props.onAfterClose(),y.default.deregister(n)},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(l.setupScopedFocus(n.node),l.markForFocusLater()),n.setState({isOpen:!0},(function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen({overlayEl:n.overlay,contentEl:n.content})})))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus({preventScroll:!0})},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){9===e.keyCode&&(0,u.default)(n.content,e),n.props.shouldCloseOnEsc&&27===e.keyCode&&(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.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault()},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!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":r(t))?t:{base:v[e],afterOpen:v[e]+"--after-open",beforeClose:v[e]+"--before-close"},a=o.base;return n.state.afterOpen&&(a=a+" "+o.afterOpen),n.state.beforeClose&&(a=a+" "+o.beforeClose),"string"==typeof t&&t?a+" "+t:a},n.attributesFromObject=function(e,t){return Object.keys(t).reduce((function(n,o){return n[e+"-"+o]=t[o],n}),{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return function(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)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.open()}},{key:"componentDidUpdate",value:function(e,t){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.open():!this.props.isOpen&&e.isOpen&&this.close(),this.props.shouldFocusAfterRender&&this.state.isOpen&&!t.isOpen&&this.focusContent()}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&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;r&&f.add(document.body,r),o&&f.add(document.getElementsByTagName("html")[0],o),n&&(b+=1,c.hide(t)),y.default.register(this)}},{key:"render",value:function(){var e=this.props,t=e.id,n=e.className,r=e.overlayClassName,a=e.defaultStyles,i=e.children,s=n?{}:a.content,l=r?{}:a.overlay;if(this.shouldBeClosed())return null;var u={ref:this.setOverlayRef,className:this.buildClassName("overlay",r),style:o({},l,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown},c=o({id:t,ref:this.setContentRef,style:o({},s,this.props.style.content),className:this.buildClassName("content",n),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.attributesFromObject("aria",o({modal:!0},this.props.aria)),this.attributesFromObject("data",this.props.data||{}),{"data-testid":this.props.testId}),f=this.props.contentElement(c,i);return this.props.overlayElement(u,f)}}]),t}(i.Component);O.defaultProps={style:{overlay:{},content:{}},defaultStyles:{}},O.propTypes={isOpen:s.default.bool.isRequired,defaultStyles:s.default.shape({content:s.default.object,overlay:s.default.object}),style:s.default.shape({content:s.default.object,overlay:s.default.object}),className:s.default.oneOfType([s.default.string,s.default.object]),overlayClassName:s.default.oneOfType([s.default.string,s.default.object]),bodyOpenClassName:s.default.string,htmlOpenClassName:s.default.string,ariaHideApp:s.default.bool,appElement:s.default.oneOfType([s.default.instanceOf(d.default),s.default.instanceOf(p.SafeHTMLCollection),s.default.instanceOf(p.SafeNodeList),s.default.arrayOf(s.default.instanceOf(d.default))]),onAfterOpen:s.default.func,onAfterClose:s.default.func,onRequestClose:s.default.func,closeTimeoutMS:s.default.number,shouldFocusAfterRender:s.default.bool,shouldCloseOnOverlayClick:s.default.bool,shouldReturnFocusAfterClose:s.default.bool,preventScroll:s.default.bool,role:s.default.string,contentLabel:s.default.string,aria:s.default.object,data:s.default.object,children:s.default.node,shouldCloseOnEsc:s.default.bool,overlayRef:s.default.func,contentRef:s.default.func,id:s.default.string,overlayElement:s.default.func,contentElement:s.default.func,testId:s.default.string},t.default=O,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=u,t.handleFocus=c,t.markForFocusLater=function(){i.push(document.activeElement)},t.returnFocus=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=null;try{return void(0!==i.length&&(t=i.pop()).focus({preventScroll:e}))}catch(e){console.warn(["You tried to return focus to",t,"but it is not in the DOM anymore"].join(" "))}},t.popWithoutFocus=function(){i.length>0&&i.pop()},t.setupScopedFocus=function(e){s=e,window.addEventListener?(window.addEventListener("blur",u,!1),document.addEventListener("focus",c,!0)):(window.attachEvent("onBlur",u),document.attachEvent("onFocus",c))},t.teardownScopedFocus=function(){s=null,window.addEventListener?(window.removeEventListener("blur",u),document.removeEventListener("focus",c)):(window.detachEvent("onBlur",u),document.detachEvent("onFocus",c))};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};var i=[],s=null,l=!1;function u(){l=!0}function c(){if(l){if(l=!1,!s)return;setTimeout((function(){s.contains(document.activeElement)||((0,a.default)(s)[0]||s).focus()}),0)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=void 0,r=t.shiftKey,i=n[0],s=n[n.length-1];if(e===document.activeElement){if(!r)return;o=s}s!==document.activeElement||r||(o=i);i===document.activeElement&&r&&(o=s);if(o)return t.preventDefault(),void o.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))return;var u=n.indexOf(document.activeElement);u>-1&&(u+=r?-1:1);if(void 0===(o=n[u]))return t.preventDefault(),void(o=r?s:i).focus();t.preventDefault(),o.focus()};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};e.exports=t.default},function(e,t,n){"use strict";var o=function(){},r=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var o=1;o2?o-2:0);for(var a=2;a0&&0===(b-=1)&&c.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(s.returnFocus(n.props.preventScroll),s.teardownScopedFocus()):s.popWithoutFocus()),n.props.onAfterClose&&n.props.onAfterClose(),y.default.deregister(n)},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(s.setupScopedFocus(n.node),s.markForFocusLater()),n.setState({isOpen:!0},(function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen({overlayEl:n.overlay,contentEl:n.content})})))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus({preventScroll:!0})},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){9===e.keyCode&&(0,u.default)(n.content,e),n.props.shouldCloseOnEsc&&27===e.keyCode&&(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.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault()},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!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":r(t))?t:{base:h[e],afterOpen:h[e]+"--after-open",beforeClose:h[e]+"--before-close"},a=o.base;return n.state.afterOpen&&(a=a+" "+o.afterOpen),n.state.beforeClose&&(a=a+" "+o.beforeClose),"string"==typeof t&&t?a+" "+t:a},n.attributesFromObject=function(e,t){return Object.keys(t).reduce((function(n,o){return n[e+"-"+o]=t[o],n}),{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return function(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)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.open()}},{key:"componentDidUpdate",value:function(e,t){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.open():!this.props.isOpen&&e.isOpen&&this.close(),this.props.shouldFocusAfterRender&&this.state.isOpen&&!t.isOpen&&this.focusContent()}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&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;r&&f.add(document.body,r),o&&f.add(document.getElementsByTagName("html")[0],o),n&&(b+=1,c.hide(t)),y.default.register(this)}},{key:"render",value:function(){var e=this.props,t=e.id,n=e.className,r=e.overlayClassName,a=e.defaultStyles,l=e.children,i=n?{}:a.content,s=r?{}:a.overlay;if(this.shouldBeClosed())return null;var u={ref:this.setOverlayRef,className:this.buildClassName("overlay",r),style:o({},s,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown},c=o({id:t,ref:this.setContentRef,style:o({},i,this.props.style.content),className:this.buildClassName("content",n),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.attributesFromObject("aria",o({modal:!0},this.props.aria)),this.attributesFromObject("data",this.props.data||{}),{"data-testid":this.props.testId}),f=this.props.contentElement(c,l);return this.props.overlayElement(u,f)}}]),t}(l.Component);g.defaultProps={style:{overlay:{},content:{}},defaultStyles:{}},g.propTypes={isOpen:i.default.bool.isRequired,defaultStyles:i.default.shape({content:i.default.object,overlay:i.default.object}),style:i.default.shape({content:i.default.object,overlay:i.default.object}),className:i.default.oneOfType([i.default.string,i.default.object]),overlayClassName:i.default.oneOfType([i.default.string,i.default.object]),bodyOpenClassName:i.default.string,htmlOpenClassName:i.default.string,ariaHideApp:i.default.bool,appElement:i.default.oneOfType([d.default,i.default.instanceOf(p.SafeHTMLCollection),i.default.instanceOf(p.SafeNodeList),i.default.arrayOf(i.default.instanceOf(d.default))]),onAfterOpen:i.default.func,onAfterClose:i.default.func,onRequestClose:i.default.func,closeTimeoutMS:i.default.number,shouldFocusAfterRender:i.default.bool,shouldCloseOnOverlayClick:i.default.bool,shouldReturnFocusAfterClose:i.default.bool,preventScroll:i.default.bool,role:i.default.string,contentLabel:i.default.string,aria:i.default.object,data:i.default.object,children:i.default.node,shouldCloseOnEsc:i.default.bool,overlayRef:i.default.func,contentRef:i.default.func,id:i.default.string,overlayElement:i.default.func,contentElement:i.default.func,testId:i.default.string},t.default=g,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){l=[]},t.log=function(){0;console.log("focusManager ----------"),l.forEach((function(e){var t=e||{};console.log(t.nodeName,t.className,t.id)})),console.log("end focusManager ----------")},t.handleBlur=u,t.handleFocus=c,t.markForFocusLater=function(){l.push(document.activeElement)},t.returnFocus=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=null;try{return void(0!==l.length&&(t=l.pop()).focus({preventScroll:e}))}catch(e){console.warn(["You tried to return focus to",t,"but it is not in the DOM anymore"].join(" "))}},t.popWithoutFocus=function(){l.length>0&&l.pop()},t.setupScopedFocus=function(e){i=e,window.addEventListener?(window.addEventListener("blur",u,!1),document.addEventListener("focus",c,!0)):(window.attachEvent("onBlur",u),document.attachEvent("onFocus",c))},t.teardownScopedFocus=function(){i=null,window.addEventListener?(window.removeEventListener("blur",u),document.removeEventListener("focus",c)):(window.detachEvent("onBlur",u),document.detachEvent("onFocus",c))};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};var l=[],i=null,s=!1;function u(){s=!0}function c(){if(s){if(s=!1,!i)return;setTimeout((function(){i.contains(document.activeElement)||((0,a.default)(i)[0]||i).focus()}),0)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=void 0,r=t.shiftKey,l=n[0],i=n[n.length-1];if(e===document.activeElement){if(!r)return;o=i}i!==document.activeElement||r||(o=l);l===document.activeElement&&r&&(o=i);if(o)return t.preventDefault(),void o.focus();var s=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null==s||"Chrome"==s[1]||null!=/\biPod\b|\biPad\b/g.exec(navigator.userAgent))return;var u=n.indexOf(document.activeElement);u>-1&&(u+=r?-1:1);if(void 0===(o=n[u]))return t.preventDefault(),void(o=r?i:l).focus();t.preventDefault(),o.focus()};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};e.exports=t.default},function(e,t,n){"use strict";var o=function(){},r=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var o=1;o2?o-2:0);for(var a=2;a 0 expected")}a.default.subscribe((function(e,t){i&&s||((i=document.createElement("div")).setAttribute("data-react-modal-body-trap",""),i.style.position="absolute",i.style.opacity="0",i.setAttribute("tabindex","0"),i.addEventListener("focus",u),(s=i.cloneNode()).addEventListener("focus",u)),(l=t).length>0?(document.body.firstChild!==i&&document.body.insertBefore(i,document.body.firstChild),document.body.lastChild!==s&&document.body.appendChild(s)):(i.parentElement&&i.parentElement.removeChild(i),s.parentElement&&s.parentElement.removeChild(s))}))},function(e,t,n){"use strict";function o(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!=e&&this.setState(e)}function r(e){this.setState(function(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!=n?n:null}.bind(this))}function a(e,t){try{var n=this.props,o=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function i(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,i=null,s=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?i="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(i="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?s="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(s="UNSAFE_componentWillUpdate"),null!==n||null!==i||null!==s){var l=e.displayName||e.name,u="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+l+" uses "+u+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==i?"\n "+i:"")+(null!==s?"\n "+s:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=o,t.componentWillReceiveProps=r),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=a;var c=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;c.call(this,e,t,o)}}return e}n.r(t),n.d(t,"polyfill",(function(){return i})),o.__suppressDeprecationWarning=!0,r.__suppressDeprecationWarning=!0,a.__suppressDeprecationWarning=!0}])})); \ No newline at end of file +*/!function(){"use strict";var r=!("undefined"==typeof window||!window.document||!window.document.createElement),a={canUseDOM:r,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:r&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:r&&!!window.screen};void 0===(o=function(){return a}.call(t,n,t,e))||(e.exports=o)}()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){var e=document.getElementsByTagName("html")[0];for(var t in o)a(e,o[t]);var n=document.body;for(var l in r)a(n,r[l]);o={},r={}},t.log=function(){0;var e=document.getElementsByTagName("html")[0].className,t="Show tracked classes:\n\n";for(var n in t+=" ("+e+"):\n",o)t+=" "+n+" "+o[n]+"\n";for(var a in e=document.body.className,t+="\n\ndoc.body ("+e+"):\n",r)t+=" "+a+" "+r[a]+"\n";t+="\n",console.log(t)};var o={},r={};function a(e,t){e.classList.remove(t)}t.add=function(e,t){return n=e.classList,a="html"==e.nodeName.toLowerCase()?o:r,void t.split(" ").forEach((function(e){!function(e,t){e[t]||(e[t]=0),e[t]+=1}(a,e),n.add(e)}));var n,a},t.remove=function(e,t){return n=e.classList,a="html"==e.nodeName.toLowerCase()?o:r,void t.split(" ").forEach((function(e){!function(e,t){e[t]&&(e[t]-=1)}(a,e),0===a[e]&&n.remove(e)}));var n,a}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){for(var e=[l,i],t=0;t 0 expected")}a.default.subscribe((function(e,t){l||i||((l=document.createElement("div")).setAttribute("data-react-modal-body-trap",""),l.style.position="absolute",l.style.opacity="0",l.setAttribute("tabindex","0"),l.addEventListener("focus",u),(i=l.cloneNode()).addEventListener("focus",u)),(s=t).length>0?(document.body.firstChild!==l&&document.body.insertBefore(l,document.body.firstChild),document.body.lastChild!==i&&document.body.appendChild(i)):(l.parentElement&&l.parentElement.removeChild(l),i.parentElement&&i.parentElement.removeChild(i))}))},function(e,t,n){"use strict";function o(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!=e&&this.setState(e)}function r(e){this.setState(function(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!=n?n:null}.bind(this))}function a(e,t){try{var n=this.props,o=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function l(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,l=null,i=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?l="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(l="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?i="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(i="UNSAFE_componentWillUpdate"),null!==n||null!==l||null!==i){var s=e.displayName||e.name,u="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+s+" uses "+u+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==l?"\n "+l:"")+(null!==i?"\n "+i:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=o,t.componentWillReceiveProps=r),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=a;var c=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;c.call(this,e,t,o)}}return e}n.r(t),n.d(t,"polyfill",(function(){return l})),o.__suppressDeprecationWarning=!0,r.__suppressDeprecationWarning=!0,a.__suppressDeprecationWarning=!0}])})); \ No newline at end of file diff --git a/dist/react-modal.min.js b/dist/react-modal.min.js index 9016ab79..9a5518bc 100644 --- a/dist/react-modal.min.js +++ b/dist/react-modal.min.js @@ -1,4 +1,4 @@ -!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)}(window,(function(e,t){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}([function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=t.SafeNodeList=t.SafeHTMLCollection=void 0;var o,r=n(21);var a=((o=r)&&o.__esModule?o:{default:o}).default,i=a.canUseDOM?window.HTMLElement:{};t.SafeHTMLCollection=a.canUseDOM?window.HTMLCollection:{},t.SafeNodeList=a.canUseDOM?window.NodeList:{},t.canUseDOM=a.canUseDOM;t.default=i},function(t,n){t.exports=e},function(e,t,n){var o=n(4);e.exports=n(13)(o.isElement,!0)},function(e,t,n){"use strict";e.exports=n(12)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return[].slice.call(e.querySelectorAll("*"),0).filter(i)}; +!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)}(window,(function(e,t){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}([function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.canUseDOM=t.SafeNodeList=t.SafeHTMLCollection=t.SafeHTMLElement=void 0;var o,r=n(21);var a=((o=r)&&o.__esModule?o:{default:o}).default,l=t.SafeHTMLElement=a.canUseDOM?function(e,t){var n=e[t];if(n&&1===n.nodeType)return Boolean(n.setAttribute&&n.removeAttribute)?void 0:new Error("Warning: Invalid prop `"+t+"` supplied to `Modal`")}:{};t.SafeHTMLCollection=a.canUseDOM?window.HTMLCollection:{},t.SafeNodeList=a.canUseDOM?window.NodeList:{},t.canUseDOM=a.canUseDOM;t.default=l},function(t,n){t.exports=e},function(e,t,n){var o=n(4);e.exports=n(13)(o.isElement,!0)},function(e,t,n){"use strict";e.exports=n(12)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return[].slice.call(e.querySelectorAll("*"),0).filter(l)}; /*! * Adapted from jQuery UI core * @@ -10,7 +10,7 @@ * * http://api.jqueryui.com/category/ui-core/ */ -var o=/input|select|textarea|button|object/;function r(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")||e.scrollWidth<=0&&e.scrollHeight<=0:"none"==n.getPropertyValue("display")}function a(e,t){var n=e.nodeName.toLowerCase();return(o.test(n)&&!e.disabled||"a"===n&&e.href||t)&&function(e){for(var t=e;t&&t!==document.body;){if(r(t))return!1;t=t.parentNode}return!0}(e)}function i(e){var t=e.getAttribute("tabindex");null===t&&(t=void 0);var n=isNaN(t);return(n||t>=0)&&a(e,!n)}e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.assertNodeList=l,t.setElement=function(e){var t=e;if("string"==typeof t&&i.canUseDOM){var n=document.querySelectorAll(t);l(n,t),t=n}return s=t||s},t.validateElement=u,t.hide=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.setAttribute("aria-hidden","true")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.show=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.removeAttribute("aria-hidden")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.documentNotReadyOrSSRTesting=function(){s=null},t.resetForTesting=function(){s=null};var o,r=n(20),a=(o=r)&&o.__esModule?o:{default:o},i=n(1);var s=null;function l(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function u(e){var t=e||s;return t?Array.isArray(t)||t instanceof HTMLCollection||t instanceof NodeList?t:[t]:((0,a.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(" ")),[])}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=new function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.register=function(e){-1===t.openInstances.indexOf(e)?(t.openInstances.push(e),t.emit("register")):console.warn("React-Modal: Cannot register modal instance that's already open")},this.deregister=function(e){var n=t.openInstances.indexOf(e);-1!==n?(t.openInstances.splice(n,1),t.emit("deregister")):console.warn("React-Modal: Unable to deregister "+e+" as it was never registered")},this.subscribe=function(e){t.subscribers.push(e)},this.emit=function(e){t.subscribers.forEach((function(n){return n(e,t.openInstances.slice())}))},this.openInstances=[],this.subscribers=[]};t.default=o,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(9),a=(o=r)&&o.__esModule?o:{default:o};t.default=a.default,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var o=Object.assign||function(e){for(var t=1;t=0)&&a(e,!n)}e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){i&&(i.removeAttribute?i.removeAttribute("aria-hidden"):null!=i.length?i.forEach((function(e){return e.removeAttribute("aria-hidden")})):document.querySelectorAll(i).forEach((function(e){return e.removeAttribute("aria-hidden")})));i=null},t.log=function(){0;var e=i||{};console.log("ariaAppHider ----------"),console.log(e.nodeName,e.className,e.id),console.log("end ariaAppHider ----------")},t.assertNodeList=s,t.setElement=function(e){var t=e;if("string"==typeof t&&l.canUseDOM){var n=document.querySelectorAll(t);s(n,t),t=n}return i=t||i},t.validateElement=u,t.hide=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.setAttribute("aria-hidden","true")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.show=function(e){var t=!0,n=!1,o=void 0;try{for(var r,a=u(e)[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){r.value.removeAttribute("aria-hidden")}}catch(e){n=!0,o=e}finally{try{!t&&a.return&&a.return()}finally{if(n)throw o}}},t.documentNotReadyOrSSRTesting=function(){i=null};var o,r=n(20),a=(o=r)&&o.__esModule?o:{default:o},l=n(1);var i=null;function s(e,t){if(!e||!e.length)throw new Error("react-modal: No elements were found for selector "+t+".")}function u(e){var t=e||i;return t?Array.isArray(t)||t instanceof HTMLCollection||t instanceof NodeList?t:[t]:((0,a.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(" ")),[])}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.log=function(){console.log("portalOpenInstances ----------"),console.log(r.openInstances.length),r.openInstances.forEach((function(e){return console.log(e)})),console.log("end portalOpenInstances ----------")},t.resetState=function(){r=new o};var o=function e(){var t=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.register=function(e){-1===t.openInstances.indexOf(e)?(t.openInstances.push(e),t.emit("register")):console.warn("React-Modal: Cannot register modal instance that's already open")},this.deregister=function(e){var n=t.openInstances.indexOf(e);-1!==n?(t.openInstances.splice(n,1),t.emit("deregister")):console.warn("React-Modal: Unable to deregister "+e+" as it was never registered")},this.subscribe=function(e){t.subscribers.push(e)},this.emit=function(e){t.subscribers.forEach((function(n){return n(e,t.openInstances.slice())}))},this.openInstances=[],this.subscribers=[]},r=new o;t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(9),a=(o=r)&&o.__esModule?o:{default:o};t.default=a.default,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.bodyOpenClassName=t.portalClassName=void 0;var o=Object.assign||function(e){for(var t=1;t>";return new p("Invalid "+r+" `"+a+"` of type `"+function(e){if(!e.constructor||!e.constructor.name)return"<>";return e.constructor.name}(t[n])+"` supplied to `"+o+"`, expected instance of `"+i+"`.")}return null}))},node:d((function(e,t,n,o,r){return m(e[t])?null:new p("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")})),objectOf:function(e){return d((function(t,n,o,r,i){if("function"!=typeof e)return new p("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var l=t[n],u=h(l);if("object"!==u)return new p("Invalid "+r+" `"+i+"` of type `"+u+"` supplied to `"+o+"`, expected an object.");for(var c in l)if(s(l,c)){var f=e(l,c,o,r,i+"."+c,a);if(f instanceof Error)return f}return null}))},oneOf:function(e){if(!Array.isArray(e))return l(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),u;function t(t,n,o,r,a){for(var i=t[n],s=0;s>",f=f||s,d!==a){if(t){var y=new Error("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");throw y.name="Invariant Violation",y}if("undefined"!=typeof console){var m=u+":"+s;!n[m]&&o<3&&(l("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+u+"`. 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."),n[m]=!0,o++)}}return null==i[s]?r?null===i[s]?new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `null`."):new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `undefined`."):null:e(i,s,u,c,f)}var i=r.bind(null,!1);return i.isRequired=r.bind(null,!0),i}function y(e){return d((function(t,n,o,r,a,i){var s=t[n];return h(s)!==e?new p("Invalid "+r+" `"+a+"` of type `"+v(s)+"` supplied to `"+o+"`, expected `"+e+"`."):null}))}function m(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(m);if(null===t||e(t))return!0;var o=function(e){var t=e&&(n&&e[n]||e["@@iterator"]);if("function"==typeof t)return t}(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!m(r.value))return!1}else for(;!(r=a.next()).done;){var i=r.value;if(i&&!m(i[1]))return!1}return!0;default:return!1}}function h(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function v(e){if(null==e)return""+e;var t=h(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){var t=v(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return p.prototype=Error.prototype,c.checkPropTypes=i,c.resetWarningCache=i.resetWarningCache,c.PropTypes=c,c}},function(e,t,n){"use strict"; + */(function(){var e="function"==typeof Symbol&&Symbol.for,n=e?Symbol.for("react.element"):60103,o=e?Symbol.for("react.portal"):60106,r=e?Symbol.for("react.fragment"):60107,a=e?Symbol.for("react.strict_mode"):60108,l=e?Symbol.for("react.profiler"):60114,i=e?Symbol.for("react.provider"):60109,s=e?Symbol.for("react.context"):60110,u=e?Symbol.for("react.async_mode"):60111,c=e?Symbol.for("react.concurrent_mode"):60111,f=e?Symbol.for("react.forward_ref"):60112,p=e?Symbol.for("react.suspense"):60113,d=e?Symbol.for("react.suspense_list"):60120,y=e?Symbol.for("react.memo"):60115,m=e?Symbol.for("react.lazy"):60116,v=e?Symbol.for("react.block"):60121,h=e?Symbol.for("react.fundamental"):60117,b=e?Symbol.for("react.responder"):60118,g=e?Symbol.for("react.scope"):60119;function O(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:var d=e.type;switch(d){case u:case c:case r:case l:case a:case p:return d;default:var v=d&&d.$$typeof;switch(v){case s:case f:case m:case y:case i:return v;default:return t}}case o:return t}}}var w=u,C=c,S=s,E=i,_=n,M=f,j=r,P=m,T=y,x=o,R=l,N=a,A=p,k=!1;function F(e){return O(e)===c}t.AsyncMode=w,t.ConcurrentMode=C,t.ContextConsumer=S,t.ContextProvider=E,t.Element=_,t.ForwardRef=M,t.Fragment=j,t.Lazy=P,t.Memo=T,t.Portal=x,t.Profiler=R,t.StrictMode=N,t.Suspense=A,t.isAsyncMode=function(e){return k||(k=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),F(e)||O(e)===u},t.isConcurrentMode=F,t.isContextConsumer=function(e){return O(e)===s},t.isContextProvider=function(e){return O(e)===i},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},t.isForwardRef=function(e){return O(e)===f},t.isFragment=function(e){return O(e)===r},t.isLazy=function(e){return O(e)===m},t.isMemo=function(e){return O(e)===y},t.isPortal=function(e){return O(e)===o},t.isProfiler=function(e){return O(e)===l},t.isStrictMode=function(e){return O(e)===a},t.isSuspense=function(e){return O(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===r||e===c||e===l||e===a||e===p||e===d||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===y||e.$$typeof===i||e.$$typeof===s||e.$$typeof===f||e.$$typeof===h||e.$$typeof===b||e.$$typeof===g||e.$$typeof===v)},t.typeOf=O})()},function(e,t,n){"use strict";var o=n(4),r=n(14),a=n(0),l=n(15),i=Function.call.bind(Object.prototype.hasOwnProperty),s=function(){};function u(){return null}s=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}},e.exports=function(e,t){var n="function"==typeof Symbol&&Symbol.iterator;var c={array:y("array"),bool:y("boolean"),func:y("function"),number:y("number"),object:y("object"),string:y("string"),symbol:y("symbol"),any:d(u),arrayOf:function(e){return d((function(t,n,o,r,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var i=t[n];if(!Array.isArray(i))return new p("Invalid "+r+" `"+l+"` of type `"+v(i)+"` supplied to `"+o+"`, expected an array.");for(var s=0;s>";return new p("Invalid "+r+" `"+a+"` of type `"+function(e){if(!e.constructor||!e.constructor.name)return"<>";return e.constructor.name}(t[n])+"` supplied to `"+o+"`, expected instance of `"+l+"`.")}return null}))},node:d((function(e,t,n,o,r){return m(e[t])?null:new p("Invalid "+o+" `"+r+"` supplied to `"+n+"`, expected a ReactNode.")})),objectOf:function(e){return d((function(t,n,o,r,l){if("function"!=typeof e)return new p("Property `"+l+"` of component `"+o+"` has invalid PropType notation inside objectOf.");var s=t[n],u=v(s);if("object"!==u)return new p("Invalid "+r+" `"+l+"` of type `"+u+"` supplied to `"+o+"`, expected an object.");for(var c in s)if(i(s,c)){var f=e(s,c,o,r,l+"."+c,a);if(f instanceof Error)return f}return null}))},oneOf:function(e){if(!Array.isArray(e))return s(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),u;function t(t,n,o,r,a){for(var l=t[n],i=0;i>",f=f||i,d!==a){if(t){var y=new Error("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");throw y.name="Invariant Violation",y}if("undefined"!=typeof console){var m=u+":"+i;!n[m]&&o<3&&(s("You are manually calling a React.PropTypes validation function for the `"+f+"` prop on `"+u+"`. 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."),n[m]=!0,o++)}}return null==l[i]?r?null===l[i]?new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `null`."):new p("The "+c+" `"+f+"` is marked as required in `"+u+"`, but its value is `undefined`."):null:e(l,i,u,c,f)}var l=r.bind(null,!1);return l.isRequired=r.bind(null,!0),l}function y(e){return d((function(t,n,o,r,a,l){var i=t[n];return v(i)!==e?new p("Invalid "+r+" `"+a+"` of type `"+h(i)+"` supplied to `"+o+"`, expected `"+e+"`."):null}))}function m(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(m);if(null===t||e(t))return!0;var o=function(e){var t=e&&(n&&e[n]||e["@@iterator"]);if("function"==typeof t)return t}(t);if(!o)return!1;var r,a=o.call(t);if(o!==t.entries){for(;!(r=a.next()).done;)if(!m(r.value))return!1}else for(;!(r=a.next()).done;){var l=r.value;if(l&&!m(l[1]))return!1}return!0;default:return!1}}function v(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":function(e,t){return"symbol"===e||!!t&&("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}(t,e)?"symbol":t}function h(e){if(null==e)return""+e;var t=v(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function b(e){var t=h(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}return p.prototype=Error.prototype,c.checkPropTypes=l,c.resetWarningCache=l.resetWarningCache,c.PropTypes=c,c}},function(e,t,n){"use strict"; /* object-assign (c) Sindre Sorhus @license MIT -*/var o=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;function i(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,s,l=i(e),u=1;u0&&0===(b-=1)&&c.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(l.returnFocus(n.props.preventScroll),l.teardownScopedFocus()):l.popWithoutFocus()),n.props.onAfterClose&&n.props.onAfterClose(),y.default.deregister(n)},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(l.setupScopedFocus(n.node),l.markForFocusLater()),n.setState({isOpen:!0},(function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen({overlayEl:n.overlay,contentEl:n.content})})))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus({preventScroll:!0})},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){9===e.keyCode&&(0,u.default)(n.content,e),n.props.shouldCloseOnEsc&&27===e.keyCode&&(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.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault()},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!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":r(t))?t:{base:v[e],afterOpen:v[e]+"--after-open",beforeClose:v[e]+"--before-close"},a=o.base;return n.state.afterOpen&&(a=a+" "+o.afterOpen),n.state.beforeClose&&(a=a+" "+o.beforeClose),"string"==typeof t&&t?a+" "+t:a},n.attributesFromObject=function(e,t){return Object.keys(t).reduce((function(n,o){return n[e+"-"+o]=t[o],n}),{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return function(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)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.open()}},{key:"componentDidUpdate",value:function(e,t){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.open():!this.props.isOpen&&e.isOpen&&this.close(),this.props.shouldFocusAfterRender&&this.state.isOpen&&!t.isOpen&&this.focusContent()}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&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;r&&f.add(document.body,r),o&&f.add(document.getElementsByTagName("html")[0],o),n&&(b+=1,c.hide(t)),y.default.register(this)}},{key:"render",value:function(){var e=this.props,t=e.id,n=e.className,r=e.overlayClassName,a=e.defaultStyles,i=e.children,s=n?{}:a.content,l=r?{}:a.overlay;if(this.shouldBeClosed())return null;var u={ref:this.setOverlayRef,className:this.buildClassName("overlay",r),style:o({},l,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown},c=o({id:t,ref:this.setContentRef,style:o({},s,this.props.style.content),className:this.buildClassName("content",n),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.attributesFromObject("aria",o({modal:!0},this.props.aria)),this.attributesFromObject("data",this.props.data||{}),{"data-testid":this.props.testId}),f=this.props.contentElement(c,i);return this.props.overlayElement(u,f)}}]),t}(i.Component);O.defaultProps={style:{overlay:{},content:{}},defaultStyles:{}},O.propTypes={isOpen:s.default.bool.isRequired,defaultStyles:s.default.shape({content:s.default.object,overlay:s.default.object}),style:s.default.shape({content:s.default.object,overlay:s.default.object}),className:s.default.oneOfType([s.default.string,s.default.object]),overlayClassName:s.default.oneOfType([s.default.string,s.default.object]),bodyOpenClassName:s.default.string,htmlOpenClassName:s.default.string,ariaHideApp:s.default.bool,appElement:s.default.oneOfType([s.default.instanceOf(d.default),s.default.instanceOf(p.SafeHTMLCollection),s.default.instanceOf(p.SafeNodeList),s.default.arrayOf(s.default.instanceOf(d.default))]),onAfterOpen:s.default.func,onAfterClose:s.default.func,onRequestClose:s.default.func,closeTimeoutMS:s.default.number,shouldFocusAfterRender:s.default.bool,shouldCloseOnOverlayClick:s.default.bool,shouldReturnFocusAfterClose:s.default.bool,preventScroll:s.default.bool,role:s.default.string,contentLabel:s.default.string,aria:s.default.object,data:s.default.object,children:s.default.node,shouldCloseOnEsc:s.default.bool,overlayRef:s.default.func,contentRef:s.default.func,id:s.default.string,overlayElement:s.default.func,contentElement:s.default.func,testId:s.default.string},t.default=O,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleBlur=u,t.handleFocus=c,t.markForFocusLater=function(){i.push(document.activeElement)},t.returnFocus=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=null;try{return void(0!==i.length&&(t=i.pop()).focus({preventScroll:e}))}catch(e){console.warn(["You tried to return focus to",t,"but it is not in the DOM anymore"].join(" "))}},t.popWithoutFocus=function(){i.length>0&&i.pop()},t.setupScopedFocus=function(e){s=e,window.addEventListener?(window.addEventListener("blur",u,!1),document.addEventListener("focus",c,!0)):(window.attachEvent("onBlur",u),document.attachEvent("onFocus",c))},t.teardownScopedFocus=function(){s=null,window.addEventListener?(window.removeEventListener("blur",u),document.removeEventListener("focus",c)):(window.detachEvent("onBlur",u),document.detachEvent("onFocus",c))};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};var i=[],s=null,l=!1;function u(){l=!0}function c(){if(l){if(l=!1,!s)return;setTimeout((function(){s.contains(document.activeElement)||((0,a.default)(s)[0]||s).focus()}),0)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=void 0,r=t.shiftKey,i=n[0],s=n[n.length-1];if(e===document.activeElement){if(!r)return;o=s}s!==document.activeElement||r||(o=i);i===document.activeElement&&r&&(o=s);if(o)return t.preventDefault(),void o.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))return;var u=n.indexOf(document.activeElement);u>-1&&(u+=r?-1:1);if(void 0===(o=n[u]))return t.preventDefault(),void(o=r?s:i).focus();t.preventDefault(),o.focus()};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};e.exports=t.default},function(e,t,n){"use strict";var o=function(){},r=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var o=1;o2?o-2:0);for(var a=2;a0&&0===(b-=1)&&c.show(t),n.props.shouldFocusAfterRender&&(n.props.shouldReturnFocusAfterClose?(s.returnFocus(n.props.preventScroll),s.teardownScopedFocus()):s.popWithoutFocus()),n.props.onAfterClose&&n.props.onAfterClose(),y.default.deregister(n)},n.open=function(){n.beforeOpen(),n.state.afterOpen&&n.state.beforeClose?(clearTimeout(n.closeTimer),n.setState({beforeClose:!1})):(n.props.shouldFocusAfterRender&&(s.setupScopedFocus(n.node),s.markForFocusLater()),n.setState({isOpen:!0},(function(){n.setState({afterOpen:!0}),n.props.isOpen&&n.props.onAfterOpen&&n.props.onAfterOpen({overlayEl:n.overlay,contentEl:n.content})})))},n.close=function(){n.props.closeTimeoutMS>0?n.closeWithTimeout():n.closeWithoutTimeout()},n.focusContent=function(){return n.content&&!n.contentHasFocus()&&n.content.focus({preventScroll:!0})},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){9===e.keyCode&&(0,u.default)(n.content,e),n.props.shouldCloseOnEsc&&27===e.keyCode&&(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.handleContentOnMouseUp=function(){n.shouldClose=!1},n.handleOverlayOnMouseDown=function(e){n.props.shouldCloseOnOverlayClick||e.target!=n.overlay||e.preventDefault()},n.handleContentOnClick=function(){n.shouldClose=!1},n.handleContentOnMouseDown=function(){n.shouldClose=!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":r(t))?t:{base:h[e],afterOpen:h[e]+"--after-open",beforeClose:h[e]+"--before-close"},a=o.base;return n.state.afterOpen&&(a=a+" "+o.afterOpen),n.state.beforeClose&&(a=a+" "+o.beforeClose),"string"==typeof t&&t?a+" "+t:a},n.attributesFromObject=function(e,t){return Object.keys(t).reduce((function(n,o){return n[e+"-"+o]=t[o],n}),{})},n.state={afterOpen:!1,beforeClose:!1},n.shouldClose=null,n.moveFromContentToOverlay=null,n}return function(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)}(t,e),a(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.open()}},{key:"componentDidUpdate",value:function(e,t){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.open():!this.props.isOpen&&e.isOpen&&this.close(),this.props.shouldFocusAfterRender&&this.state.isOpen&&!t.isOpen&&this.focusContent()}},{key:"componentWillUnmount",value:function(){this.state.isOpen&&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;r&&f.add(document.body,r),o&&f.add(document.getElementsByTagName("html")[0],o),n&&(b+=1,c.hide(t)),y.default.register(this)}},{key:"render",value:function(){var e=this.props,t=e.id,n=e.className,r=e.overlayClassName,a=e.defaultStyles,l=e.children,i=n?{}:a.content,s=r?{}:a.overlay;if(this.shouldBeClosed())return null;var u={ref:this.setOverlayRef,className:this.buildClassName("overlay",r),style:o({},s,this.props.style.overlay),onClick:this.handleOverlayOnClick,onMouseDown:this.handleOverlayOnMouseDown},c=o({id:t,ref:this.setContentRef,style:o({},i,this.props.style.content),className:this.buildClassName("content",n),tabIndex:"-1",onKeyDown:this.handleKeyDown,onMouseDown:this.handleContentOnMouseDown,onMouseUp:this.handleContentOnMouseUp,onClick:this.handleContentOnClick,role:this.props.role,"aria-label":this.props.contentLabel},this.attributesFromObject("aria",o({modal:!0},this.props.aria)),this.attributesFromObject("data",this.props.data||{}),{"data-testid":this.props.testId}),f=this.props.contentElement(c,l);return this.props.overlayElement(u,f)}}]),t}(l.Component);g.defaultProps={style:{overlay:{},content:{}},defaultStyles:{}},g.propTypes={isOpen:i.default.bool.isRequired,defaultStyles:i.default.shape({content:i.default.object,overlay:i.default.object}),style:i.default.shape({content:i.default.object,overlay:i.default.object}),className:i.default.oneOfType([i.default.string,i.default.object]),overlayClassName:i.default.oneOfType([i.default.string,i.default.object]),bodyOpenClassName:i.default.string,htmlOpenClassName:i.default.string,ariaHideApp:i.default.bool,appElement:i.default.oneOfType([d.default,i.default.instanceOf(p.SafeHTMLCollection),i.default.instanceOf(p.SafeNodeList),i.default.arrayOf(i.default.instanceOf(d.default))]),onAfterOpen:i.default.func,onAfterClose:i.default.func,onRequestClose:i.default.func,closeTimeoutMS:i.default.number,shouldFocusAfterRender:i.default.bool,shouldCloseOnOverlayClick:i.default.bool,shouldReturnFocusAfterClose:i.default.bool,preventScroll:i.default.bool,role:i.default.string,contentLabel:i.default.string,aria:i.default.object,data:i.default.object,children:i.default.node,shouldCloseOnEsc:i.default.bool,overlayRef:i.default.func,contentRef:i.default.func,id:i.default.string,overlayElement:i.default.func,contentElement:i.default.func,testId:i.default.string},t.default=g,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){l=[]},t.log=function(){0;console.log("focusManager ----------"),l.forEach((function(e){var t=e||{};console.log(t.nodeName,t.className,t.id)})),console.log("end focusManager ----------")},t.handleBlur=u,t.handleFocus=c,t.markForFocusLater=function(){l.push(document.activeElement)},t.returnFocus=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=null;try{return void(0!==l.length&&(t=l.pop()).focus({preventScroll:e}))}catch(e){console.warn(["You tried to return focus to",t,"but it is not in the DOM anymore"].join(" "))}},t.popWithoutFocus=function(){l.length>0&&l.pop()},t.setupScopedFocus=function(e){i=e,window.addEventListener?(window.addEventListener("blur",u,!1),document.addEventListener("focus",c,!0)):(window.attachEvent("onBlur",u),document.attachEvent("onFocus",c))},t.teardownScopedFocus=function(){i=null,window.addEventListener?(window.removeEventListener("blur",u),document.removeEventListener("focus",c)):(window.detachEvent("onBlur",u),document.detachEvent("onFocus",c))};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};var l=[],i=null,s=!1;function u(){s=!0}function c(){if(s){if(s=!1,!i)return;setTimeout((function(){i.contains(document.activeElement)||((0,a.default)(i)[0]||i).focus()}),0)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=(0,a.default)(e);if(!n.length)return void t.preventDefault();var o=void 0,r=t.shiftKey,l=n[0],i=n[n.length-1];if(e===document.activeElement){if(!r)return;o=i}i!==document.activeElement||r||(o=l);l===document.activeElement&&r&&(o=i);if(o)return t.preventDefault(),void o.focus();var s=/(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent);if(null==s||"Chrome"==s[1]||null!=/\biPod\b|\biPad\b/g.exec(navigator.userAgent))return;var u=n.indexOf(document.activeElement);u>-1&&(u+=r?-1:1);if(void 0===(o=n[u]))return t.preventDefault(),void(o=r?i:l).focus();t.preventDefault(),o.focus()};var o,r=n(5),a=(o=r)&&o.__esModule?o:{default:o};e.exports=t.default},function(e,t,n){"use strict";var o=function(){},r=function(e,t){var n=arguments.length;t=new Array(n>1?n-1:0);for(var o=1;o2?o-2:0);for(var a=2;a 0 expected")}a.default.subscribe((function(e,t){i&&s||((i=document.createElement("div")).setAttribute("data-react-modal-body-trap",""),i.style.position="absolute",i.style.opacity="0",i.setAttribute("tabindex","0"),i.addEventListener("focus",u),(s=i.cloneNode()).addEventListener("focus",u)),(l=t).length>0?(document.body.firstChild!==i&&document.body.insertBefore(i,document.body.firstChild),document.body.lastChild!==s&&document.body.appendChild(s)):(i.parentElement&&i.parentElement.removeChild(i),s.parentElement&&s.parentElement.removeChild(s))}))},function(e,t,n){"use strict";function o(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!=e&&this.setState(e)}function r(e){this.setState(function(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!=n?n:null}.bind(this))}function a(e,t){try{var n=this.props,o=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function i(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,i=null,s=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?i="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(i="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?s="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(s="UNSAFE_componentWillUpdate"),null!==n||null!==i||null!==s){var l=e.displayName||e.name,u="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+l+" uses "+u+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==i?"\n "+i:"")+(null!==s?"\n "+s:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=o,t.componentWillReceiveProps=r),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=a;var c=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;c.call(this,e,t,o)}}return e}n.r(t),n.d(t,"polyfill",(function(){return i})),o.__suppressDeprecationWarning=!0,r.__suppressDeprecationWarning=!0,a.__suppressDeprecationWarning=!0}])})); \ No newline at end of file +*/!function(){"use strict";var r=!("undefined"==typeof window||!window.document||!window.document.createElement),a={canUseDOM:r,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:r&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:r&&!!window.screen};void 0===(o=function(){return a}.call(t,n,t,e))||(e.exports=o)}()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){var e=document.getElementsByTagName("html")[0];for(var t in o)a(e,o[t]);var n=document.body;for(var l in r)a(n,r[l]);o={},r={}},t.log=function(){0;var e=document.getElementsByTagName("html")[0].className,t="Show tracked classes:\n\n";for(var n in t+=" ("+e+"):\n",o)t+=" "+n+" "+o[n]+"\n";for(var a in e=document.body.className,t+="\n\ndoc.body ("+e+"):\n",r)t+=" "+a+" "+r[a]+"\n";t+="\n",console.log(t)};var o={},r={};function a(e,t){e.classList.remove(t)}t.add=function(e,t){return n=e.classList,a="html"==e.nodeName.toLowerCase()?o:r,void t.split(" ").forEach((function(e){!function(e,t){e[t]||(e[t]=0),e[t]+=1}(a,e),n.add(e)}));var n,a},t.remove=function(e,t){return n=e.classList,a="html"==e.nodeName.toLowerCase()?o:r,void t.split(" ").forEach((function(e){!function(e,t){e[t]&&(e[t]-=1)}(a,e),0===a[e]&&n.remove(e)}));var n,a}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.resetState=function(){for(var e=[l,i],t=0;t 0 expected")}a.default.subscribe((function(e,t){l||i||((l=document.createElement("div")).setAttribute("data-react-modal-body-trap",""),l.style.position="absolute",l.style.opacity="0",l.setAttribute("tabindex","0"),l.addEventListener("focus",u),(i=l.cloneNode()).addEventListener("focus",u)),(s=t).length>0?(document.body.firstChild!==l&&document.body.insertBefore(l,document.body.firstChild),document.body.lastChild!==i&&document.body.appendChild(i)):(l.parentElement&&l.parentElement.removeChild(l),i.parentElement&&i.parentElement.removeChild(i))}))},function(e,t,n){"use strict";function o(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!=e&&this.setState(e)}function r(e){this.setState(function(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!=n?n:null}.bind(this))}function a(e,t){try{var n=this.props,o=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function l(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,l=null,i=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?l="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(l="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?i="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(i="UNSAFE_componentWillUpdate"),null!==n||null!==l||null!==i){var s=e.displayName||e.name,u="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+s+" uses "+u+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==l?"\n "+l:"")+(null!==i?"\n "+i:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=o,t.componentWillReceiveProps=r),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=a;var c=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;c.call(this,e,t,o)}}return e}n.r(t),n.d(t,"polyfill",(function(){return l})),o.__suppressDeprecationWarning=!0,r.__suppressDeprecationWarning=!0,a.__suppressDeprecationWarning=!0}])})); \ No newline at end of file diff --git a/lib/components/Modal.js b/lib/components/Modal.js new file mode 100644 index 00000000..bcabfbd8 --- /dev/null +++ b/lib/components/Modal.js @@ -0,0 +1,300 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.bodyOpenClassName = exports.portalClassName = undefined; + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require("react"); + +var _react2 = _interopRequireDefault(_react); + +var _reactDom = require("react-dom"); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _ModalPortal = require("./ModalPortal"); + +var _ModalPortal2 = _interopRequireDefault(_ModalPortal); + +var _ariaAppHider = require("../helpers/ariaAppHider"); + +var ariaAppHider = _interopRequireWildcard(_ariaAppHider); + +var _safeHTMLElement = require("../helpers/safeHTMLElement"); + +var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement); + +var _reactLifecyclesCompat = require("react-lifecycles-compat"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var portalClassName = exports.portalClassName = "ReactModalPortal"; +var bodyOpenClassName = exports.bodyOpenClassName = "ReactModal__Body--open"; + +var isReact16 = _safeHTMLElement.canUseDOM && _reactDom2.default.createPortal !== undefined; + +var createHTMLElement = function createHTMLElement(name) { + return document.createElement(name); +}; + +var getCreatePortal = function getCreatePortal() { + return isReact16 ? _reactDom2.default.createPortal : _reactDom2.default.unstable_renderSubtreeIntoContainer; +}; + +function getParentElement(parentSelector) { + return parentSelector(); +} + +var Modal = function (_Component) { + _inherits(Modal, _Component); + + function Modal() { + var _ref; + + var _temp, _this, _ret; + + _classCallCheck(this, Modal); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Modal.__proto__ || Object.getPrototypeOf(Modal)).call.apply(_ref, [this].concat(args))), _this), _this.removePortal = function () { + !isReact16 && _reactDom2.default.unmountComponentAtNode(_this.node); + var parent = getParentElement(_this.props.parentSelector); + if (parent && parent.contains(_this.node)) { + parent.removeChild(_this.node); + } else { + // eslint-disable-next-line no-console + console.warn('React-Modal: "parentSelector" prop did not returned any DOM ' + "element. Make sure that the parent element is unmounted to " + "avoid any memory leaks."); + } + }, _this.portalRef = function (ref) { + _this.portal = ref; + }, _this.renderPortal = function (props) { + var createPortal = getCreatePortal(); + var portal = createPortal(_this, _react2.default.createElement(_ModalPortal2.default, _extends({ defaultStyles: Modal.defaultStyles }, props)), _this.node); + _this.portalRef(portal); + }, _temp), _possibleConstructorReturn(_this, _ret); + } + + _createClass(Modal, [{ + key: "componentDidMount", + value: function componentDidMount() { + if (!_safeHTMLElement.canUseDOM) return; + + if (!isReact16) { + this.node = createHTMLElement("div"); + } + this.node.className = this.props.portalClassName; + + var parent = getParentElement(this.props.parentSelector); + parent.appendChild(this.node); + + !isReact16 && this.renderPortal(this.props); + } + }, { + key: "getSnapshotBeforeUpdate", + value: function getSnapshotBeforeUpdate(prevProps) { + var prevParent = getParentElement(prevProps.parentSelector); + var nextParent = getParentElement(this.props.parentSelector); + return { prevParent: prevParent, nextParent: nextParent }; + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps, _, snapshot) { + if (!_safeHTMLElement.canUseDOM) return; + var _props = this.props, + isOpen = _props.isOpen, + portalClassName = _props.portalClassName; + + + if (prevProps.portalClassName !== portalClassName) { + this.node.className = portalClassName; + } + + var prevParent = snapshot.prevParent, + nextParent = snapshot.nextParent; + + if (nextParent !== prevParent) { + prevParent.removeChild(this.node); + nextParent.appendChild(this.node); + } + + // Stop unnecessary renders if modal is remaining closed + if (!prevProps.isOpen && !isOpen) return; + + !isReact16 && this.renderPortal(this.props); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (!_safeHTMLElement.canUseDOM || !this.node || !this.portal) return; + + var state = this.portal.state; + var now = Date.now(); + var closesAt = state.isOpen && this.props.closeTimeoutMS && (state.closesAt || now + this.props.closeTimeoutMS); + + if (closesAt) { + if (!state.beforeClose) { + this.portal.closeWithTimeout(); + } + + setTimeout(this.removePortal, closesAt - now); + } else { + this.removePortal(); + } + } + }, { + key: "render", + value: function render() { + if (!_safeHTMLElement.canUseDOM || !isReact16) { + return null; + } + + if (!this.node && isReact16) { + this.node = createHTMLElement("div"); + } + + var createPortal = getCreatePortal(); + return createPortal(_react2.default.createElement(_ModalPortal2.default, _extends({ + ref: this.portalRef, + defaultStyles: Modal.defaultStyles + }, this.props)), this.node); + } + }], [{ + key: "setAppElement", + value: function setAppElement(element) { + ariaAppHider.setElement(element); + } + + /* eslint-disable react/no-unused-prop-types */ + + /* eslint-enable react/no-unused-prop-types */ + + }]); + + return Modal; +}(_react.Component); + +Modal.propTypes = { + isOpen: _propTypes2.default.bool.isRequired, + style: _propTypes2.default.shape({ + content: _propTypes2.default.object, + overlay: _propTypes2.default.object + }), + portalClassName: _propTypes2.default.string, + bodyOpenClassName: _propTypes2.default.string, + htmlOpenClassName: _propTypes2.default.string, + className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({ + base: _propTypes2.default.string.isRequired, + afterOpen: _propTypes2.default.string.isRequired, + beforeClose: _propTypes2.default.string.isRequired + })]), + overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({ + base: _propTypes2.default.string.isRequired, + afterOpen: _propTypes2.default.string.isRequired, + beforeClose: _propTypes2.default.string.isRequired + })]), + appElement: _propTypes2.default.oneOfType([_safeHTMLElement2.default, _propTypes2.default.instanceOf(_safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(_safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]), + onAfterOpen: _propTypes2.default.func, + onRequestClose: _propTypes2.default.func, + closeTimeoutMS: _propTypes2.default.number, + ariaHideApp: _propTypes2.default.bool, + shouldFocusAfterRender: _propTypes2.default.bool, + shouldCloseOnOverlayClick: _propTypes2.default.bool, + shouldReturnFocusAfterClose: _propTypes2.default.bool, + preventScroll: _propTypes2.default.bool, + parentSelector: _propTypes2.default.func, + aria: _propTypes2.default.object, + data: _propTypes2.default.object, + role: _propTypes2.default.string, + contentLabel: _propTypes2.default.string, + shouldCloseOnEsc: _propTypes2.default.bool, + overlayRef: _propTypes2.default.func, + contentRef: _propTypes2.default.func, + id: _propTypes2.default.string, + overlayElement: _propTypes2.default.func, + contentElement: _propTypes2.default.func +}; +Modal.defaultProps = { + isOpen: false, + portalClassName: portalClassName, + bodyOpenClassName: bodyOpenClassName, + role: "dialog", + ariaHideApp: true, + closeTimeoutMS: 0, + shouldFocusAfterRender: true, + shouldCloseOnEsc: true, + shouldCloseOnOverlayClick: true, + shouldReturnFocusAfterClose: true, + preventScroll: false, + parentSelector: function parentSelector() { + return document.body; + }, + overlayElement: function overlayElement(props, contentEl) { + return _react2.default.createElement( + "div", + props, + contentEl + ); + }, + contentElement: function contentElement(props, children) { + return _react2.default.createElement( + "div", + props, + children + ); + } +}; +Modal.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" + } +}; + + +(0, _reactLifecyclesCompat.polyfill)(Modal); + +if (process.env.NODE_ENV !== "production") { + Modal.setCreateHTMLElement = function (fn) { + return createHTMLElement = fn; + }; +} + +exports.default = Modal; \ No newline at end of file diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js new file mode 100644 index 00000000..beec1326 --- /dev/null +++ b/lib/components/ModalPortal.js @@ -0,0 +1,426 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require("react"); + +var _propTypes = require("prop-types"); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _focusManager = require("../helpers/focusManager"); + +var focusManager = _interopRequireWildcard(_focusManager); + +var _scopeTab = require("../helpers/scopeTab"); + +var _scopeTab2 = _interopRequireDefault(_scopeTab); + +var _ariaAppHider = require("../helpers/ariaAppHider"); + +var ariaAppHider = _interopRequireWildcard(_ariaAppHider); + +var _classList = require("../helpers/classList"); + +var classList = _interopRequireWildcard(_classList); + +var _safeHTMLElement = require("../helpers/safeHTMLElement"); + +var _safeHTMLElement2 = _interopRequireDefault(_safeHTMLElement); + +var _portalOpenInstances = require("../helpers/portalOpenInstances"); + +var _portalOpenInstances2 = _interopRequireDefault(_portalOpenInstances); + +require("../helpers/bodyTrap"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +// so that our CSS is statically analyzable +var CLASS_NAMES = { + overlay: "ReactModal__Overlay", + content: "ReactModal__Content" +}; + +var TAB_KEY = 9; +var ESC_KEY = 27; + +var ariaHiddenInstances = 0; + +var ModalPortal = function (_Component) { + _inherits(ModalPortal, _Component); + + function ModalPortal(props) { + _classCallCheck(this, ModalPortal); + + var _this = _possibleConstructorReturn(this, (ModalPortal.__proto__ || Object.getPrototypeOf(ModalPortal)).call(this, props)); + + _this.setOverlayRef = function (overlay) { + _this.overlay = overlay; + _this.props.overlayRef && _this.props.overlayRef(overlay); + }; + + _this.setContentRef = function (content) { + _this.content = content; + _this.props.contentRef && _this.props.contentRef(content); + }; + + _this.afterClose = function () { + var _this$props = _this.props, + appElement = _this$props.appElement, + ariaHideApp = _this$props.ariaHideApp, + htmlOpenClassName = _this$props.htmlOpenClassName, + bodyOpenClassName = _this$props.bodyOpenClassName; + + // Remove classes. + + bodyOpenClassName && classList.remove(document.body, bodyOpenClassName); + + htmlOpenClassName && classList.remove(document.getElementsByTagName("html")[0], htmlOpenClassName); + + // Reset aria-hidden attribute if all modals have been removed + if (ariaHideApp && ariaHiddenInstances > 0) { + ariaHiddenInstances -= 1; + + if (ariaHiddenInstances === 0) { + ariaAppHider.show(appElement); + } + } + + if (_this.props.shouldFocusAfterRender) { + if (_this.props.shouldReturnFocusAfterClose) { + focusManager.returnFocus(_this.props.preventScroll); + focusManager.teardownScopedFocus(); + } else { + focusManager.popWithoutFocus(); + } + } + + if (_this.props.onAfterClose) { + _this.props.onAfterClose(); + } + + _portalOpenInstances2.default.deregister(_this); + }; + + _this.open = function () { + _this.beforeOpen(); + if (_this.state.afterOpen && _this.state.beforeClose) { + clearTimeout(_this.closeTimer); + _this.setState({ beforeClose: false }); + } else { + if (_this.props.shouldFocusAfterRender) { + focusManager.setupScopedFocus(_this.node); + focusManager.markForFocusLater(); + } + + _this.setState({ isOpen: true }, function () { + _this.setState({ afterOpen: true }); + + if (_this.props.isOpen && _this.props.onAfterOpen) { + _this.props.onAfterOpen({ + overlayEl: _this.overlay, + contentEl: _this.content + }); + } + }); + } + }; + + _this.close = function () { + if (_this.props.closeTimeoutMS > 0) { + _this.closeWithTimeout(); + } else { + _this.closeWithoutTimeout(); + } + }; + + _this.focusContent = function () { + return _this.content && !_this.contentHasFocus() && _this.content.focus({ preventScroll: true }); + }; + + _this.closeWithTimeout = function () { + var closesAt = Date.now() + _this.props.closeTimeoutMS; + _this.setState({ beforeClose: true, closesAt: closesAt }, function () { + _this.closeTimer = setTimeout(_this.closeWithoutTimeout, _this.state.closesAt - Date.now()); + }); + }; + + _this.closeWithoutTimeout = function () { + _this.setState({ + beforeClose: false, + isOpen: false, + afterOpen: false, + closesAt: null + }, _this.afterClose); + }; + + _this.handleKeyDown = function (event) { + if (event.keyCode === TAB_KEY) { + (0, _scopeTab2.default)(_this.content, event); + } + + if (_this.props.shouldCloseOnEsc && event.keyCode === ESC_KEY) { + event.stopPropagation(); + _this.requestClose(event); + } + }; + + _this.handleOverlayOnClick = function (event) { + if (_this.shouldClose === null) { + _this.shouldClose = true; + } + + if (_this.shouldClose && _this.props.shouldCloseOnOverlayClick) { + if (_this.ownerHandlesClose()) { + _this.requestClose(event); + } else { + _this.focusContent(); + } + } + _this.shouldClose = null; + }; + + _this.handleContentOnMouseUp = function () { + _this.shouldClose = false; + }; + + _this.handleOverlayOnMouseDown = function (event) { + if (!_this.props.shouldCloseOnOverlayClick && event.target == _this.overlay) { + event.preventDefault(); + } + }; + + _this.handleContentOnClick = function () { + _this.shouldClose = false; + }; + + _this.handleContentOnMouseDown = function () { + _this.shouldClose = false; + }; + + _this.requestClose = function (event) { + return _this.ownerHandlesClose() && _this.props.onRequestClose(event); + }; + + _this.ownerHandlesClose = function () { + return _this.props.onRequestClose; + }; + + _this.shouldBeClosed = function () { + return !_this.state.isOpen && !_this.state.beforeClose; + }; + + _this.contentHasFocus = function () { + return document.activeElement === _this.content || _this.content.contains(document.activeElement); + }; + + _this.buildClassName = function (which, additional) { + var classNames = (typeof additional === "undefined" ? "undefined" : _typeof(additional)) === "object" ? additional : { + base: CLASS_NAMES[which], + afterOpen: CLASS_NAMES[which] + "--after-open", + beforeClose: CLASS_NAMES[which] + "--before-close" + }; + var className = classNames.base; + if (_this.state.afterOpen) { + className = className + " " + classNames.afterOpen; + } + if (_this.state.beforeClose) { + className = className + " " + classNames.beforeClose; + } + return typeof additional === "string" && additional ? className + " " + additional : className; + }; + + _this.attributesFromObject = function (prefix, items) { + return Object.keys(items).reduce(function (acc, name) { + acc[prefix + "-" + name] = items[name]; + return acc; + }, {}); + }; + + _this.state = { + afterOpen: false, + beforeClose: false + }; + + _this.shouldClose = null; + _this.moveFromContentToOverlay = null; + return _this; + } + + _createClass(ModalPortal, [{ + key: "componentDidMount", + value: function componentDidMount() { + if (this.props.isOpen) { + this.open(); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps, prevState) { + if (process.env.NODE_ENV !== "production") { + if (prevProps.bodyOpenClassName !== this.props.bodyOpenClassName) { + // eslint-disable-next-line no-console + console.warn('React-Modal: "bodyOpenClassName" prop has been modified. ' + "This may cause unexpected behavior when multiple modals are open."); + } + if (prevProps.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."); + } + } + + if (this.props.isOpen && !prevProps.isOpen) { + this.open(); + } else if (!this.props.isOpen && prevProps.isOpen) { + this.close(); + } + + // Focus only needs to be set once when the modal is being opened + if (this.props.shouldFocusAfterRender && this.state.isOpen && !prevState.isOpen) { + this.focusContent(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (this.state.isOpen) { + this.afterClose(); + } + clearTimeout(this.closeTimer); + } + }, { + key: "beforeOpen", + value: function beforeOpen() { + var _props = this.props, + appElement = _props.appElement, + ariaHideApp = _props.ariaHideApp, + htmlOpenClassName = _props.htmlOpenClassName, + bodyOpenClassName = _props.bodyOpenClassName; + + // Add classes. + + bodyOpenClassName && classList.add(document.body, bodyOpenClassName); + + htmlOpenClassName && classList.add(document.getElementsByTagName("html")[0], htmlOpenClassName); + + if (ariaHideApp) { + ariaHiddenInstances += 1; + ariaAppHider.hide(appElement); + } + + _portalOpenInstances2.default.register(this); + } + + // Don't steal focus from inner elements + + }, { + key: "render", + value: function render() { + var _props2 = this.props, + id = _props2.id, + className = _props2.className, + overlayClassName = _props2.overlayClassName, + defaultStyles = _props2.defaultStyles, + children = _props2.children; + + var contentStyles = className ? {} : defaultStyles.content; + var overlayStyles = overlayClassName ? {} : defaultStyles.overlay; + + if (this.shouldBeClosed()) { + return null; + } + + var overlayProps = { + ref: this.setOverlayRef, + className: this.buildClassName("overlay", overlayClassName), + style: _extends({}, overlayStyles, this.props.style.overlay), + onClick: this.handleOverlayOnClick, + onMouseDown: this.handleOverlayOnMouseDown + }; + + var contentProps = _extends({ + id: id, + ref: this.setContentRef, + style: _extends({}, contentStyles, this.props.style.content), + className: this.buildClassName("content", className), + tabIndex: "-1", + onKeyDown: this.handleKeyDown, + onMouseDown: this.handleContentOnMouseDown, + onMouseUp: this.handleContentOnMouseUp, + onClick: this.handleContentOnClick, + role: this.props.role, + "aria-label": this.props.contentLabel + }, this.attributesFromObject("aria", _extends({ modal: true }, this.props.aria)), this.attributesFromObject("data", this.props.data || {}), { + "data-testid": this.props.testId + }); + + var contentElement = this.props.contentElement(contentProps, children); + return this.props.overlayElement(overlayProps, contentElement); + } + }]); + + return ModalPortal; +}(_react.Component); + +ModalPortal.defaultProps = { + style: { + overlay: {}, + content: {} + }, + defaultStyles: {} +}; +ModalPortal.propTypes = { + isOpen: _propTypes2.default.bool.isRequired, + defaultStyles: _propTypes2.default.shape({ + content: _propTypes2.default.object, + overlay: _propTypes2.default.object + }), + style: _propTypes2.default.shape({ + content: _propTypes2.default.object, + overlay: _propTypes2.default.object + }), + className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), + overlayClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), + bodyOpenClassName: _propTypes2.default.string, + htmlOpenClassName: _propTypes2.default.string, + ariaHideApp: _propTypes2.default.bool, + appElement: _propTypes2.default.oneOfType([_safeHTMLElement2.default, _propTypes2.default.instanceOf(_safeHTMLElement.SafeHTMLCollection), _propTypes2.default.instanceOf(_safeHTMLElement.SafeNodeList), _propTypes2.default.arrayOf(_propTypes2.default.instanceOf(_safeHTMLElement2.default))]), + onAfterOpen: _propTypes2.default.func, + onAfterClose: _propTypes2.default.func, + onRequestClose: _propTypes2.default.func, + closeTimeoutMS: _propTypes2.default.number, + shouldFocusAfterRender: _propTypes2.default.bool, + shouldCloseOnOverlayClick: _propTypes2.default.bool, + shouldReturnFocusAfterClose: _propTypes2.default.bool, + preventScroll: _propTypes2.default.bool, + role: _propTypes2.default.string, + contentLabel: _propTypes2.default.string, + aria: _propTypes2.default.object, + data: _propTypes2.default.object, + children: _propTypes2.default.node, + shouldCloseOnEsc: _propTypes2.default.bool, + overlayRef: _propTypes2.default.func, + contentRef: _propTypes2.default.func, + id: _propTypes2.default.string, + overlayElement: _propTypes2.default.func, + contentElement: _propTypes2.default.func, + testId: _propTypes2.default.string +}; +exports.default = ModalPortal; +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/helpers/ariaAppHider.js b/lib/helpers/ariaAppHider.js new file mode 100644 index 00000000..ec0fd4ef --- /dev/null +++ b/lib/helpers/ariaAppHider.js @@ -0,0 +1,138 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.resetState = resetState; +exports.log = log; +exports.assertNodeList = assertNodeList; +exports.setElement = setElement; +exports.validateElement = validateElement; +exports.hide = hide; +exports.show = show; +exports.documentNotReadyOrSSRTesting = documentNotReadyOrSSRTesting; + +var _warning = require("warning"); + +var _warning2 = _interopRequireDefault(_warning); + +var _safeHTMLElement = require("./safeHTMLElement"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var globalElement = null; + +/* eslint-disable no-console */ +/* istanbul ignore next */ +function resetState() { + if (globalElement) { + if (globalElement.removeAttribute) { + globalElement.removeAttribute("aria-hidden"); + } else if (globalElement.length != null) { + globalElement.forEach(function (element) { + return element.removeAttribute("aria-hidden"); + }); + } else { + document.querySelectorAll(globalElement).forEach(function (element) { + return element.removeAttribute("aria-hidden"); + }); + } + } + globalElement = null; +} + +/* istanbul ignore next */ +function log() { + if (process.env.NODE_ENV === "production") return; + var check = globalElement || {}; + console.log("ariaAppHider ----------"); + console.log(check.nodeName, check.className, check.id); + console.log("end ariaAppHider ----------"); +} +/* eslint-enable no-console */ + +function assertNodeList(nodeList, selector) { + if (!nodeList || !nodeList.length) { + throw new Error("react-modal: No elements were found for selector " + selector + "."); + } +} + +function setElement(element) { + var useElement = element; + if (typeof useElement === "string" && _safeHTMLElement.canUseDOM) { + var el = document.querySelectorAll(useElement); + assertNodeList(el, useElement); + useElement = el; + } + globalElement = useElement || globalElement; + return globalElement; +} + +function validateElement(appElement) { + var el = appElement || globalElement; + if (el) { + return Array.isArray(el) || el instanceof HTMLCollection || el instanceof NodeList ? el : [el]; + } else { + (0, _warning2.default)(false, ["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(" ")); + + return []; + } +} + +function hide(appElement) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = validateElement(appElement)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var el = _step.value; + + el.setAttribute("aria-hidden", "true"); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } +} + +function show(appElement) { + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = validateElement(appElement)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var el = _step2.value; + + el.removeAttribute("aria-hidden"); + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } +} + +function documentNotReadyOrSSRTesting() { + globalElement = null; +} \ No newline at end of file diff --git a/lib/helpers/bodyTrap.js b/lib/helpers/bodyTrap.js new file mode 100644 index 00000000..6e55c133 --- /dev/null +++ b/lib/helpers/bodyTrap.js @@ -0,0 +1,93 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.resetState = resetState; +exports.log = log; + +var _portalOpenInstances = require("./portalOpenInstances"); + +var _portalOpenInstances2 = _interopRequireDefault(_portalOpenInstances); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Body focus trap see Issue #742 + +var before = void 0, + after = void 0, + instances = []; + +/* eslint-disable no-console */ +/* istanbul ignore next */ +function resetState() { + var _arr = [before, after]; + + for (var _i = 0; _i < _arr.length; _i++) { + var item = _arr[_i]; + if (!item) continue; + item.parentNode && item.parentNode.removeChild(item); + } + before = after = null; + instances = []; +} + +/* istanbul ignore next */ +function log() { + console.log("bodyTrap ----------"); + console.log(instances.length); + var _arr2 = [before, after]; + for (var _i2 = 0; _i2 < _arr2.length; _i2++) { + var item = _arr2[_i2]; + var check = item || {}; + console.log(check.nodeName, check.className, check.id); + } + console.log("edn bodyTrap ----------"); +} +/* eslint-enable no-console */ + +function focusContent() { + if (instances.length === 0) { + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.warn("React-Modal: Open instances > 0 expected"); + } + return; + } + instances[instances.length - 1].focusContent(); +} + +function bodyTrap(eventType, openInstances) { + if (!before && !after) { + before = document.createElement("div"); + before.setAttribute("data-react-modal-body-trap", ""); + before.style.position = "absolute"; + before.style.opacity = "0"; + before.setAttribute("tabindex", "0"); + before.addEventListener("focus", focusContent); + after = before.cloneNode(); + after.addEventListener("focus", focusContent); + } + + instances = openInstances; + + if (instances.length > 0) { + // Add focus trap + if (document.body.firstChild !== before) { + document.body.insertBefore(before, document.body.firstChild); + } + if (document.body.lastChild !== after) { + document.body.appendChild(after); + } + } else { + // Remove focus trap + if (before.parentElement) { + before.parentElement.removeChild(before); + } + if (after.parentElement) { + after.parentElement.removeChild(after); + } + } +} + +_portalOpenInstances2.default.subscribe(bodyTrap); \ No newline at end of file diff --git a/lib/helpers/classList.js b/lib/helpers/classList.js new file mode 100644 index 00000000..93e4fe01 --- /dev/null +++ b/lib/helpers/classList.js @@ -0,0 +1,130 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.resetState = resetState; +exports.log = log; +var htmlClassList = {}; +var docBodyClassList = {}; + +/* eslint-disable no-console */ +/* istanbul ignore next */ +function removeClass(at, cls) { + at.classList.remove(cls); +} + +/* istanbul ignore next */ +function resetState() { + var htmlElement = document.getElementsByTagName("html")[0]; + for (var cls in htmlClassList) { + removeClass(htmlElement, htmlClassList[cls]); + } + + var body = document.body; + for (var _cls in docBodyClassList) { + removeClass(body, docBodyClassList[_cls]); + } + + htmlClassList = {}; + docBodyClassList = {}; +} + +/* istanbul ignore next */ +function log() { + if (process.env.NODE_ENV === "production") return; + + var classes = document.getElementsByTagName("html")[0].className; + var buffer = "Show tracked classes:\n\n"; + + buffer += " (" + classes + "):\n"; + for (var x in htmlClassList) { + buffer += " " + x + " " + htmlClassList[x] + "\n"; + } + + classes = document.body.className; + + buffer += "\n\ndoc.body (" + classes + "):\n"; + for (var _x in docBodyClassList) { + buffer += " " + _x + " " + docBodyClassList[_x] + "\n"; + } + + buffer += "\n"; + + console.log(buffer); +} +/* eslint-enable no-console */ + +/** + * Track the number of reference of a class. + * @param {object} poll The poll to receive the reference. + * @param {string} className The class name. + * @return {string} + */ +var incrementReference = function incrementReference(poll, className) { + if (!poll[className]) { + poll[className] = 0; + } + poll[className] += 1; + return className; +}; + +/** + * Drop the reference of a class. + * @param {object} poll The poll to receive the reference. + * @param {string} className The class name. + * @return {string} + */ +var decrementReference = function decrementReference(poll, className) { + if (poll[className]) { + poll[className] -= 1; + } + return className; +}; + +/** + * Track a class and add to the given class list. + * @param {Object} classListRef A class list of an element. + * @param {Object} poll The poll to be used. + * @param {Array} classes The list of classes to be tracked. + */ +var trackClass = function trackClass(classListRef, poll, classes) { + classes.forEach(function (className) { + incrementReference(poll, className); + classListRef.add(className); + }); +}; + +/** + * Untrack a class and remove from the given class list if the reference + * reaches 0. + * @param {Object} classListRef A class list of an element. + * @param {Object} poll The poll to be used. + * @param {Array} classes The list of classes to be untracked. + */ +var untrackClass = function untrackClass(classListRef, poll, classes) { + classes.forEach(function (className) { + decrementReference(poll, className); + poll[className] === 0 && classListRef.remove(className); + }); +}; + +/** + * Public inferface to add classes to the document.body. + * @param {string} bodyClass The class string to be added. + * It may contain more then one class + * with ' ' as separator. + */ +var add = exports.add = function add(element, classString) { + return trackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" ")); +}; + +/** + * Public inferface to remove classes from the document.body. + * @param {string} bodyClass The class string to be added. + * It may contain more then one class + * with ' ' as separator. + */ +var remove = exports.remove = function remove(element, classString) { + return untrackClass(element.classList, element.nodeName.toLowerCase() == "html" ? htmlClassList : docBodyClassList, classString.split(" ")); +}; \ No newline at end of file diff --git a/lib/helpers/focusManager.js b/lib/helpers/focusManager.js new file mode 100644 index 00000000..c66daaf0 --- /dev/null +++ b/lib/helpers/focusManager.js @@ -0,0 +1,116 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.resetState = resetState; +exports.log = log; +exports.handleBlur = handleBlur; +exports.handleFocus = handleFocus; +exports.markForFocusLater = markForFocusLater; +exports.returnFocus = returnFocus; +exports.popWithoutFocus = popWithoutFocus; +exports.setupScopedFocus = setupScopedFocus; +exports.teardownScopedFocus = teardownScopedFocus; + +var _tabbable = require("../helpers/tabbable"); + +var _tabbable2 = _interopRequireDefault(_tabbable); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var focusLaterElements = []; +var modalElement = null; +var needToFocus = false; + +/* eslint-disable no-console */ +/* istanbul ignore next */ +function resetState() { + focusLaterElements = []; +} + +/* istanbul ignore next */ +function log() { + if (process.env.NODE_ENV === "production") return; + console.log("focusManager ----------"); + focusLaterElements.forEach(function (f) { + var check = f || {}; + console.log(check.nodeName, check.className, check.id); + }); + console.log("end focusManager ----------"); +} +/* eslint-enable no-console */ + +function handleBlur() { + needToFocus = true; +} + +function handleFocus() { + if (needToFocus) { + needToFocus = false; + if (!modalElement) { + return; + } + // need to see how jQuery shims document.on('focusin') so we don't need the + // setTimeout, firefox doesn't support focusin, if it did, we could focus + // the element outside of a setTimeout. Side-effect of this implementation + // is that the document.body gets focus, and then we focus our element right + // after, seems fine. + setTimeout(function () { + if (modalElement.contains(document.activeElement)) { + return; + } + var el = (0, _tabbable2.default)(modalElement)[0] || modalElement; + el.focus(); + }, 0); + } +} + +function markForFocusLater() { + focusLaterElements.push(document.activeElement); +} + +/* eslint-disable no-console */ +function returnFocus() { + var preventScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + var toFocus = null; + try { + if (focusLaterElements.length !== 0) { + toFocus = focusLaterElements.pop(); + toFocus.focus({ preventScroll: preventScroll }); + } + return; + } catch (e) { + console.warn(["You tried to return focus to", toFocus, "but it is not in the DOM anymore"].join(" ")); + } +} +/* eslint-enable no-console */ + +function popWithoutFocus() { + focusLaterElements.length > 0 && focusLaterElements.pop(); +} + +function setupScopedFocus(element) { + modalElement = element; + + if (window.addEventListener) { + window.addEventListener("blur", handleBlur, false); + document.addEventListener("focus", handleFocus, true); + } else { + window.attachEvent("onBlur", handleBlur); + document.attachEvent("onFocus", handleFocus); + } +} + +function teardownScopedFocus() { + modalElement = null; + + if (window.addEventListener) { + window.removeEventListener("blur", handleBlur); + document.removeEventListener("focus", handleFocus); + } else { + window.detachEvent("onBlur", handleBlur); + document.detachEvent("onFocus", handleFocus); + } +} \ No newline at end of file diff --git a/lib/helpers/portalOpenInstances.js b/lib/helpers/portalOpenInstances.js new file mode 100644 index 00000000..4f36d224 --- /dev/null +++ b/lib/helpers/portalOpenInstances.js @@ -0,0 +1,78 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.log = log; +exports.resetState = resetState; + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +// Tracks portals that are open and emits events to subscribers + +var PortalOpenInstances = function PortalOpenInstances() { + var _this = this; + + _classCallCheck(this, PortalOpenInstances); + + this.register = function (openInstance) { + if (_this.openInstances.indexOf(openInstance) !== -1) { + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.warn("React-Modal: Cannot register modal instance that's already open"); + } + return; + } + _this.openInstances.push(openInstance); + _this.emit("register"); + }; + + this.deregister = function (openInstance) { + var index = _this.openInstances.indexOf(openInstance); + if (index === -1) { + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.warn("React-Modal: Unable to deregister " + openInstance + " as " + "it was never registered"); + } + return; + } + _this.openInstances.splice(index, 1); + _this.emit("deregister"); + }; + + this.subscribe = function (callback) { + _this.subscribers.push(callback); + }; + + this.emit = function (eventType) { + _this.subscribers.forEach(function (subscriber) { + return subscriber(eventType, + // shallow copy to avoid accidental mutation + _this.openInstances.slice()); + }); + }; + + this.openInstances = []; + this.subscribers = []; +}; + +var portalOpenInstances = new PortalOpenInstances(); + +/* eslint-disable no-console */ +/* istanbul ignore next */ +function log() { + console.log("portalOpenInstances ----------"); + console.log(portalOpenInstances.openInstances.length); + portalOpenInstances.openInstances.forEach(function (p) { + return console.log(p); + }); + console.log("end portalOpenInstances ----------"); +} + +/* istanbul ignore next */ +function resetState() { + portalOpenInstances = new PortalOpenInstances(); +} +/* eslint-enable no-console */ + +exports.default = portalOpenInstances; \ No newline at end of file diff --git a/lib/helpers/safeHTMLElement.js b/lib/helpers/safeHTMLElement.js new file mode 100644 index 00000000..d503b2a0 --- /dev/null +++ b/lib/helpers/safeHTMLElement.js @@ -0,0 +1,38 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.canUseDOM = exports.SafeNodeList = exports.SafeHTMLCollection = exports.SafeHTMLElement = undefined; + +var _exenv = require("exenv"); + +var _exenv2 = _interopRequireDefault(_exenv); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var EE = _exenv2.default; + +var NodeTypeElement = 1; + +var IHTMLElement = function IHTMLElement(props, propName) { + var element = props[propName]; + + if (!element || element.nodeType !== NodeTypeElement) return; + + var isValid = Boolean(element.setAttribute && element.removeAttribute); + + if (!isValid) { + return new Error("Warning: Invalid prop `" + propName + "` supplied to `Modal`"); + } +}; + +var SafeHTMLElement = exports.SafeHTMLElement = EE.canUseDOM ? IHTMLElement : {}; + +var SafeHTMLCollection = exports.SafeHTMLCollection = EE.canUseDOM ? window.HTMLCollection : {}; + +var SafeNodeList = exports.SafeNodeList = EE.canUseDOM ? window.NodeList : {}; + +var canUseDOM = exports.canUseDOM = EE.canUseDOM; + +exports.default = SafeHTMLElement; \ No newline at end of file diff --git a/lib/helpers/scopeTab.js b/lib/helpers/scopeTab.js new file mode 100644 index 00000000..ddcc4d1f --- /dev/null +++ b/lib/helpers/scopeTab.js @@ -0,0 +1,89 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = scopeTab; + +var _tabbable = require("./tabbable"); + +var _tabbable2 = _interopRequireDefault(_tabbable); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function scopeTab(node, event) { + var tabbable = (0, _tabbable2.default)(node); + + if (!tabbable.length) { + // Do nothing, since there are no elements that can receive focus. + event.preventDefault(); + return; + } + + var target = void 0; + + var shiftKey = event.shiftKey; + var head = tabbable[0]; + var tail = tabbable[tabbable.length - 1]; + + // proceed with default browser behavior on tab. + // Focus on last element on shift + tab. + if (node === document.activeElement) { + if (!shiftKey) return; + target = tail; + } + + if (tail === document.activeElement && !shiftKey) { + target = head; + } + + if (head === document.activeElement && shiftKey) { + target = tail; + } + + if (target) { + event.preventDefault(); + target.focus(); + return; + } + + // Safari radio issue. + // + // Safari does not move the focus to the radio button, + // so we need to force it to really walk through all elements. + // + // This is very error prone, since we are trying to guess + // if it is a safari browser from the first occurence between + // chrome or safari. + // + // The chrome user agent contains the first ocurrence + // as the 'chrome/version' and later the 'safari/version'. + var checkSafari = /(\bChrome\b|\bSafari\b)\//.exec(navigator.userAgent); + var isSafariDesktop = checkSafari != null && checkSafari[1] != "Chrome" && /\biPod\b|\biPad\b/g.exec(navigator.userAgent) == null; + + // If we are not in safari desktop, let the browser control + // the focus + if (!isSafariDesktop) return; + + var x = tabbable.indexOf(document.activeElement); + + if (x > -1) { + x += shiftKey ? -1 : 1; + } + + target = tabbable[x]; + + // If the tabbable element does not exist, + // focus head/tail based on shiftKey + if (typeof target === "undefined") { + event.preventDefault(); + target = shiftKey ? tail : head; + target.focus(); + return; + } + + event.preventDefault(); + + target.focus(); +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/helpers/tabbable.js b/lib/helpers/tabbable.js new file mode 100644 index 00000000..4737321a --- /dev/null +++ b/lib/helpers/tabbable.js @@ -0,0 +1,60 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = findTabbableDescendants; +/*! + * 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/ + */ + +var tabbableNode = /input|select|textarea|button|object/; + +function hidesContents(element) { + var zeroSize = element.offsetWidth <= 0 && element.offsetHeight <= 0; + + // If the node is empty, this is good enough + if (zeroSize && !element.innerHTML) return true; + + // Otherwise we need to check some styles + var style = window.getComputedStyle(element); + return zeroSize ? style.getPropertyValue("overflow") !== "visible" || + // if 'overflow: visible' set, check if there is actually any overflow + element.scrollWidth <= 0 && element.scrollHeight <= 0 : style.getPropertyValue("display") == "none"; +} + +function visible(element) { + var parentElement = element; + while (parentElement) { + if (parentElement === document.body) break; + if (hidesContents(parentElement)) return false; + parentElement = parentElement.parentNode; + } + return true; +} + +function focusable(element, isTabIndexNotNaN) { + var nodeName = element.nodeName.toLowerCase(); + var res = tabbableNode.test(nodeName) && !element.disabled || (nodeName === "a" ? element.href || isTabIndexNotNaN : isTabIndexNotNaN); + return res && visible(element); +} + +function tabbable(element) { + var tabIndex = element.getAttribute("tabindex"); + if (tabIndex === null) tabIndex = undefined; + var isTabIndexNaN = isNaN(tabIndex); + return (isTabIndexNaN || tabIndex >= 0) && focusable(element, !isTabIndexNaN); +} + +function findTabbableDescendants(element) { + return [].slice.call(element.querySelectorAll("*"), 0).filter(tabbable); +} +module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 00000000..1e7bab9c --- /dev/null +++ b/lib/index.js @@ -0,0 +1,14 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _Modal = require("./components/Modal"); + +var _Modal2 = _interopRequireDefault(_Modal); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Modal2.default; +module.exports = exports["default"]; \ No newline at end of file diff --git a/package.json b/package.json index 849eab91..5ec69456 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "react-modal", "version": "3.13.1", "description": "Accessible modal dialog component for React.JS", - "main": "./src/index.js", - "module": "./src/index.js", + "main": "./lib/index.js", + "module": "./lib/index.js", "repository": { "type": "git", "url": "https://github.com/reactjs/react-modal.git"