@faceless-ui/modal - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/build.bundle.js

@@ -1,2 +0,2 @@
-module.exports=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=7)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@faceless-ui/html-element")},function(e,t){e.exports=require("react-transition-group")},function(e,t){e.exports=require("qs")},function(e,t){e.exports=require("body-scroll-lock")},function(e,t){e.exports=require("react-dom")},function(e,t,n){"use strict";n.r(t),n.d(t,"asModal",(function(){return h})),n.d(t,"Modal",(function(){return E})),n.d(t,"ModalContainer",(function(){return T})),n.d(t,"ModalContext",(function(){return p})),n.d(t,"ModalProvider",(function(){return U})),n.d(t,"ModalToggler",(function(){return X})),n.d(t,"useModal",(function(){return b})),n.d(t,"withModal",(function(){return G}));var r=n(1),o=n.n(r),a=n(6),c=n.n(a),i=n(0),l=n.n(i),u=n(3),s=n(2),f=n.n(s),p=o.a.createContext({}),b=function(){return Object(r.useContext)(p)},d=function(e){return e?{appear:"".concat(e,"--appear"),appearActive:"".concat(e,"--appearActive"),appearDone:"".concat(e,"--appearDone"),enter:"".concat(e,"--enter"),enterActive:"".concat(e,"--enterActive"),enterDone:"".concat(e,"--enterDone"),exit:"".concat(e,"--exit"),exitActive:"".concat(e,"--exitActive"),exitDone:"".concat(e,"--exitDone")}:{}};function y(){return(y=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 m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?m(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return j(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return j(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var h=function(e,t){var n=function(n){var a=b(),i=a.currentModal,l=a.classPrefix,s=a.containerRef,p=a.transTime,m=a.setCloseOnBlur,v=a.open,j=a.setBodyScrollLock,h=n.id,P=n.className,w=n.style,S=n.htmlElement,E=n.htmlAttributes,x=n.slug,C=n.closeOnBlur,k=n.lockBodyScroll,D=t||x,A=Object(r.useRef)(!0),T=i===D;Object(r.useEffect)((function(){A&&(T&&v(D),A.current=!1)}),[T,v,A,D]),Object(r.useEffect)((function(){T&&m(C)}),[T,C,m]);var M=Object(r.useRef)(null),B=Object(r.useCallback)((function(e){M.current=e}),[M]);Object(r.useEffect)((function(){M.current&&j(!(!T||!k),M)}),[T,k,j]),Object(r.useEffect)((function(){return function(){return j(!1,M)}}),[j]);var N=g(Object(r.useState)(T),2),_=N[0],I=N[1];if(Object(r.useEffect)((function(){T?I(T):setTimeout((function(){return I(!1)}),p)}),[T,p]),s.current){var q="".concat(l,"__").concat("modal-item"),R=[q,"".concat(q,"--slug-").concat(D),P].filter(Boolean).join(" "),L=O({role:"dialog"!==S?"dialog":void 0,open:"dialog"===S?_||T:void 0,"aria-modal":!0,"aria-label":E["aria-labelledby"]?void 0:D},E);return c.a.createPortal(o.a.createElement(u.CSSTransition,{timeout:p,in:i===D,classNames:d(q),appear:!0},o.a.createElement(f.a,y({id:h||D,className:R,style:w,htmlElement:S,htmlAttributes:L},{ref:B}),o.a.createElement(e,O(O({},n),{},{isOpen:T,modal:a})))),s.current)}return null};return n.defaultProps={slug:"",closeOnBlur:!0,lockBodyScroll:!0,id:void 0,className:void 0,style:{},htmlElement:"dialog",htmlAttributes:{}},n.propTypes={slug:l.a.string,closeOnBlur:l.a.bool,lockBodyScroll:l.a.bool,id:l.a.string,className:l.a.string,style:l.a.shape({}),htmlElement:l.a.string,htmlAttributes:l.a.shape({id:l.a.string,className:l.a.string,style:l.a.shape({}),onClick:l.a.func})},n};function P(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var S=function(e){var t=e.children;return t?"function"==typeof t?t(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?P(Object(n),!0).forEach((function(t){w(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):P(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e)):t:null};S.defaultProps={children:void 0},S.propTypes={children:l.a.oneOfType([l.a.string,l.a.node,l.a.func,l.a.arrayOf(l.a.node)])};var E=h(S);function x(){return(x=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 C(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?C(Object(n),!0).forEach((function(t){D(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var A=function(e){var t=b(),n=t.oneIsOpen,r=t.classPrefix,a=t.transTime,c=t.setContainerRef,i=t.closeAll,l=t.closeOnBlur,s=e.id,p=e.className,y=e.style,m=e.htmlElement,O=e.htmlAttributes,v=e.children,g="".concat(r,"__").concat("modal-container"),j=[g,p].filter(Boolean).join(" "),h=k(k({},O),{},{onClick:function(){l&&i(),"function"==typeof O.onClick&&O.onClick()}});return o.a.createElement(u.CSSTransition,{in:n,timeout:a,classNames:d(g),appear:!0},o.a.createElement(f.a,x({id:s,className:j,style:y,htmlElement:m,htmlAttributes:h},{ref:c}),v&&v))};A.defaultProps={id:void 0,className:void 0,style:{},htmlElement:"div",htmlAttributes:{},children:void 0},A.propTypes={id:l.a.string,className:l.a.string,style:l.a.shape({}),htmlElement:l.a.string,htmlAttributes:l.a.shape({onClick:l.a.func}),children:l.a.node};var T=A,M=n(4),B=n.n(M),N=n(5);function _(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?_(Object(n),!0).forEach((function(t){q(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function R(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return L(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return L(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var z=function(){return B.a.parse(window.location.search,{ignoreQueryPrefix:!0})},Q=function(e){var t=e.classPrefix,n=e.minifyCSS,a=e.generateCSS,c=e.zIndex,i=e.handleParamChange,l=e.children,u=e.transTime,s=Object(r.useRef)(null),f=R(Object(r.useState)(""),2),b=f[0],d=f[1],y=R(Object(r.useState)(!1),2),m=y[0],O=y[1],v=R(Object(r.useState)(!1),2),g=v[0],j=v[1],h=R(Object(r.useState)(!1),2),P=h[0],w=h[1],S=R(Object(r.useState)(""),2),E=S[0],x=S[1],C=R(Object(r.useState)(""),2),k=C[0],D=C[1],A=Object(r.useCallback)((function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];if(e&&("function"==typeof i&&i({key:"modal",value:""}),"boolean"==typeof i&&i)){var t=z();delete t.modal;var n=B.a.stringify(t,{addQueryPrefix:!0}),r="".concat(window.location.pathname).concat(n);window.history.pushState({},"",r)}Object(N.clearAllBodyScrollLocks)(),d(""),O(!1)}),[i]),T=Object(r.useCallback)((function(e){27===e.keyCode&&A()}),[A]);Object(r.useEffect)((function(){return document.addEventListener("keydown",(function(e){return T(e)}),!1),d(z().modal||""),function(){return document.removeEventListener("keydown",(function(e){return T(e)}),!1)}}),[T]),Object(r.useEffect)((function(){var e="trbl";"string"==typeof t&&t&&(e=t),"boolean"!=typeof t||t||(e=void 0),D(e)}),[t]),Object(r.useEffect)((function(){if(a){var e="";e=function(e,t){var n=e?"".concat(e,"__"):"";return"\n    .".concat(n).concat("modal-container"," {\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      position: fixed;\n      pointer-events: none;\n      visibility: hidden;\n      z-index: -1;\n    }\n\n    .").concat(n).concat("modal-container","--appear,\n    .").concat(n).concat("modal-container","--appearDone,\n    .").concat(n).concat("modal-container","--enter,\n    .").concat(n).concat("modal-container","--enterDone,\n    .").concat(n).concat("modal-container","--exit {\n      pointer-events: all;\n      visibility: visible;\n      z-index: ").concat(t,";\n    }\n\n    .").concat(n).concat("modal-item"," {\n      position: absolute;\n      visibility: hidden;\n    }\n\n    .").concat(n).concat("modal-item","--appear,\n    .").concat(n).concat("modal-item","--appearDone,\n    .").concat(n).concat("modal-item","--enter,\n    .").concat(n).concat("modal-item","--enterDone,\n    .").concat(n).concat("modal-item","--exit {\n      visibility: visible;\n    }\n  ")}(k,c),n&&(e=e.replace(/\n/g,"").replace(/\s\s+/g," ")),x(e)}}),[a,n,c,k]);var M=Object(r.useCallback)((function(e,t){if(!t&&("function"==typeof i&&i({key:"modal",value:e}),"boolean"==typeof i&&i)){var n=z();n.modal=e;var r=B.a.stringify(n,{addQueryPrefix:!0}),o="".concat(window.location.pathname).concat(r);window.history.pushState({},"",o)}d(e),O(!0)}),[i]),_=Object(r.useCallback)((function(e){e===b?A():M(e)}),[A,M,b]),q=Object(r.useCallback)((function(e,t){e?(Object(N.disableBodyScroll)(t.current),w(!0)):(Object(N.enableBodyScroll)(t.current),w(!1))}),[]),L=Object(r.useCallback)((function(e){s.current=e}),[]),Q=I({},e);return delete Q.children,o.a.createElement(r.Fragment,null,a&&o.a.createElement("style",{dangerouslySetInnerHTML:{__html:E}}),o.a.createElement(p.Provider,{value:I(I({},Q),{},{transTime:u,containerRef:s,currentModal:b,oneIsOpen:m,closeOnBlur:g,bodyScrollIsLocked:P,classPrefix:k,closeAll:A,setCloseOnBlur:j,open:M,toggle:_,setContainerRef:L,setBodyScrollLock:q})},l&&l))};Q.defaultProps={generateCSS:!0,minifyCSS:!0,classPrefix:void 0,handleParamChange:void 0,transTime:0,zIndex:9999,children:void 0},Q.propTypes={generateCSS:l.a.bool,minifyCSS:l.a.bool,classPrefix:l.a.oneOfType([l.a.string,l.a.bool]),handleParamChange:l.a.oneOfType([l.a.func,l.a.bool]),transTime:l.a.number,zIndex:l.a.number,children:l.a.node};var U=Q;function $(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function F(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?$(Object(n),!0).forEach((function(t){H(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):$(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function H(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var G=function(e){return function(t){return o.a.createElement(p.Consumer,null,(function(n){return o.a.createElement(e,F(F({},t),{},{modal:n}))}))}};function J(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function K(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?J(Object(n),!0).forEach((function(t){V(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):J(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function V(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var W=function(e){var t=e.id,n=e.className,r=e.modal,a=r.currentModal,c=r.toggle,i=r.classPrefix,l=e.slug,u=e.style,s=e.htmlElement,p=e.htmlAttributes,b=e.children,d="".concat(i,"__modal-toggler"),y=a===l,m=[d,"".concat(d,"--slug-").concat(l),y&&"".concat(d,"--slug-").concat(l,"--is-open"),n].filter(Boolean).join(" "),O=K(K({role:"button","aria-expanded":y?"true":"false","aria-controls":l},p),{},{onClick:function(){c(l),"function"==typeof p.onClick&&p.onClick()}});return o.a.createElement(f.a,{id:t,className:m,style:u,htmlElement:s,htmlAttributes:O},b&&b)};W.defaultProps={id:void 0,className:void 0,style:{},htmlElement:"button",htmlAttributes:{},children:void 0},W.propTypes={slug:l.a.string.isRequired,modal:l.a.shape({currentModal:l.a.string,toggle:l.a.func,classPrefix:l.a.string}).isRequired,id:l.a.string,className:l.a.string,style:l.a.shape({}),htmlElement:l.a.string,htmlAttributes:l.a.shape({id:l.a.string,className:l.a.string,style:l.a.shape({}),onClick:l.a.func}),children:l.a.node};var X=G(W)}]);
+module.exports=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=9)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),i=r(n(2));t.default=function(){return o.useContext(i.default)}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ModalContext=void 0;var r=n(0);t.ModalContext=r.createContext({}),t.default=t.ModalContext},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),u=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return i(t,e),t},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var l=u(n(0)),f=a(n(10)),c=n(4),s=a(n(1)),d=a(n(5)),p=a(n(6));t.default=function(e,t){return function(n){var o=s.default(),i=o.currentModal,u=o.classPrefix,a=o.containerRef,v=o.transTime,_=o.setCloseOnBlur,y=o.open,b=o.setBodyScrollLock,h=n.id,m=n.className,g=n.style,O=void 0===g?{}:g,j=n.htmlElement,M=void 0===j?"dialog":j,P=n.htmlAttributes,x=void 0===P?{}:P,C=n.slug,S=void 0===C?"":C,k=n.closeOnBlur,w=void 0===k||k,E=n.lockBodyScroll,D=void 0===E||E,B=n.classPrefix||u,A=t||S,T=l.useRef(!0),N=i===A;l.useEffect((function(){T&&(N&&y(A),T.current=!1)}),[N,y,T,A]),l.useEffect((function(){N&&_(w)}),[N,w,_]);var L=l.useRef(null),R=l.useCallback((function(e){L.current=e}),[L]);l.useEffect((function(){L.current&&b(!(!N||!D),L)}),[N,D,b]),l.useEffect((function(){return function(){return b(!1,L)}}),[b]);var q=l.useState(N),I=q[0],z=q[1];if(l.useEffect((function(){N?z(N):setTimeout((function(){return z(!1)}),v)}),[N,v]),a.current){var Q=B+"__"+d.default,F=[Q,Q+"--slug-"+A,m].filter(Boolean).join(" "),H=r({role:"dialog"!==M?"dialog":void 0,open:"dialog"===M?I||N:void 0,"aria-modal":!0,"aria-label":x["aria-labelledby"]?void 0:A},x),G=M;return f.default.createPortal(l.default.createElement(c.CSSTransition,{timeout:v,in:i===A,classNames:p.default(Q),appear:!0},l.default.createElement(G,r({},r({id:h||A,className:F,style:O},H),{ref:R}),l.default.createElement(e,r({},r(r({},n),{isOpen:N,modal:o}))))),a.current)}return null}}},function(e,t){e.exports=require("react-transition-group")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default="modal-item"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default=function(e){return e?{appear:e+"--appear",appearActive:e+"--appearActive",appearDone:e+"--appearDone",enter:e+"--enter",enterActive:e+"--enterActive",enterDone:e+"--enterDone",exit:e+"--exit",exitActive:e+"--exitActive",exitDone:e+"--exitDone"}:{}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default="modal-container"},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=o(n(0)),u=o(n(1));t.default=function(e){return function(t){var n=u.default();return i.default.createElement(e,r({},r(r({},t),{modal:n})))}}},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.withModal=t.useModal=t.ModalToggler=t.ModalProvider=t.ModalContext=t.ModalContainer=t.Modal=t.asModal=void 0;var o=n(3);Object.defineProperty(t,"asModal",{enumerable:!0,get:function(){return r(o).default}});var i=n(11);Object.defineProperty(t,"Modal",{enumerable:!0,get:function(){return r(i).default}});var u=n(12);Object.defineProperty(t,"ModalContainer",{enumerable:!0,get:function(){return r(u).default}});var a=n(2);Object.defineProperty(t,"ModalContext",{enumerable:!0,get:function(){return r(a).default}});var l=n(13);Object.defineProperty(t,"ModalProvider",{enumerable:!0,get:function(){return r(l).default}});var f=n(18);Object.defineProperty(t,"ModalToggler",{enumerable:!0,get:function(){return r(f).default}});var c=n(1);Object.defineProperty(t,"useModal",{enumerable:!0,get:function(){return r(c).default}});var s=n(8);Object.defineProperty(t,"withModal",{enumerable:!0,get:function(){return r(s).default}})},function(e,t){e.exports=require("react-dom")},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=o(n(3));t.default=i.default((function(e){var t=e.children;return t?"function"==typeof t?t(r({},e)):t:null}))},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=o(n(0)),u=n(4),a=o(n(1)),l=o(n(7)),f=o(n(6));t.default=function(e){var t=a.default(),n=t.oneIsOpen,o=t.classPrefix,c=t.transTime,s=t.setContainerRef,d=t.closeAll,p=t.closeOnBlur,v=e.id,_=e.className,y=e.style,b=void 0===y?{}:y,h=e.htmlElement,m=void 0===h?"div":h,g=e.htmlAttributes,O=void 0===g?{}:g,j=e.children,M=o+"__"+l.default,P=[M,_].filter(Boolean).join(" "),x=r(r({},O),{onClick:function(){p&&d(),"function"==typeof O.onClick&&O.onClick()}}),C=m;return i.default.createElement(u.CSSTransition,{in:n,timeout:c,classNames:f.default(M),appear:!0},i.default.createElement(C,r({},r({id:v,className:P,style:b,ref:s},x)),j&&j))}},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[n]}})}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),i=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),u=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return i(t,e),t},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var l=u(n(0)),f=a(n(14)),c=n(15),s=a(n(16)),d=a(n(17)),p=a(n(2)),v=function(){return f.default.parse(window.location.search,{ignoreQueryPrefix:!0})};t.default=function(e){var t=e.classPrefix,n=e.minifyCSS,o=void 0===n||n,i=e.generateCSS,u=void 0===i||i,a=e.zIndex,_=void 0===a?9999:a,y=e.handleParamChange,b=e.children,h=e.transTime,m=void 0===h?0:h,g=l.useRef(null),O=l.useState(""),j=O[0],M=O[1],P=l.useState(!1),x=P[0],C=P[1],S=l.useState(!1),k=S[0],w=S[1],E=l.useState(!1),D=E[0],B=E[1],A=l.useState(""),T=A[0],N=A[1],L=l.useState(""),R=L[0],q=L[1],I=l.useCallback((function(e){if(void 0===e&&(e=!0),e&&("function"==typeof y&&y({key:"modal",value:""}),"boolean"==typeof y&&y)){var t=v();delete t.modal;var n=f.default.stringify(t,{addQueryPrefix:!0}),r=""+window.location.pathname+n;window.history.pushState({},"",r)}c.clearAllBodyScrollLocks(),M(""),C(!1)}),[y]),z=l.useCallback((function(e){27===e.keyCode&&I()}),[I]);l.useEffect((function(){return document.addEventListener("keydown",(function(e){return z(e)}),!1),M(v().modal||""),function(){return document.removeEventListener("keydown",(function(e){return z(e)}),!1)}}),[z]),l.useEffect((function(){var e=s.default;"string"==typeof t&&t&&(e=t),"boolean"!=typeof t||t||(e=void 0),q(e)}),[t]),l.useEffect((function(){if(u){var e="";e=d.default(R,_),o&&(e=e.replace(/\n/g,"").replace(/\s\s+/g," ")),N(e)}}),[u,o,_,R]);var Q=l.useCallback((function(e,t){if(!t&&("function"==typeof y&&y({key:"modal",value:e}),"boolean"==typeof y&&y)){var n=v();n.modal=e;var r=f.default.stringify(n,{addQueryPrefix:!0}),o=""+window.location.pathname+r;window.history.pushState({},"",o)}M(e),C(!0)}),[y]),F=l.useCallback((function(e){e===j?I():Q(e)}),[I,Q,j]),H=l.useCallback((function(e,t){e?(c.disableBodyScroll(t.current),B(!0)):(c.enableBodyScroll(t.current),B(!1))}),[]),G=l.useCallback((function(e){g.current=e}),[]),J=r({},e);return delete J.children,l.default.createElement(l.Fragment,null,u&&l.default.createElement("style",{dangerouslySetInnerHTML:{__html:T}}),l.default.createElement(p.default.Provider,{value:r(r({},J),{transTime:m,containerRef:g,currentModal:j,oneIsOpen:x,closeOnBlur:k,bodyScrollIsLocked:D,classPrefix:R,closeAll:I,setCloseOnBlur:w,open:Q,toggle:F,setContainerRef:G,setBodyScrollLock:H})},b&&b))}},function(e,t){e.exports=require("qs")},function(e,t){e.exports=require("body-scroll-lock")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default="trbl"},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=r(n(7)),i=r(n(5));t.default=function(e,t){var n=e?e+"__":"";return"\n    ."+n+o.default+" {\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      position: fixed;\n      pointer-events: none;\n      visibility: hidden;\n      z-index: -1;\n    }\n\n    ."+n+o.default+"--appear,\n    ."+n+o.default+"--appearDone,\n    ."+n+o.default+"--enter,\n    ."+n+o.default+"--enterDone,\n    ."+n+o.default+"--exit {\n      pointer-events: all;\n      visibility: visible;\n      z-index: "+t+";\n    }\n\n    ."+n+i.default+" {\n      position: absolute;\n      visibility: hidden;\n    }\n\n    ."+n+i.default+"--appear,\n    ."+n+i.default+"--appearDone,\n    ."+n+i.default+"--enter,\n    ."+n+i.default+"--enterDone,\n    ."+n+i.default+"--exit {\n      visibility: visible;\n    }\n  "}},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=o(n(0)),u=o(n(8));t.default=u.default((function(e){var t=e.id,n=e.className,o=e.modal,u=o.currentModal,a=o.toggle,l=o.classPrefix,f=e.slug,c=e.style,s=void 0===c?{}:c,d=e.htmlElement,p=void 0===d?"button":d,v=e.htmlAttributes,_=void 0===v?{}:v,y=e.children,b=l+"__modal-toggler",h=u===f,m=[b,b+"--slug-"+f,h&&b+"--slug-"+f+"--is-open",n].filter(Boolean).join(" "),g=r(r({role:"button","aria-expanded":h?"true":"false","aria-controls":f},_),{onClick:function(){a(f),"function"==typeof _.onClick&&_.onClick()}});return i.default.createElement(p,r({},r({id:t,className:m,style:s},g)),y&&y)}))}]);
 //# sourceMappingURL=build.bundle.js.map

package.json

 {
   "name": "@faceless-ui/modal",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/build.bundle.js",
@@ -23,3 +23,3 @@ "repository": "[e-mail]:faceless-ui/modal.git",
   "scripts": {
-    "build": "yarn lint && yarn test && webpack --config webpack.production.config.js",
+    "build": "yarn lint && webpack --config webpack.production.config.js",
     "dev": "webpack-dev-server --hot --inline --config webpack.development.config.js",
@@ -30,9 +30,7 @@ "lint": "eslint .",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@faceless-ui/html-element": "^1.0.3",
-    "body-scroll-lock": "^3.0.1",
-    "prop-types": "^15.7.2",
+    "body-scroll-lock": "^3.1.5",
     "qs": "^6.9.1",
@@ -42,19 +40,19 @@ "react-transition-group": "^4.3.0"
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@trbl/eslint-config": "^1.2.4",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
+    "@trbl/eslint-config": "^2.0.3",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.22",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^6.8.0",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jest": "^23.6.0",
-    "eslint-plugin-jest-dom": "^2.0.0",
+    "eslint": "^7.16.0",
+    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-webpack-plugin": "^2.4.1",
     "html-webpack-plugin": "^3.2.0",
@@ -64,5 +62,7 @@ "husky": "^4.2.1",
     "lint-staged": "^10.0.6",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-hot-loader": "^4.12.19",
+    "ts-loader": "^8.0.14",
+    "typescript": "^4.1.3",
     "webpack": "^4.41.4",
@@ -69,0 +69,0 @@ "webpack-cli": "^3.3.10",

README.md

@@ -1,3 +0,3 @@
-[![NPM](https://img.shields.io/npm/v/@trbl/react-modal)](https://www.npmjs.com/@trbl/react-modal)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@trbl/react-modal?label=zipped)
+[![NPM](https://img.shields.io/npm/v/@faceless-ui/modal)](https://www.npmjs.com/@faceless-ui/modal)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@faceless-ui/modal?label=zipped)
 [![Supported by TRBL](https://img.shields.io/badge/supported_by-TRBL-black)](https://github.com/trouble)
@@ -7,24 +7,13 @@
 
-A flexible, unstyled, a11y-enabled library for creating dialogs, drawers, popups, popovers, mega-menus, light-boxes, etc, etc, etc. Modals with fancy names. Meant to power other UI libraries. You decide what it does, how it works, how it looks...and ultimately what its called.
+An unstyled, transition-ready, a11y-enabled library for creating dialogs, drawers, confirmations, popups, popovers, mega-menus, light-boxes, etc, etc, etc. Meant to power UI libraries. You decide what it does, how it works, how it looks...and ultimately what its called. Build literally any modal experience.
 
-## Highlights
+# Table of Contents
+  - [Installation](#installation)
+  - [Basic Setup](#basic-setup)
+  - [API](#api)
+  - [Highlights](#highlights)
+  - [Demo](#demo)
+  - [Showcase](#showcase)
+  - [Contribution](#contribution)
 
-- #### Modular
-  Get creative with your setup. Create a modal from anywhere with [Modal](./src/Modal.README.md) or [asModal](./src/asModal/README.md). Interact with a modal from anywhere with [useModal](./src/useModal/README.md) or [withModal](./src/useModal/README.md). Quickly control them with [ModalToggler](./src/ModalToggler/README.md) or easily create your own.
-
-- #### Faceless UI
-  Applies no visual style, but encourages you to do so. Target any element and any state without additional legwork. [BEM](http://getbem.com/) classes come shipped. Transition classes too, using [react-transition-group](https://reactcommunity.org/react-transition-group/). Build literally any modal experience, and start challenging your designers for a change.
-
-- #### Agnostic DOM
-  Take complete control over the DOM. Things like custom markup, accessibility, or additional event handling. Everything beyond core functionality is [extendable](https://www.npmjs.com/package/@faceless-ui/html-element). No more needing to nest or wrap nodes unnecessarily.
-
-- #### Router Ready
-  Control any modal with the URL. Share direct links, open on load, or use browser navigation. Opt-in to use the [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Using [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/), or some other framework? Easily [use those routers](./src/ModalProvider/README.md#routing) instead.
-
-- #### Contextual
-  Leave your content put. Stop lifting state and drilling props, or throwing into [Redux](https://redux.js.org/). Render [ModalContainer](./src/ModalContainer/README.md) anywhere in your app as a descendent of the [ModalProvider](./src/ModalProvider/README.md). Each modal will ultimately render here, no matter where they're written. Also helpful in dealing with CSS stacking contexts.
-
-- #### Accessible
-  Shipped fully accessible. [ModalProvider](./src/ModalProvider/README.md#accessibility), [asModal](./src/asModal/README.md#accessibility), and [ModalToggler](./src/ModalToggler/README.md#accessibility) strictly follow the [WAI-ARIA](https://www.w3.org/WAI/intro/aria) guidelines on [modal dialogs](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). You can also [customize anything](#agnostic-dom).
-
 ## Quick Start
@@ -35,44 +24,110 @@
 ```bash
-$ npm i @trbl/react-modal
+$ npm i @faceless-ui/modal
 $ # or
-$ yarn add @trbl/react-modal
+$ yarn add @faceless-ui/modal
 ```
 
-### Composition
+### Basic Setup
 
 ```jsx
-  import React from 'react';
-  import {
-    Modal,
-    ModalContainer,
-    ModalProvider,
-    ModalToggler
-  } from '@trbl/react-modal';
+import React from 'react';
+import {
+  Modal,
+  ModalContainer,
+  ModalProvider,
+  ModalToggler
+} from '@faceless-ui/modal';
 
-  const App = () => (
-    <ModalProvider>
-      <Modal slug="modal1">
-        ...
-      </Modal>
-      <ModalToggler slug="modal1">
-        ...
-      </ModalToggler>
-      <ModalContainer />
-    <ModalProvider>
-  );
+const App = () => (
+  <ModalProvider>
+    <Modal slug="modal1">
+      ...
+    </Modal>
+    <ModalToggler slug="modal1">
+      ...
+    </ModalToggler>
+    <ModalContainer />
+  <ModalProvider>
+);
 
-  export default App;
+export default App;
 ```
 
-For working examples, see the [demo app](./demo/App.demo.js).
+Explanation:
 
-## Demo
+- [ModalProvider](./src/ModalProvider/README.md) provides context. Render it one-time, at the top-level of your app or nearest common ancestor.
 
-```bash
-$ git clone [e-mail]:trouble/react-modal.git
-$ yarn
-$ yarn dev
-$ open http://localhost:3000
-```
+- [ModalContainer](./src/ModalContainer/README.md) is where every modal will portal into. Render it one time, anywhere in your app (as a descendant of the provider).
 
+- [Modal](./src/Modal/README.md) will new up a modal, it only needs a unique slug.
+
+  - Render as-is, or with render props:
+
+    ```jsx
+    export default CustomModalB = () => (
+      <Modal slug="customModalB">
+        {(modal) => {
+          const { closeAll } = modal;
+
+          return (
+            <div>
+            ...
+              <button onClick={() => closeAll()}>
+                Close
+              </button>
+            </div>
+          )
+        )}
+      </Modal>
+    )
+    ```
+
+  - Or instantiate a modal with the [asModal](./src/asModal/README.md) HOC:
+
+    ```jsx
+    export default CustomModalA = asModal((props) => {
+      const { closeAll } = props;
+
+      return (
+        <div>
+          ...
+          <button onClick={() => closeAll()}>
+            Close
+          </button>
+        <div>
+      )
+    }, 'customModalA'); // or render with a 'slug' prop
+    ```
+
+
+- [ModalToggler](./src/Modal/README.md) is a quick way to control a modal.
+
+  - You can also toggle a modal directly with the [useModal](./src/useModal/README.md) hook:
+
+    ```jsx
+    export default CustomModalTogglerA = () => {
+      const { toggle } = useModal();
+
+      return (
+        <button onClick={() => toggle('customModalA')}> // or use 'open()'
+          Open
+        <button>
+      )
+    };
+    ```
+
+  - Or the [withModal](./src/withModal/README.md) HOC:
+
+    ```jsx
+    export default CustomModalTogglerB = withModal(props) => {
+      const { modal: { toggle } } = props;
+
+      return (
+        <button onClick={() => toggle('customModalB')}> // or use 'open()'
+          Open
+        <button>
+      )
+    };
+    ```
+
 ## API
@@ -88,8 +143,44 @@
 
+For working examples, see the [demo app](./demo/App.demo.js).
+
+## Highlights
+
+- #### Composable
+  Accommodates any setup. Render [ModalProvider](./src/ModalProvider/README.md) at the top-level, and [ModalContainer](./src/ModalProvider/README.md) anywhere within that. Then create modals and interact with them however your project demands.
+
+- #### Faceless UI
+  Applies no visual style of it's own. CSS transition-ready using [react-transition-group](https://reactcommunity.org/react-transition-group/). Target any element and any UI state using transition hooks.
+
+- #### Accessible
+  Shipped fully accessible. [ModalProvider](./src/ModalProvider/README.md#accessibility), [asModal](./src/asModal/README.md#accessibility), and [ModalToggler](./src/ModalToggler/README.md#accessibility) strictly follow the [WAI-ARIA](https://www.w3.org/WAI/intro/aria) guidelines on [modal dialogs](https://www.w3.org/TR/wai-aria-practices/#dialog_modal). You can also [customize anything](#agnostic-dom).
+
+- #### Agnostic DOM
+  Leaves minimal DOM footprint and provides full control. Things like custom markup, accessibility, or additional event handling. Everything beyond core functionality is extendable.
+
+- #### Router Ready
+  Control and be controlled by the URL with any modal. Opt-in to use the native [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Using [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.org/), or some other framework? Easily [use those routers](./src/ModalProvider/README.md#routing) too.
+
+## Demo
+
+```bash
+$ git clone [e-mail]:faceless-ui/modal.git
+$ yarn
+$ yarn dev
+$ open http://localhost:3000
+```
+
+## Showcase
+
+This package is being actively used in the following projects. To have your project added to this list, please create an [issue](https://github.com/faceless-ui/modal/issues) or make a [pull request](https://github.com/faceless-ui/modal/pulls).
+
+-  [My290](https://my.290signs.com)
+-  [Custer Inc](https://custerinc.com/)
+-  [Payload CMS](https://payloadcms.com/)
+
 ## Contribution
 
-[Help us,](https://github.com/trouble/.github/blob/master/CONTRIBUTING.md) or let us [help you help us](https://github.com/trouble/.github/blob/master/SUPPORT.md).
+[Help us,](https://github.com/faceless-ui/.github/blob/master/CONTRIBUTING.md) or let us [help you help us](https://github.com/faceless-ui/.github/blob/master/SUPPORT.md).
 
 ## License
 
-[MIT](https://github.com/trouble/react-modal/blob/master/LICENSE) Copyright (c) TRBL, LLC
+[MIT](https://github.com/faceless-ui/modal/blob/master/LICENSE) Copyright (c) TRBL, LLC

No alert changes

Improved metrics

Dependency count

5

decreased by-28.57%

Number of lines in readme file

184

increased by97.85%

Worsened metrics

Total package byte prevSize

51237

decreased by-8.72%

Dev dependency count

29

increased by7.41%

Lines of code

49

decreased by-22.22%

Dependency changes

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removed@faceless-ui/html-element@^1.0.3

• - Removedprop-types@^15.7.2

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updatedbody-scroll-lock@^3.1.5