@morganlethuaut/react-modal-component/dist/index.mjs

A reusable React modal component.

import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as n,useCallback as t,useEffect as a}from"react";var l="modal-module_modal__NwahI",r="modal-module_close__sR1aI",i="modal-module_xmark__xldW4";function d(d){var m=d.show,s=d.setShow,c=d.className,u=void 0===c?"":c,h=d.toFocus,_=d.ariaLabelledby,p=d.ariaDescribedby,f=d.disabledCloseBtn,v=d.children,x=document.activeElement,w=n(null),y=n(210),b=n(0),g=t((function(){var e=w.current;clearTimeout(b.current),I(!0),e.showModal(),h&&requestAnimationFrame((function(){var e;return null===(e=h.current)||void 0===e?void 0:e.focus()}))}),[]),N=t((function(){b.current=setTimeout((function(){w.current.close(),null==x||x.focus()}),y.current),I(!1)}),[]),I=t((function(e){document.documentElement.style.setProperty("overflow",e?"hidden":"","important")}),[]),k=t((function(){return s(!1)}),[]);return a((function(){if(m)return g(),N}),[m]),e("dialog",{className:"".concat(u," ").concat(l),style:{transitionDuration:y.current+"ms"},role:"dialog","aria-labelledby":_,"aria-describedby":p,"aria-modal":m,ref:w,children:[!f&&o("button",{className:r,type:"button",onClick:k,autoFocus:!0,children:o("svg",{className:i,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:o("path",{d:"M5 19L19 5M5 5L19 19",stroke:"currentColor",strokeWidth:"2.7",strokeLinecap:"round",strokeLinejoin:"round"})})}),v]})}!function(e,o){void 0===o&&(o={});var n=o.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".modal-module_modal__NwahI {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n  background: none;\n  backdrop-filter: blur(50px);\n  overscroll-behavior: none;\n  transition: opacity ease-in;\n}\n.modal-module_modal__NwahI[aria-modal=false] {\n  opacity: 0;\n  pointer-events: none !important;\n}\n.modal-module_modal__NwahI[aria-modal=true] {\n  opacity: 1;\n}\n.modal-module_modal__NwahI .modal-module_close__sR1aI {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 10px;\n  right: 10px;\n  width: 47px;\n  height: 47px;\n}\n.modal-module_modal__NwahI .modal-module_close__sR1aI:is(:hover, :focus) {\n  filter: invert(1);\n  outline: solid #000 1px;\n}\n.modal-module_modal__NwahI .modal-module_close__sR1aI .modal-module_xmark__xldW4 {\n  width: 23.5px;\n  height: 23.5px;\n}");export{d as default};
//# sourceMappingURL=index.mjs.map