@lerx/promise-modal 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -1,2 +1,953 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__$4(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}function _EMOTION_STRINGIFIED_CSS_ERROR__$3(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}function _EMOTION_STRINGIFIED_CSS_ERROR__$2(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}import{jsx as e,jsxs as n}from"react/jsx-runtime";import{createContext as o,memo as t,useRef as r,useState,useMemo as i,useLayoutEffect as a,useCallback as l,useContext as s,forwardRef as c,Fragment as d,useEffect,useImperativeHandle as u}from"react";import{convertMsFromDuration as m}from"@winglet/common-utils/convert";import{useReference as p,useOnMountLayout as C,useHandle as h,useVersion as g,useOnMount as f}from"@winglet/react-utils/hook";import{getRandomString as b,counterFactory as v}from"@winglet/common-utils/lib";import{css as y,cx as k}from"@emotion/css";import{createPortal as O}from"react-dom";import{map as _}from"@winglet/common-utils/array";import{withErrorBoundary as x}from"@winglet/react-utils/hoc";import{isString as I,isFunction as M}from"@winglet/common-utils/filter";import{renderComponent as N}from"@winglet/react-utils/render";import{printError as D}from"@winglet/common-utils/console";class ModalManager{static#e=0;static activate(){return ModalManager.#e?0:ModalManager.#e=1}static#n=null;static anchor(e){if(ModalManager.#n){const e=document.getElementById(ModalManager.#n.id);if(e)return e}const{tag:n="div",prefix:o="promise-modal",root:t=document.body}=e||{},r=document.createElement(n);return r.setAttribute("id",`${o}-${b(36)}`),t.appendChild(r),ModalManager.#n=r,r}static#o=[];static get prerender(){return ModalManager.#o}static#t=e=>ModalManager.#o.push(e);static set openHandler(e){ModalManager.#t=e,ModalManager.#o=[]}static get unanchored(){return!ModalManager.#n}static reset(){ModalManager.#e=0,ModalManager.#n=null,ModalManager.#o=[],ModalManager.#t=e=>ModalManager.#o.push(e)}static open(e){ModalManager.#t(e)}}const alert=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:s,ForegroundComponent:c,BackgroundComponent:d})=>new Promise(((u,m)=>{try{ModalManager.open({type:"alert",subtype:e,resolve:()=>u(),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:s,ForegroundComponent:c,BackgroundComponent:d})}catch(e){m(e)}})),confirm=({subtype:e,title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:s,ForegroundComponent:c,BackgroundComponent:d})=>new Promise(((u,m)=>{try{ModalManager.open({type:"confirm",subtype:e,resolve:e=>u(e??0),title:n,subtitle:o,content:t,background:r,footer:i,dimmed:a,manualDestroy:l,closeOnBackdropClick:s,ForegroundComponent:c,BackgroundComponent:d})}catch(e){m(e)}})),prompt=({defaultValue:e,title:n,subtitle:o,content:t,Input:r,disabled:i,returnOnCancel:a,background:l,footer:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,ForegroundComponent:m,BackgroundComponent:p})=>new Promise(((C,h)=>{try{ModalManager.open({type:"prompt",resolve:e=>C(e),title:n,subtitle:o,content:t,Input:r,defaultValue:e,disabled:i,returnOnCancel:a,background:l,footer:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,ForegroundComponent:m,BackgroundComponent:p})}catch(e){h(e)}}));class AbstractNode{id;initiator;title;subtitle;background;manualDestroy;closeOnBackdropClick;dimmed;ForegroundComponent;BackgroundComponent;#r;get alive(){return this.#r}#i;get visible(){return this.#i}#a;#l=new Set;constructor({id:e,initiator:n,title:o,subtitle:t,background:r,dimmed:i=1,manualDestroy:a=0,closeOnBackdropClick:l=1,resolve:s,ForegroundComponent:c,BackgroundComponent:d}){this.id=e,this.initiator=n,this.title=o,this.subtitle=t,this.background=r,this.dimmed=i,this.manualDestroy=a,this.closeOnBackdropClick=l,this.ForegroundComponent=c,this.BackgroundComponent=d,this.#r=1,this.#i=1,this.#a=s}subscribe(e){return this.#l.add(e),()=>{this.#l.delete(e)}}publish(){for(const e of this.#l)e()}resolve(e){this.#a(e)}onDestroy(){const e=1==this.#r;this.#r=0,this.manualDestroy&&e&&this.publish()}onShow(){const e=0==this.#i;this.#i=1,e&&this.publish()}onHide(){const e=1==this.#i;this.#i=0,e&&this.publish()}}class AlertNode extends AbstractNode{type;subtype;content;footer;constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:a,footer:l,background:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=a,this.footer=l}onClose(){this.resolve(null)}onConfirm(){this.resolve(null)}}class ConfirmNode extends AbstractNode{type;subtype;content;footer;constructor({id:e,initiator:n,type:o,subtype:t,title:r,subtitle:i,content:a,footer:l,background:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}){super({id:e,initiator:n,title:r,subtitle:i,background:s,dimmed:c,manualDestroy:d,closeOnBackdropClick:u,resolve:m,ForegroundComponent:p,BackgroundComponent:C}),this.type=o,this.subtype=t,this.content=a,this.footer=l}onClose(){this.resolve(0)}onConfirm(){this.resolve(1)}}class PromptNode extends AbstractNode{type;content;defaultValue;Input;disabled;returnOnCancel;footer;#s;constructor({id:e,initiator:n,type:o,title:t,subtitle:r,content:i,defaultValue:a,Input:l,disabled:s,returnOnCancel:c,footer:d,background:u,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:g,BackgroundComponent:f}){super({id:e,initiator:n,title:t,subtitle:r,background:u,dimmed:m,manualDestroy:p,closeOnBackdropClick:C,resolve:h,ForegroundComponent:g,BackgroundComponent:f}),this.type=o,this.content=i,this.Input=l,this.defaultValue=a,this.#s=a,this.disabled=s,this.returnOnCancel=c,this.footer=d}onChange(e){this.#s=e}onConfirm(){this.resolve(this.#s??null)}onClose(){this.returnOnCancel?this.resolve(this.#s??null):this.resolve(null)}}const nodeFactory=e=>{switch(e.type){case"alert":return new AlertNode(e);case"confirm":return new ConfirmNode(e);case"prompt":return new PromptNode(e)}throw new Error(`Unknown modal: ${e.type}`,{modal:e})},S=o({}),E=t((({usePathname:n,children:o})=>{const t=r(new Map),[s,c]=useState([]),d=p(s),{pathname:u}=n(),h=r(u),g=r(0),f=useConfigurationOptions(),b=i((()=>m(f.duration)),[f]);C((()=>{const{manualDestroy:e,closeOnBackdropClick:n}=f;for(const o of ModalManager.prerender){const r=nodeFactory({...o,id:g.current++,initiator:h.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});t.current.set(r.id,r),c((e=>[...e,r.id]))}return ModalManager.openHandler=o=>{const r=nodeFactory({...o,id:g.current++,initiator:h.current,manualDestroy:void 0!==o.manualDestroy?o.manualDestroy:e,closeOnBackdropClick:void 0!==o.closeOnBackdropClick?o.closeOnBackdropClick:n});t.current.set(r.id,r),c((e=>{const n=[];for(let o=0;o<e.length;o++){const r=e[o];t.current.get(r)?.alive?n.push(r):t.current.delete(r)}return[...n,r.id]}))},()=>{ModalManager.reset()}})),a((()=>{for(const e of d.current){const n=t.current.get(e);n?.alive&&(n.initiator===u?n.onShow():n.onHide())}h.current=u}),[u]);const v=l((e=>t.current.get(e)),[]),y=l((e=>{const n=t.current.get(e);n&&(n.onDestroy(),k.current?.())}),[]),k=r(void 0),O=l((e=>{const n=t.current.get(e);n&&(n.onHide(),k.current?.(),n.manualDestroy||setTimeout((()=>{n.onDestroy()}),b))}),[b]),_=l(((e,n)=>{const o=t.current.get(e);o&&"prompt"===o.type&&o.onChange(n)}),[]),x=l((e=>{const n=t.current.get(e);n&&(n.onConfirm(),O(e))}),[O]),I=l((e=>{const n=t.current.get(e);n&&(n.onClose(),O(e))}),[O]),M=l((e=>({modal:v(e),onConfirm:()=>x(e),onClose:()=>I(e),onChange:n=>_(e,n),onDestroy:()=>y(e)})),[v,x,I,_,y]),N=i((()=>({modalIds:s,getModalNode:v,onChange:_,onConfirm:x,onClose:I,onDestroy:y,getModal:M,setUpdater:e=>{k.current=e}})),[s,M,v,_,x,I,y]);return e(S.Provider,{value:N,children:o})})),useModalManagerContext=()=>s(S),useModal=e=>{const{getModal:n}=useModalManagerContext();return i((()=>n(e)),[e,n])},B=y("production"===process.env.NODE_ENV?{name:"131j9g2",styles:"margin:unset"}:{name:"1w3kbco-fallback",styles:"margin:unset;label:fallback;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$4}),F=y("production"===process.env.NODE_ENV?{name:"1kuk3a3",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black"}:{name:"16dbbea-frame",styles:"display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:white;padding:20px 80px;gap:10px;border:1px solid black;label:frame;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$4}),FallbackTitle=({children:n})=>e("h2",{className:B,children:n}),FallbackSubtitle=({children:n})=>e("h3",{className:B,children:n}),FallbackContent=({children:n})=>e("div",{className:B,children:n}),FallbackFooter=({confirmLabel:o,hideConfirm:t=0,cancelLabel:r,hideCancel:i=0,disabled:a,onConfirm:l,onCancel:s})=>n("div",{children:[!t&&e("button",{onClick:l,disabled:a,children:o||"Confirm"}),!i&&"function"==typeof s&&e("button",{onClick:s,children:r||"Cancel"})]}),defaultValidate=e=>e?.visible,useActiveModalCount=(e=defaultValidate,n=0)=>{const{modalIds:o,getModalNode:t}=useModalManagerContext();return i((()=>{let n=0;for(const r of o)e(t(r))&&n++;return n}),[t,o,n])},R=c((({id:n,onChangeOrder:o,children:t},r)=>{const a=useActiveModalCount(),[l,s]=i((()=>{const e=a>1;return[e?Math.floor(n/5)%3*100:0,e?n%5*35:0]}),[a,n]);return e("div",{ref:r,className:F,onClick:o,style:{marginBottom:`calc(25vh + ${l}px)`,marginLeft:`${l}px`,transform:`translate(${s}px, ${s}px)`},children:t})})),T=o({}),w=t((({ForegroundComponent:n,BackgroundComponent:o,TitleComponent:r,SubtitleComponent:a,ContentComponent:l,FooterComponent:s,options:c,children:d})=>{const u=i((()=>({BackgroundComponent:o,ForegroundComponent:n||R,TitleComponent:r||FallbackTitle,SubtitleComponent:a||FallbackSubtitle,ContentComponent:t(l||FallbackContent),FooterComponent:t(s||FallbackFooter),options:{duration:"300ms",backdrop:"rgba(0, 0, 0, 0.5)",closeOnBackdropClick:1,manualDestroy:0,...c}})),[n,o,l,s,a,r,c]);return e(T.Provider,{value:u,children:d})})),useConfigurationContext=()=>s(T),useConfigurationOptions=()=>s(T).options,useConfigurationDuration=()=>{const e=useConfigurationOptions();return{duration:e.duration,milliseconds:m(e.duration)}},useConfigurationBackdrop=()=>useConfigurationOptions().backdrop,P=o({}),UserDefinedContextProvider=({context:n,children:o})=>{const t=i((()=>({context:n||{}})),[n]);return e(P.Provider,{value:t,children:o})},useUserDefinedContext=()=>s(P),usePathname=()=>{const[e,n]=useState(window.location.pathname);return a((()=>{let o;const checkPathname=()=>{o&&cancelAnimationFrame(o),e!==window.location.pathname?n(window.location.pathname):o=requestAnimationFrame(checkPathname)};return o=requestAnimationFrame(checkPathname),()=>{o&&cancelAnimationFrame(o)}}),[e]),{pathname:e}},$=y("production"===process.env.NODE_ENV?{name:"u7uu4v",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;}"}:{name:"coymdj-background",styles:"display:none;position:fixed;inset:0;z-index:-999;pointer-events:none;>*{pointer-events:none;};label:background;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),j=y("production"===process.env.NODE_ENV?{name:"n07k1x",styles:"pointer-events:all"}:{name:"1hektcs-active",styles:"pointer-events:all;label:active;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),V=y("production"===process.env.NODE_ENV?{name:"1wnowod",styles:"display:flex;align-items:center;justify-content:center"}:{name:"xppew7-visible",styles:"display:flex;align-items:center;justify-content:center;label:visible;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$3}),BackgroundFrame=({modalId:n,onChangeOrder:o})=>{const{BackgroundComponent:t}=useConfigurationContext(),{context:r}=useUserDefinedContext(),{modal:a,onClose:s,onChange:c,onConfirm:d,onDestroy:u}=useModal(n),m=l((e=>{a&&a.closeOnBackdropClick&&a.visible&&s(),e.stopPropagation()}),[a,s]),p=i((()=>a?.BackgroundComponent||t),[t,a]);return a?e("div",{className:k($,{[V]:a.manualDestroy?a.alive:a.visible,[j]:a.closeOnBackdropClick&&a.visible}),onClick:m,children:p&&e(p,{id:a.id,type:a.type,alive:a.alive,visible:a.visible,initiator:a.initiator,manualDestroy:a.manualDestroy,closeOnBackdropClick:a.closeOnBackdropClick,background:a.background,onChange:c,onConfirm:d,onClose:s,onDestroy:u,onChangeOrder:o,context:r})}):null},z=y("production"===process.env.NODE_ENV?{name:"12g0hx0",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1"}:{name:"1hcczik-foreground",styles:"pointer-events:none;display:none;position:fixed;inset:0;z-index:1;label:foreground;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),A=y("production"===process.env.NODE_ENV?{name:"1g95xyq",styles:">*{pointer-events:all;}"}:{name:"123csva-active",styles:">*{pointer-events:all;};label:active;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),L=y("production"===process.env.NODE_ENV?{name:"1fmljv2",styles:"display:flex!important;justify-content:center;align-items:center"}:{name:"1p4unab-visible",styles:"display:flex!important;justify-content:center;align-items:center;label:visible;",toString:_EMOTION_STRINGIFIED_CSS_ERROR__$2}),G=t((({modal:o,handlers:t})=>{const{title:r,subtitle:a,content:l,footer:s}=i((()=>o),[o]),{context:c}=useUserDefinedContext(),{onConfirm:u}=i((()=>t),[t]),m=h(u),{TitleComponent:p,SubtitleComponent:C,ContentComponent:g,FooterComponent:f}=useConfigurationContext();return n(d,{children:[r&&(I(r)?e(p,{context:c,children:r}):r),a&&(I(a)?e(C,{context:c,children:a}):a),l&&(I(l)?e(g,{context:c,children:l}):N(l,{onConfirm:m})),0!=s&&("function"==typeof s?s({onConfirm:m,context:c}):e(f,{onConfirm:m,confirmLabel:s?.confirm,hideConfirm:s?.hideConfirm,context:c}))]})})),H=t((({modal:o,handlers:t})=>{const{title:r,subtitle:a,content:l,footer:s}=i((()=>o),[o]),{context:c}=useUserDefinedContext(),{onConfirm:u,onClose:m}=i((()=>t),[t]),p=h(u),C=h(m),{TitleComponent:g,SubtitleComponent:f,ContentComponent:b,FooterComponent:v}=useConfigurationContext();return n(d,{children:[r&&(I(r)?e(g,{context:c,children:r}):r),a&&(I(a)?e(f,{context:c,children:a}):a),l&&(I(l)?e(b,{context:c,children:l}):N(l,{onConfirm:p,onCancel:C,context:c})),0!=s&&("function"==typeof s?s({onConfirm:p,onCancel:C,context:c}):e(v,{onConfirm:p,onCancel:C,confirmLabel:s?.confirm,cancelLabel:s?.cancel,hideConfirm:s?.hideConfirm,hideCancel:s?.hideCancel,context:c}))]})})),q=t((({modal:o,handlers:r})=>{const{Input:a,defaultValue:s,disabled:c,title:u,subtitle:m,content:p,footer:C}=i((()=>({...o,Input:t(x(o.Input))})),[o]),{context:g}=useUserDefinedContext(),[f,b]=useState(s),{onChange:v,onClose:y,onConfirm:k}=i((()=>r),[r]),O=h(y),_=h((e=>{const n=M(e)?e(f):e;b(n),v(n)})),D=l((()=>{requestAnimationFrame(k)}),[k]),S=i((()=>f?!!c?.(f):0),[c,f]),{TitleComponent:E,SubtitleComponent:B,ContentComponent:F,FooterComponent:R}=useConfigurationContext();return n(d,{children:[u&&(I(u)?e(E,{context:g,children:u}):u),m&&(I(m)?e(B,{context:g,children:m}):m),p&&(I(p)?e(F,{context:g,children:p}):N(p,{onConfirm:D,onCancel:O,context:g})),a&&e(a,{defaultValue:s,value:f,onChange:_,onConfirm:D,onCancel:O,context:g}),0!=C&&("function"==typeof C?C({value:f,disabled:S,onChange:_,onConfirm:D,onCancel:O,context:g}):e(R,{disabled:S,onConfirm:D,onCancel:O,confirmLabel:C?.confirm,cancelLabel:C?.cancel,hideConfirm:C?.hideConfirm,hideCancel:C?.hideCancel,context:g}))]})})),ForegroundFrame=({modalId:o,onChangeOrder:t})=>{const{ForegroundComponent:r}=useConfigurationContext(),{context:a}=useUserDefinedContext(),{modal:l,onChange:s,onConfirm:c,onClose:d,onDestroy:u}=useModal(o),m=i((()=>l?.ForegroundComponent||r),[r,l]);return l?e("div",{className:k(z,{[L]:l.manualDestroy?l.alive:l.visible,[A]:l.visible}),children:n(m,{id:l.id,type:l.type,alive:l.alive,visible:l.visible,initiator:l.initiator,manualDestroy:l.manualDestroy,closeOnBackdropClick:l.closeOnBackdropClick,background:l.background,onChange:s,onConfirm:c,onClose:d,onDestroy:u,onChangeOrder:t,context:a,children:["alert"===l.type&&e(G,{modal:l,handlers:{onConfirm:c}}),"confirm"===l.type&&e(H,{modal:l,handlers:{onConfirm:c,onClose:d}}),"prompt"===l.type&&e(q,{modal:l,handlers:{onChange:s,onConfirm:c,onClose:d}})]})}):null},useSubscribeModal=e=>{const[n,o]=g();return useEffect((()=>{if(e)return e.subscribe(o)}),[e,o]),n},Y=y("production"===process.env.NODE_ENV?{name:"13dmkf4",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden"}:{name:"yjeu12-presenter",styles:"position:fixed;inset:0;pointer-events:none;overflow:hidden;label:presenter;",toString:function _EMOTION_STRINGIFIED_CSS_ERROR__$1(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),{increment:U}=v(1),J=t((({modalId:o})=>{const t=r(null),{modal:i}=useModal(o);useSubscribeModal(i);const a=h((()=>{t.current&&(t.current.style.zIndex=`${U()}`)}));return n("div",{ref:t,className:Y,children:[e(BackgroundFrame,{modalId:o,onChangeOrder:a}),e(ForegroundFrame,{modalId:o,onChangeOrder:a})]})})),K=y("production"===process.env.NODE_ENV?{name:"2hpasy",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out"}:{name:"lhj8co-anchor",styles:"display:flex;align-items:center;justify-content:center;position:fixed;inset:0;pointer-events:none;z-index:1000;transition:background-color ease-in-out;label:anchor;",toString:function _EMOTION_STRINGIFIED_CSS_ERROR__(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),validateDimmable=e=>e?.visible&&e.dimmed,Q=t(x((()=>{const[n,o]=g(),{modalIds:t,setUpdater:r}=useModalManagerContext();useEffect((()=>{r(o)}),[r,o]);const i=useConfigurationOptions(),a=useActiveModalCount(validateDimmable,n);return e("div",{className:K,style:{transitionDuration:i.duration,backgroundColor:a?i.backdrop:"transparent"},children:_(t,(n=>e(J,{modalId:n},n)))})}))),bootstrap=({ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:a,usePathname:l,options:s,context:c,anchor:d})=>O(e(UserDefinedContextProvider,{context:c,children:e(w,{ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:i,FooterComponent:a,options:s,children:e(E,{usePathname:l,children:e(Q,{})})})}),d),useInitialize=()=>{const e=r(ModalManager.activate()),n=r(null),[,o]=g(),t=l((t=>{e.current?(n.current=ModalManager.anchor({root:t}),o()):D("ModalProvider is already initialized",["ModalProvider can only be initialized once.","Nesting ModalProvider will be ignored..."],{info:"Something is wrong with the ModalProvider initialization..."})}),[o]);return{anchorRef:n,handleInitialize:t}},W=c((({usePathname:e,ForegroundComponent:o,BackgroundComponent:t,TitleComponent:r,SubtitleComponent:a,ContentComponent:l,FooterComponent:s,options:c,context:m,children:p},C)=>{const h=i((()=>e||usePathname),[e]),{anchorRef:g,handleInitialize:b}=useInitialize();return u(C,(()=>({initialize:b})),[b]),f((()=>(null===C&&b(),()=>{g.current&&g.current.remove()}))),n(d,{children:[p,g.current&&bootstrap({ForegroundComponent:o,BackgroundComponent:t,TitleComponent:r,SubtitleComponent:a,ContentComponent:l,FooterComponent:s,usePathname:h,options:c,context:m,anchor:g.current})]})})),useBootstrap=({usePathname:e,ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:a,FooterComponent:s,options:c,context:d,mode:u="auto"}={})=>{const m=i((()=>e||usePathname),[e]),{anchorRef:p,handleInitialize:C}=useInitialize();f((()=>("auto"===u&&C(),()=>{p.current&&p.current.remove()})));const h=l((e=>{"manual"===u&&C(e)}),[u,C]);return{portal:p.current&&bootstrap({usePathname:m,ForegroundComponent:n,BackgroundComponent:o,TitleComponent:t,SubtitleComponent:r,ContentComponent:a,FooterComponent:s,options:c,context:d,anchor:p.current}),initialize:h}},useDestroyAfter=(e,n)=>{const{modal:o,onDestroy:t}=useModal(e),i=useSubscribeModal(o),a=r({modal:o,onDestroy:t,milliseconds:I(n)?m(n):n});useEffect((()=>{const{modal:e,onDestroy:n,milliseconds:o}=a.current;if(!e||e.visible||!e.alive)return;const t=setTimeout((()=>{n()}),o);return()=>{t&&clearTimeout(t)}}),[i])},useModalAnimation=(e,n)=>{const o=r(n);o.current=n,a((()=>{if(!o.current)return;let n;return n=e?requestAnimationFrame((()=>o.current.onVisible?.())):requestAnimationFrame((()=>o.current.onHidden?.())),()=>{n&&cancelAnimationFrame(n)}}),[e])};export{W as ModalProvider,alert,confirm,prompt,useActiveModalCount,useDestroyAfter,useBootstrap as useInitializeModal,useModalAnimation,useConfigurationBackdrop as useModalBackdrop,useConfigurationDuration as useModalDuration,useConfigurationOptions as useModalOptions,useSubscribeModal};
-//# sourceMappingURL=index.mjs.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo, forwardRef, memo, useRef, useState, useLayoutEffect, useCallback, Fragment, useEffect, useImperativeHandle } from 'react';
+import { convertMsFromDuration } from '@winglet/common-utils/convert';
+import { useReference, useOnMountLayout, useHandle, useVersion, useOnMount } from '@winglet/react-utils/hook';
+import { getRandomString, counterFactory } from '@winglet/common-utils/lib';
+import { css, cx } from '@emotion/css';
+import { createPortal } from 'react-dom';
+import { map } from '@winglet/common-utils/array';
+import { withErrorBoundary } from '@winglet/react-utils/hoc';
+import { isString, isFunction } from '@winglet/common-utils/filter';
+import { renderComponent } from '@winglet/react-utils/render';
+import { printError } from '@winglet/common-utils/console';
+
+class ModalManager {
+    static #active = false;
+    static activate() {
+        if (ModalManager.#active)
+            return false;
+        return (ModalManager.#active = true);
+    }
+    static #anchor = null;
+    static anchor(options) {
+        if (ModalManager.#anchor) {
+            const anchor = document.getElementById(ModalManager.#anchor.id);
+            if (anchor)
+                return anchor;
+        }
+        const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
+        const node = document.createElement(tag);
+        node.setAttribute('id', `${prefix}-${getRandomString(36)}`);
+        root.appendChild(node);
+        ModalManager.#anchor = node;
+        return node;
+    }
+    static #prerenderList = [];
+    static get prerender() {
+        return ModalManager.#prerenderList;
+    }
+    static #openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    static set openHandler(handler) {
+        ModalManager.#openHandler = handler;
+        ModalManager.#prerenderList = [];
+    }
+    static get unanchored() {
+        return !ModalManager.#anchor;
+    }
+    static reset() {
+        ModalManager.#active = false;
+        ModalManager.#anchor = null;
+        ModalManager.#prerenderList = [];
+        ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    }
+    static open(modal) {
+        ModalManager.#openHandler(modal);
+    }
+}
+
+const alert = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'alert',
+                subtype,
+                resolve: () => resolve(),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'confirm',
+                subtype,
+                resolve: (result) => resolve(result ?? false),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'prompt',
+                resolve: (result) => resolve(result),
+                title,
+                subtitle,
+                content,
+                Input,
+                defaultValue,
+                disabled,
+                returnOnCancel,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+class AbstractNode {
+    id;
+    initiator;
+    title;
+    subtitle;
+    background;
+    manualDestroy;
+    closeOnBackdropClick;
+    dimmed;
+    ForegroundComponent;
+    BackgroundComponent;
+    #alive;
+    get alive() {
+        return this.#alive;
+    }
+    #visible;
+    get visible() {
+        return this.#visible;
+    }
+    #resolve;
+    #listeners = new Set();
+    constructor({ id, initiator, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+        this.id = id;
+        this.initiator = initiator;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.background = background;
+        this.dimmed = dimmed;
+        this.manualDestroy = manualDestroy;
+        this.closeOnBackdropClick = closeOnBackdropClick;
+        this.ForegroundComponent = ForegroundComponent;
+        this.BackgroundComponent = BackgroundComponent;
+        this.#alive = true;
+        this.#visible = true;
+        this.#resolve = resolve;
+    }
+    subscribe(listener) {
+        this.#listeners.add(listener);
+        return () => {
+            this.#listeners.delete(listener);
+        };
+    }
+    publish() {
+        for (const listener of this.#listeners)
+            listener();
+    }
+    resolve(result) {
+        this.#resolve(result);
+    }
+    onDestroy() {
+        const needPublish = this.#alive === true;
+        this.#alive = false;
+        if (this.manualDestroy && needPublish)
+            this.publish();
+    }
+    onShow() {
+        const needPublish = this.#visible === false;
+        this.#visible = true;
+        if (needPublish)
+            this.publish();
+    }
+    onHide() {
+        const needPublish = this.#visible === true;
+        this.#visible = false;
+        if (needPublish)
+            this.publish();
+    }
+}
+
+class AlertNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(null);
+    }
+    onConfirm() {
+        this.resolve(null);
+    }
+}
+
+class ConfirmNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(false);
+    }
+    onConfirm() {
+        this.resolve(true);
+    }
+}
+
+class PromptNode extends AbstractNode {
+    type;
+    content;
+    defaultValue;
+    Input;
+    disabled;
+    returnOnCancel;
+    footer;
+    #value;
+    constructor({ id, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.content = content;
+        this.Input = Input;
+        this.defaultValue = defaultValue;
+        this.#value = defaultValue;
+        this.disabled = disabled;
+        this.returnOnCancel = returnOnCancel;
+        this.footer = footer;
+    }
+    onChange(value) {
+        this.#value = value;
+    }
+    onConfirm() {
+        this.resolve(this.#value ?? null);
+    }
+    onClose() {
+        if (this.returnOnCancel)
+            this.resolve(this.#value ?? null);
+        else
+            this.resolve(null);
+    }
+}
+
+const nodeFactory = (modal) => {
+    switch (modal.type) {
+        case 'alert':
+            return new AlertNode(modal);
+        case 'confirm':
+            return new ConfirmNode(modal);
+        case 'prompt':
+            return new PromptNode(modal);
+    }
+    throw new Error(`Unknown modal: ${modal.type}`, { modal });
+};
+
+const DEFAULT_ANIMATION_DURATION = '300ms';
+const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
+
+const fallback = css `
+  margin: unset;
+`;
+const frame = css `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  padding: 20px 80px;
+  gap: 10px;
+  border: 1px solid black;
+`;
+
+const FallbackTitle = ({ children }) => {
+    return jsx("h2", { className: fallback, children: children });
+};
+
+const FallbackSubtitle = ({ children }) => {
+    return jsx("h3", { className: fallback, children: children });
+};
+
+const FallbackContent = ({ children }) => {
+    return jsx("div", { className: fallback, children: children });
+};
+
+const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCancel = false, disabled, onConfirm, onCancel, }) => {
+    return (jsxs("div", { children: [!hideConfirm && (jsx("button", { onClick: onConfirm, disabled: disabled, children: confirmLabel || 'Confirm' })), !hideCancel && typeof onCancel === 'function' && (jsx("button", { onClick: onCancel, children: cancelLabel || 'Cancel' }))] }));
+};
+
+const ModalManagerContext = createContext({});
+
+const useModalManagerContext = () => useContext(ModalManagerContext);
+const useModal = (id) => {
+    const { getModal } = useModalManagerContext();
+    return useMemo(() => getModal(id), [id, getModal]);
+};
+
+const defaultValidate = (modal) => modal?.visible;
+const useActiveModalCount = (validate = defaultValidate, refreshKey = 0) => {
+    const { modalIds, getModalNode } = useModalManagerContext();
+    return useMemo(() => {
+        let count = 0;
+        for (const id of modalIds) {
+            if (validate(getModalNode(id)))
+                count++;
+        }
+        return count;
+    }, [getModalNode, modalIds, refreshKey]);
+};
+
+const MAX_MODAL_COUNT = 5;
+const MAX_MODAL_LEVEL = 3;
+const FallbackForegroundFrame = forwardRef(({ id, onChangeOrder, children }, ref) => {
+    const activeCount = useActiveModalCount();
+    const [level, offset] = useMemo(() => {
+        const stacked = activeCount > 1;
+        const level = stacked
+            ? (Math.floor(id / MAX_MODAL_COUNT) % MAX_MODAL_LEVEL) * 100
+            : 0;
+        const offset = stacked ? (id % MAX_MODAL_COUNT) * 35 : 0;
+        return [level, offset];
+    }, [activeCount, id]);
+    return (jsx("div", { ref: ref, className: frame, onClick: onChangeOrder, style: {
+            marginBottom: `calc(25vh + ${level}px)`,
+            marginLeft: `${level}px`,
+            transform: `translate(${offset}px, ${offset}px)`,
+        }, children: children }));
+});
+
+const ConfigurationContext = createContext({});
+
+const ConfigurationContextProvider = memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }) => {
+    const value = useMemo(() => ({
+        BackgroundComponent,
+        ForegroundComponent: ForegroundComponent || FallbackForegroundFrame,
+        TitleComponent: TitleComponent || FallbackTitle,
+        SubtitleComponent: SubtitleComponent || FallbackSubtitle,
+        ContentComponent: memo(ContentComponent || FallbackContent),
+        FooterComponent: memo(FooterComponent || FallbackFooter),
+        options: {
+            duration: DEFAULT_ANIMATION_DURATION,
+            backdrop: DEFAULT_BACKDROP_COLOR,
+            closeOnBackdropClick: true,
+            manualDestroy: false,
+            ...options,
+        },
+    }), [
+        ForegroundComponent,
+        BackgroundComponent,
+        ContentComponent,
+        FooterComponent,
+        SubtitleComponent,
+        TitleComponent,
+        options,
+    ]);
+    return (jsx(ConfigurationContext.Provider, { value: value, children: children }));
+});
+
+const useConfigurationContext = () => useContext(ConfigurationContext);
+const useConfigurationOptions = () => {
+    const context = useContext(ConfigurationContext);
+    return context.options;
+};
+const useConfigurationDuration = () => {
+    const context = useConfigurationOptions();
+    return {
+        duration: context.duration,
+        milliseconds: convertMsFromDuration(context.duration),
+    };
+};
+const useConfigurationBackdrop = () => {
+    const context = useConfigurationOptions();
+    return context.backdrop;
+};
+
+const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
+    const modalDictionary = useRef(new Map());
+    const [modalIds, setModalIds] = useState([]);
+    const modalIdsRef = useReference(modalIds);
+    const { pathname } = usePathname();
+    const initiator = useRef(pathname);
+    const modalIdSequence = useRef(0);
+    const options = useConfigurationOptions();
+    const duration = useMemo(() => convertMsFromDuration(options.duration), [options]);
+    useOnMountLayout(() => {
+        const { manualDestroy, closeOnBackdropClick } = options;
+        for (const data of ModalManager.prerender) {
+            const modal = nodeFactory({
+                ...data,
+                id: modalIdSequence.current++,
+                initiator: initiator.current,
+                manualDestroy: data.manualDestroy !== undefined
+                    ? data.manualDestroy
+                    : manualDestroy,
+                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
+                    ? data.closeOnBackdropClick
+                    : closeOnBackdropClick,
+            });
+            modalDictionary.current.set(modal.id, modal);
+            setModalIds((ids) => [...ids, modal.id]);
+        }
+        ModalManager.openHandler = (data) => {
+            const modal = nodeFactory({
+                ...data,
+                id: modalIdSequence.current++,
+                initiator: initiator.current,
+                manualDestroy: data.manualDestroy !== undefined
+                    ? data.manualDestroy
+                    : manualDestroy,
+                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
+                    ? data.closeOnBackdropClick
+                    : closeOnBackdropClick,
+            });
+            modalDictionary.current.set(modal.id, modal);
+            setModalIds((ids) => {
+                const aliveIds = [];
+                for (let index = 0; index < ids.length; index++) {
+                    const id = ids[index];
+                    const destroyed = !modalDictionary.current.get(id)?.alive;
+                    if (destroyed)
+                        modalDictionary.current.delete(id);
+                    else
+                        aliveIds.push(id);
+                }
+                return [...aliveIds, modal.id];
+            });
+        };
+        return () => {
+            ModalManager.reset();
+        };
+    });
+    useLayoutEffect(() => {
+        for (const id of modalIdsRef.current) {
+            const modal = modalDictionary.current.get(id);
+            if (!modal?.alive)
+                continue;
+            if (modal.initiator === pathname)
+                modal.onShow();
+            else
+                modal.onHide();
+        }
+        initiator.current = pathname;
+    }, [pathname]);
+    const getModalNode = useCallback((modalId) => {
+        return modalDictionary.current.get(modalId);
+    }, []);
+    const onDestroy = useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onDestroy();
+        updaterRef.current?.();
+    }, []);
+    const updaterRef = useRef(undefined);
+    const hideModal = useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onHide();
+        updaterRef.current?.();
+        if (!modal.manualDestroy)
+            setTimeout(() => {
+                modal.onDestroy();
+            }, duration);
+    }, [duration]);
+    const onChange = useCallback((modalId, value) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        if (modal.type === 'prompt')
+            modal.onChange(value);
+    }, []);
+    const onConfirm = useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onConfirm();
+        hideModal(modalId);
+    }, [hideModal]);
+    const onClose = useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onClose();
+        hideModal(modalId);
+    }, [hideModal]);
+    const getModal = useCallback((modalId) => ({
+        modal: getModalNode(modalId),
+        onConfirm: () => onConfirm(modalId),
+        onClose: () => onClose(modalId),
+        onChange: (value) => onChange(modalId, value),
+        onDestroy: () => onDestroy(modalId),
+    }), [getModalNode, onConfirm, onClose, onChange, onDestroy]);
+    const value = useMemo(() => {
+        return {
+            modalIds,
+            getModalNode,
+            onChange,
+            onConfirm,
+            onClose,
+            onDestroy,
+            getModal,
+            setUpdater: (updater) => {
+                updaterRef.current = updater;
+            },
+        };
+    }, [
+        modalIds,
+        getModal,
+        getModalNode,
+        onChange,
+        onConfirm,
+        onClose,
+        onDestroy,
+    ]);
+    return (jsx(ModalManagerContext.Provider, { value: value, children: children }));
+});
+
+const UserDefinedContext = createContext({});
+
+const UserDefinedContextProvider = ({ context, children, }) => {
+    const contextValue = useMemo(() => ({ context: context || {} }), [context]);
+    return (jsx(UserDefinedContext.Provider, { value: contextValue, children: children }));
+};
+
+const useUserDefinedContext = () => {
+    return useContext(UserDefinedContext);
+};
+
+const usePathname = () => {
+    const [pathname, setPathname] = useState(window.location.pathname);
+    useLayoutEffect(() => {
+        let requestId;
+        const checkPathname = () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+            if (pathname !== window.location.pathname) {
+                setPathname(window.location.pathname);
+            }
+            else {
+                requestId = requestAnimationFrame(checkPathname);
+            }
+        };
+        requestId = requestAnimationFrame(checkPathname);
+        return () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+        };
+    }, [pathname]);
+    return { pathname };
+};
+
+const background = css `
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: -999;
+  pointer-events: none;
+  > * {
+    pointer-events: none;
+  }
+`;
+const active$1 = css `
+  pointer-events: all;
+`;
+const visible$1 = css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { BackgroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onClose, onChange, onConfirm, onDestroy } = useModal(modalId);
+    const handleClose = useCallback((event) => {
+        if (modal && modal.closeOnBackdropClick && modal.visible)
+            onClose();
+        event.stopPropagation();
+    }, [modal, onClose]);
+    const Background = useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsx("div", { className: cx(background, {
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active$1]: modal.closeOnBackdropClick && modal.visible,
+        }), onClick: handleClose, children: Background && (jsx(Background, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext })) }));
+};
+
+const foreground = css `
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+`;
+const active = css `
+  > * {
+    pointer-events: all;
+  }
+`;
+const visible = css `
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AlertInner = memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm } = useMemo(() => handlers, [handlers]);
+    const handleConfirm = useHandle(onConfirm);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxs(Fragment, { children: [title &&
+                (isString(title) ? (jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (isString(subtitle) ? (jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (isString(content) ? (jsx(ContentComponent, { context: userDefinedContext, children: content })) : (renderComponent(content, {
+                    onConfirm: handleConfirm,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    context: userDefinedContext,
+                })) : (jsx(FooterComponent, { onConfirm: handleConfirm, confirmLabel: footer?.confirm, hideConfirm: footer?.hideConfirm, context: userDefinedContext })))] }));
+});
+
+const ConfirmInner = memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm, onClose } = useMemo(() => handlers, [handlers]);
+    const handleConfirm = useHandle(onConfirm);
+    const handleClose = useHandle(onClose);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxs(Fragment, { children: [title &&
+                (isString(title) ? (jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (isString(subtitle) ? (jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (isString(content) ? (jsx(ContentComponent, { context: userDefinedContext, children: content })) : (renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsx(FooterComponent, { onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const PromptInner = memo(({ modal, handlers }) => {
+    const { Input, defaultValue, disabled: checkDisabled, title, subtitle, content, footer, } = useMemo(() => ({
+        ...modal,
+        Input: memo(withErrorBoundary(modal.Input)),
+    }), [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const [value, setValue] = useState(defaultValue);
+    const { onChange, onClose, onConfirm } = useMemo(() => handlers, [handlers]);
+    const handleClose = useHandle(onClose);
+    const handleChange = useHandle((inputValue) => {
+        const input = isFunction(inputValue) ? inputValue(value) : inputValue;
+        setValue(input);
+        onChange(input);
+    });
+    const handleConfirm = useCallback(() => {
+        requestAnimationFrame(onConfirm);
+    }, [onConfirm]);
+    const disabled = useMemo(() => (value ? !!checkDisabled?.(value) : false), [checkDisabled, value]);
+    const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
+    return (jsxs(Fragment, { children: [title &&
+                (isString(title) ? (jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
+                (isString(subtitle) ? (jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (isString(content) ? (jsx(ContentComponent, { context: userDefinedContext, children: content })) : (renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), Input && (jsx(Input, { defaultValue: defaultValue, value: value, onChange: handleChange, onConfirm: handleConfirm, onCancel: handleClose, context: userDefinedContext })), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    value,
+                    disabled,
+                    onChange: handleChange,
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsx(FooterComponent, { disabled: disabled, onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { ForegroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
+    const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsx("div", { className: cx(foreground, {
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active]: modal.visible,
+        }), children: jsxs(Foreground, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext, children: [modal.type === 'alert' && (jsx(AlertInner, { modal: modal, handlers: { onConfirm } })), modal.type === 'confirm' && (jsx(ConfirmInner, { modal: modal, handlers: { onConfirm, onClose } })), modal.type === 'prompt' && (jsx(PromptInner, { modal: modal, handlers: { onChange, onConfirm, onClose } }))] }) }));
+};
+
+const useSubscribeModal = (modal) => {
+    const [version, update] = useVersion();
+    useEffect(() => {
+        if (!modal)
+            return;
+        const unsubscribe = modal.subscribe(update);
+        return unsubscribe;
+    }, [modal, update]);
+    return version;
+};
+
+const presenter = css `
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+`;
+
+const { increment } = counterFactory(1);
+const Presenter = memo(({ modalId }) => {
+    const ref = useRef(null);
+    const { modal } = useModal(modalId);
+    useSubscribeModal(modal);
+    const handleChangeOrder = useHandle(() => {
+        if (ref.current) {
+            ref.current.style.zIndex = `${increment()}`;
+        }
+    });
+    return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+});
+
+const anchor = css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1000;
+  transition: background-color ease-in-out;
+`;
+
+const AnchorInner = () => {
+    const [version, update] = useVersion();
+    const { modalIds, setUpdater } = useModalManagerContext();
+    useEffect(() => {
+        setUpdater(update);
+    }, [setUpdater, update]);
+    const options = useConfigurationOptions();
+    const dimmed = useActiveModalCount(validateDimmable, version);
+    return (jsx("div", { className: anchor, style: {
+            transitionDuration: options.duration,
+            backgroundColor: dimmed ? options.backdrop : 'transparent',
+        }, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id }, id))) }));
+};
+const validateDimmable = (modal) => modal?.visible && modal.dimmed;
+const Anchor = memo(withErrorBoundary(AnchorInner));
+
+const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => createPortal(jsx(UserDefinedContextProvider, { context: context, children: jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsx(Anchor, {}) }) }) }), anchor);
+
+const useInitialize = () => {
+    const permitted = useRef(ModalManager.activate());
+    const anchorRef = useRef(null);
+    const [, update] = useVersion();
+    const handleInitialize = useCallback((root) => {
+        if (permitted.current) {
+            anchorRef.current = ModalManager.anchor({ root });
+            update();
+        }
+        else
+            printError('ModalProvider is already initialized', [
+                'ModalProvider can only be initialized once.',
+                'Nesting ModalProvider will be ignored...',
+            ], {
+                info: 'Something is wrong with the ModalProvider initialization...',
+            });
+    }, [update]);
+    return {
+        anchorRef,
+        handleInitialize,
+    };
+};
+
+const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+    const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
+    const { anchorRef, handleInitialize } = useInitialize();
+    useImperativeHandle(handleRef, () => ({
+        initialize: handleInitialize,
+    }), [handleInitialize]);
+    useOnMount(() => {
+        if (handleRef === null)
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    return (jsxs(Fragment, { children: [children, anchorRef.current &&
+                bootstrap({
+                    ForegroundComponent,
+                    BackgroundComponent,
+                    TitleComponent,
+                    SubtitleComponent,
+                    ContentComponent,
+                    FooterComponent,
+                    usePathname: usePathname$1,
+                    options,
+                    context,
+                    anchor: anchorRef.current,
+                })] }));
+});
+
+const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
+    const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
+    const { anchorRef, handleInitialize } = useInitialize();
+    useOnMount(() => {
+        if (mode === 'auto')
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    const initialize = useCallback((element) => {
+        if (mode === 'manual')
+            handleInitialize(element);
+    }, [mode, handleInitialize]);
+    const portal = anchorRef.current &&
+        bootstrap({
+            usePathname: usePathname$1,
+            ForegroundComponent,
+            BackgroundComponent,
+            TitleComponent,
+            SubtitleComponent,
+            ContentComponent,
+            FooterComponent,
+            options,
+            context,
+            anchor: anchorRef.current,
+        });
+    return { portal, initialize };
+};
+
+const useDestroyAfter = (modalId, duration) => {
+    const { modal, onDestroy } = useModal(modalId);
+    const tick = useSubscribeModal(modal);
+    const reference = useRef({
+        modal,
+        onDestroy,
+        milliseconds: isString(duration)
+            ? convertMsFromDuration(duration)
+            : duration,
+    });
+    useEffect(() => {
+        const { modal, onDestroy, milliseconds } = reference.current;
+        if (!modal || modal.visible || !modal.alive)
+            return;
+        const timer = setTimeout(() => {
+            onDestroy();
+        }, milliseconds);
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [tick]);
+};
+
+const useModalAnimation = (visible, handler) => {
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    useLayoutEffect(() => {
+        if (!handlerRef.current)
+            return;
+        let frame;
+        if (visible)
+            frame = requestAnimationFrame(() => handlerRef.current.onVisible?.());
+        else
+            frame = requestAnimationFrame(() => handlerRef.current.onHidden?.());
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [visible]);
+};
+
+export { BootstrapProvider as ModalProvider, alert, confirm, prompt, useActiveModalCount, useDestroyAfter, useBootstrap as useInitializeModal, useModalAnimation, useConfigurationBackdrop as useModalBackdrop, useConfigurationDuration as useModalDuration, useConfigurationOptions as useModalOptions, useSubscribeModal };