hst-custom-modal-component/dist/index.mjs

A customizable modal component for React apps

var b=Object.defineProperty;var i=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var l=(t,e,o)=>e in t?b(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,c=(t,e)=>{for(var o in e||(e={}))y.call(e,o)&&l(t,o,e[o]);if(i)for(var o of i(e))C.call(e,o)&&l(t,o,e[o]);return t};import{useEffect as R,useRef as k}from"react";import{jsx as s,jsxs as N}from"react/jsx-runtime";var h=({isOpen:t,onClose:e,title:o,children:m,footer:d,className:u="",backdropClassName:f="",style:p={},closeOnOutsideClick:g=!0,closeOnEscape:n=!0})=>{let r=k(null);R(()=>{let a=x=>{x.key==="Escape"&&n&&e()};return t&&document.addEventListener("keydown",a),()=>{document.removeEventListener("keydown",a)}},[t,n,e]);let v=a=>{g&&r.current&&!r.current.contains(a.target)&&e()};return t?s("div",{className:`custom-modal-backdrop ${f}`,onClick:v,style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.6)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:9999,padding:"1rem",boxSizing:"border-box"},children:N("div",{ref:r,className:`custom-modal-content ${u}`,style:c({background:"#ffffff",padding:"2rem",borderRadius:"12px",width:"100%",maxWidth:"600px",maxHeight:"90vh",overflowY:"auto",boxShadow:"0 8px 20px rgba(0,0,0,0.15)"},p),onClick:a=>a.stopPropagation(),children:[o&&s("h2",{className:"custom-modal-title",style:{fontSize:"1.5rem",fontWeight:600,marginBottom:"1.5rem"},children:o}),s("div",{className:"custom-modal-body",style:{marginBottom:d?"2rem":"0"},children:m}),d&&s("div",{className:"custom-modal-footer",style:{display:"flex",justifyContent:"flex-end",gap:"1rem"},children:d})]})}):null};export{h as CustomModal};
//# sourceMappingURL=index.mjs.map