react-overlay-component/dist/index.es.js

npm package to render overlay/modal with backdrop

import e,{Component as t}from"react";import o from"prop-types";function n(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,p(n.key),n)}}function r(e,t,o){return(t=p(t))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function a(){return(a=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 i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function c(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 s(e)}function y(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=i(e);if(t){var r=i(this).constructor;o=Reflect.construct(n,arguments,r)}else o=n.apply(this,arguments);return c(this,o)}}function p(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 u={"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 v=function(t){var o=t.overlayState,n=t.clickDismiss,r=void 0===n||n,a=t.closeOverlay,i=o===f.OPENING||o===f.CLOSING;return e.createElement("div",{className:u.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!i&&t&&a(),e.stopPropagation()}},t.children)};v.propTypes={overlayState:o.string.isRequired,clickDismiss:o.bool,closeOverlay:o.func,children:o.element};var f={OPEN:"OPEN",OPENING:"OPENING",HIDDEN:"HIDDEN",CLOSED:"CLOSED",CLOSING:"CLOSING"},d=function(e){var t=document.getElementsByTagName("body")[0],o=u["scroll-lock"];e?t.classList.contains(o)||t.classList.add(o):Object.values(h.tracker).filter(Boolean).length||t.classList.remove(o)},_=function(e){return e&&e.focus()},h=function(o){!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&&l(e,t)}(O,t);var i,c,p,h=y(O);function O(t){var o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,O),r(s(o=h.call(this,t)),"updateOverlayTracker",(function(){O.tracker[o.state.overlayId]=o.props.isOpen})),r(s(o),"keyPress",(function(e){if(27===(e.keyCode?e.keyCode:e.which)){var t=o.props,n=t.isOpen,r=t.closeOverlay;n&&r(),e.stopPropagation()}})),r(s(o),"shiftFocusToOverlay",(function(){var e=o.ref.current;_(e)})),r(s(o),"shiftFocusToEle",(function(e){_(e),d(!1)})),r(s(o),"handleCloseOverlay",(function(e){e.preventDefault(),o.props.closeOverlay&&o.props.closeOverlay()})),o.state={overlayState:f.HIDDEN,prevState:t.isOpen,initiator:null,overlayId:O.getNewOverlayId()},o.ref=e.createRef(),o}return i=O,p=[{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?(d(!0),{overlayState:a?f.OPENING:f.OPEN,prevState:o,initiator:document.activeElement}):{overlayState:a?f.CLOSING:f.CLOSED,prevState:o}}}],(c=[{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===f.OPENING?(this.shiftFocusToOverlay(),setTimeout((function(){e.setState({overlayState:f.OPEN})}),500)):r===f.CLOSING&&(this.shiftFocusToEle(a),setTimeout((function(){e.setState({overlayState:f.CLOSED})}),500)):r===f.OPEN?this.shiftFocusToOverlay():this.shiftFocusToEle(a)}},{key:"render",value:function(){var t=this,o=this.props,n=o.children,r=o.isOpen,i=o.closeOverlay,l=o.configs,s=void 0===l?{}:l,c=(s.animate,s.top),y=void 0===c?0:c,p=s.contentClass,d=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:[u["overlay-wrapper"],N===f.HIDDEN?u["overlay-hidden"]:"",N===f.OPEN?u["overlay-open"]:"",N===f.OPENING?u["overlay-opening"]:"",N===f.CLOSING?u["overlay-closing"]:"",N===f.CLOSED?u["overlay-closed"]:""].filter(Boolean).join(" "),onKeyPress:m?function(e){return t.keyPress(e)}:void 0,onKeyDown:m?function(e){return t.keyPress(e)}:void 0,"aria-hidden":!r},S={className:[u["overlay-content"],g?u["with-outline"]:"",d].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},P={"--top":y};return e.createElement("div",a({},E,{style:P}),e.createElement(v,{overlayState:N,clickDismiss:h,closeOverlay:i},e.createElement("div",a({ref:this.ref},S),i&&k?e.createElement("div",{className:u["overlay-close"],role:"button",tabIndex:"0",onClick:i,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)))}}])&&n(i.prototype,c),p&&n(i,p),Object.defineProperty(i,"prototype",{writable:!1}),O}();r(h,"tracker",{}),r(h,"trackerId",0),h.propTypes={isOpen:o.bool.isRequired,children:o.any,configs:o.object,closeOverlay:o.func,showCloseIcon:o.bool};export default h;export{f as STATES};