@devseed-ui/modal - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

CHANGELOG.md

 # @devseed-ui/modal
 
+## 2.0.0
+
+### Major Changes
+
+- Update components to make them SSR ready.
+- Rewrite component using functional components and hooks
+
 ## 1.1.0
@@ -4,0 +11,0 @@

dist/index.node.js

@@ -1,2 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(global,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r,size:a},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},S=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);S.propTypes={},S.defaultProps={component:"div",childFactory:function(e){return e}};var T=S,w=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(T,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);w.propTypes={};var j,P,N=w;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return T})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
-//# sourceMappingURL=index.node.js.map
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(global,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Modal=f,Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}});var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=c();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(0)),i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return c=function(){return e},e}function d(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var p=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return"function"==typeof e?e(t):n};function f(e){var t=e.id,n=e.title,r=e.content,a=e.footerContent,c=e.closeButton,m=e.size,h=e.revealed,y=e.className,v=e.onCloseClick,E=e.onOverlayClick,b=e.renderContents,g=e.renderHeader,x=e.renderHeadline,C=e.renderToolbar,O=e.renderBody,M=e.renderFooter,S=(0,o.useRef)(f.generateUUID()),k=d((0,o.useState)(!1),2),T=k[0],j=k[1],P=d((0,o.useState)(null),2),w=P[0],N=P[1];if((0,o.useEffect)((function(){var e=function(e){h&&27===e.keyCode&&(e.preventDefault(),v(e))};return document.addEventListener("keyup",e),function(){document.removeEventListener("keyup",e)}}),[h]),(0,o.useEffect)((function(){var e=document.createElement("div");return e.className="modal-portal-".concat(S.current),document.body.appendChild(e),N(e),j(!0),function(){document.body.removeChild(e)}}),[]),!T)return null;var _=["modal",y],V=function(e){e.preventDefault(),v(e)},D={close:V};return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:h,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:_.join(" "),key:"modal-".concat(t),onClick:function(e){e.target===e.currentTarget&&"function"==typeof E&&E(e)},id:t,size:m},o.default.createElement(u.BodyUnscrollable,{revealed:h}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:m},p(b,D,o.default.createElement(o.default.Fragment,null,p(g,D,o.default.createElement(u.ModalHeader,null,p(x,D,o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))),p(C,D,c&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:V},"Close"))))),p(O,D,o.default.createElement(u.ModalBody,null,r)),p(M,D,a?o.default.createElement(u.ModalFooter,null,a):null)))))),w)}f.generateUUID=function(){return Math.random().toString(36).substr(2,5)},f.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},f.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var m=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=m;var h=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=h;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",m="entered",h=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=m:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==m&&(t=f):n!==f&&n!==m||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:m},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:m},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}h.contextType=p,h.propTypes={},h.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},h.UNMOUNTED=0,h.EXITED=1,h.ENTERING=2,h.ENTERED=3,h.EXITING=4;var v=h,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function O(e,t,n){return null!=n[t]?n[t]:e.props[t]}function M(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:O(a,"exit",e),enter:O(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:O(a,"exit",e),enter:O(a,"enter",e)})}})),o}var S=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},k=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:O(e,"appear",n),enter:O(e,"enter",n),exit:O(e,"exit",n)})}))):M(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=S(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);k.propTypes={},k.defaultProps={component:"div",childFactory:function(e){return e}};var T=k,j=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(T,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);j.propTypes={};var P,w,N=j;var _="out-in",V="in-out",D=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},L=((P={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:D(t,"onExited",(function(){n(f,null)}))})},P[V]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:D(r,"onEntered",(function(){n(f)}))})]},P),A=((w={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:D(t,"onEntered",(function(){n(m,s.a.cloneElement(t,{in:!0}))}))})},w[V]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:D(t,"onExited",(function(){r(m,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},w),F=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:m,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===V?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=A[r](l);break;case"exiting":e=L[r](l);break;case m:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);F.propTypes={},F.defaultProps={mode:_};var H=F;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return H})),n.d(t,"TransitionGroup",(function(){return T})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));

dist/index.web.js

@@ -1,2 +0,1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r,size:a},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},w=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);w.propTypes={},w.defaultProps={component:"div",childFactory:function(e){return e}};var S=w,T=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(S,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);T.propTypes={};var j,P,N=T;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return S})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
-//# sourceMappingURL=index.web.js.map
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},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=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Modal=f,Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}});var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=c();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(0)),i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return c=function(){return e},e}function d(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var p=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return"function"==typeof e?e(t):n};function f(e){var t=e.id,n=e.title,r=e.content,a=e.footerContent,c=e.closeButton,m=e.size,h=e.revealed,y=e.className,v=e.onCloseClick,E=e.onOverlayClick,b=e.renderContents,g=e.renderHeader,x=e.renderHeadline,C=e.renderToolbar,O=e.renderBody,M=e.renderFooter,S=(0,o.useRef)(f.generateUUID()),k=d((0,o.useState)(!1),2),T=k[0],w=k[1],j=d((0,o.useState)(null),2),P=j[0],N=j[1];if((0,o.useEffect)((function(){var e=function(e){h&&27===e.keyCode&&(e.preventDefault(),v(e))};return document.addEventListener("keyup",e),function(){document.removeEventListener("keyup",e)}}),[h]),(0,o.useEffect)((function(){var e=document.createElement("div");return e.className="modal-portal-".concat(S.current),document.body.appendChild(e),N(e),w(!0),function(){document.body.removeChild(e)}}),[]),!T)return null;var _=["modal",y],V=function(e){e.preventDefault(),v(e)},D={close:V};return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:h,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:_.join(" "),key:"modal-".concat(t),onClick:function(e){e.target===e.currentTarget&&"function"==typeof E&&E(e)},id:t,size:m},o.default.createElement(u.BodyUnscrollable,{revealed:h}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:m},p(b,D,o.default.createElement(o.default.Fragment,null,p(g,D,o.default.createElement(u.ModalHeader,null,p(x,D,o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))),p(C,D,c&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:V},"Close"))))),p(O,D,o.default.createElement(u.ModalBody,null,r)),p(M,D,a?o.default.createElement(u.ModalFooter,null,a):null)))))),P)}f.generateUUID=function(){return Math.random().toString(36).substr(2,5)},f.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},f.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var m=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=m;var h=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=h;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",m="entered",h=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=m:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==m&&(t=f):n!==f&&n!==m||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:m},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:m},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}h.contextType=p,h.propTypes={},h.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},h.UNMOUNTED=0,h.EXITED=1,h.ENTERING=2,h.ENTERED=3,h.EXITING=4;var v=h,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function O(e,t,n){return null!=n[t]?n[t]:e.props[t]}function M(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:O(a,"exit",e),enter:O(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:O(a,"exit",e),enter:O(a,"enter",e)})}})),o}var S=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},k=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:O(e,"appear",n),enter:O(e,"enter",n),exit:O(e,"exit",n)})}))):M(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=S(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);k.propTypes={},k.defaultProps={component:"div",childFactory:function(e){return e}};var T=k,w=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(T,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);w.propTypes={};var j,P,N=w;var _="out-in",V="in-out",D=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},L=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:D(t,"onExited",(function(){n(f,null)}))})},j[V]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:D(r,"onEntered",(function(){n(f)}))})]},j),A=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:D(t,"onEntered",(function(){n(m,s.a.cloneElement(t,{in:!0}))}))})},P[V]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:D(t,"onExited",(function(){r(m,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),F=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:m,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===V?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=A[r](l);break;case"exiting":e=L[r](l);break;case m:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);F.propTypes={},F.defaultProps={mode:_};var H=F;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return H})),n.d(t,"TransitionGroup",(function(){return T})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));

package.json

 {
   "name": "@devseed-ui/modal",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "devseed UI Kit Modal",
@@ -12,2 +12,14 @@ "browser": "./dist/index.web.js",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/developmentseed/ui-library-seed.git"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "front-end",
+    "responsive",
+    "styled-components",
+    "web"
+  ],
   "publishConfig": {
@@ -14,0 +26,0 @@ "access": "public"

README.md

@@ -1,2 +0,2 @@
-# Modal
+# @devseed-ui/modal
 
@@ -3,0 +3,0 @@ Displays a modal component which is portaled to the body to ensure is appears over all other elements

src/index.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -19,2 +19,18 @@ import { PropTypes as T } from 'prop-types';
 /**
+ * Returns the result of the render function is one is provided. Otherwise
+ * return the fallback component.
+ *
+ * @example
+ * tryRenderFunction(renderBody, {}, (
+ *  <p>The default body</p>
+ * ))
+ *
+ * @param {function} fn Render function
+ * @param {object} bag Object to pass to the render function
+ * @param {Component} fallback Fallback component if no function is provided.
+ */
+const tryRenderFunction = (fn, bag = {}, fallback = null) =>
+  typeof fn === 'function' ? fn(bag) : fallback;
+
+/**
  * React modal component.
@@ -69,169 +85,166 @@ * Displays a modal component which is portaled to the body to ensure is appears
  */
-class Modal extends React.Component {
-  constructor(props) {
-    super(props);
+function Modal(props) {
+  const {
+    id,
+    title,
+    content,
+    footerContent,
+    closeButton,
+    size,
+    revealed,
+    className,
+    onCloseClick,
+    onOverlayClick,
+    renderContents,
+    renderHeader,
+    renderHeadline,
+    renderToolbar,
+    renderBody,
+    renderFooter,
+  } = props;
 
-    this.onOverlayClick = this.onOverlayClick.bind(this);
-    this.onCloseClick = this.onCloseClick.bind(this);
-    this.keyListener = this.keyListener.bind(this);
+  const uuid = useRef(Modal.generateUUID());
+  const [hasMounted, setHasMounted] = useState(false);
+  const [modalElement, setModalElement] = useState(null);
 
-    this.el = document.createElement('div');
-    this.uid = Modal.generateUUID();
-    this.el.className = `modal-portal-${this.uid}`;
-    this.rootEl = document.body;
-    if (!this.rootEl) throw new Error('Portal root element does not exist.');
-  }
+  // Key listener for esc key.
+  useEffect(() => {
+    const keyListener = e => {
+      // ESC.
+      if (revealed && e.keyCode === 27) {
+        e.preventDefault();
+        onCloseClick(e);
+      }
+    };
+    document.addEventListener('keyup', keyListener);
 
-  componentDidMount() {
-    document.addEventListener('keyup', this.keyListener);
-    this.rootEl.appendChild(this.el);
-  }
+    return () => {
+      document.removeEventListener('keyup', keyListener);
+    };
+  }, [revealed]);
 
-  componentWillUnmount() {
-    document.removeEventListener('keyup', this.keyListener);
-    this.rootEl.removeChild(this.el);
-  }
+  // Will be called on initial mount.
+  useEffect(() => {
+    const el = document.createElement('div');
+    el.className = `modal-portal-${uuid.current}`;
+    document.body.appendChild(el);
 
-  keyListener(e) {
-    const { revealed, onCloseClick } = this.props;
+    setModalElement(el);
+    setHasMounted(true);
 
-    // ESC.
-    if (revealed && e.keyCode === 27) {
-      e.preventDefault();
-      onCloseClick();
-    }
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, []);
+
+  // Note:
+  // This check is necessary for this component to work when used with SSR.
+  // While react-portal will itself check if window is available, that is not
+  // enough to ensure that there aren't discrepancies between what the server
+  // renders and what the client renders, as the client *will* have access to
+  // the window. Therefore, we should only render the root level portal element
+  // once the component has actually mounted, as determined by a state variable.
+  if (!hasMounted) {
+    return null;
   }
 
-  onOverlayClick(e) {
-    const { onOverlayClick } = this.props;
-
+  const _onOverlayClick = e => {
     // Prevent children from triggering this.
     if (e.target === e.currentTarget && typeof onOverlayClick === 'function') {
-      onOverlayClick.call(this, e);
+      onOverlayClick(e);
     }
-  }
+  };
 
-  onCloseClick(e) {
+  const klasses = ['modal', className];
+
+  const _onCloseClick = e => {
     e.preventDefault();
-    // eslint-disable-next-line
-    this.props.onCloseClick(e);
-  }
+    onCloseClick(e);
+  };
 
-  renderContents() {
-    const { renderContents } = this.props;
+  const fnBag = {
+    close: _onCloseClick,
+  };
 
-    if (typeof renderContents === 'function') {
-      return renderContents({ close: this.onCloseClick });
-    }
-
-    return (
-      <React.Fragment>
-        {this.renderHeader()}
-        {this.renderBody()}
-        {this.renderFooter()}
-      </React.Fragment>
-    );
-  }
-
-  renderHeader() {
-    const { renderHeader } = this.props;
-
-    if (typeof renderHeader === 'function') {
-      return renderHeader({ close: this.onCloseClick });
-    }
-
-    return (
-      <ModalHeader>
-        {this.renderHeadline()}
-        {this.renderToolbar()}
-      </ModalHeader>
-    );
-  }
-
-  renderHeadline() {
-    const { renderHeadline, title } = this.props;
-
-    if (typeof renderHeadline === 'function') {
-      return renderHeadline({ close: this.onCloseClick });
-    }
-
-    return (
-      <ModalHeadline>
-        <h1>{title}</h1>
-      </ModalHeadline>
-    );
-  }
-
-  renderToolbar() {
-    const { renderToolbar, closeButton } = this.props;
-
-    if (typeof renderToolbar === 'function') {
-      return renderToolbar({ close: this.onCloseClick });
-    }
-
-    return (
-      closeButton && (
-        <ModalToolbar>
-          <Button
-            useIcon="xmark--small"
-            size="small"
-            hideText
-            onClick={this.onCloseClick}
-          >
-            Close
-          </Button>
-        </ModalToolbar>
-      )
-    );
-  }
-
-  renderBody() {
-    const { renderBody, content } = this.props;
-
-    if (typeof renderBody === 'function') {
-      return renderBody({ close: this.onCloseClick });
-    }
-
-    return <ModalBody>{content}</ModalBody>;
-  }
-
-  renderFooter() {
-    const { renderFooter, footerContent } = this.props;
-
-    if (typeof renderFooter === 'function') {
-      return renderFooter({ close: this.onCloseClick });
-    }
-
-    return footerContent ? <ModalFooter>{footerContent}</ModalFooter> : null;
-  }
-
-  render() {
-    const { className, revealed, id, size } = this.props;
-
-    const klasses = ['modal', ...(className ? className.split(' ') : [])];
-
-    return createPortal(
-      <CSSTransition
-        in={revealed}
-        appear
-        unmountOnExit
-        classNames="modal"
-        timeout={{ enter: 400, exit: 400 }}
+  return createPortal(
+    <CSSTransition
+      in={revealed}
+      appear
+      unmountOnExit
+      classNames="modal"
+      timeout={{ enter: 400, exit: 400 }}
+    >
+      <ModalWrapper
+        className={klasses.join(' ')}
+        key={`modal-${id}`}
+        onClick={_onOverlayClick}
+        id={id}
+        size={size}
       >
-        <ModalWrapper
-          className={klasses.join(' ')}
-          key={`modal-${id}`}
-          onClick={this.onOverlayClick}
-          id={id}
-          size={size}
-        >
-          <BodyUnscrollable revealed={revealed} />
-          <ModalContents className="modal__contents" size={size}>
-            {this.renderContents()}
-          </ModalContents>
-        </ModalWrapper>
-      </CSSTransition>,
-      this.el,
-    );
-  }
+        <BodyUnscrollable revealed={revealed} />
+        <ModalContents className="modal__contents" size={size}>
+          {/* Contents */}
+          {tryRenderFunction(
+            renderContents,
+            fnBag,
+            <React.Fragment>
+              {/* Header */}
+              {tryRenderFunction(
+                renderHeader,
+                fnBag,
+                <ModalHeader>
+                  {/* Headline */}
+                  {tryRenderFunction(
+                    renderHeadline,
+                    fnBag,
+                    <ModalHeadline>
+                      <h1>{title}</h1>
+                    </ModalHeadline>,
+                  )}
+                  {/* END Headline */}
+                  {/* Toolbar */}
+                  {tryRenderFunction(
+                    renderToolbar,
+                    fnBag,
+                    closeButton && (
+                      <ModalToolbar>
+                        <Button
+                          useIcon="xmark--small"
+                          size="small"
+                          hideText
+                          onClick={_onCloseClick}
+                        >
+                          Close
+                        </Button>
+                      </ModalToolbar>
+                    ),
+                  )}
+                  {/* END Toolbar */}
+                </ModalHeader>,
+              )}
+              {/* END Header */}
+              {/* Body */}
+              {tryRenderFunction(
+                renderBody,
+                fnBag,
+                <ModalBody>{content}</ModalBody>,
+              )}
+              {/* END Body */}
+              {/* Footer */}
+              {tryRenderFunction(
+                renderFooter,
+                fnBag,
+                footerContent ? (
+                  <ModalFooter>{footerContent}</ModalFooter>
+                ) : null,
+              )}
+              {/* END Footer */}
+            </React.Fragment>,
+          )}
+          {/* END Contents */}
+        </ModalContents>
+      </ModalWrapper>
+    </CSSTransition>,
+    modalElement,
+  );
 }
@@ -238,0 +251,0 @@

src/Modal.spec.js

 import React from 'react';
+import { renderToString } from 'react-dom/server';
 import { cleanup, waitFor, fireEvent } from '@testing-library/react';
@@ -165,2 +166,7 @@
   });
+
+  it('renders SSR compatible <Modal />', () => {
+    const renderOnServer = () => renderToString(<Modal id="modal" revealed />);
+    expect(renderOnServer).not.toThrow();
+  });
 });

src/Modal.stories.js

@@ -6,2 +6,3 @@ import React, { useState } from 'react';
 import { Button } from '@devseed-ui/button';
+import { CollecticonsGlobalStyle } from '@devseed-ui/collecticons';
 import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider';
@@ -21,2 +22,3 @@
     <DevseedUiThemeProvider>
+      <CollecticonsGlobalStyle />
       <Button onClick={() => setRevealed(true)} variation="primary-raised-dark">
@@ -23,0 +25,0 @@ Show Modal

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

291613

decreased by-0.57%

Lines of code

854

decreased by-15.53%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes