react-overlay-component - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.es.js

@@ -1,1 +0,1 @@
-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,n.key,n)}}function r(e,t,o){return 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||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:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}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){return!t||"object"!=typeof t&&"function"!=typeof t?c(e):t}var p={"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  .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  .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    .styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_.styles_with-outline__ogLFa:focus {\n      outline: 2px solid #0366d6;\n      outline-offset: 2px; }\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  .styles_overlay-wrapper__O0Zm8.styles_overlay-open__3VYiy {\n    opacity: 1; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-opening__1xWk2 {\n    animation: styles_fadeIn__N7HUl 0.5s; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closed__DwoRv, .styles_overlay-wrapper__O0Zm8.styles_overlay-hidden__3xj42 {\n    display: none;\n    opacity: 0; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closing__h8wXL {\n    opacity: 0; }\n\n.styles_scroll-lock__1ANm6 {\n  overflow: hidden; }\n\n@keyframes styles_fadeIn__N7HUl {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n\n@keyframes styles_fadeOut__1FkJy {\n  0% {\n    opacity: 1; }\n  100% {\n    opacity: 0; } }\n");var u=function(t){var o=t.overlayState,n=t.clickDismiss,r=void 0===n||n,a=t.closeOverlay,l=o===v.OPENING||o===v.CLOSING;return e.createElement("div",{className:p.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!l&&t&&a(),e.stopPropagation()}},t.children)};u.propTypes={overlayState:o.string.isRequired,clickDismiss:o.bool,closeOverlay:o.func,children:o.element};var v={OPEN:"OPEN",OPENING:"OPENING",HIDDEN:"HIDDEN",CLOSED:"CLOSED",CLOSING:"CLOSING"},f=function(e){var t=document.getElementsByTagName("body")[0],o=p["scroll-lock"];e?t.classList.contains(o)||t.classList.add(o):Object.values(_.tracker).filter(Boolean).length||t.classList.remove(o)},d=function(e){return e&&e.focus()},_=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}}),t&&s(e,t)}(w,t);var _,h,O,m,g=(_=w,function(){var e,t=l(_);if(i()){var o=l(this).constructor;e=Reflect.construct(t,arguments,o)}else e=t.apply(this,arguments);return y(this,e)});function w(t){var o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,w),r(c(o=g.call(this,t)),"updateOverlayTracker",(function(){w.tracker[o.state.overlayId]=o.props.isOpen})),r(c(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(c(o),"shiftFocusToOverlay",(function(){var e=o.ref.current;d(e)})),r(c(o),"shiftFocusToEle",(function(e){d(e),f(!1)})),r(c(o),"handleCloseOverlay",(function(e){e.preventDefault(),o.props.closeOverlay&&o.props.closeOverlay()})),o.state={overlayState:v.HIDDEN,prevState:t.isOpen,initiator:null,overlayId:w.getNewOverlayId()},o.ref=e.createRef(),o}return h=w,m=[{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?(f(!0),{overlayState:a?v.OPENING:v.OPEN,prevState:o,initiator:document.activeElement}):{overlayState:a?v.CLOSING:v.CLOSED,prevState:o}}}],(O=[{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===v.OPENING?(this.shiftFocusToOverlay(),setTimeout((function(){e.setState({overlayState:v.OPEN})}),500)):r===v.CLOSING&&(this.shiftFocusToEle(a),setTimeout((function(){e.setState({overlayState:v.CLOSED})}),500)):r===v.OPEN?this.shiftFocusToOverlay():this.shiftFocusToEle(a)}},{key:"render",value:function(){var t=this,o=this.props,n=o.children,r=o.isOpen,l=o.closeOverlay,s=o.configs,i=void 0===s?{}:s,c=(i.animate,i.top),y=void 0===c?0:c,f=i.contentClass,d=void 0===f?"":f,_=i.clickDismiss,h=void 0===_||_,O=i.escapeDismiss,m=void 0===O||O,g=i.focusOutline,w=void 0!==g&&g,k=i.showCloseIcon,b=void 0===k||k,N=this.state.overlayState,E={className:[p["overlay-wrapper"],N===v.HIDDEN?p["overlay-hidden"]:"",N===v.OPEN?p["overlay-open"]:"",N===v.OPENING?p["overlay-opening"]:"",N===v.CLOSING?p["overlay-closing"]:"",N===v.CLOSED?p["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:[p["overlay-content"],w?p["with-outline"]:"",d].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},I={"--top":y};return e.createElement("div",a({},E,{style:I}),e.createElement(u,{overlayState:N,clickDismiss:h,closeOverlay:l},e.createElement("div",a({ref:this.ref},S),l&&b?e.createElement("div",{className:p["overlay-close"],role:"button",tabIndex:"0",onClick:l,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(h.prototype,O),m&&n(h,m),w}();r(_,"tracker",{}),r(_,"trackerId",0),_.propTypes={isOpen:o.bool.isRequired,children:o.any,configs:o.object,closeOverlay:o.func,showCloseIcon:o.bool};export default _;export{v as STATES};
+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,n.key,n)}}function r(e,t,o){return 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||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:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var c={"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  .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  .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    .styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_.styles_with-outline__ogLFa:focus {\n      outline: 2px solid #0366d6;\n      outline-offset: 2px; }\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  .styles_overlay-wrapper__O0Zm8.styles_overlay-open__3VYiy {\n    opacity: 1; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-opening__1xWk2 {\n    animation: styles_fadeIn__N7HUl 0.5s; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closed__DwoRv, .styles_overlay-wrapper__O0Zm8.styles_overlay-hidden__3xj42 {\n    display: none;\n    opacity: 0; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closing__h8wXL {\n    opacity: 0; }\n\n.styles_scroll-lock__1ANm6 {\n  overflow: hidden; }\n\n@keyframes styles_fadeIn__N7HUl {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n\n@keyframes styles_fadeOut__1FkJy {\n  0% {\n    opacity: 1; }\n  100% {\n    opacity: 0; } }\n");var y=function(t){var o=t.overlayState,n=t.clickDismiss,r=void 0===n||n,a=t.closeOverlay,l=o===p.OPENING||o===p.CLOSING;return e.createElement("div",{className:c.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!l&&t&&a(),e.stopPropagation()}},t.children)};y.propTypes={overlayState:o.string.isRequired,clickDismiss:o.bool,closeOverlay:o.func,children:o.element};var p={OPEN:"OPEN",OPENING:"OPENING",HIDDEN:"HIDDEN",CLOSED:"CLOSED",CLOSING:"CLOSING"},v=function(e){var t=document.getElementsByTagName("body")[0],o=c["scroll-lock"];e?t.classList.contains(o)||t.classList.add(o):Object.values(u.tracker).filter(Boolean).length||t.classList.remove(o)},_=function(e){return e&&e.focus()},u=function(o){function u(t){var o,n,a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),n=this,a=l(u).call(this,t),o=!a||"object"!=typeof a&&"function"!=typeof a?i(n):a,r(i(o),"updateOverlayTracker",(function(){u.tracker[o.state.overlayId]=o.props.isOpen})),r(i(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(i(o),"shiftFocusToOverlay",(function(){var e=o.ref.current;_(e)})),r(i(o),"shiftFocusToEle",(function(e){_(e),v(!1)})),r(i(o),"handleCloseOverlay",(function(e){e.preventDefault(),o.props.closeOverlay&&o.props.closeOverlay()})),o.state={overlayState:p.HIDDEN,prevState:t.isOpen,initiator:null,overlayId:u.getNewOverlayId()},o.ref=e.createRef(),o}var d,f,h;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&&s(e,t)}(u,t),d=u,h=[{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?(v(!0),{overlayState:a?p.OPENING:p.OPEN,prevState:o,initiator:document.activeElement}):{overlayState:a?p.CLOSING:p.CLOSED,prevState:o}}}],(f=[{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===p.OPENING?(this.shiftFocusToOverlay(),setTimeout((function(){e.setState({overlayState:p.OPEN})}),500)):r===p.CLOSING&&(this.shiftFocusToEle(a),setTimeout((function(){e.setState({overlayState:p.CLOSED})}),500)):r===p.OPEN?this.shiftFocusToOverlay():this.shiftFocusToEle(a)}},{key:"render",value:function(){var t=this,o=this.props,n=o.children,r=o.isOpen,l=o.closeOverlay,s=o.configs,i=void 0===s?{}:s,v=(i.animate,i.top),_=void 0===v?0:v,u=i.contentClass,d=void 0===u?"":u,f=i.clickDismiss,h=void 0===f||f,O=i.escapeDismiss,m=void 0===O||O,g=i.focusOutline,w=void 0!==g&&g,k=i.showCloseIcon,b=void 0===k||k,N=this.state.overlayState,E={className:[c["overlay-wrapper"],N===p.HIDDEN?c["overlay-hidden"]:"",N===p.OPEN?c["overlay-open"]:"",N===p.OPENING?c["overlay-opening"]:"",N===p.CLOSING?c["overlay-closing"]:"",N===p.CLOSED?c["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:[c["overlay-content"],w?c["with-outline"]:"",d].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},I={"--top":_};return e.createElement("div",a({},E,{style:I}),e.createElement(y,{overlayState:N,clickDismiss:h,closeOverlay:l},e.createElement("div",a({ref:this.ref},S),l&&b?e.createElement("div",{className:c["overlay-close"],role:"button",tabIndex:"0",onClick:l,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(d.prototype,f),h&&n(d,h),u}();r(u,"tracker",{}),r(u,"trackerId",0),u.propTypes={isOpen:o.bool.isRequired,children:o.any,configs:o.object,closeOverlay:o.func,showCloseIcon:o.bool};export default u;export{p as STATES};

dist/index.js

@@ -1,1 +0,1 @@
-"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,n.key,n)}}function a(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(){return(s=Object.assign||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:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function y(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function p(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?y(e):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  .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  .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    .styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_.styles_with-outline__ogLFa:focus {\n      outline: 2px solid #0366d6;\n      outline-offset: 2px; }\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  .styles_overlay-wrapper__O0Zm8.styles_overlay-open__3VYiy {\n    opacity: 1; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-opening__1xWk2 {\n    animation: styles_fadeIn__N7HUl 0.5s; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closed__DwoRv, .styles_overlay-wrapper__O0Zm8.styles_overlay-hidden__3xj42 {\n    display: none;\n    opacity: 0; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closing__h8wXL {\n    opacity: 0; }\n\n.styles_scroll-lock__1ANm6 {\n  overflow: hidden; }\n\n@keyframes styles_fadeIn__N7HUl {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n\n@keyframes styles_fadeOut__1FkJy {\n  0% {\n    opacity: 1; }\n  100% {\n    opacity: 0; } }\n");var v=function(e){var t=e.overlayState,n=e.clickDismiss,r=void 0===n||n,a=e.closeOverlay,s=t===f.OPENING||t===f.CLOSING;return o.createElement("div",{className:u.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!s&&t&&a(),e.stopPropagation()}},e.children)};v.propTypes={overlayState:n.string.isRequired,clickDismiss:n.bool,closeOverlay:n.func,children:n.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(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}}),t&&i(e,t)}(w,t.Component);var n,h,O,m,g=(n=w,function(){var e,t=l(n);if(c()){var o=l(this).constructor;e=Reflect.construct(t,arguments,o)}else e=t.apply(this,arguments);return p(this,e)});function w(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,w),a(y(t=g.call(this,e)),"updateOverlayTracker",(function(){w.tracker[t.state.overlayId]=t.props.isOpen})),a(y(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(y(t),"shiftFocusToOverlay",(function(){var e=t.ref.current;_(e)})),a(y(t),"shiftFocusToEle",(function(e){_(e),d(!1)})),a(y(t),"handleCloseOverlay",(function(e){e.preventDefault(),t.props.closeOverlay&&t.props.closeOverlay()})),t.state={overlayState:f.HIDDEN,prevState:e.isOpen,initiator:null,overlayId:w.getNewOverlayId()},t.ref=o.createRef(),t}return h=w,m=[{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}}}],(O=[{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 e=this,t=this.props,n=t.children,r=t.isOpen,a=t.closeOverlay,l=t.configs,i=void 0===l?{}:l,c=(i.animate,i.top),y=void 0===c?0:c,p=i.contentClass,d=void 0===p?"":p,_=i.clickDismiss,h=void 0===_||_,O=i.escapeDismiss,m=void 0===O||O,g=i.focusOutline,w=void 0!==g&&g,k=i.showCloseIcon,b=void 0===k||k,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(t){return e.keyPress(t)}:void 0,onKeyDown:m?function(t){return e.keyPress(t)}:void 0,"aria-hidden":!r},S={className:[u["overlay-content"],w?u["with-outline"]:"",d].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},I={"--top":y};return o.createElement("div",s({},E,{style:I}),o.createElement(v,{overlayState:N,clickDismiss:h,closeOverlay:a},o.createElement("div",s({ref:this.ref},S),a&&b?o.createElement("div",{className:u["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(h.prototype,O),m&&r(h,m),w}();a(h,"tracker",{}),a(h,"trackerId",0),h.propTypes={isOpen:n.bool.isRequired,children:n.any,configs:n.object,closeOverlay:n.func,showCloseIcon:n.bool},exports.STATES=f,exports.default=h;
+"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,n.key,n)}}function a(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(){return(s=Object.assign||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:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,t){return(i=Object.setPrototypeOf||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}var y={"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  .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  .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    .styles_overlay-wrapper__O0Zm8 .styles_overlay-content__1qZR_.styles_with-outline__ogLFa:focus {\n      outline: 2px solid #0366d6;\n      outline-offset: 2px; }\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  .styles_overlay-wrapper__O0Zm8.styles_overlay-open__3VYiy {\n    opacity: 1; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-opening__1xWk2 {\n    animation: styles_fadeIn__N7HUl 0.5s; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closed__DwoRv, .styles_overlay-wrapper__O0Zm8.styles_overlay-hidden__3xj42 {\n    display: none;\n    opacity: 0; }\n  .styles_overlay-wrapper__O0Zm8.styles_overlay-closing__h8wXL {\n    opacity: 0; }\n\n.styles_scroll-lock__1ANm6 {\n  overflow: hidden; }\n\n@keyframes styles_fadeIn__N7HUl {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n\n@keyframes styles_fadeOut__1FkJy {\n  0% {\n    opacity: 1; }\n  100% {\n    opacity: 0; } }\n");var p=function(e){var t=e.overlayState,n=e.clickDismiss,r=void 0===n||n,a=e.closeOverlay,s=t===v.OPENING||t===v.CLOSING;return o.createElement("div",{className:y.backdrop,"data-comp":"backdrop",onClick:function(e){var t=e.target.dataset&&"backdrop"===e.target.dataset.comp;r&&!s&&t&&a(),e.stopPropagation()}},e.children)};p.propTypes={overlayState:n.string.isRequired,clickDismiss:n.bool,closeOverlay:n.func,children:n.element};var v={OPEN:"OPEN",OPENING:"OPENING",HIDDEN:"HIDDEN",CLOSED:"CLOSED",CLOSING:"CLOSING"},u=function(e){var t=document.getElementsByTagName("body")[0],o=y["scroll-lock"];e?t.classList.contains(o)||t.classList.add(o):Object.values(_.tracker).filter(Boolean).length||t.classList.remove(o)},d=function(e){return e&&e.focus()},_=function(e){function n(e){var t,r,s;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),r=this,s=l(n).call(this,e),t=!s||"object"!=typeof s&&"function"!=typeof s?c(r):s,a(c(t),"updateOverlayTracker",(function(){n.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;d(e)})),a(c(t),"shiftFocusToEle",(function(e){d(e),u(!1)})),a(c(t),"handleCloseOverlay",(function(e){e.preventDefault(),t.props.closeOverlay&&t.props.closeOverlay()})),t.state={overlayState:v.HIDDEN,prevState:e.isOpen,initiator:null,overlayId:n.getNewOverlayId()},t.ref=o.createRef(),t}var _,f,h;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&&i(e,t)}(n,t.Component),_=n,h=[{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?(u(!0),{overlayState:a?v.OPENING:v.OPEN,prevState:o,initiator:document.activeElement}):{overlayState:a?v.CLOSING:v.CLOSED,prevState:o}}}],(f=[{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===v.OPENING?(this.shiftFocusToOverlay(),setTimeout((function(){e.setState({overlayState:v.OPEN})}),500)):r===v.CLOSING&&(this.shiftFocusToEle(a),setTimeout((function(){e.setState({overlayState:v.CLOSED})}),500)):r===v.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,i=void 0===l?{}:l,c=(i.animate,i.top),u=void 0===c?0:c,d=i.contentClass,_=void 0===d?"":d,f=i.clickDismiss,h=void 0===f||f,O=i.escapeDismiss,m=void 0===O||O,g=i.focusOutline,w=void 0!==g&&g,k=i.showCloseIcon,b=void 0===k||k,N=this.state.overlayState,E={className:[y["overlay-wrapper"],N===v.HIDDEN?y["overlay-hidden"]:"",N===v.OPEN?y["overlay-open"]:"",N===v.OPENING?y["overlay-opening"]:"",N===v.CLOSING?y["overlay-closing"]:"",N===v.CLOSED?y["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:[y["overlay-content"],w?y["with-outline"]:"",_].filter(Boolean).join(" "),tabIndex:0,role:"dialog"},I={"--top":u};return o.createElement("div",s({},E,{style:I}),o.createElement(p,{overlayState:N,clickDismiss:h,closeOverlay:a},o.createElement("div",s({ref:this.ref},S),a&&b?o.createElement("div",{className:y["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(_.prototype,f),h&&r(_,h),n}();a(_,"tracker",{}),a(_,"trackerId",0),_.propTypes={isOpen:n.bool.isRequired,children:n.any,configs:n.object,closeOverlay:n.func,showCloseIcon:n.bool},exports.STATES=v,exports.default=_;

package.json

 {
     "name": "react-overlay-component",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "main": "dist/index.js",
@@ -35,4 +35,4 @@ "module": "dist/index.es.js",
         "prop-types": "^15.5.4",
-        "react": "^15.0.0 || ^16.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0"
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
     },
@@ -39,0 +39,0 @@ "devDependencies": {

README.md

@@ -0,0 +0,0 @@ [![release](https://badgen.net/npm/v/react-overlay-component)](https://www.npmjs.com/package/react-overlay-component)

No alert changes

Worsened metrics

Total package byte prevSize

24436

decreased by-4.06%

Lines of code

61

decreased by-4.69%

No dependency changes