react-overlay-component/dist/index.js

npm package to render overlay/modal with backdrop

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=e(t),n=e(require("prop-types"));function r(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,u(n.key),n)}}function a(e,t,o){return(t=u(t))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function c(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function y(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return c(e)}function p(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,n=l(e);if(t){var r=l(this).constructor;o=Reflect.construct(n,arguments,r)}else o=n.apply(this,arguments);return y(this,o)}}function u(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}var v={"overlay-wrapper":"styles_overlay-wrapper__O0Zm8",backdrop:"styles_backdrop__2LNQS","overlay-content":"styles_overlay-content__1qZR_","with-outline":"styles_with-outline__ogLFa","overlay-close":"styles_overlay-close__3e1ke","overlay-open":"styles_overlay-open__3VYiy","overlay-opening":"styles_overlay-opening__1xWk2",fadeIn:"styles_fadeIn__N7HUl","overlay-closed":"styles_overlay-closed__DwoRv","overlay-hidden":"styles_overlay-hidden__3xj42","overlay-closing":"styles_overlay-closing__h8wXL","scroll-lock":"styles_scroll-lock__1ANm6",fadeOut:"styles_fadeOut__1FkJy"};!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".styles_overlay-wrapper__O0Zm8 {\n  top: var(--top, 0);\n  bottom: 0;\n  left: 0;\n  right: 0;\n  position: fixed;\n  overflow: auto;\n  display: flex;\n  transition: opacity 0.5s;\n  z-index: 999;\n}\n.styles_overlay-wrapper__O0Zm8 .styles_backdrop__2LNQS {\n  top: var(--top, 0);\n  bottom: 0;\n  left: 0;\n  right: 0;\n  position: fixed;\n  overflow: auto;\n  display: flex;\n  background-color: rgba(50, 50, 50, 0.88);\n  padding: 2em 0;\n}\n.styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_ {\n  padding: 2em;\n  background-color: white;\n  max-width: 600px;\n  position: relative;\n  margin: auto;\n  transition: opacity 0.85s;\n}\n.styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_.styles_with-outline__ogLFa:focus {\n  outline: 2px solid #0366d6;\n  outline-offset: 2px;\n}\n.styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_ .styles_overlay-close__3e1ke {\n  top: 0;\n  right: 0;\n  position: absolute;\n  cursor: pointer;\n  width: 45px;\n  height: 45px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.styles_overlay-wrapper__O0Zm8.styles_overlay-open__3VYiy {\n  opacity: 1;\n}\n.styles_overlay-wrapper__O0Zm8.styles_overlay-opening__1xWk2 {\n  animation: styles_fadeIn__N7HUl 0.5s;\n}\n.styles_overlay-wrapper__O0Zm8.styles_overlay-closed__DwoRv, .styles_overlay-wrapper__O0Zm8.styles_overlay-hidden__3xj42 {\n  display: none;\n  opacity: 0;\n}\n.styles_overlay-wrapper__O0Zm8.styles_overlay-closing__h8wXL {\n  opacity: 0;\n}\n\n.styles_scroll-lock__1ANm6 {\n  overflow: hidden;\n}\n\n@keyframes styles_fadeIn__N7HUl {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes styles_fadeOut__1FkJy {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}");var f=function(e){var t=e.overlayState,n=e.clickDismiss,r=void 0===n||n,a=e.closeOverlay,i=t===d.OPENING||t===d.CLOSING;return o.createElement("div",{className:v.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!i&&t&&a(),e.stopPropagation()}},e.children)};f.propTypes={overlayState:n.string.isRequired,clickDismiss:n.bool,closeOverlay:n.func,children:n.element};var d={OPEN:"OPEN",OPENING:"OPENING",HIDDEN:"HIDDEN",CLOSED:"CLOSED",CLOSING:"CLOSING"},_=function(e){var t=document.getElementsByTagName("body")[0],o=v["scroll-lock"];e?t.classList.contains(o)||t.classList.add(o):Object.values(O.tracker).filter(Boolean).length||t.classList.remove(o)},h=function(e){return e&&e.focus()},O=function(e){!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}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(O,t.Component);var n,l,y,u=p(O);function O(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,O),a(c(t=u.call(this,e)),"updateOverlayTracker",(function(){O.tracker[t.state.overlayId]=t.props.isOpen})),a(c(t),"keyPress",(function(e){if(27===(e.keyCode?e.keyCode:e.which)){var o=t.props,n=o.isOpen,r=o.closeOverlay;n&&r(),e.stopPropagation()}})),a(c(t),"shiftFocusToOverlay",(function(){var e=t.ref.current;h(e)})),a(c(t),"shiftFocusToEle",(function(e){h(e),_(!1)})),a(c(t),"handleCloseOverlay",(function(e){e.preventDefault(),t.props.closeOverlay&&t.props.closeOverlay()})),t.state={overlayState:d.HIDDEN,prevState:e.isOpen,initiator:null,overlayId:O.getNewOverlayId()},t.ref=o.createRef(),t}return n=O,y=[{key:"getNewOverlayId",value:function(){return this.trackerId++,"overlay-".concat(this.trackerId)}},{key:"getDerivedStateFromProps",value:function(e,t){var o=e.isOpen,n=e.configs,r=(n=void 0===n?{}:n).animate,a=void 0===r||r;return o===t.prevState?null:o?(_(!0),{overlayState:a?d.OPENING:d.OPEN,prevState:o,initiator:document.activeElement}):{overlayState:a?d.CLOSING:d.CLOSED,prevState:o}}}],(l=[{key:"componentDidMount",value:function(){this.updateOverlayTracker()}},{key:"componentDidUpdate",value:function(){var e=this,t=(this.props.configs||{}).animate,o=void 0===t||t,n=this.state,r=n.overlayState,a=n.initiator;this.updateOverlayTracker(),o?r===d.OPENING?(this.shiftFocusToOverlay(),setTimeout((function(){e.setState({overlayState:d.OPEN})}),500)):r===d.CLOSING&&(this.shiftFocusToEle(a),setTimeout((function(){e.setState({overlayState:d.CLOSED})}),500)):r===d.OPEN?this.shiftFocusToOverlay():this.shiftFocusToEle(a)}},{key:"render",value:function(){var e=this,t=this.props,n=t.children,r=t.isOpen,a=t.closeOverlay,l=t.configs,s=void 0===l?{}:l,c=(s.animate,s.top),y=void 0===c?0:c,p=s.contentClass,u=void 0===p?"":p,_=s.clickDismiss,h=void 0===_||_,O=s.escapeDismiss,m=void 0===O||O,b=s.focusOutline,g=void 0!==b&&b,w=s.showCloseIcon,k=void 0===w||w,N=this.state.overlayState,E={className:[v["overlay-wrapper"],N===d.HIDDEN?v["overlay-hidden"]:"",N===d.OPEN?v["overlay-open"]:"",N===d.OPENING?v["overlay-opening"]:"",N===d.CLOSING?v["overlay-closing"]:"",N===d.CLOSED?v["overlay-closed"]:""].filter(Boolean).join(" "),onKeyPress:m?function(t){return e.keyPress(t)}:void 0,onKeyDown:m?function(t){return e.keyPress(t)}:void 0,"aria-hidden":!r},S={className:[v["overlay-content"],g?v["with-outline"]:"",u].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},P={"--top":y};return o.createElement("div",i({},E,{style:P}),o.createElement(f,{overlayState:N,clickDismiss:h,closeOverlay:a},o.createElement("div",i({ref:this.ref},S),a&&k?o.createElement("div",{className:v["overlay-close"],role:"button",tabIndex:"0",onClick:a,onKeyPress:this.handleCloseOverlay,dangerouslySetInnerHTML:{__html:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'}}):null,n)))}}])&&r(n.prototype,l),y&&r(n,y),Object.defineProperty(n,"prototype",{writable:!1}),O}();a(O,"tracker",{}),a(O,"trackerId",0),O.propTypes={isOpen:n.bool.isRequired,children:n.any,configs:n.object,closeOverlay:n.func,showCloseIcon:n.bool},exports.STATES=d,exports.default=O;