aark-react-modalify 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +51 -0
- package/dist/index.esm.js +62 -0
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict"
|
|
2
|
+
function o(){const[o,a]=c.useState(!1),[e,n]=c.useState(null),t=c.useCallback(()=>{I.close()},[])
|
|
3
|
+
return c.useEffect(()=>{const o=I.subscribe(o=>{switch(o.type){case"open":a(!0),n(o.config||null)
|
|
4
|
+
break
|
|
5
|
+
case"close":a(!1),n(null)}})
|
|
6
|
+
return a(I.isOpen()),n(I.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:t}}function a(){if(z)return
|
|
7
|
+
const o=b()
|
|
8
|
+
z=s.createRoot(o),z.render(c.createElement(N))}function e(o,a){const e={type:o,config:a}
|
|
9
|
+
B.forEach(o=>o(e))}function n(o,n){let t,r
|
|
10
|
+
a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
|
|
11
|
+
const l={content:t,props:r,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},n)}
|
|
12
|
+
T=l,e("open",l)}function t(){T&&(e("beforeClose",T),T=null,e("close"))}function r(o){const a=document.documentElement
|
|
13
|
+
o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function l(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(a=>{o.style.removeProperty(a)})}function i(){const o=document.documentElement,a=getComputedStyle(o)
|
|
14
|
+
return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
15
|
+
const c=require("react"),s=require("react-dom/client"),d=require("react/jsx-runtime"),m=require("react-dom"),u={white:"#FFFFFF",black:"#0B071A"},f=c.memo(({name:o,color:a="black",style:e,className:n="",noHoverEffect:t=!1,onClick:r,size:l=24,"aria-label":i,title:s})=>{const m=c.useMemo(()=>l+"",[l]),f=c.useMemo(()=>u[a]?u[a]:(a.startsWith("#"),a),[a]),k=c.useMemo(()=>{const a=f
|
|
16
|
+
return"close"===o?d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 16 16",fill:"none",children:d.jsx("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:a})}):null},[o,f,m]),p=c.useMemo(()=>{const a={}
|
|
17
|
+
return a["aria-label"]=i||o+" icon",s&&(a.title=s),a.role=r?"button":"img",a},[i,s,o,r]),h=c.useMemo(()=>{if(r)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),r())}},[r])
|
|
18
|
+
return d.jsx("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!t&&r&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${r&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${n}\n `.trim(),style:e,onClick:r,onKeyDown:h,tabIndex:r?0:void 0,...p,children:k})})
|
|
19
|
+
f.displayName="Icon"
|
|
20
|
+
const k={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},p={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},h=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",cancelText:r="Cancel",confirmText:l="OK",onCancel:i,onConfirm:s,icon:m,html:u,showCancelButton:f=!1,showConfirmButton:h=!0,reverseButtons:g=!1,width:b="auto",fullWidth:v=!1,customClass:C={}}=o,y=()=>{i?.(),a()},x=()=>{s?.(),a()},w=c.useMemo(()=>m?"string"==typeof m?d.jsx("span",{children:m}):m:d.jsx("span",{style:{color:p[t]},children:k[t]}),[m,t]),N=g?["confirm","cancel"]:["cancel","confirm"],B=c.useMemo(()=>{const o={}
|
|
21
|
+
return v?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof b?b+"px":b,o},[b,v])
|
|
22
|
+
return d.jsxs("div",{className:"aark-standard-modal "+(C.popup||""),style:B,children:[d.jsxs("div",{className:"aark-modal-content "+(C.content||""),children:[w&&d.jsx("div",{className:"aark-modal-icon "+(C.icon||""),children:w}),e&&d.jsx("div",{className:"aark-modal-header "+(C.header||""),children:d.jsx("h2",{className:"aark-modal-title "+(C.title||""),children:e})}),u?d.jsx("div",{dangerouslySetInnerHTML:{o:"string"==typeof u?u:""}}):n?d.jsx("p",{children:n}):null]}),(f||h)&&d.jsx("div",{className:"aark-modal-footer "+(C.actions||""),children:N.map(o=>"cancel"===o&&f?d.jsx("button",{onClick:y,className:"aark-modal-cancel-button "+(C.cancelButton||""),children:r},"cancel"):"confirm"===o&&h?d.jsx("button",{onClick:x,className:"aark-modal-confirm-button "+(C.confirmButton||""),style:{background:p[t]},children:l},"confirm"):null)})]})}
|
|
23
|
+
let g=null
|
|
24
|
+
const b=()=>(g||(g=document.getElementById("aark-react-modalify-root"),g||(g=document.createElement("div"),g.id="aark-react-modalify-root",g.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n ",document.body.appendChild(g))),g),v=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="center",showCloseIcon:l=!0,className:i="",overlayClassName:s="",preventEscClose:u=!1,preventOverlayClose:k=!1}=t
|
|
25
|
+
c.useEffect(()=>{const o=o=>{"Escape"!==o.key||u||a()}
|
|
26
|
+
if(!u)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,u])
|
|
27
|
+
const p=c.useCallback(o=>{o.target!==o.currentTarget||k||a()},[a,k]),g=c.useCallback(o=>{o.stopPropagation(),a()},[a]),v=`aark-modal-container ${r} ${i}`.trim(),C=b()
|
|
28
|
+
return m.createPortal(d.jsx("div",{className:("aark-modal-overlay "+s).trim(),onClick:p,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:9999,background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:r.includes("center")?"center":r.includes("top")?"flex-start":"flex-end",justifyContent:r.includes("center")?"center":r.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:n?d.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&d.jsx("button",{onClick:g,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:d.jsx(f,{name:"close",size:12})}),d.jsx("div",{className:"aark-modal-wrapper",children:d.jsx(h,{props:n,onClose:a})})]}):e?d.jsxs("div",{className:v,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&d.jsx("button",{onClick:g,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:d.jsx(f,{name:"close",size:12})}),d.jsx("div",{className:"aark-modal-body",children:e})]}):null}),C)},C={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},y={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},x=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",icon:r,html:l,timer:i=5e3,showCloseButton:s=!0,clickToClose:m=!0,width:u="300px",fullWidth:f=!1,padding:k="1rem",background:p="#ffffff",customClass:h={}}=o
|
|
29
|
+
c.useEffect(()=>{if(i&&i>0){const o=setTimeout(a,i)
|
|
30
|
+
return()=>clearTimeout(o)}},[i,a])
|
|
31
|
+
const g=c.useMemo(()=>r?"string"==typeof r?d.jsx("span",{children:r}):r:d.jsx("span",{style:{color:y[t]},children:C[t]}),[r,t]),b=c.useMemo(()=>{const o={padding:k,background:p,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:"1px solid "+y[t],cursor:m?"pointer":"default",position:"relative",overflow:"hidden"}
|
|
32
|
+
return f?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof u?u+"px":u,o},[u,f,k,p,t,m])
|
|
33
|
+
return d.jsxs("div",{className:"aark-standard-notification "+(h.popup||""),style:b,onClick:()=>{m&&a()},children:[i&&i>0&&d.jsx("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:y[t],animation:`aark-notification-progress ${i}ms linear forwards`,transformOrigin:"left"}}),d.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[g&&d.jsx("div",{className:"aark-notification-icon "+(h.icon||""),style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:g}),d.jsxs("div",{style:{flex:1,minWidth:0},children:[e&&d.jsx("div",{className:"aark-notification-header "+(h.header||""),children:d.jsx("h4",{className:"aark-notification-title "+(h.title||""),style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:e})}),d.jsx("div",{className:"aark-notification-content "+(h.content||""),style:{marginTop:e?"0.25rem":0},children:l?d.jsx("div",{dangerouslySetInnerHTML:{o:"string"==typeof l?l:""}}):n?d.jsx("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),s&&d.jsx("button",{onClick:o=>{o.stopPropagation(),a()},className:"aark-notification-close "+(h.closeButton||""),style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),d.jsx("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},w=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="top-right",showCloseIcon:l=!0,autoCloseTime:i=5e3,className:s="",preventEscClose:u=!1}=t
|
|
34
|
+
c.useEffect(()=>{if(i&&!n){const o=setTimeout(a,i)
|
|
35
|
+
return()=>clearTimeout(o)}},[i,a,n]),c.useEffect(()=>{const o=o=>{"Escape"!==o.key||u||a()}
|
|
36
|
+
if(!u)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,u])
|
|
37
|
+
const f=c.useCallback(o=>{o.stopPropagation(),a()},[a]),k=`aark-notification-container ${r} ${s}`.trim(),p=b()
|
|
38
|
+
return m.createPortal(d.jsx("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"}
|
|
39
|
+
switch(r){case"top-left":return{...o,top:0,left:0}
|
|
40
|
+
case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"}
|
|
41
|
+
case"top-right":default:return{...o,top:0,right:0}
|
|
42
|
+
case"bottom-left":return{...o,bottom:0,left:0}
|
|
43
|
+
case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"}
|
|
44
|
+
case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?d.jsx("div",{className:"aark-notification-wrapper",children:d.jsx(x,{props:n,onClose:a})}):e?d.jsxs("div",{className:k,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[l&&d.jsx("button",{onClick:f,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),d.jsx("div",{id:"aark-notification-body",className:"aark-notification-body",children:e})]}):null}),p)},N=()=>{const{isOpen:a,config:e,close:n}=o()
|
|
45
|
+
return a&&e?"modal"===e.mode?d.jsx(v,{config:e,onClose:n}):"notification"===e.mode?d.jsx(w,{config:e,onClose:n}):null:null},B=new Set
|
|
46
|
+
let T=null,z=null
|
|
47
|
+
const I={subscribe:function(o){return B.add(o),()=>B.delete(o)},fire:function(o,a){n(o,a)},fireModal:n,fireNotification:function(o,n){let t,r
|
|
48
|
+
a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
|
|
49
|
+
const l={content:t,props:r,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},n)}
|
|
50
|
+
T=l,e("open",l)},close:t,isOpen:function(){return null!==T},getCurrentConfig:function(){return T},closeAll:function(){t()},cleanup:function(){z&&(z.unmount(),z=null),g&&0===g.children.length&&(g.remove(),g=null)}},S={fire:(o,a)=>I.fire(o,a),modal:(o,a)=>I.fireModal(o,a),notification:(o,a)=>I.fireNotification(o,a),close:()=>I.close(),isOpen:()=>I.isOpen(),closeAll:()=>I.closeAll(),setTheme:o=>r(o),resetTheme:()=>l(),getTheme:()=>i()}
|
|
51
|
+
exports.Modal=v,exports.ModalProvider=N,exports.Notification=w,exports.aark=S,exports.getAarkModalTheme=i,exports.resetAarkModalTheme=l,exports.setAarkModalTheme=r,exports.useModal=o
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
function o(){const[o,a]=c(!1),[e,n]=c(null),t=s(()=>{E.close()},[])
|
|
2
|
+
return d(()=>{const o=E.subscribe(o=>{switch(o.type){case"open":a(!0),n(o.config||null)
|
|
3
|
+
break
|
|
4
|
+
case"close":a(!1),n(null)}})
|
|
5
|
+
return a(E.isOpen()),n(E.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:t}}function a(){if(L)return
|
|
6
|
+
const o=N()
|
|
7
|
+
L=k(o),L.render(f(M))}function e(o,a){const e={type:o,config:a}
|
|
8
|
+
O.forEach(o=>o(e))}function n(o,n){let t,r
|
|
9
|
+
a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
|
|
10
|
+
const l={content:t,props:r,mode:"modal",options:Object.assign({position:"center",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},n)}
|
|
11
|
+
$=l,e("open",l)}function t(){$&&(e("beforeClose",$),$=null,e("close"))}function r(o){const a=document.documentElement
|
|
12
|
+
o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function l(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(a=>{o.style.removeProperty(a)})}function i(){const o=document.documentElement,a=getComputedStyle(o)
|
|
13
|
+
return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}import{useState as c,useCallback as s,useEffect as d,memo as m,useMemo as u,createElement as f}from"react"
|
|
14
|
+
import{createRoot as k}from"react-dom/client"
|
|
15
|
+
import{jsx as p,jsxs as h}from"react/jsx-runtime"
|
|
16
|
+
import{createPortal as g}from"react-dom"
|
|
17
|
+
const b={white:"#FFFFFF",black:"#0B071A"},v=m(({name:o,color:a="black",style:e,className:n="",noHoverEffect:t=!1,onClick:r,size:l=24,"aria-label":i,title:c})=>{const s=u(()=>l+"",[l]),d=u(()=>b[a]?b[a]:(a.startsWith("#"),a),[a]),m=u(()=>"close"===o?/* @__PURE__ */p("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:s,viewBox:"0 0 16 16",fill:"none",children:/* @__PURE__ */p("path",{d:"M15.281 14.2198C15.3507 14.2895 15.406 14.3722 15.4437 14.4632C15.4814 14.5543 15.5008 14.6519 15.5008 14.7504C15.5008 14.849 15.4814 14.9465 15.4437 15.0376C15.406 15.1286 15.3507 15.2114 15.281 15.281C15.2114 15.3507 15.1286 15.406 15.0376 15.4437C14.9465 15.4814 14.849 15.5008 14.7504 15.5008C14.6519 15.5008 14.5543 15.4814 14.4632 15.4437C14.3722 15.406 14.2895 15.3507 14.2198 15.281L8.00042 9.06073L1.78104 15.281C1.64031 15.4218 1.44944 15.5008 1.25042 15.5008C1.05139 15.5008 0.860523 15.4218 0.719792 15.281C0.579062 15.1403 0.5 14.9494 0.5 14.7504C0.5 14.5514 0.579062 14.3605 0.719792 14.2198L6.9401 8.00042L0.719792 1.78104C0.579062 1.64031 0.5 1.44944 0.5 1.25042C0.5 1.05139 0.579062 0.860523 0.719792 0.719792C0.860523 0.579062 1.05139 0.5 1.25042 0.5C1.44944 0.5 1.64031 0.579062 1.78104 0.719792L8.00042 6.9401L14.2198 0.719792C14.3605 0.579062 14.5514 0.5 14.7504 0.5C14.9494 0.5 15.1403 0.579062 15.281 0.719792C15.4218 0.860523 15.5008 1.05139 15.5008 1.25042C15.5008 1.44944 15.4218 1.64031 15.281 1.78104L9.06073 8.00042L15.281 14.2198Z",fill:d})}):null,[o,d,s]),f=u(()=>{const a={}
|
|
18
|
+
return a["aria-label"]=i||o+" icon",c&&(a.title=c),a.role=r?"button":"img",a},[i,c,o,r]),k=u(()=>{if(r)return o=>{"Enter"!==o.key&&" "!==o.key||(o.preventDefault(),r())}},[r]);/* @__PURE__ */
|
|
19
|
+
return p("i",{className:`\n inline-flex items-center justify-center bg-transparent outline-none border-none\n ${!t&&r&&"hover:opacity-80 cursor-pointer transition-opacity duration-200"}\n ${r&&"focus:outline-2 focus:outline-blue-500 focus:outline-offset-2"}\n ${n}\n `.trim(),style:e,onClick:r,onKeyDown:k,tabIndex:r?0:void 0,...f,children:m})})
|
|
20
|
+
v.displayName="Icon"
|
|
21
|
+
const C={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},y={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},x=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",cancelText:r="Cancel",confirmText:l="OK",onCancel:i,onConfirm:c,icon:s,html:d,showCancelButton:m=!1,showConfirmButton:f=!0,reverseButtons:k=!1,width:g="auto",fullWidth:b=!1,customClass:v={}}=o,x=()=>{i?.(),a()},w=()=>{c?.(),a()},N=u(()=>s?"string"==typeof s?/* @__PURE__ */p("span",{children:s}):s:/* @__PURE__ */p("span",{style:{color:y[t]},children:C[t]}),[s,t]),B=k?["confirm","cancel"]:["cancel","confirm"],T=u(()=>{const o={}
|
|
22
|
+
return b?(o.width="calc(100vw - 20px)",o.maxWidth="calc(100vw - 20px)"):o.width="number"==typeof g?g+"px":g,o},[g,b]);/* @__PURE__ */
|
|
23
|
+
return h("div",{className:"aark-standard-modal "+(v.popup||""),style:T,children:[
|
|
24
|
+
/* @__PURE__ */h("div",{className:"aark-modal-content "+(v.content||""),children:[N&&/* @__PURE__ */p("div",{className:"aark-modal-icon "+(v.icon||""),children:N}),e&&/* @__PURE__ */p("div",{className:"aark-modal-header "+(v.header||""),children:/* @__PURE__ */p("h2",{className:"aark-modal-title "+(v.title||""),children:e})}),d?/* @__PURE__ */p("div",{dangerouslySetInnerHTML:{o:"string"==typeof d?d:""}}):n?/* @__PURE__ */p("p",{children:n}):null]}),(m||f)&&/* @__PURE__ */p("div",{className:"aark-modal-footer "+(v.actions||""),children:B.map(o=>"cancel"===o&&m?/* @__PURE__ */p("button",{onClick:x,className:"aark-modal-cancel-button "+(v.cancelButton||""),children:r},"cancel"):"confirm"===o&&f?/* @__PURE__ */p("button",{onClick:w,className:"aark-modal-confirm-button "+(v.confirmButton||""),style:{background:y[t]},children:l},"confirm"):null)})]})}
|
|
25
|
+
let w=null
|
|
26
|
+
const N=()=>(w||(w=document.getElementById("aark-react-modalify-root"),w||(w=document.createElement("div"),w.id="aark-react-modalify-root",w.style.cssText="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9998;\n ",document.body.appendChild(w))),w),B=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="center",showCloseIcon:l=!0,className:i="",overlayClassName:c="",preventEscClose:m=!1,preventOverlayClose:u=!1}=t
|
|
27
|
+
d(()=>{const o=o=>{"Escape"!==o.key||m||a()}
|
|
28
|
+
if(!m)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,m])
|
|
29
|
+
const f=s(o=>{o.target!==o.currentTarget||u||a()},[a,u]),k=s(o=>{o.stopPropagation(),a()},[a]),b=`aark-modal-container ${r} ${i}`.trim(),C=N()
|
|
30
|
+
return g(
|
|
31
|
+
/* @__PURE__ */p("div",{className:("aark-modal-overlay "+c).trim(),onClick:f,"aria-hidden":"true",style:{position:"fixed",inset:0,zIndex:9999,background:"var(--aark-modal-overlay-bg)",backdropFilter:"blur(2px)",animation:"fade-in var(--aark-anim)",display:"flex",alignItems:r.includes("center")?"center":r.includes("top")?"flex-start":"flex-end",justifyContent:r.includes("center")?"center":r.includes("right")?"flex-end":"flex-start",padding:"1rem"},children:n?/* @__PURE__ */h("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&/* @__PURE__ */p("button",{onClick:k,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */p(v,{name:"close",size:12})}),
|
|
32
|
+
/* @__PURE__ */p("div",{className:"aark-modal-wrapper",children:/* @__PURE__ */p(x,{props:n,onClose:a})})]}):e?/* @__PURE__ */h("div",{className:b,role:"dialog","aria-modal":"true",onClick:o=>o.stopPropagation(),children:[l&&/* @__PURE__ */p("button",{onClick:k,className:"aark-modal-close","aria-label":"Close Modal",type:"button",children:/* @__PURE__ */p(v,{name:"close",size:12})}),
|
|
33
|
+
/* @__PURE__ */p("div",{className:"aark-modal-body",children:e})]}):null}),C)},T={success:"✓",error:"✕",warning:"⚠",info:"ⓘ",question:"?"},z={success:"#4ade80",error:"#ef4444",warning:"#f59e0b",info:"#3b82f6",question:"#8b5cf6"},I=({props:o,onClose:a})=>{const{title:e,text:n,type:t="info",icon:r,html:l,timer:i=5e3,showCloseButton:c=!0,clickToClose:s=!0,width:m="300px",fullWidth:f=!1,padding:k="1rem",background:g="#ffffff",customClass:b={}}=o
|
|
34
|
+
d(()=>{if(i&&i>0){const o=setTimeout(a,i)
|
|
35
|
+
return()=>clearTimeout(o)}},[i,a])
|
|
36
|
+
const v=u(()=>r?"string"==typeof r?/* @__PURE__ */p("span",{children:r}):r:/* @__PURE__ */p("span",{style:{color:z[t]},children:T[t]}),[r,t]),C=u(()=>{const o={padding:k,background:g,borderRadius:"8px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",border:"1px solid "+z[t],cursor:s?"pointer":"default",position:"relative",overflow:"hidden"}
|
|
37
|
+
return f?(o.width="calc(100vw - 40px)",o.maxWidth="calc(100vw - 40px)"):o.width="number"==typeof m?m+"px":m,o},[m,f,k,g,t,s]);/* @__PURE__ */
|
|
38
|
+
return h("div",{className:"aark-standard-notification "+(b.popup||""),style:C,onClick:()=>{s&&a()},children:[i&&i>0&&/* @__PURE__ */p("div",{style:{position:"absolute",bottom:0,left:0,height:"3px",background:z[t],animation:`aark-notification-progress ${i}ms linear forwards`,transformOrigin:"left"}}),
|
|
39
|
+
/* @__PURE__ */h("div",{style:{display:"flex",alignItems:"flex-start",gap:"0.75rem"},children:[v&&/* @__PURE__ */p("div",{className:"aark-notification-icon "+(b.icon||""),style:{fontSize:"1.25rem",flexShrink:0,marginTop:"0.125rem"},children:v}),
|
|
40
|
+
/* @__PURE__ */h("div",{style:{flex:1,minWidth:0},children:[e&&/* @__PURE__ */p("div",{className:"aark-notification-header "+(b.header||""),children:/* @__PURE__ */p("h4",{className:"aark-notification-title "+(b.title||""),style:{margin:0,fontSize:"0.875rem",fontWeight:"600",color:"#1f2937"},children:e})}),
|
|
41
|
+
/* @__PURE__ */p("div",{className:"aark-notification-content "+(b.content||""),style:{marginTop:e?"0.25rem":0},children:l?/* @__PURE__ */p("div",{dangerouslySetInnerHTML:{o:"string"==typeof l?l:""}}):n?/* @__PURE__ */p("p",{style:{margin:0,fontSize:"0.75rem",color:"#6b7280",lineHeight:"1.4"},children:n}):null})]}),c&&/* @__PURE__ */p("button",{onClick:o=>{o.stopPropagation(),a()},className:"aark-notification-close "+(b.closeButton||""),style:{background:"none",border:"none",fontSize:"1rem",color:"#9ca3af",cursor:"pointer",padding:0,lineHeight:1,flexShrink:0},"aria-label":"Close notification",children:"×"})]}),
|
|
42
|
+
/* @__PURE__ */p("style",{children:"\n @keyframes aark-notification-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n }\n "})]})},S=({config:o,onClose:a})=>{const{content:e,props:n,options:t={}}=o,{position:r="top-right",showCloseIcon:l=!0,autoCloseTime:i=5e3,className:c="",preventEscClose:m=!1}=t
|
|
43
|
+
d(()=>{if(i&&!n){const o=setTimeout(a,i)
|
|
44
|
+
return()=>clearTimeout(o)}},[i,a,n]),d(()=>{const o=o=>{"Escape"!==o.key||m||a()}
|
|
45
|
+
if(!m)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,m])
|
|
46
|
+
const u=s(o=>{o.stopPropagation(),a()},[a]),f=`aark-notification-container ${r} ${c}`.trim(),k=N()
|
|
47
|
+
return g(
|
|
48
|
+
/* @__PURE__ */p("div",{style:(()=>{const o={position:"fixed",zIndex:1e4,margin:"1rem"}
|
|
49
|
+
switch(r){case"top-left":return{...o,top:0,left:0}
|
|
50
|
+
case"top-center":return{...o,top:0,left:"50%",transform:"translateX(-50%)"}
|
|
51
|
+
case"top-right":default:return{...o,top:0,right:0}
|
|
52
|
+
case"bottom-left":return{...o,bottom:0,left:0}
|
|
53
|
+
case"bottom-center":return{...o,bottom:0,left:"50%",transform:"translateX(-50%)"}
|
|
54
|
+
case"bottom-right":return{...o,bottom:0,right:0}}})(),children:n?/* @__PURE__ */p("div",{className:"aark-notification-wrapper",children:/* @__PURE__ */p(I,{props:n,onClose:a})}):e?/* @__PURE__ */h("div",{className:f,role:"alert","aria-live":"polite","aria-labelledby":"aark-notification-content",children:[l&&/* @__PURE__ */p("button",{onClick:u,className:"aark-notification-close","aria-label":"Close notification",type:"button",children:"×"}),
|
|
55
|
+
/* @__PURE__ */p("div",{id:"aark-notification-body",className:"aark-notification-body",children:e})]}):null}),k)},M=()=>{const{isOpen:a,config:e,close:n}=o()
|
|
56
|
+
return a&&e?"modal"===e.mode?/* @__PURE__ */p(B,{config:e,onClose:n}):"notification"===e.mode?/* @__PURE__ */p(S,{config:e,onClose:n}):null:null},O=/* @__PURE__ */new Set
|
|
57
|
+
let $=null,L=null
|
|
58
|
+
const E={subscribe:function(o){return O.add(o),()=>O.delete(o)},fire:function(o,a){n(o,a)},fireModal:n,fireNotification:function(o,n){let t,r
|
|
59
|
+
a(),!o||"object"!=typeof o||"$$typeof"in o||Array.isArray(o)?(t=o,r=void 0):(r=o,t=void 0)
|
|
60
|
+
const l={content:t,props:r,mode:"notification",options:Object.assign({position:"top-right",showCloseIcon:!0,autoCloseTime:5e3,preventEscClose:!1},n)}
|
|
61
|
+
$=l,e("open",l)},close:t,isOpen:function(){return null!==$},getCurrentConfig:function(){return $},closeAll:function(){t()},cleanup:function(){L&&(L.unmount(),L=null),w&&0===w.children.length&&(w.remove(),w=null)}},H={fire:(o,a)=>E.fire(o,a),modal:(o,a)=>E.fireModal(o,a),notification:(o,a)=>E.fireNotification(o,a),close:()=>E.close(),isOpen:()=>E.isOpen(),closeAll:()=>E.closeAll(),setTheme:o=>r(o),resetTheme:()=>l(),getTheme:()=>i()}
|
|
62
|
+
export{B as Modal,M as ModalProvider,S as Notification,H as aark,i as getAarkModalTheme,l as resetAarkModalTheme,r as setAarkModalTheme,o as useModal}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aark-react-modalify",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "dist/index.cjs.js",
|