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

A reusable React modal component.

"use strict";var e=require("react/jsx-runtime"),n=require("react");var o="modal-module_modal__NwahI",t="modal-module_close__sR1aI",a="modal-module_xmark__xldW4";!function(e,n){void 0===n&&(n={});var o=n.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&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}"),module.exports=function(l){var r=l.show,i=l.setShow,d=l.className,s=void 0===d?"":d,u=l.toFocus,c=l.ariaLabelledby,m=l.ariaDescribedby,h=l.disabledCloseBtn,_=l.children,f=document.activeElement,p=n.useRef(null),x=n.useRef(210),v=n.useRef(0),w=n.useCallback((function(){var e=p.current;clearTimeout(v.current),y(!0),e.showModal(),u&&requestAnimationFrame((function(){var e;return null===(e=u.current)||void 0===e?void 0:e.focus()}))}),[]),b=n.useCallback((function(){v.current=setTimeout((function(){p.current.close(),null==f||f.focus()}),x.current),y(!1)}),[]),y=n.useCallback((function(e){document.documentElement.style.setProperty("overflow",e?"hidden":"","important")}),[]),g=n.useCallback((function(){return i(!1)}),[]);return n.useEffect((function(){if(r)return w(),b}),[r]),e.jsxs("dialog",{className:"".concat(s," ").concat(o),style:{transitionDuration:x.current+"ms"},role:"dialog","aria-labelledby":c,"aria-describedby":m,"aria-modal":r,ref:p,children:[!h&&e.jsx("button",{className:t,type:"button",onClick:g,autoFocus:!0,children:e.jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M5 19L19 5M5 5L19 19",stroke:"currentColor",strokeWidth:"2.7",strokeLinecap:"round",strokeLinejoin:"round"})})}),_]})};
//# sourceMappingURL=index.js.map