react-popupify - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/bundle.esm.js

		@@ -1,2 +0,2 @@
		import e,{useEffect as n,useRef as t,useLayoutEffect as o,useState as i,useImperativeHandle as r,useCallback as u}from"react";import s from"react-dom";var a="nc-Popupify",c=function(n){var i=n.animation,r=n.duration,u=void 0===r?300:r,s=n.children,c=n.in,l=n.nodeRef,d=n.onEntered,p=n.onExited,f=t(0),m=a+"_"+i+"-enter",v=a+"_"+i+"-exit";return o(function(){var e=l.current;e&&c&&(e.classList.remove(v),e.classList.add(m),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function n(t){t.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",n),d&&d())}))},[c,d,u,m,v,l]),o(function(){var e=l.current;e&&(c\|\|(f.current=1,e.classList.remove(m),e.classList.add(v),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function n(t){t.target===e&&(e.classList.remove(v),e.removeEventListener("animationend",n),p&&p())})))},[c,p,u,m,v,l]),e.createElement(e.Fragment,null,s)},l=function(o,s){var l=o.open,d=void 0!==l&&l,p=o.children,f=o.closeOnEscape,m=void 0===f\|\|f,v=o.closeOnOutsideClick,h=void 0===v\|\|v,y=o.closeButton,b=void 0===y\|\|y,E=o.animation,L=o.duration,w=o.onClose,P=o.onClickClose,g=o.autoClose,C=o.popupClassName,k=o.popupId,x=i(d),O=x[0],N=x[1],_=t(null);r(s,function(){return{open:function(){N(!0)},close:function(){N(!1)}}});var B,D,R,T=u(function(){P&&P(!1),w&&w(),N(!1)},[w,P]);n(function(){if(N(d),g&&d){var e=setTimeout(function(){T()},g);return function(){clearTimeout(e)}}},[d,g,T]),function(e,t,o){n(function(){if(o)return document.addEventListener("mousedown",n),function(){document.removeEventListener("mousedown",n)};function n(n){e.current&&!e.current.contains(n.target)&&t()}},[e,t,o])}(_,T,h),n(function(){if(D)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&B()}},[B=T,D=m]),n(function(){if(R){var e=window.scrollX,n=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+n+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,n)}}},[R=O]),function(e,t){n(function(){if(e.current&&t){var n,o,i,r,u=e.current,s=function(e){var t,r;"Tab"===e.key&&i.length&&(e.shiftKey?document.activeElement===n&&(null==(t=o)\|\|t.focus(),e.preventDefault()):document.activeElement===o&&(null==(r=n)\|\|r.focus(),e.preventDefault()))};return document.addEventListener("keydown",s),i=u.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(r=n=i[0])\|\|r.focus(),function(){document.removeEventListener("keydown",s)}}},[e,t])}(_,O);var j={closePopup:T},I=null;return b&&(I="function"==typeof b?b(j):e.isValidElement(b)?e.cloneElement(b,j):function(n){var t=n.ariaLabel,o=n.closePopup;return e.createElement("button",{className:a+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),o(e)},"aria-label":void 0===t?"Close":t},e.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},e.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(j)),e.createElement(c,{animation:E,in:O,duration:L,nodeRef:_},e.createElement("div",{ref:_,id:k,className:a+"_popup-container "+C+" "},p,e.createElement("div",{className:"button-close"},I)))};l.displayName="PopupContainer";var d=e.forwardRef(l);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},p.apply(null,arguments)}var f=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var n=e.prototype;return n.registerPopup=function(e,n){this.popups[e]=n,this.notifyListeners()},n.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},n.showPopup=function(e,n){var t=this.popups[e];t&&t.show(n)},n.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},n.addListener=function(e){this.listeners.push(e)},n.removeListener=function(e){this.listeners=this.listeners.filter(function(n){return n!==e})},n.notifyListeners=function(){var e=this;this.listeners.forEach(function(n){return n(e.popups)})},e}()),m=1,v={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},h=function(o,r){var u=p({},v,o),c=u.open,l=u.backdropClassName,h=u.popupId,y=i(c),b=y[0],E=y[1],L=i({}),w=L[0],P=L[1],g=t(null),C=h\|\|""+m++;n(function(){return f.registerPopup(C,{show:function(e){e&&P(e),E(!0)},hide:function(){return E(!1)}}),function(){return f.unregisterPopup(C)}},[C]),n(function(){E(c)},[c]),n(function(){b\|\|P({})},[b]);var k,x=p({},u,w),O=e.createElement("div",{ref:r,className:a+"_popup "+l},e.createElement(d,p({ref:g,onClickClose:function(){return E(!1)}},x),o.children));return b?s.createPortal(O,((k=document.getElementById("popup-root"))\|\|((k=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(k)),k)):null};h.displayName="Popup";var y=e.forwardRef(h),b=function(e,n){f.showPopup(e,n)};export{d as Popup,y as PopupContainer,c as Transition,b as showPopup};
		import e,{useEffect as n,useRef as t,useLayoutEffect as o,useState as i,useImperativeHandle as r,useCallback as u}from"react";import s from"react-dom";var a="nc-Popupify",c=function(n){var i=n.animation,r=n.duration,u=void 0===r?300:r,s=n.children,c=n.in,l=n.nodeRef,d=n.onEntered,p=n.onExited,f=t(0),m=a+"_"+i+"-enter",v=a+"_"+i+"-exit";return o(function(){var e=l.current;e&&c&&(e.classList.remove(v),e.classList.add(m),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function n(t){t.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",n),d&&d())}))},[c,d,u,m,v,l]),o(function(){var e=l.current;e&&(c\|\|(f.current=1,e.classList.remove(m),e.classList.add(v),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function n(t){t.target===e&&(e.classList.remove(v),e.removeEventListener("animationend",n),p&&p())})))},[c,p,u,m,v,l]),e.createElement(e.Fragment,null,s)},l=function(o,s){var l=o.open,d=void 0!==l&&l,p=o.children,f=o.closeOnEscape,m=void 0===f\|\|f,v=o.closeOnOutsideClick,h=void 0===v\|\|v,y=o.closeButton,b=void 0===y\|\|y,E=o.animation,L=o.duration,w=o.onClose,P=o.onClickClose,g=o.autoClose,C=o.popupClassName,k=o.popupId,x=i(d),O=x[0],N=x[1],_=t(null);r(s,function(){return{open:function(){N(!0)},close:function(){N(!1)}}});var B,D,R,T=u(function(){P&&P(!1),w&&w(),N(!1)},[w,P]);n(function(){if(N(d),g&&d){var e=setTimeout(function(){T()},g);return function(){clearTimeout(e)}}},[d,g,T]),function(e,t,o){n(function(){if(o)return document.addEventListener("mousedown",n),function(){document.removeEventListener("mousedown",n)};function n(n){e.current&&!e.current.contains(n.target)&&t()}},[e,t,o])}(_,T,h),n(function(){if(D)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&B()}},[B=T,D=m]),n(function(){if(R){var e=window.scrollX,n=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+n+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,n)}}},[R=O]),function(e,t){n(function(){if(e.current&&t){var n,o,i,r,u=e.current,s=function(e){var t,r;"Tab"===e.key&&i.length&&(e.shiftKey?document.activeElement===n&&(null==(t=o)\|\|t.focus(),e.preventDefault()):document.activeElement===o&&(null==(r=n)\|\|r.focus(),e.preventDefault()))};return document.addEventListener("keydown",s),i=u.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(r=n=i[0])\|\|r.focus(),function(){document.removeEventListener("keydown",s)}}},[e,t])}(_,O);var j={closePopup:T},I=null;return b&&(I="function"==typeof b?b(j):e.isValidElement(b)?e.cloneElement(b,j):function(n){var t=n.ariaLabel,o=n.closePopup;return e.createElement("button",{className:a+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),o(e)},"aria-label":void 0===t?"Close":t},e.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},e.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(j)),e.createElement(c,{animation:E,in:O,duration:L,nodeRef:_},e.createElement("div",{ref:_,id:k,className:a+"_popup-container "+C+" "},p,e.createElement("div",{className:"button-close"},I)))};l.displayName="PopupContainer";var d=e.forwardRef(l);function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)({}).hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},p.apply(null,arguments)}var f=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var n=e.prototype;return n.registerPopup=function(e,n){this.popups[e]=n,this.notifyListeners()},n.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},n.showPopup=function(e,n){var t=this.popups[e];t&&t.show(n)},n.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},n.addListener=function(e){this.listeners.push(e)},n.removeListener=function(e){this.listeners=this.listeners.filter(function(n){return n!==e})},n.notifyListeners=function(){var e=this;this.listeners.forEach(function(n){return n(e.popups)})},e}()),m=1,v={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},h=function(o,r){var u=p({},v,o),c=u.open,l=u.backdropClassName,h=u.popupId,y=i(c),b=y[0],E=y[1],L=i({}),w=L[0],P=L[1],g=t(null),C=h\|\|""+m++;n(function(){return f.registerPopup(C,{show:function(e){e&&P(e),E(!0)},hide:function(){return E(!1)}}),function(){return f.unregisterPopup(C)}},[C]),n(function(){E(c)},[c]),n(function(){b\|\|P({})},[b]);var k,x=p({},u,w),O=e.createElement("div",{ref:r,className:a+"_popup "+l},e.createElement(d,p({ref:g,onClickClose:function(){return E(!1)}},x),o.children));return b?s.createPortal(O,((k=document.getElementById("popup-root"))\|\|((k=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(k)),k)):null};h.displayName="Popup";var y=e.forwardRef(h),b=function(e,n){f.showPopup(e,n)};export{y as Popup,d as PopupContainer,c as Transition,b as showPopup};
		//# sourceMappingURL=bundle.esm.js.map

dist/bundle.js

		@@ -1,2 +0,2 @@
		var e=require("react"),t=require("react-dom");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/#__PURE__/n(e),i=/#__PURE__/n(t),u="nc-Popupify",r=function(t){var n=t.animation,i=t.duration,r=void 0===i?300:i,s=t.children,a=t.in,c=t.nodeRef,l=t.onEntered,d=t.onExited,f=e.useRef(0),p=u+"_"+n+"-enter",m=u+"_"+n+"-exit";return e.useLayoutEffect(function(){var e=c.current;e&&a&&(e.classList.remove(m),e.classList.add(p),e.style.animationDuration=r+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(p),e.removeEventListener("animationend",t),l&&l())}))},[a,l,r,p,m,c]),e.useLayoutEffect(function(){var e=c.current;e&&(a\|\|(f.current=1,e.classList.remove(p),e.classList.add(m),e.style.animationDuration=r+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",t),d&&d())})))},[a,d,r,p,m,c]),o.default.createElement(o.default.Fragment,null,s)},s=function(t,n){var i=t.open,s=void 0!==i&&i,a=t.children,c=t.closeOnEscape,l=void 0===c\|\|c,d=t.closeOnOutsideClick,f=void 0===d\|\|d,p=t.closeButton,m=void 0===p\|\|p,v=t.animation,y=t.duration,h=t.onClose,E=t.onClickClose,b=t.autoClose,L=t.popupClassName,w=t.popupId,P=e.useState(s),C=P[0],g=P[1],k=e.useRef(null);e.useImperativeHandle(n,function(){return{open:function(){g(!0)},close:function(){g(!1)}}});var x,O,N,R=e.useCallback(function(){E&&E(!1),h&&h(),g(!1)},[h,E]);e.useEffect(function(){if(g(s),b&&s){var e=setTimeout(function(){R()},b);return function(){clearTimeout(e)}}},[s,b,R]),function(t,n,o){e.useEffect(function(){if(o)return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)};function e(e){t.current&&!t.current.contains(e.target)&&n()}},[t,n,o])}(k,R,f),e.useEffect(function(){if(O)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&x()}},[x=R,O=l]),e.useEffect(function(){if(N){var e=window.scrollX,t=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+t+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,t)}}},[N=C]),function(t,n){e.useEffect(function(){if(t.current&&n){var e,o,i,u,r=t.current,s=function(t){var n,u;"Tab"===t.key&&i.length&&(t.shiftKey?document.activeElement===e&&(null==(n=o)\|\|n.focus(),t.preventDefault()):document.activeElement===o&&(null==(u=e)\|\|u.focus(),t.preventDefault()))};return document.addEventListener("keydown",s),i=r.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(u=e=i[0])\|\|u.focus(),function(){document.removeEventListener("keydown",s)}}},[t,n])}(k,C);var T={closePopup:R},_=null;return m&&(_="function"==typeof m?m(T):o.default.isValidElement(m)?o.default.cloneElement(m,T):function(e){var t=e.ariaLabel,n=e.closePopup;return o.default.createElement("button",{className:u+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),n(e)},"aria-label":void 0===t?"Close":t},o.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.default.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(T)),o.default.createElement(r,{animation:v,in:C,duration:y,nodeRef:k},o.default.createElement("div",{ref:k,id:w,className:u+"_popup-container "+L+" "},a,o.default.createElement("div",{className:"button-close"},_)))};s.displayName="PopupContainer";var a=o.default.forwardRef(s);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(null,arguments)}var l=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var t=e.prototype;return t.registerPopup=function(e,t){this.popups[e]=t,this.notifyListeners()},t.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},t.showPopup=function(e,t){var n=this.popups[e];n&&n.show(t)},t.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},t.addListener=function(e){this.listeners.push(e)},t.removeListener=function(e){this.listeners=this.listeners.filter(function(t){return t!==e})},t.notifyListeners=function(){var e=this;this.listeners.forEach(function(t){return t(e.popups)})},e}()),d=1,f={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},p=function(t,n){var r=c({},f,t),s=r.open,p=r.backdropClassName,m=r.popupId,v=e.useState(s),y=v[0],h=v[1],E=e.useState({}),b=E[0],L=E[1],w=e.useRef(null),P=m\|\|""+d++;e.useEffect(function(){return l.registerPopup(P,{show:function(e){e&&L(e),h(!0)},hide:function(){return h(!1)}}),function(){return l.unregisterPopup(P)}},[P]),e.useEffect(function(){h(s)},[s]),e.useEffect(function(){y\|\|L({})},[y]);var C,g=c({},r,b),k=o.default.createElement("div",{ref:n,className:u+"_popup "+p},o.default.createElement(a,c({ref:w,onClickClose:function(){return h(!1)}},g),t.children));return y?i.default.createPortal(k,((C=document.getElementById("popup-root"))\|\|((C=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(C)),C)):null};p.displayName="Popup";var m=o.default.forwardRef(p);exports.Popup=a,exports.PopupContainer=m,exports.Transition=r,exports.showPopup=function(e,t){l.showPopup(e,t)};
		var e=require("react"),t=require("react-dom");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/#__PURE__/n(e),i=/#__PURE__/n(t),u="nc-Popupify",r=function(t){var n=t.animation,i=t.duration,r=void 0===i?300:i,s=t.children,a=t.in,c=t.nodeRef,l=t.onEntered,d=t.onExited,f=e.useRef(0),p=u+"_"+n+"-enter",m=u+"_"+n+"-exit";return e.useLayoutEffect(function(){var e=c.current;e&&a&&(e.classList.remove(m),e.classList.add(p),e.style.animationDuration=r+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(p),e.removeEventListener("animationend",t),l&&l())}))},[a,l,r,p,m,c]),e.useLayoutEffect(function(){var e=c.current;e&&(a\|\|(f.current=1,e.classList.remove(p),e.classList.add(m),e.style.animationDuration=r+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",t),d&&d())})))},[a,d,r,p,m,c]),o.default.createElement(o.default.Fragment,null,s)},s=function(t,n){var i=t.open,s=void 0!==i&&i,a=t.children,c=t.closeOnEscape,l=void 0===c\|\|c,d=t.closeOnOutsideClick,f=void 0===d\|\|d,p=t.closeButton,m=void 0===p\|\|p,v=t.animation,y=t.duration,h=t.onClose,E=t.onClickClose,b=t.autoClose,L=t.popupClassName,w=t.popupId,P=e.useState(s),C=P[0],g=P[1],k=e.useRef(null);e.useImperativeHandle(n,function(){return{open:function(){g(!0)},close:function(){g(!1)}}});var x,O,N,R=e.useCallback(function(){E&&E(!1),h&&h(),g(!1)},[h,E]);e.useEffect(function(){if(g(s),b&&s){var e=setTimeout(function(){R()},b);return function(){clearTimeout(e)}}},[s,b,R]),function(t,n,o){e.useEffect(function(){if(o)return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)};function e(e){t.current&&!t.current.contains(e.target)&&n()}},[t,n,o])}(k,R,f),e.useEffect(function(){if(O)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&x()}},[x=R,O=l]),e.useEffect(function(){if(N){var e=window.scrollX,t=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+t+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,t)}}},[N=C]),function(t,n){e.useEffect(function(){if(t.current&&n){var e,o,i,u,r=t.current,s=function(t){var n,u;"Tab"===t.key&&i.length&&(t.shiftKey?document.activeElement===e&&(null==(n=o)\|\|n.focus(),t.preventDefault()):document.activeElement===o&&(null==(u=e)\|\|u.focus(),t.preventDefault()))};return document.addEventListener("keydown",s),i=r.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(u=e=i[0])\|\|u.focus(),function(){document.removeEventListener("keydown",s)}}},[t,n])}(k,C);var T={closePopup:R},_=null;return m&&(_="function"==typeof m?m(T):o.default.isValidElement(m)?o.default.cloneElement(m,T):function(e){var t=e.ariaLabel,n=e.closePopup;return o.default.createElement("button",{className:u+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),n(e)},"aria-label":void 0===t?"Close":t},o.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.default.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(T)),o.default.createElement(r,{animation:v,in:C,duration:y,nodeRef:k},o.default.createElement("div",{ref:k,id:w,className:u+"_popup-container "+L+" "},a,o.default.createElement("div",{className:"button-close"},_)))};s.displayName="PopupContainer";var a=o.default.forwardRef(s);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c.apply(null,arguments)}var l=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var t=e.prototype;return t.registerPopup=function(e,t){this.popups[e]=t,this.notifyListeners()},t.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},t.showPopup=function(e,t){var n=this.popups[e];n&&n.show(t)},t.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},t.addListener=function(e){this.listeners.push(e)},t.removeListener=function(e){this.listeners=this.listeners.filter(function(t){return t!==e})},t.notifyListeners=function(){var e=this;this.listeners.forEach(function(t){return t(e.popups)})},e}()),d=1,f={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},p=function(t,n){var r=c({},f,t),s=r.open,p=r.backdropClassName,m=r.popupId,v=e.useState(s),y=v[0],h=v[1],E=e.useState({}),b=E[0],L=E[1],w=e.useRef(null),P=m\|\|""+d++;e.useEffect(function(){return l.registerPopup(P,{show:function(e){e&&L(e),h(!0)},hide:function(){return h(!1)}}),function(){return l.unregisterPopup(P)}},[P]),e.useEffect(function(){h(s)},[s]),e.useEffect(function(){y\|\|L({})},[y]);var C,g=c({},r,b),k=o.default.createElement("div",{ref:n,className:u+"_popup "+p},o.default.createElement(a,c({ref:w,onClickClose:function(){return h(!1)}},g),t.children));return y?i.default.createPortal(k,((C=document.getElementById("popup-root"))\|\|((C=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(C)),C)):null};p.displayName="Popup";var m=o.default.forwardRef(p);exports.Popup=m,exports.PopupContainer=a,exports.Transition=r,exports.showPopup=function(e,t){l.showPopup(e,t)};
		//# sourceMappingURL=bundle.js.map

dist/bundle.umd.js

		@@ -1,2 +0,2 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e\|\|self).reactPopupify={},e.react,e.reactDom)}(this,function(e,t,n){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/#__PURE__/o(t),u=/#__PURE__/o(n),r="nc-Popupify",a=function(e){var n=e.animation,o=e.duration,u=void 0===o?300:o,a=e.children,s=e.in,c=e.nodeRef,l=e.onEntered,d=e.onExited,f=t.useRef(0),p=r+"_"+n+"-enter",m=r+"_"+n+"-exit";return t.useLayoutEffect(function(){var e=c.current;e&&s&&(e.classList.remove(m),e.classList.add(p),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(p),e.removeEventListener("animationend",t),l&&l())}))},[s,l,u,p,m,c]),t.useLayoutEffect(function(){var e=c.current;e&&(s\|\|(f.current=1,e.classList.remove(p),e.classList.add(m),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",t),d&&d())})))},[s,d,u,p,m,c]),i.default.createElement(i.default.Fragment,null,a)},s=function(e,n){var o=e.open,u=void 0!==o&&o,s=e.children,c=e.closeOnEscape,l=void 0===c\|\|c,d=e.closeOnOutsideClick,f=void 0===d\|\|d,p=e.closeButton,m=void 0===p\|\|p,v=e.animation,y=e.duration,h=e.onClose,E=e.onClickClose,b=e.autoClose,L=e.popupClassName,w=e.popupId,P=t.useState(u),g=P[0],C=P[1],k=t.useRef(null);t.useImperativeHandle(n,function(){return{open:function(){C(!0)},close:function(){C(!1)}}});var x,O,N,R=t.useCallback(function(){E&&E(!1),h&&h(),C(!1)},[h,E]);t.useEffect(function(){if(C(u),b&&u){var e=setTimeout(function(){R()},b);return function(){clearTimeout(e)}}},[u,b,R]),function(e,n,o){t.useEffect(function(){if(o)return document.addEventListener("mousedown",t),function(){document.removeEventListener("mousedown",t)};function t(t){e.current&&!e.current.contains(t.target)&&n()}},[e,n,o])}(k,R,f),t.useEffect(function(){if(O)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&x()}},[x=R,O=l]),t.useEffect(function(){if(N){var e=window.scrollX,t=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+t+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,t)}}},[N=g]),function(e,n){t.useEffect(function(){if(e.current&&n){var t,o,i,u,r=e.current,a=function(e){var n,u;"Tab"===e.key&&i.length&&(e.shiftKey?document.activeElement===t&&(null==(n=o)\|\|n.focus(),e.preventDefault()):document.activeElement===o&&(null==(u=t)\|\|u.focus(),e.preventDefault()))};return document.addEventListener("keydown",a),i=r.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(u=t=i[0])\|\|u.focus(),function(){document.removeEventListener("keydown",a)}}},[e,n])}(k,g);var T={closePopup:R},j=null;return m&&(j="function"==typeof m?m(T):i.default.isValidElement(m)?i.default.cloneElement(m,T):function(e){var t=e.ariaLabel,n=e.closePopup;return i.default.createElement("button",{className:r+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),n(e)},"aria-label":void 0===t?"Close":t},i.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},i.default.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(T)),i.default.createElement(a,{animation:v,in:g,duration:y,nodeRef:k},i.default.createElement("div",{ref:k,id:w,className:r+"_popup-container "+L+" "},s,i.default.createElement("div",{className:"button-close"},j)))};s.displayName="PopupContainer";var c=i.default.forwardRef(s);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l.apply(null,arguments)}var d=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var t=e.prototype;return t.registerPopup=function(e,t){this.popups[e]=t,this.notifyListeners()},t.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},t.showPopup=function(e,t){var n=this.popups[e];n&&n.show(t)},t.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},t.addListener=function(e){this.listeners.push(e)},t.removeListener=function(e){this.listeners=this.listeners.filter(function(t){return t!==e})},t.notifyListeners=function(){var e=this;this.listeners.forEach(function(t){return t(e.popups)})},e}()),f=1,p={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},m=function(e,n){var o=l({},p,e),a=o.open,s=o.backdropClassName,m=o.popupId,v=t.useState(a),y=v[0],h=v[1],E=t.useState({}),b=E[0],L=E[1],w=t.useRef(null),P=m\|\|""+f++;t.useEffect(function(){return d.registerPopup(P,{show:function(e){e&&L(e),h(!0)},hide:function(){return h(!1)}}),function(){return d.unregisterPopup(P)}},[P]),t.useEffect(function(){h(a)},[a]),t.useEffect(function(){y\|\|L({})},[y]);var g,C=l({},o,b),k=i.default.createElement("div",{ref:n,className:r+"_popup "+s},i.default.createElement(c,l({ref:w,onClickClose:function(){return h(!1)}},C),e.children));return y?u.default.createPortal(k,((g=document.getElementById("popup-root"))\|\|((g=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(g)),g)):null};m.displayName="Popup";var v=i.default.forwardRef(m);e.Popup=c,e.PopupContainer=v,e.Transition=a,e.showPopup=function(e,t){d.showPopup(e,t)}});
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t((e\|\|self).reactPopupify={},e.react,e.reactDom)}(this,function(e,t,n){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=/#__PURE__/o(t),u=/#__PURE__/o(n),r="nc-Popupify",a=function(e){var n=e.animation,o=e.duration,u=void 0===o?300:o,a=e.children,s=e.in,c=e.nodeRef,l=e.onEntered,d=e.onExited,f=t.useRef(0),p=r+"_"+n+"-enter",m=r+"_"+n+"-exit";return t.useLayoutEffect(function(){var e=c.current;e&&s&&(e.classList.remove(m),e.classList.add(p),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(p),e.removeEventListener("animationend",t),l&&l())}))},[s,l,u,p,m,c]),t.useLayoutEffect(function(){var e=c.current;e&&(s\|\|(f.current=1,e.classList.remove(p),e.classList.add(m),e.style.animationDuration=u+"ms",e.addEventListener("animationend",function t(n){n.target===e&&(e.classList.remove(m),e.removeEventListener("animationend",t),d&&d())})))},[s,d,u,p,m,c]),i.default.createElement(i.default.Fragment,null,a)},s=function(e,n){var o=e.open,u=void 0!==o&&o,s=e.children,c=e.closeOnEscape,l=void 0===c\|\|c,d=e.closeOnOutsideClick,f=void 0===d\|\|d,p=e.closeButton,m=void 0===p\|\|p,v=e.animation,y=e.duration,h=e.onClose,E=e.onClickClose,b=e.autoClose,L=e.popupClassName,w=e.popupId,P=t.useState(u),g=P[0],C=P[1],k=t.useRef(null);t.useImperativeHandle(n,function(){return{open:function(){C(!0)},close:function(){C(!1)}}});var x,O,N,R=t.useCallback(function(){E&&E(!1),h&&h(),C(!1)},[h,E]);t.useEffect(function(){if(C(u),b&&u){var e=setTimeout(function(){R()},b);return function(){clearTimeout(e)}}},[u,b,R]),function(e,n,o){t.useEffect(function(){if(o)return document.addEventListener("mousedown",t),function(){document.removeEventListener("mousedown",t)};function t(t){e.current&&!e.current.contains(t.target)&&n()}},[e,n,o])}(k,R,f),t.useEffect(function(){if(O)return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)};function e(e){"Escape"===e.key&&x()}},[x=R,O=l]),t.useEffect(function(){if(N){var e=window.scrollX,t=window.scrollY;return document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.top="-"+t+"px",function(){document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.top="",window.scrollTo(e,t)}}},[N=g]),function(e,n){t.useEffect(function(){if(e.current&&n){var t,o,i,u,r=e.current,a=function(e){var n,u;"Tab"===e.key&&i.length&&(e.shiftKey?document.activeElement===t&&(null==(n=o)\|\|n.focus(),e.preventDefault()):document.activeElement===o&&(null==(u=t)\|\|u.focus(),e.preventDefault()))};return document.addEventListener("keydown",a),i=r.querySelectorAll('\n a[href], area[href], input:not([disabled]), select:not([disabled]), \n textarea:not([disabled]), button:not([disabled]), iframe, object, embed, \n [tabindex="0"], [contenteditable], [tabindex]:not([tabindex="-1"])\n '),o=i[i.length-1],null==(u=t=i[0])\|\|u.focus(),function(){document.removeEventListener("keydown",a)}}},[e,n])}(k,g);var T={closePopup:R},j=null;return m&&(j="function"==typeof m?m(T):i.default.isValidElement(m)?i.default.cloneElement(m,T):function(e){var t=e.ariaLabel,n=e.closePopup;return i.default.createElement("button",{className:r+"_close-button",type:"button",onClick:function(e){e.stopPropagation(),n(e)},"aria-label":void 0===t?"Close":t},i.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},i.default.createElement("path",{d:"m7.71 8.23 3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48z"})))}(T)),i.default.createElement(a,{animation:v,in:g,duration:y,nodeRef:k},i.default.createElement("div",{ref:k,id:w,className:r+"_popup-container "+L+" "},s,i.default.createElement("div",{className:"button-close"},j)))};s.displayName="PopupContainer";var c=i.default.forwardRef(s);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l.apply(null,arguments)}var d=new(/#__PURE__/function(){function e(){this.popups={},this.listeners=[]}var t=e.prototype;return t.registerPopup=function(e,t){this.popups[e]=t,this.notifyListeners()},t.unregisterPopup=function(e){delete this.popups[e],this.notifyListeners()},t.showPopup=function(e,t){var n=this.popups[e];n&&n.show(t)},t.hidePopup=function(e){this.popups[e]&&(this.popups[e].hide(),this.notifyListeners())},t.addListener=function(e){this.listeners.push(e)},t.removeListener=function(e){this.listeners=this.listeners.filter(function(t){return t!==e})},t.notifyListeners=function(){var e=this;this.listeners.forEach(function(t){return t(e.popups)})},e}()),f=1,p={open:!1,autoClose:!1,closeOnOutsideClick:!0,closeOnEscape:!0,animation:"fade",duration:300,closeButton:!0},m=function(e,n){var o=l({},p,e),a=o.open,s=o.backdropClassName,m=o.popupId,v=t.useState(a),y=v[0],h=v[1],E=t.useState({}),b=E[0],L=E[1],w=t.useRef(null),P=m\|\|""+f++;t.useEffect(function(){return d.registerPopup(P,{show:function(e){e&&L(e),h(!0)},hide:function(){return h(!1)}}),function(){return d.unregisterPopup(P)}},[P]),t.useEffect(function(){h(a)},[a]),t.useEffect(function(){y\|\|L({})},[y]);var g,C=l({},o,b),k=i.default.createElement("div",{ref:n,className:r+"_popup "+s},i.default.createElement(c,l({ref:w,onClickClose:function(){return h(!1)}},C),e.children));return y?u.default.createPortal(k,((g=document.getElementById("popup-root"))\|\|((g=document.createElement("div")).setAttribute("id","popup-root"),document.body.appendChild(g)),g)):null};m.displayName="Popup";var v=i.default.forwardRef(m);e.Popup=v,e.PopupContainer=c,e.Transition=a,e.showPopup=function(e,t){d.showPopup(e,t)}});
		//# sourceMappingURL=bundle.umd.js.map

dist/components/index.d.ts

		@@ -1,4 +0,4 @@
		import Popup from './PopupContainer';
		import PopupContainer from './Popup';
		import PopupContainer from './PopupContainer';
		import Popup from './Popup';
		import Transition from './Transition';
		export { Popup, PopupContainer, Transition };

package.json

		{
		"name": "react-popupify",
		"version": "1.0.3",
		"version": "1.0.4",
		"description": "React Popupify is a simple and easy to use popup component for React applications.",
		@@ -5,0 +5,0 @@ "author": "Vidit Kushwaha <connect.viditkushwaha@gmail.com> (https://viditkushwaha.com/)",

dist/bundle.modern.mjs

Sorry, the diff of this file is not supported yet

react-popupify - npm Package Compare versions

New alerts

Fixed alerts