@inertiaui/modal-react 1.0.0-beta-5 → 2.0.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/CloseButton.d.ts +5 -0
- package/dist/Deferred.d.ts +11 -0
- package/dist/HeadlessModal.d.ts +64 -0
- package/dist/Modal.d.ts +48 -0
- package/dist/ModalContent.d.ts +24 -0
- package/dist/ModalLink.d.ts +29 -0
- package/dist/ModalRenderer.d.ts +4 -0
- package/dist/ModalRoot.d.ts +22 -0
- package/dist/SlideoverContent.d.ts +24 -0
- package/dist/WhenVisible.d.ts +16 -0
- package/dist/config.d.ts +21 -0
- package/dist/constants.d.ts +7 -0
- package/dist/helpers.d.ts +3 -0
- package/dist/inertiaui-modal.d.ts +2 -0
- package/dist/inertiaui-modal.js +1680 -2167
- package/dist/inertiaui-modal.js.map +1 -0
- package/dist/inertiaui-modal.umd.cjs +1854 -21
- package/dist/inertiaui-modal.umd.cjs.map +1 -0
- package/dist/inertiauiModal.d.ts +21 -0
- package/dist/types.d.ts +111 -0
- package/dist/useModal.d.ts +2 -0
- package/package.json +37 -22
- package/src/{CloseButton.jsx → CloseButton.tsx} +5 -1
- package/src/{Deferred.jsx → Deferred.tsx} +10 -3
- package/src/HeadlessModal.tsx +238 -0
- package/src/Modal.tsx +292 -0
- package/src/ModalContent.tsx +311 -0
- package/src/ModalLink.tsx +224 -0
- package/src/ModalRenderer.tsx +33 -0
- package/src/ModalRoot.tsx +880 -0
- package/src/SlideoverContent.tsx +319 -0
- package/src/{WhenVisible.jsx → WhenVisible.tsx} +20 -9
- package/src/config.ts +99 -0
- package/src/constants.ts +22 -0
- package/src/helpers.ts +17 -0
- package/src/inertiauiModal.ts +65 -0
- package/src/types.ts +150 -0
- package/src/useModal.ts +7 -0
- package/src/HeadlessModal.jsx +0 -143
- package/src/Modal.jsx +0 -136
- package/src/ModalContent.jsx +0 -56
- package/src/ModalLink.jsx +0 -123
- package/src/ModalRenderer.jsx +0 -34
- package/src/ModalRoot.jsx +0 -623
- package/src/SlideoverContent.jsx +0 -55
- package/src/config.js +0 -3
- package/src/helpers.js +0 -2
- package/src/inertiauiModal.js +0 -34
- package/src/useModal.js +0 -6
|
@@ -1,21 +1,1854 @@
|
|
|
1
|
-
(function(C,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react"),require("react/jsx-runtime"),require("axios"),require("@inertiajs/react"),require("@inertiajs/core"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","axios","@inertiajs/react","@inertiajs/core","react-dom"],o):(C=typeof globalThis<"u"?globalThis:C||self,o(C.InertiaUIModal={},C.React,C.jsxRuntime,C.Axios,C.InertiaReact,C.core,C.ReactDOM))})(this,(function(C,o,O,Fe,ne,Nr,Ir){"use strict";var no=Object.defineProperty;var lo=(C,o,O)=>o in C?no(C,o,{enumerable:!0,configurable:!0,writable:!0,value:O}):C[o]=O;var B=(C,o,O)=>lo(C,typeof o!="symbol"?o+"":o,O);function Tt(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const ve=Tt(o),Pt=Tt(ne),ge={type:"modal",navigate:!1,modal:{closeButton:!0,closeExplicitly:!1,maxWidth:"2xl",paddingClasses:"p-4 sm:p-6",panelClasses:"bg-white rounded",position:"center"},slideover:{closeButton:!0,closeExplicitly:!1,maxWidth:"md",paddingClasses:"p-4 sm:p-6",panelClasses:"bg-white min-h-screen",position:"right"}};class jr{constructor(){this.config={},this.reset()}reset(){this.config=JSON.parse(JSON.stringify(ge))}put(t,r){if(typeof t=="object"){this.config={type:t.type??ge.type,navigate:t.navigate??ge.navigate,modal:{...ge.modal,...t.modal??{}},slideover:{...ge.slideover,...t.slideover??{}}};return}const n=t.split(".");let l=this.config;for(let i=0;i<n.length-1;i++)l=l[n[i]]=l[n[i]]||{};l[n[n.length-1]]=r}get(t){if(typeof t>"u")return this.config;const r=t.split(".");let n=this.config;for(const l of r){if(n[l]===void 0)return null;n=n[l]}return n}}const Ae=new jr,_r=()=>Ae.reset(),Dr=(e,t)=>Ae.put(e,t),Ne=e=>Ae.get(e),de=(e,t)=>Ae.get(e?`slideover.${t}`:`modal.${t}`);function Wr(e,t){const r=typeof window<"u"?window.location.origin:"http://localhost";return e=typeof e=="string"?new URL(e,r):e,t=typeof t=="string"?new URL(t,r):t,`${e.origin}${e.pathname}`==`${t.origin}${t.pathname}`}function tt(e="inertiaui_modal_"){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?`${e}${crypto.randomUUID()}`:`${e}${Date.now().toString(36)}_${Math.random().toString(36).substr(2,9)}`}function ce(e){return typeof e=="string"?e.toLowerCase():e}function Ur(e,t,r=!1){return r&&(t=t.map(ce)),Array.isArray(e)?e.filter(n=>!t.includes(r?ce(n):n)):Object.keys(e).reduce((n,l)=>(t.includes(r?ce(l):l)||(n[l]=e[l]),n),{})}function Hr(e,t,r=!1){return r&&(t=t.map(ce)),Array.isArray(e)?e.filter(n=>t.includes(r?ce(n):n)):Object.keys(e).reduce((n,l)=>(t.includes(r?ce(l):l)&&(n[l]=e[l]),n),{})}function Vr(e){return Array.isArray(e)?e.filter(t=>t!==null):Object.keys(e).reduce((t,r)=>(r in e&&e[r]!==null&&(t[r]=e[r]),t),{})}function we(e){return e?(e=e.replace(/_/g,"-"),e=e.replace(/-+/g,"-"),/[A-Z]/.test(e)?(e=e.replace(/\s+/g,"").replace(/_/g,"").replace(/(?:^|\s|-)+([A-Za-z])/g,(t,r)=>r.toUpperCase()),e=e.replace(/(.)(?=[A-Z])/g,"$1-"),e.toLowerCase()):e):""}function Br(e){if(typeof window<"u")return e.toLowerCase()in window;if(typeof document<"u"){const n=document.createElement("div");return e.toLowerCase()in n}const t=e.toLowerCase();return[/^on(click|dblclick|mousedown|mouseup|mouseover|mouseout|mousemove|mouseenter|mouseleave)$/,/^on(keydown|keyup|keypress)$/,/^on(focus|blur|change|input|submit|reset)$/,/^on(load|unload|error|resize|scroll)$/,/^on(touchstart|touchend|touchmove|touchcancel)$/,/^on(pointerdown|pointerup|pointermove|pointerenter|pointerleave|pointercancel)$/,/^on(drag|dragstart|dragend|dragenter|dragleave|dragover|drop)$/,/^on(animationstart|animationend|animationiteration)$/,/^on(transitionstart|transitionend|transitionrun|transitioncancel)$/].some(n=>n.test(t))}const Ie=o.createContext(null);Ie.displayName="ModalStackContext";let kt=null,Lt=null,fe=null,je={},rt=[],pe={};const Ft=({children:e})=>{const[t,r]=o.useState([]),[n,l]=o.useState({}),i=v=>{r(c=>{const f=v([...c]),g=b=>{var m;return f.length<2?!0:((m=f.map(x=>({id:x.id,shouldRender:x.shouldRender})).reverse().find(x=>x.shouldRender))==null?void 0:m.id)===b};return f.forEach((b,m)=>{f[m].onTopOfStack=g(b.id),f[m].getParentModal=()=>m<1?null:f.slice(0,m).reverse().find(x=>x.isOpen),f[m].getChildModal=()=>m===f.length-1?null:f.slice(m+1).find(x=>x.isOpen)}),f})};o.useEffect(()=>{rt=t},[t]);class u{constructor(c,f,g,b,m){B(this,"show",()=>{i(c=>c.map(f=>(f.id===this.id&&!f.isOpen&&(f.isOpen=!0,f.shouldRender=!0),f)))});B(this,"setOpen",c=>{c?this.show():this.close()});B(this,"close",()=>{i(c=>{let f=!1;const g=c.map(b=>{var m;return b.id===this.id&&b.isOpen&&(Object.keys(b.listeners).forEach(x=>{b.off(x)}),b.isOpen=!1,(m=b.onCloseCallback)==null||m.call(b),f=!0),b});return f?g:c})});B(this,"afterLeave",()=>{this.isOpen||i(c=>{const f=c.map(g=>{var b;return g.id===this.id&&!g.isOpen&&(g.shouldRender=!1,(b=g.afterLeaveCallback)==null||b.call(g),g.afterLeaveCallback=null),g});return this.index===0?[]:f})});B(this,"on",(c,f)=>{c=we(c),this.listeners[c]=this.listeners[c]??[],this.listeners[c].push(f)});B(this,"off",(c,f)=>{var g;c=we(c),f?this.listeners[c]=((g=this.listeners[c])==null?void 0:g.filter(b=>b!==f))??[]:delete this.listeners[c]});B(this,"emit",(c,...f)=>{var g;(g=this.listeners[we(c)])==null||g.forEach(b=>b(...f))});B(this,"registerEventListenersFromProps",c=>{const f=[];return Object.keys(c).filter(g=>g.startsWith("on")).forEach(g=>{const b=we(g).replace(/^on-/,"");this.on(b,c[g]),f.push(()=>this.off(b,c[g]))}),()=>f.forEach(g=>g())});B(this,"reload",(c={})=>{var m,x;let f=Object.keys(this.response.props);if(c.only&&(f=c.only),c.except&&(f=Ur(f,c.except)),!((m=this.response)!=null&&m.url))return;const g=(c.method??"get").toLowerCase(),b=c.data??{};(x=c.onStart)==null||x.call(c),Fe({url:this.response.url,method:g,data:g==="get"?{}:b,params:g==="get"?b:{},headers:{...c.headers??{},Accept:"text/html, application/xhtml+xml","X-Inertia":!0,"X-Inertia-Partial-Component":this.response.component,"X-Inertia-Version":this.response.version,"X-Inertia-Partial-Data":f.join(","),"X-InertiaUI-Modal":tt(),"X-InertiaUI-Modal-Use-Router":0,"X-InertiaUI-Modal-Base-Url":fe}}).then(S=>{var F;this.updateProps(S.data.props),(F=c.onSuccess)==null||F.call(c,S)}).catch(S=>{var F;(F=c.onError)==null||F.call(c,S)}).finally(()=>{var S;(S=c.onFinish)==null||S.call(c)})});B(this,"updateProps",c=>{Object.assign(this.props,c),i(f=>f)});if(this.id=f.id??tt(),this.isOpen=!1,this.shouldRender=!1,this.listeners={},this.component=c,this.props=f.props,this.response=f,this.config=g??{},this.onCloseCallback=b,this.afterLeaveCallback=m,pe[this.id]){this.config={...this.config,...pe[this.id].config??{}};const x=pe[this.id].onClose,S=pe[this.id].onAfterLeave;x&&(this.onCloseCallback=b?()=>{b(),x()}:x),S&&(this.afterLeaveCallback=m?()=>{m(),S()}:S),delete pe[this.id]}this.index=-1,this.getParentModal=()=>null,this.getChildModal=()=>null,this.onTopOfStack=!0}static generateId(){return typeof crypto<"u"&&typeof crypto.randomUUID=="function"?`inertiaui_modal_${crypto.randomUUID()}`:`inertiaui_modal_${Date.now().toString(36)}_${Math.random().toString(36).substr(2,9)}`}}const a=(v,c={},f=null,g=null)=>Lt(v.component).then(b=>d(b,v,c,f,g)),s=v=>{var f,g;const c=(g=(f=v.response)==null?void 0:f.meta)==null?void 0:g.deferredProps;c&&Object.keys(c).forEach(b=>{v.reload({only:c[b]})})},d=(v,c,f,g,b)=>{const m=new u(v,c,f,g,b);return m.index=t.length,i(x=>[...x,m]),s(m),m.show(),m};function h(v,c,f,g){if(!n[v])throw new Error(`The local modal "${v}" has not been registered.`);const b=d(null,{},c,f,g);return b.name=v,n[v].callback(b),b}const E=(v,c={})=>w(v,c.method??"get",c.data??{},c.headers??{},c.config??{},c.onClose,c.onAfterLeave,c.queryStringArrayFormat??"brackets",c.navigate??Ne("navigate"),c.onStart,c.onSuccess,c.onError).then(f=>{const g=c.listeners??{};return Object.keys(g).forEach(b=>{const m=we(b);f.on(m,g[b])}),f}),w=(v,c,f={},g={},b={},m=null,x=null,S="brackets",F=!1,_=null,L=null,A=null)=>{const H=tt();return new Promise((N,P)=>{if(v.startsWith("#")){N(h(v.substring(1),b,m,x));return}const[D,he]=Nr.mergeDataIntoQueryString(c,v||"",f,S);let ae=F&&t.length===0;if(t.length===0&&(fe=typeof window<"u"?window.location.href:""),g={...g,Accept:"text/html, application/xhtml+xml","X-Requested-With":"XMLHttpRequest","X-Inertia":!0,"X-Inertia-Version":kt,"X-InertiaUI-Modal":H,"X-InertiaUI-Modal-Use-Router":ae?1:0,"X-InertiaUI-Modal-Base-Url":fe},ae)return je={},pe[H]={config:b,onClose:m,onAfterLeave:x},ne.router.visit(D,{method:c,data:he,headers:g,preserveScroll:!0,preserveState:!0,onError(...k){A==null||A(...k),P(...k)},onStart(...k){_==null||_(...k)},onSuccess(...k){L==null||L(...k)},onBefore:()=>{je[H]=N}});_==null||_();const J=k=>{try{Pt.progress&&k(Pt.progress)}catch{}};J(k=>k.start()),Fe({url:D,method:c,data:he,headers:g}).then(k=>{L==null||L(k),N(a(k.data,b,m,x))}).catch((...k)=>{A==null||A(...k),P(...k)}).finally(()=>{J(k=>k.finish())})})},$={stack:t,localModals:n,push:d,pushFromResponseData:a,length:()=>rt.length,closeAll:()=>{rt.reverse().forEach(v=>v.close())},reset:()=>i(()=>[]),visit:w,visitModal:E,registerLocalModal:(v,c)=>{l(f=>({...f,[v]:{name:v,callback:c}}))},removeLocalModal:v=>{l(c=>{const f={...c};return delete f[v],f})},onModalOnBase:v=>{const c=je[v.id];c&&(c(v),delete je[v.id])}};return O.jsx(Ie.Provider,{value:$,children:e})},be=()=>{const e=o.useContext(Ie);if(e===null)throw new Error("useModalStack must be used within a ModalStackProvider");return e},At=["closeButton","closeExplicitly","maxWidth","paddingClasses","panelClasses","position","slideover"],Nt=e=>{e.initialPage&&(kt=e.initialPage.version),e.resolveComponent&&(Lt=e.resolveComponent)},qr=(e,t)=>{Nt(t);const r=({Component:n,props:l,key:i})=>{const u=()=>{const a=o.createElement(n,{key:i,...l});return typeof n.layout=="function"?n.layout(a):Array.isArray(n.layout)?n.layout.concat(a).reverse().reduce((d,h)=>o.createElement(h,l,d)):a};return O.jsxs(O.Fragment,{children:[u(),O.jsx(It,{})]})};return O.jsx(Ft,{children:O.jsx(e,{...t,children:r})})},It=({children:e})=>{var a,s;const t=o.useContext(Ie),r=ne.usePage();let n=!1,l=!!((a=r.props)!=null&&a._inertiaui_modal);o.useEffect(()=>ne.router.on("start",()=>n=!0),[]),o.useEffect(()=>ne.router.on("finish",()=>n=!1),[]),o.useEffect(()=>ne.router.on("navigate",function(d){const h=d.detail.page.props._inertiaui_modal;if(!h){t.closeAll(),fe=null,l=!1;return}fe=h.baseUrl,t.pushFromResponseData(h,{},()=>{if(!h.baseUrl){console.error("No base url in modal response data so cannot navigate back");return}!n&&typeof window<"u"&&window.location.href!==h.baseUrl&&ne.router.visit(h.baseUrl,{preserveScroll:!0,preserveState:!0})}).then(t.onModalOnBase)}),[]);const i=d=>{var h;return d.headers["X-InertiaUI-Modal-Base-Url"]=fe??(l?(h=r.props._inertiaui_modal)==null?void 0:h.baseUrl:null),d};o.useEffect(()=>(Fe.interceptors.request.use(i),()=>Fe.interceptors.request.eject(i)),[]);const u=o.useRef();return o.useEffect(()=>{var E,w;const d=(E=r.props)==null?void 0:E._inertiaui_modal,h=u.current;u.current=d,d&&h&&d.component===h.component&&Wr(d.url,h.url)&&((w=t.stack[0])==null||w.updateProps(d.props??{}))},[(s=r.props)==null?void 0:s._inertiaui_modal]),O.jsxs(O.Fragment,{children:[e,t.stack.length>0&&O.jsx(jt,{index:0})]})},nt=o.createContext(null);nt.displayName="ModalIndexContext";const lt=()=>{const e=o.useContext(nt);if(e===void 0)throw new Error("useModalIndex must be used within a ModalIndexProvider");return e},jt=({index:e})=>{const{stack:t}=be(),r=o.useMemo(()=>t[e],[t,e]);return(r==null?void 0:r.component)&&O.jsx(nt.Provider,{value:e,children:O.jsx(r.component,{...r.props,onModalEvent:(...n)=>r.emit(...n)})})};function ot(){return be().stack[lt()]??null}const _t=({children:e,data:t,fallback:r})=>{if(!t)throw new Error("`<Deferred>` requires a `data` prop to be a string or array of strings");const[n,l]=o.useState(!1),i=Array.isArray(t)?t:[t],u=ot().props;return o.useEffect(()=>{l(i.every(a=>u[a]!==void 0))},[u,i]),n?e:r};_t.displayName="InertiaModalDeferred";const it=o.forwardRef(({name:e,children:t,onFocus:r=null,onBlur:n=null,onClose:l=null,onSuccess:i=null,...u},a)=>{const s=lt(),{stack:d,registerLocalModal:h,removeLocalModal:E}=be(),[w,y]=o.useState(null),p=o.useMemo(()=>e?w:d[s],[e,w,s,d]),$=o.useMemo(()=>{var m;return(m=d.find(x=>x.shouldRender&&x.index>(p==null?void 0:p.index)))==null?void 0:m.index},[s,d]),v=o.useMemo(()=>(p==null?void 0:p.config.slideover)??u.slideover??Ne("type")==="slideover",[u.slideover]),c=o.useMemo(()=>({slideover:v,closeButton:u.closeButton??de(v,"closeButton"),closeExplicitly:u.closeExplicitly??de(v,"closeExplicitly"),maxWidth:u.maxWidth??de(v,"maxWidth"),paddingClasses:u.paddingClasses??de(v,"paddingClasses"),panelClasses:u.panelClasses??de(v,"panelClasses"),position:u.position??de(v,"position"),...p==null?void 0:p.config}),[u,p==null?void 0:p.config]);o.useEffect(()=>{if(e){let m=null;return h(e,x=>{m=x.registerEventListenersFromProps(u),y(x)}),()=>{m==null||m(),m=null,E(e)}}return p.registerEventListenersFromProps(u)},[e]);const f=o.useRef(p);o.useEffect(()=>{f.current=p},[p]),o.useEffect(()=>{p!==null&&(p.isOpen?i==null||i():l==null||l())},[p==null?void 0:p.isOpen]);const[g,b]=o.useState(!1);return o.useEffect(()=>{g&&p!==null&&p.isOpen&&(p.onTopOfStack?r==null||r():n==null||n()),b(!0)},[p==null?void 0:p.onTopOfStack]),o.useImperativeHandle(a,()=>({afterLeave:()=>{var m;return(m=f.current)==null?void 0:m.afterLeave()},close:()=>{var m;return(m=f.current)==null?void 0:m.close()},emit:(...m)=>{var x;return(x=f.current)==null?void 0:x.emit(...m)},getChildModal:()=>{var m;return(m=f.current)==null?void 0:m.getChildModal()},getParentModal:()=>{var m;return(m=f.current)==null?void 0:m.getParentModal()},reload:(...m)=>{var x;return(x=f.current)==null?void 0:x.reload(...m)},setOpen:()=>{var m;return(m=f.current)==null?void 0:m.setOpen()},get id(){var m;return(m=f.current)==null?void 0:m.id},get index(){var m;return(m=f.current)==null?void 0:m.index},get isOpen(){var m;return(m=f.current)==null?void 0:m.isOpen},get config(){var m;return(m=f.current)==null?void 0:m.config},get modalContext(){return f.current},get onTopOfStack(){var m;return(m=f.current)==null?void 0:m.onTopOfStack},get shouldRender(){var m;return(m=f.current)==null?void 0:m.shouldRender}}),[p]),(p==null?void 0:p.shouldRender)&&O.jsxs(O.Fragment,{children:[typeof t=="function"?t({afterLeave:p.afterLeave,close:p.close,config:c,emit:p.emit,getChildModal:p.getChildModal,getParentModal:p.getParentModal,id:p.id,index:p.index,isOpen:p.isOpen,modalContext:p,onTopOfStack:p.onTopOfStack,reload:p.reload,setOpen:p.setOpen,shouldRender:p.shouldRender}):t,$&&O.jsx(jt,{index:$})]})});it.displayName="HeadlessModal";function Dt(e){var t,r,n="";if(typeof e=="string"||typeof e=="number")n+=e;else if(typeof e=="object")if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(r=Dt(e[t]))&&(n&&(n+=" "),n+=r)}else for(r in e)e[r]&&(n&&(n+=" "),n+=r);return n}function _e(){for(var e,t,r=0,n="",l=arguments.length;r<l;r++)(e=arguments[r])&&(t=Dt(e))&&(n&&(n+=" "),n+=t);return n}var Xr=Object.defineProperty,zr=(e,t,r)=>t in e?Xr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,st=(e,t,r)=>(zr(e,typeof t!="symbol"?t+"":t,r),r);let Gr=class{constructor(){st(this,"current",this.detect()),st(this,"handoffState","pending"),st(this,"currentId",0)}set(t){this.current!==t&&(this.handoffState="pending",this.currentId=0,this.current=t)}reset(){this.set(this.detect())}nextId(){return++this.currentId}get isServer(){return this.current==="server"}get isClient(){return this.current==="client"}detect(){return typeof window>"u"||typeof document>"u"?"server":"client"}handoff(){this.handoffState==="pending"&&(this.handoffState="complete")}get isHandoffComplete(){return this.handoffState==="complete"}},q=new Gr;function ye(e){var t;return q.isServer?null:e==null?document:(t=e==null?void 0:e.ownerDocument)!=null?t:document}function ut(e){var t,r;return q.isServer?null:e==null?document:(r=(t=e==null?void 0:e.getRootNode)==null?void 0:t.call(e))!=null?r:document}function Wt(e){var t,r;return(r=(t=ut(e))==null?void 0:t.activeElement)!=null?r:null}function Kr(e){return Wt(e)===e}function De(e){typeof queueMicrotask=="function"?queueMicrotask(e):Promise.resolve().then(e).catch(t=>setTimeout(()=>{throw t}))}function G(){let e=[],t={addEventListener(r,n,l,i){return r.addEventListener(n,l,i),t.add(()=>r.removeEventListener(n,l,i))},requestAnimationFrame(...r){let n=requestAnimationFrame(...r);return t.add(()=>cancelAnimationFrame(n))},nextFrame(...r){return t.requestAnimationFrame(()=>t.requestAnimationFrame(...r))},setTimeout(...r){let n=setTimeout(...r);return t.add(()=>clearTimeout(n))},microTask(...r){let n={current:!0};return De(()=>{n.current&&r[0]()}),t.add(()=>{n.current=!1})},style(r,n,l){let i=r.style.getPropertyValue(n);return Object.assign(r.style,{[n]:l}),this.add(()=>{Object.assign(r.style,{[n]:i})})},group(r){let n=G();return r(n),this.add(()=>n.dispose())},add(r){return e.includes(r)||e.push(r),()=>{let n=e.indexOf(r);if(n>=0)for(let l of e.splice(n,1))l()}},dispose(){for(let r of e.splice(0))r()}};return t}function We(){let[e]=o.useState(G);return o.useEffect(()=>()=>e.dispose(),[e]),e}let I=(e,t)=>{q.isServer?o.useEffect(e,t):o.useLayoutEffect(e,t)};function le(e){let t=o.useRef(e);return I(()=>{t.current=e},[e]),t}let T=function(e){let t=le(e);return o.useCallback((...r)=>t.current(...r),[t])};function Ee(e){return o.useMemo(()=>e,Object.values(e))}let Yr=o.createContext(void 0);function Zr(){return o.useContext(Yr)}function at(...e){return Array.from(new Set(e.flatMap(t=>typeof t=="string"?t.split(" "):[]))).filter(Boolean).join(" ")}function K(e,t,...r){if(e in t){let l=t[e];return typeof l=="function"?l(...r):l}let n=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(l=>`"${l}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(n,K),n}var Ue=(e=>(e[e.None=0]="None",e[e.RenderStrategy=1]="RenderStrategy",e[e.Static=2]="Static",e))(Ue||{}),Q=(e=>(e[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e))(Q||{});function W(){let e=Qr();return o.useCallback(t=>Jr({mergeRefs:e,...t}),[e])}function Jr({ourProps:e,theirProps:t,slot:r,defaultTag:n,features:l,visible:i=!0,name:u,mergeRefs:a}){a=a??Rr;let s=Ut(t,e);if(i)return He(s,r,n,u,a);let d=l??0;if(d&2){let{static:h=!1,...E}=s;if(h)return He(E,r,n,u,a)}if(d&1){let{unmount:h=!0,...E}=s;return K(h?0:1,{0(){return null},1(){return He({...E,hidden:!0,style:{display:"none"}},r,n,u,a)}})}return He(s,r,n,u,a)}function He(e,t={},r,n,l){let{as:i=r,children:u,refName:a="ref",...s}=dt(e,["unmount","static"]),d=e.ref!==void 0?{[a]:e.ref}:{},h=typeof u=="function"?u(t):u;"className"in s&&s.className&&typeof s.className=="function"&&(s.className=s.className(t)),s["aria-labelledby"]&&s["aria-labelledby"]===s.id&&(s["aria-labelledby"]=void 0);let E={};if(t){let w=!1,y=[];for(let[p,$]of Object.entries(t))typeof $=="boolean"&&(w=!0),$===!0&&y.push(p.replace(/([A-Z])/g,v=>`-${v.toLowerCase()}`));if(w){E["data-headlessui-state"]=y.join(" ");for(let p of y)E[`data-${p}`]=""}}if(xe(i)&&(Object.keys(oe(s)).length>0||Object.keys(oe(E)).length>0))if(!o.isValidElement(h)||Array.isArray(h)&&h.length>1||tn(h)){if(Object.keys(oe(s)).length>0)throw new Error(['Passing props on "Fragment"!',"",`The current component <${n} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(oe(s)).concat(Object.keys(oe(E))).map(w=>` - ${w}`).join(`
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
*/var Qt;function Mn(){return Qt||(Qt=1,process.env.NODE_ENV!=="production"&&(function(){function e(s,d){return s===d&&(s!==0||1/s===1/d)||s!==s&&d!==d}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=o,r=typeof Object.is=="function"?Object.is:e,n=t.useSyncExternalStore,l=t.useRef,i=t.useEffect,u=t.useMemo,a=t.useDebugValue;vt.useSyncExternalStoreWithSelector=function(s,d,h,E,w){var y=l(null);if(y.current===null){var p={hasValue:!1,value:null};y.current=p}else p=y.current;y=u(function(){function v(m){if(!c){if(c=!0,f=m,m=E(m),w!==void 0&&p.hasValue){var x=p.value;if(w(x,m))return g=x}return g=m}if(x=g,r(f,m))return x;var S=E(m);return w!==void 0&&w(x,S)?(f=m,x):(f=m,g=S)}var c=!1,f,g,b=h===void 0?null:h;return[function(){return v(d())},b===null?void 0:function(){return v(b())}]},[d,h,E,w]);var $=n(s,y[0],y[1]);return i(function(){p.hasValue=!0,p.value=$},[$]),a($),$},typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())})()),vt}var Rt;function Tn(){return Rt||(Rt=1,process.env.NODE_ENV==="production"?Be.exports=Cn():Be.exports=Mn()),Be.exports}var Pn=Tn();function er(e,t,r=Gt){return Pn.useSyncExternalStoreWithSelector(T(n=>e.subscribe(kn,n)),T(()=>e.state),T(()=>e.state),T(t),r)}function kn(e){return e}function Se(e,t){let r=o.useId(),n=Zt.get(t),[l,i]=er(n,o.useCallback(u=>[n.selectors.isTop(u,r),n.selectors.inStack(u,r)],[n,r]));return I(()=>{if(e)return n.actions.push(r),()=>n.actions.pop(r)},[n,e,r]),e?i?l:!0:!1}let gt=new Map,Ce=new Map;function tr(e){var t;let r=(t=Ce.get(e))!=null?t:0;return Ce.set(e,r+1),r!==0?()=>rr(e):(gt.set(e,{"aria-hidden":e.getAttribute("aria-hidden"),inert:e.inert}),e.setAttribute("aria-hidden","true"),e.inert=!0,()=>rr(e))}function rr(e){var t;let r=(t=Ce.get(e))!=null?t:1;if(r===1?Ce.delete(e):Ce.set(e,r-1),r!==1)return;let n=gt.get(e);n&&(n["aria-hidden"]===null?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",n["aria-hidden"]),e.inert=n.inert,gt.delete(e))}function Ln(e,{allowed:t,disallowed:r}={}){let n=Se(e,"inert-others");I(()=>{var l,i;if(!n)return;let u=G();for(let s of(l=r==null?void 0:r())!=null?l:[])s&&u.add(tr(s));let a=(i=t==null?void 0:t())!=null?i:[];for(let s of a){if(!s)continue;let d=ye(s);if(!d)continue;let h=s.parentElement;for(;h&&h!==d.body;){for(let E of h.children)a.some(w=>E.contains(w))||u.add(tr(E));h=h.parentElement}}return u.dispose},[n,t,r])}function Fn(e,t,r){let n=le(l=>{let i=l.getBoundingClientRect();i.x===0&&i.y===0&&i.width===0&&i.height===0&&r()});o.useEffect(()=>{if(!e)return;let l=t===null?null:ie(t)?t:t.current;if(!l)return;let i=G();if(typeof ResizeObserver<"u"){let u=new ResizeObserver(()=>n.current(l));u.observe(l),i.add(()=>u.disconnect())}if(typeof IntersectionObserver<"u"){let u=new IntersectionObserver(()=>n.current(l));u.observe(l),i.add(()=>u.disconnect())}return()=>i.dispose()},[t,n,e])}let qe=["[contentEditable=true]","[tabindex]","a[href]","area[href]","button:not([disabled])","iframe","input:not([disabled])","select:not([disabled])","details>summary","textarea:not([disabled])"].map(e=>`${e}:not([tabindex='-1'])`).join(","),An=["[data-autofocus]"].map(e=>`${e}:not([tabindex='-1'])`).join(",");var Y=(e=>(e[e.First=1]="First",e[e.Previous=2]="Previous",e[e.Next=4]="Next",e[e.Last=8]="Last",e[e.WrapAround=16]="WrapAround",e[e.NoScroll=32]="NoScroll",e[e.AutoFocus=64]="AutoFocus",e))(Y||{}),wt=(e=>(e[e.Error=0]="Error",e[e.Overflow=1]="Overflow",e[e.Success=2]="Success",e[e.Underflow=3]="Underflow",e))(wt||{}),Nn=(e=>(e[e.Previous=-1]="Previous",e[e.Next=1]="Next",e))(Nn||{});function In(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(qe)).sort((t,r)=>Math.sign((t.tabIndex||Number.MAX_SAFE_INTEGER)-(r.tabIndex||Number.MAX_SAFE_INTEGER)))}function jn(e=document.body){return e==null?[]:Array.from(e.querySelectorAll(An)).sort((t,r)=>Math.sign((t.tabIndex||Number.MAX_SAFE_INTEGER)-(r.tabIndex||Number.MAX_SAFE_INTEGER)))}var nr=(e=>(e[e.Strict=0]="Strict",e[e.Loose=1]="Loose",e))(nr||{});function _n(e,t=0){var r;return e===((r=ye(e))==null?void 0:r.body)?!1:K(t,{0(){return e.matches(qe)},1(){let n=e;for(;n!==null;){if(n.matches(qe))return!0;n=n.parentElement}return!1}})}var Dn=(e=>(e[e.Keyboard=0]="Keyboard",e[e.Mouse=1]="Mouse",e))(Dn||{});typeof window<"u"&&typeof document<"u"&&(document.addEventListener("keydown",e=>{e.metaKey||e.altKey||e.ctrlKey||(document.documentElement.dataset.headlessuiFocusVisible="")},!0),document.addEventListener("click",e=>{e.detail===1?delete document.documentElement.dataset.headlessuiFocusVisible:e.detail===0&&(document.documentElement.dataset.headlessuiFocusVisible="")},!0));function Z(e){e==null||e.focus({preventScroll:!0})}let Wn=["textarea","input"].join(",");function Un(e){var t,r;return(r=(t=e==null?void 0:e.matches)==null?void 0:t.call(e,Wn))!=null?r:!1}function Hn(e,t=r=>r){return e.slice().sort((r,n)=>{let l=t(r),i=t(n);if(l===null||i===null)return 0;let u=l.compareDocumentPosition(i);return u&Node.DOCUMENT_POSITION_FOLLOWING?-1:u&Node.DOCUMENT_POSITION_PRECEDING?1:0})}function Me(e,t,{sorted:r=!0,relativeTo:n=null,skipElements:l=[]}={}){let i=Array.isArray(e)?e.length>0?ut(e[0]):document:ut(e),u=Array.isArray(e)?r?Hn(e):e:t&64?jn(e):In(e);l.length>0&&u.length>1&&(u=u.filter(y=>!l.some(p=>p!=null&&"current"in p?(p==null?void 0:p.current)===y:p===y))),n=n??(i==null?void 0:i.activeElement);let a=(()=>{if(t&5)return 1;if(t&10)return-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),s=(()=>{if(t&1)return 0;if(t&2)return Math.max(0,u.indexOf(n))-1;if(t&4)return Math.max(0,u.indexOf(n))+1;if(t&8)return u.length-1;throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last")})(),d=t&32?{preventScroll:!0}:{},h=0,E=u.length,w;do{if(h>=E||h+E<=0)return 0;let y=s+h;if(t&16)y=(y+E)%E;else{if(y<0)return 3;if(y>=E)return 1}w=u[y],w==null||w.focus(d),h+=a}while(w!==Wt(w));return t&6&&Un(w)&&w.select(),2}function lr(){return/iPhone/gi.test(window.navigator.platform)||/Mac/gi.test(window.navigator.platform)&&window.navigator.maxTouchPoints>0}function Vn(){return/Android/gi.test(window.navigator.userAgent)}function or(){return lr()||Vn()}function Xe(e,t,r,n){let l=le(r);o.useEffect(()=>{if(!e)return;function i(u){l.current(u)}return document.addEventListener(t,i,n),()=>document.removeEventListener(t,i,n)},[e,t,n])}function ir(e,t,r,n){let l=le(r);o.useEffect(()=>{if(!e)return;function i(u){l.current(u)}return window.addEventListener(t,i,n),()=>window.removeEventListener(t,i,n)},[e,t,n])}const sr=30;function Bn(e,t,r){let n=le(r),l=o.useCallback(function(a,s){if(a.defaultPrevented)return;let d=s(a);if(d===null||!d.getRootNode().contains(d)||!d.isConnected)return;let h=(function E(w){return typeof w=="function"?E(w()):Array.isArray(w)||w instanceof Set?w:[w]})(t);for(let E of h)if(E!==null&&(E.contains(d)||a.composed&&a.composedPath().includes(E)))return;return!_n(d,nr.Loose)&&d.tabIndex!==-1&&a.preventDefault(),n.current(a,d)},[n,t]),i=o.useRef(null);Xe(e,"pointerdown",a=>{var s,d;or()||(i.current=((d=(s=a.composedPath)==null?void 0:s.call(a))==null?void 0:d[0])||a.target)},!0),Xe(e,"pointerup",a=>{if(or()||!i.current)return;let s=i.current;return i.current=null,l(a,()=>s)},!0);let u=o.useRef({x:0,y:0});Xe(e,"touchstart",a=>{u.current.x=a.touches[0].clientX,u.current.y=a.touches[0].clientY},!0),Xe(e,"touchend",a=>{let s={x:a.changedTouches[0].clientX,y:a.changedTouches[0].clientY};if(!(Math.abs(s.x-u.current.x)>=sr||Math.abs(s.y-u.current.y)>=sr))return l(a,()=>ee(a.target)?a.target:null)},!0),ir(e,"blur",a=>l(a,()=>sn(window.document.activeElement)?window.document.activeElement:null),!0)}function bt(...e){return o.useMemo(()=>ye(...e),[...e])}function ur(e,t,r,n){let l=le(r);o.useEffect(()=>{e=e??window;function i(u){l.current(u)}return e.addEventListener(t,i,n),()=>e.removeEventListener(t,i,n)},[e,t,n])}function qn(e){return o.useSyncExternalStore(e.subscribe,e.getSnapshot,e.getSnapshot)}function Xn(e,t){let r=e(),n=new Set;return{getSnapshot(){return r},subscribe(l){return n.add(l),()=>n.delete(l)},dispatch(l,...i){let u=t[l].call(r,...i);u&&(r=u,n.forEach(a=>a()))}}}function zn(){let e;return{before({doc:t}){var r;let n=t.documentElement,l=(r=t.defaultView)!=null?r:window;e=Math.max(0,l.innerWidth-n.clientWidth)},after({doc:t,d:r}){let n=t.documentElement,l=Math.max(0,n.clientWidth-n.offsetWidth),i=Math.max(0,e-l);r.style(n,"paddingRight",`${i}px`)}}}function Gn(){return lr()?{before({doc:e,d:t,meta:r}){function n(l){for(let i of r().containers)for(let u of i())if(u.contains(l))return!0;return!1}t.microTask(()=>{var l;if(window.getComputedStyle(e.documentElement).scrollBehavior!=="auto"){let a=G();a.style(e.documentElement,"scrollBehavior","auto"),t.add(()=>t.microTask(()=>a.dispose()))}let i=(l=window.scrollY)!=null?l:window.pageYOffset,u=null;t.addEventListener(e,"click",a=>{if(ee(a.target))try{let s=a.target.closest("a");if(!s)return;let{hash:d}=new URL(s.href),h=e.querySelector(d);ee(h)&&!n(h)&&(u=h)}catch{}},!0),t.group(a=>{t.addEventListener(e,"touchstart",s=>{if(a.dispose(),ee(s.target)&&on(s.target))if(n(s.target)){let d=s.target;for(;d.parentElement&&n(d.parentElement);)d=d.parentElement;a.style(d,"overscrollBehavior","contain")}else a.style(s.target,"touchAction","none")})}),t.addEventListener(e,"touchmove",a=>{if(ee(a.target)){if(un(a.target))return;if(n(a.target)){let s=a.target;for(;s.parentElement&&s.dataset.headlessuiPortal!==""&&!(s.scrollHeight>s.clientHeight||s.scrollWidth>s.clientWidth);)s=s.parentElement;s.dataset.headlessuiPortal===""&&a.preventDefault()}else a.preventDefault()}},{passive:!1}),t.add(()=>{var a;let s=(a=window.scrollY)!=null?a:window.pageYOffset;i!==s&&window.scrollTo(0,i),u&&u.isConnected&&(u.scrollIntoView({block:"nearest"}),u=null)})})}}:{}}function Kn(){return{before({doc:e,d:t}){t.style(e.documentElement,"overflow","hidden")}}}function ar(e){let t={};for(let r of e)Object.assign(t,r(t));return t}let se=Xn(()=>new Map,{PUSH(e,t){var r;let n=(r=this.get(e))!=null?r:{doc:e,count:0,d:G(),meta:new Set,computedMeta:{}};return n.count++,n.meta.add(t),n.computedMeta=ar(n.meta),this.set(e,n),this},POP(e,t){let r=this.get(e);return r&&(r.count--,r.meta.delete(t),r.computedMeta=ar(r.meta)),this},SCROLL_PREVENT(e){let t={doc:e.doc,d:e.d,meta(){return e.computedMeta}},r=[Gn(),zn(),Kn()];r.forEach(({before:n})=>n==null?void 0:n(t)),r.forEach(({after:n})=>n==null?void 0:n(t))},SCROLL_ALLOW({d:e}){e.dispose()},TEARDOWN({doc:e}){this.delete(e)}});se.subscribe(()=>{let e=se.getSnapshot(),t=new Map;for(let[r]of e)t.set(r,r.documentElement.style.overflow);for(let r of e.values()){let n=t.get(r.doc)==="hidden",l=r.count!==0;(l&&!n||!l&&n)&&se.dispatch(r.count>0?"SCROLL_PREVENT":"SCROLL_ALLOW",r),r.count===0&&se.dispatch("TEARDOWN",r)}});function Yn(e,t,r=()=>({containers:[]})){let n=qn(se),l=t?n.get(t):void 0,i=l?l.count>0:!1;return I(()=>{if(!(!t||!e))return se.dispatch("PUSH",t,r),()=>se.dispatch("POP",t,r)},[e,t]),i}function Zn(e,t,r=()=>[document.body]){let n=Se(e,"scroll-lock");Yn(n,t,l=>{var i;return{containers:[...(i=l.containers)!=null?i:[],r]}})}function Jn(e=0){let[t,r]=o.useState(e),n=o.useCallback(s=>r(s),[]),l=o.useCallback(s=>r(d=>d|s),[]),i=o.useCallback(s=>(t&s)===s,[t]),u=o.useCallback(s=>r(d=>d&~s),[]),a=o.useCallback(s=>r(d=>d^s),[]);return{flags:t,setFlag:n,addFlag:l,hasFlag:i,removeFlag:u,toggleFlag:a}}var dr,cr;typeof process<"u"&&typeof globalThis<"u"&&typeof Element<"u"&&((dr=process==null?void 0:process.env)==null?void 0:dr.NODE_ENV)==="test"&&typeof((cr=Element==null?void 0:Element.prototype)==null?void 0:cr.getAnimations)>"u"&&(Element.prototype.getAnimations=function(){return console.warn(["Headless UI has polyfilled `Element.prototype.getAnimations` for your tests.","Please install a proper polyfill e.g. `jsdom-testing-mocks`, to silence these warnings.","","Example usage:","```js","import { mockAnimationsApi } from 'jsdom-testing-mocks'","mockAnimationsApi()","```"].join(`
|
|
21
|
-
`)),[]});var Qn=(e=>(e[e.None=0]="None",e[e.Closed=1]="Closed",e[e.Enter=2]="Enter",e[e.Leave=4]="Leave",e))(Qn||{});function Rn(e){let t={};for(let r in e)e[r]===!0&&(t[`data-${r}`]="");return t}function el(e,t,r,n){let[l,i]=o.useState(r),{hasFlag:u,addFlag:a,removeFlag:s}=Jn(e&&l?3:0),d=o.useRef(!1),h=o.useRef(!1),E=We();return I(()=>{var w;if(e){if(r&&i(!0),!t){r&&a(3);return}return(w=n==null?void 0:n.start)==null||w.call(n,r),tl(t,{inFlight:d,prepare(){h.current?h.current=!1:h.current=d.current,d.current=!0,!h.current&&(r?(a(3),s(4)):(a(4),s(2)))},run(){h.current?r?(s(3),a(4)):(s(4),a(3)):r?s(1):a(1)},done(){var y;h.current&&ll(t)||(d.current=!1,s(7),r||i(!1),(y=n==null?void 0:n.end)==null||y.call(n,r))}})}},[e,r,t,E]),e?[l,{closed:u(1),enter:u(2),leave:u(4),transition:u(2)||u(4)}]:[r,{closed:void 0,enter:void 0,leave:void 0,transition:void 0}]}function tl(e,{prepare:t,run:r,done:n,inFlight:l}){let i=G();return nl(e,{prepare:t,inFlight:l}),i.nextFrame(()=>{r(),i.requestAnimationFrame(()=>{i.add(rl(e,n))})}),i.dispose}function rl(e,t){var r,n;let l=G();if(!e)return l.dispose;let i=!1;l.add(()=>{i=!0});let u=(n=(r=e.getAnimations)==null?void 0:r.call(e).filter(a=>a instanceof CSSTransition))!=null?n:[];return u.length===0?(t(),l.dispose):(Promise.allSettled(u.map(a=>a.finished)).then(()=>{i||t()}),l.dispose)}function nl(e,{inFlight:t,prepare:r}){if(t!=null&&t.current){r();return}let n=e.style.transition;e.style.transition="none",r(),e.offsetHeight,e.style.transition=n}function ll(e){var t,r;return((r=(t=e.getAnimations)==null?void 0:t.call(e))!=null?r:[]).some(n=>n instanceof CSSTransition&&n.playState!=="finished")}function yt(e,t){let r=o.useRef([]),n=T(e);o.useEffect(()=>{let l=[...r.current];for(let[i,u]of t.entries())if(r.current[i]!==u){let a=n(t,l);return r.current=t,a}},[n,...t])}let ze=o.createContext(null);ze.displayName="OpenClosedContext";var V=(e=>(e[e.Open=1]="Open",e[e.Closed=2]="Closed",e[e.Closing=4]="Closing",e[e.Opening=8]="Opening",e))(V||{});function Ge(){return o.useContext(ze)}function ol({value:e,children:t}){return o.createElement(ze.Provider,{value:e},t)}function il({children:e}){return o.createElement(ze.Provider,{value:null},e)}function sl(e){function t(){document.readyState!=="loading"&&(e(),document.removeEventListener("DOMContentLoaded",t))}typeof window<"u"&&typeof document<"u"&&(document.addEventListener("DOMContentLoaded",t),t())}let te=[];sl(()=>{function e(t){if(!ee(t.target)||t.target===document.body||te[0]===t.target)return;let r=t.target;r=r.closest(qe),te.unshift(r??t.target),te=te.filter(n=>n!=null&&n.isConnected),te.splice(10)}window.addEventListener("click",e,{capture:!0}),window.addEventListener("mousedown",e,{capture:!0}),window.addEventListener("focus",e,{capture:!0}),document.body.addEventListener("click",e,{capture:!0}),document.body.addEventListener("mousedown",e,{capture:!0}),document.body.addEventListener("focus",e,{capture:!0})});function fr(e){let t=T(e),r=o.useRef(!1);o.useEffect(()=>(r.current=!1,()=>{r.current=!0,De(()=>{r.current&&t()})}),[t])}let pr=o.createContext(!1);function ul(){return o.useContext(pr)}function mr(e){return o.createElement(pr.Provider,{value:e.force},e.children)}function al(e){let t=ul(),r=o.useContext(vr),[n,l]=o.useState(()=>{var i;if(!t&&r!==null)return(i=r.current)!=null?i:null;if(q.isServer)return null;let u=e==null?void 0:e.getElementById("headlessui-portal-root");if(u)return u;if(e===null)return null;let a=e.createElement("div");return a.setAttribute("id","headlessui-portal-root"),e.body.appendChild(a)});return o.useEffect(()=>{n!==null&&(e!=null&&e.body.contains(n)||e==null||e.body.appendChild(n))},[n,e]),o.useEffect(()=>{t||r!==null&&l(r.current)},[r,l,t]),n}let hr=o.Fragment,dl=j(function(e,t){let{ownerDocument:r=null,...n}=e,l=o.useRef(null),i=X(an(w=>{l.current=w}),t),u=bt(l.current),a=r??u,s=al(a),d=o.useContext(Et),h=We(),E=W();return fr(()=>{var w;s&&s.childNodes.length<=0&&((w=s.parentElement)==null||w.removeChild(s))}),s?Ir.createPortal(o.createElement("div",{"data-headlessui-portal":"",ref:w=>{h.dispose(),d&&w&&h.add(d.register(w))}},E({ourProps:{ref:i},theirProps:n,slot:{},defaultTag:hr,name:"Portal"})),s):null});function cl(e,t){let r=X(t),{enabled:n=!0,ownerDocument:l,...i}=e,u=W();return n?o.createElement(dl,{...i,ownerDocument:l,ref:r}):u({ourProps:{ref:r},theirProps:i,slot:{},defaultTag:hr,name:"Portal"})}let fl=o.Fragment,vr=o.createContext(null);function pl(e,t){let{target:r,...n}=e,l={ref:X(t)},i=W();return o.createElement(vr.Provider,{value:r},i({ourProps:l,theirProps:n,defaultTag:fl,name:"Popover.Group"}))}let Et=o.createContext(null);function ml(){let e=o.useContext(Et),t=o.useRef([]),r=T(i=>(t.current.push(i),e&&e.register(i),()=>n(i))),n=T(i=>{let u=t.current.indexOf(i);u!==-1&&t.current.splice(u,1),e&&e.unregister(i)}),l=o.useMemo(()=>({register:r,unregister:n,portals:t}),[r,n,t]);return[t,o.useMemo(()=>function({children:i}){return o.createElement(Et.Provider,{value:l},i)},[l])]}let hl=j(cl),gr=j(pl),vl=Object.assign(hl,{Group:gr});function gl(e,t=typeof document<"u"?document.defaultView:null,r){let n=Se(e,"escape");ur(t,"keydown",l=>{n&&(l.defaultPrevented||l.key===Bt.Escape&&r(l))})}function wl(){var e;let[t]=o.useState(()=>typeof window<"u"&&typeof window.matchMedia=="function"?window.matchMedia("(pointer: coarse)"):null),[r,n]=o.useState((e=t==null?void 0:t.matches)!=null?e:!1);return I(()=>{if(!t)return;function l(i){n(i.matches)}return t.addEventListener("change",l),()=>t.removeEventListener("change",l)},[t]),r}function bl({defaultContainers:e=[],portals:t,mainTreeNode:r}={}){let n=T(()=>{var l,i;let u=ye(r),a=[];for(let s of e)s!==null&&(R(s)?a.push(s):"current"in s&&R(s.current)&&a.push(s.current));if(t!=null&&t.current)for(let s of t.current)a.push(s);for(let s of(l=u==null?void 0:u.querySelectorAll("html > *, body > *"))!=null?l:[])s!==document.body&&s!==document.head&&R(s)&&s.id!=="headlessui-portal-root"&&(r&&(s.contains(r)||s.contains((i=r==null?void 0:r.getRootNode())==null?void 0:i.host))||a.some(d=>s.contains(d))||a.push(s));return a});return{resolveContainers:n,contains:T(l=>n().some(i=>i.contains(l)))}}let wr=o.createContext(null);function br({children:e,node:t}){let[r,n]=o.useState(null),l=yr(t??r);return o.createElement(wr.Provider,{value:l},e,l===null&&o.createElement(ct,{features:Ve.Hidden,ref:i=>{var u,a;if(i){for(let s of(a=(u=ye(i))==null?void 0:u.querySelectorAll("html > *, body > *"))!=null?a:[])if(s!==document.body&&s!==document.head&&R(s)&&s!=null&&s.contains(i)){n(s);break}}}}))}function yr(e=null){var t;return(t=o.useContext(wr))!=null?t:e}function yl(){let e=typeof document>"u";return"useSyncExternalStore"in ve?(t=>t.useSyncExternalStore)(ve)(()=>()=>{},()=>!1,()=>!e):!1}function Ke(){let e=yl(),[t,r]=ve.useState(q.isHandoffComplete);return t&&q.isHandoffComplete===!1&&r(!1),ve.useEffect(()=>{t!==!0&&r(!0)},[t]),ve.useEffect(()=>q.handoff(),[]),e?!1:t}function xt(){let e=o.useRef(!1);return I(()=>(e.current=!0,()=>{e.current=!1}),[]),e}var Te=(e=>(e[e.Forwards=0]="Forwards",e[e.Backwards=1]="Backwards",e))(Te||{});function El(){let e=o.useRef(0);return ir(!0,"keydown",t=>{t.key==="Tab"&&(e.current=t.shiftKey?1:0)},!0),e}function Er(e){if(!e)return new Set;if(typeof e=="function")return new Set(e());let t=new Set;for(let r of e.current)R(r.current)&&t.add(r.current);return t}let xl="div";var ue=(e=>(e[e.None=0]="None",e[e.InitialFocus=1]="InitialFocus",e[e.TabLock=2]="TabLock",e[e.FocusLock=4]="FocusLock",e[e.RestoreFocus=8]="RestoreFocus",e[e.AutoFocus=16]="AutoFocus",e))(ue||{});function $l(e,t){let r=o.useRef(null),n=X(r,t),{initialFocus:l,initialFocusFallback:i,containers:u,features:a=15,...s}=e;Ke()||(a=0);let d=bt(r.current);Ml(a,{ownerDocument:d});let h=Tl(a,{ownerDocument:d,container:r,initialFocus:l,initialFocusFallback:i});Pl(a,{ownerDocument:d,container:r,containers:u,previousActiveElement:h});let E=El(),w=T(f=>{if(!ie(r.current))return;let g=r.current;(b=>b())(()=>{K(E.current,{[Te.Forwards]:()=>{Me(g,Y.First,{skipElements:[f.relatedTarget,i]})},[Te.Backwards]:()=>{Me(g,Y.Last,{skipElements:[f.relatedTarget,i]})}})})}),y=Se(!!(a&2),"focus-trap#tab-lock"),p=We(),$=o.useRef(!1),v={ref:n,onKeyDown(f){f.key=="Tab"&&($.current=!0,p.requestAnimationFrame(()=>{$.current=!1}))},onBlur(f){if(!(a&4))return;let g=Er(u);ie(r.current)&&g.add(r.current);let b=f.relatedTarget;ee(b)&&b.dataset.headlessuiFocusGuard!=="true"&&(xr(g,b)||($.current?Me(r.current,K(E.current,{[Te.Forwards]:()=>Y.Next,[Te.Backwards]:()=>Y.Previous})|Y.WrapAround,{relativeTo:f.target}):ee(f.target)&&Z(f.target)))}},c=W();return o.createElement(o.Fragment,null,y&&o.createElement(ct,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:w,features:Ve.Focusable}),c({ourProps:v,theirProps:s,defaultTag:xl,name:"FocusTrap"}),y&&o.createElement(ct,{as:"button",type:"button","data-headlessui-focus-guard":!0,onFocus:w,features:Ve.Focusable}))}let Ol=j($l),Sl=Object.assign(Ol,{features:ue});function Cl(e=!0){let t=o.useRef(te.slice());return yt(([r],[n])=>{n===!0&&r===!1&&De(()=>{t.current.splice(0)}),n===!1&&r===!0&&(t.current=te.slice())},[e,te,t]),T(()=>{var r;return(r=t.current.find(n=>n!=null&&n.isConnected))!=null?r:null})}function Ml(e,{ownerDocument:t}){let r=!!(e&8),n=Cl(r);yt(()=>{r||Kr(t==null?void 0:t.body)&&Z(n())},[r]),fr(()=>{r&&Z(n())})}function Tl(e,{ownerDocument:t,container:r,initialFocus:n,initialFocusFallback:l}){let i=o.useRef(null),u=Se(!!(e&1),"focus-trap#initial-focus"),a=xt();return yt(()=>{if(e===0)return;if(!u){l!=null&&l.current&&Z(l.current);return}let s=r.current;s&&De(()=>{if(!a.current)return;let d=t==null?void 0:t.activeElement;if(n!=null&&n.current){if((n==null?void 0:n.current)===d){i.current=d;return}}else if(s.contains(d)){i.current=d;return}if(n!=null&&n.current)Z(n.current);else{if(e&16){if(Me(s,Y.First|Y.AutoFocus)!==wt.Error)return}else if(Me(s,Y.First)!==wt.Error)return;if(l!=null&&l.current&&(Z(l.current),(t==null?void 0:t.activeElement)===l.current))return;console.warn("There are no focusable elements inside the <FocusTrap />")}i.current=t==null?void 0:t.activeElement})},[l,u,e]),i}function Pl(e,{ownerDocument:t,container:r,containers:n,previousActiveElement:l}){let i=xt(),u=!!(e&4);ur(t==null?void 0:t.defaultView,"focus",a=>{if(!u||!i.current)return;let s=Er(n);ie(r.current)&&s.add(r.current);let d=l.current;if(!d)return;let h=a.target;ie(h)?xr(s,h)?(l.current=h,Z(h)):(a.preventDefault(),a.stopPropagation(),Z(d)):Z(l.current)},!0)}function xr(e,t){for(let r of e)if(r.contains(t))return!0;return!1}function $r(e){var t;return!!(e.enter||e.enterFrom||e.enterTo||e.leave||e.leaveFrom||e.leaveTo)||!xe((t=e.as)!=null?t:Sr)||o.Children.count(e.children)===1}let Ye=o.createContext(null);Ye.displayName="TransitionContext";var kl=(e=>(e.Visible="visible",e.Hidden="hidden",e))(kl||{});function Ll(){let e=o.useContext(Ye);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}function Fl(){let e=o.useContext(Ze);if(e===null)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return e}let Ze=o.createContext(null);Ze.displayName="NestingContext";function Je(e){return"children"in e?Je(e.children):e.current.filter(({el:t})=>t.current!==null).filter(({state:t})=>t==="visible").length>0}function Or(e,t){let r=le(e),n=o.useRef([]),l=xt(),i=We(),u=T((y,p=Q.Hidden)=>{let $=n.current.findIndex(({el:v})=>v===y);$!==-1&&(K(p,{[Q.Unmount](){n.current.splice($,1)},[Q.Hidden](){n.current[$].state="hidden"}}),i.microTask(()=>{var v;!Je(n)&&l.current&&((v=r.current)==null||v.call(r))}))}),a=T(y=>{let p=n.current.find(({el:$})=>$===y);return p?p.state!=="visible"&&(p.state="visible"):n.current.push({el:y,state:"visible"}),()=>u(y,Q.Unmount)}),s=o.useRef([]),d=o.useRef(Promise.resolve()),h=o.useRef({enter:[],leave:[]}),E=T((y,p,$)=>{s.current.splice(0),t&&(t.chains.current[p]=t.chains.current[p].filter(([v])=>v!==y)),t==null||t.chains.current[p].push([y,new Promise(v=>{s.current.push(v)})]),t==null||t.chains.current[p].push([y,new Promise(v=>{Promise.all(h.current[p].map(([c,f])=>f)).then(()=>v())})]),p==="enter"?d.current=d.current.then(()=>t==null?void 0:t.wait.current).then(()=>$(p)):$(p)}),w=T((y,p,$)=>{Promise.all(h.current[p].splice(0).map(([v,c])=>c)).then(()=>{var v;(v=s.current.shift())==null||v()}).then(()=>$(p))});return o.useMemo(()=>({children:n,register:a,unregister:u,onStart:E,onStop:w,wait:d,chains:h}),[a,u,n,E,w,h,d])}let Sr=o.Fragment,Cr=Ue.RenderStrategy;function Al(e,t){var r,n;let{transition:l=!0,beforeEnter:i,afterEnter:u,beforeLeave:a,afterLeave:s,enter:d,enterFrom:h,enterTo:E,entered:w,leave:y,leaveFrom:p,leaveTo:$,...v}=e,[c,f]=o.useState(null),g=o.useRef(null),b=$r(e),m=X(...b?[g,t,f]:t===null?[]:[t]),x=(r=v.unmount)==null||r?Q.Unmount:Q.Hidden,{show:S,appear:F,initial:_}=Ll(),[L,A]=o.useState(S?"visible":"hidden"),H=Fl(),{register:N,unregister:P}=H;I(()=>N(g),[N,g]),I(()=>{if(x===Q.Hidden&&g.current){if(S&&L!=="visible"){A("visible");return}return K(L,{hidden:()=>P(g),visible:()=>N(g)})}},[L,g,N,P,S,x]);let D=Ke();I(()=>{if(b&&D&&L==="visible"&&g.current===null)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")},[g,L,D,b]);let he=_&&!F,ae=F&&S&&_,J=o.useRef(!1),k=Or(()=>{J.current||(A("hidden"),P(g))},H),Pe=T(Mt=>{J.current=!0;let et=Mt?"enter":"leave";k.onStart(g,et,Le=>{Le==="enter"?i==null||i():Le==="leave"&&(a==null||a())})}),re=T(Mt=>{let et=Mt?"enter":"leave";J.current=!1,k.onStop(g,et,Le=>{Le==="enter"?u==null||u():Le==="leave"&&(s==null||s())}),et==="leave"&&!Je(k)&&(A("hidden"),P(g))});o.useEffect(()=>{b&&l||(Pe(S),re(S))},[S,b,l]);let Ct=!(!l||!b||!D||he),[,M]=el(Ct,c,S,{start:Pe,end:re}),Re=oe({ref:m,className:((n=at(v.className,ae&&d,ae&&h,M.enter&&d,M.enter&&M.closed&&h,M.enter&&!M.closed&&E,M.leave&&y,M.leave&&!M.closed&&p,M.leave&&M.closed&&$,!M.transition&&S&&w))==null?void 0:n.trim())||void 0,...Rn(M)}),ke=0;L==="visible"&&(ke|=V.Open),L==="hidden"&&(ke|=V.Closed),S&&L==="hidden"&&(ke|=V.Opening),!S&&L==="visible"&&(ke|=V.Closing);let ro=W();return o.createElement(Ze.Provider,{value:k},o.createElement(ol,{value:ke},ro({ourProps:Re,theirProps:v,defaultTag:Sr,features:Cr,visible:L==="visible",name:"Transition.Child"})))}function Nl(e,t){let{show:r,appear:n=!1,unmount:l=!0,...i}=e,u=o.useRef(null),a=$r(e),s=X(...a?[u,t]:t===null?[]:[t]);Ke();let d=Ge();if(r===void 0&&d!==null&&(r=(d&V.Open)===V.Open),r===void 0)throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");let[h,E]=o.useState(r?"visible":"hidden"),w=Or(()=>{r||E("hidden")}),[y,p]=o.useState(!0),$=o.useRef([r]);I(()=>{y!==!1&&$.current[$.current.length-1]!==r&&($.current.push(r),p(!1))},[$,r]);let v=o.useMemo(()=>({show:r,appear:n,initial:y}),[r,n,y]);I(()=>{r?E("visible"):!Je(w)&&u.current!==null&&E("hidden")},[r,w]);let c={unmount:l},f=T(()=>{var m;y&&p(!1),(m=e.beforeEnter)==null||m.call(e)}),g=T(()=>{var m;y&&p(!1),(m=e.beforeLeave)==null||m.call(e)}),b=W();return o.createElement(Ze.Provider,{value:w},o.createElement(Ye.Provider,{value:v},b({ourProps:{...c,as:o.Fragment,children:o.createElement(Mr,{ref:s,...c,...i,beforeEnter:f,beforeLeave:g})},theirProps:{},defaultTag:o.Fragment,features:Cr,visible:h==="visible",name:"Transition"})))}function Il(e,t){let r=o.useContext(Ye)!==null,n=Ge()!==null;return o.createElement(o.Fragment,null,!r&&n?o.createElement($t,{ref:t,...e}):o.createElement(Mr,{ref:t,...e}))}let $t=j(Nl),Mr=j(Al),me=j(Il),Tr=Object.assign($t,{Child:me,Root:$t});var jl=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(jl||{}),_l=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(_l||{});let Dl={0(e,t){return e.titleId===t.id?e:{...e,titleId:t.id}}},Ot=o.createContext(null);Ot.displayName="DialogContext";function Qe(e){let t=o.useContext(Ot);if(t===null){let r=new Error(`<${e} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(r,Qe),r}return t}function Wl(e,t){return K(t.type,Dl,e,t)}let Pr=j(function(e,t){let r=o.useId(),{id:n=`headlessui-dialog-${r}`,open:l,onClose:i,initialFocus:u,role:a="dialog",autoFocus:s=!0,__demoMode:d=!1,unmount:h=!1,...E}=e,w=o.useRef(!1);a=(function(){return a==="dialog"||a==="alertdialog"?a:(w.current||(w.current=!0,console.warn(`Invalid role [${a}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`)),"dialog")})();let y=Ge();l===void 0&&y!==null&&(l=(y&V.Open)===V.Open);let p=o.useRef(null),$=X(p,t),v=bt(p.current),c=l?0:1,[f,g]=o.useReducer(Wl,{titleId:null,descriptionId:null,panelRef:o.createRef()}),b=T(()=>i(!1)),m=T(M=>g({type:0,id:M})),x=Ke()?c===0:!1,[S,F]=ml(),_={get current(){var M;return(M=f.panelRef.current)!=null?M:p.current}},L=yr(),{resolveContainers:A}=bl({mainTreeNode:L,portals:S,defaultContainers:[_]}),H=y!==null?(y&V.Closing)===V.Closing:!1;Ln(d||H?!1:x,{allowed:T(()=>{var M,Re;return[(Re=(M=p.current)==null?void 0:M.closest("[data-headlessui-portal]"))!=null?Re:null]}),disallowed:T(()=>{var M;return[(M=L==null?void 0:L.closest("body > *:not(#headlessui-portal-root)"))!=null?M:null]})});let N=Zt.get(null);I(()=>{if(x)return N.actions.push(n),()=>N.actions.pop(n)},[N,n,x]);let P=er(N,o.useCallback(M=>N.selectors.isTop(M,n),[N,n]));Bn(P,A,M=>{M.preventDefault(),b()}),gl(P,v==null?void 0:v.defaultView,M=>{M.preventDefault(),M.stopPropagation(),document.activeElement&&"blur"in document.activeElement&&typeof document.activeElement.blur=="function"&&document.activeElement.blur(),b()}),Zn(d||H?!1:x,v,A),Fn(x,p,b);let[D,he]=dn(),ae=o.useMemo(()=>[{dialogState:c,close:b,setTitleId:m,unmount:h},f],[c,b,m,h,f]),J=Ee({open:c===0}),k={ref:$,id:n,role:a,tabIndex:-1,"aria-modal":d?void 0:c===0?!0:void 0,"aria-labelledby":f.titleId,"aria-describedby":D,unmount:h},Pe=!wl(),re=ue.None;x&&!d&&(re|=ue.RestoreFocus,re|=ue.TabLock,s&&(re|=ue.AutoFocus),Pe&&(re|=ue.InitialFocus));let Ct=W();return o.createElement(il,null,o.createElement(mr,{force:!0},o.createElement(vl,null,o.createElement(Ot.Provider,{value:ae},o.createElement(gr,{target:p},o.createElement(mr,{force:!1},o.createElement(he,{slot:J},o.createElement(F,null,o.createElement(Sl,{initialFocus:u,initialFocusFallback:p,containers:A,features:re},o.createElement(vn,{value:b},Ct({ourProps:k,theirProps:E,slot:J,defaultTag:Ul,features:Hl,visible:c===0,name:"Dialog"})))))))))))}),Ul="div",Hl=Ue.RenderStrategy|Ue.Static;function Vl(e,t){let{transition:r=!1,open:n,...l}=e,i=Ge(),u=e.hasOwnProperty("open")||i!==null,a=e.hasOwnProperty("onClose");if(!u&&!a)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!u)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!a)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(!i&&typeof e.open!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${e.open}`);if(typeof e.onClose!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${e.onClose}`);return(n!==void 0||r)&&!l.static?o.createElement(br,null,o.createElement(Tr,{show:n,transition:r,unmount:l.unmount},o.createElement(Pr,{ref:t,...l}))):o.createElement(br,null,o.createElement(Pr,{ref:t,open:n,...l}))}let Bl="div";function ql(e,t){let r=o.useId(),{id:n=`headlessui-dialog-panel-${r}`,transition:l=!1,...i}=e,[{dialogState:u,unmount:a},s]=Qe("Dialog.Panel"),d=X(t,s.panelRef),h=Ee({open:u===0}),E=T(v=>{v.stopPropagation()}),w={ref:d,id:n,onClick:E},y=l?me:o.Fragment,p=l?{unmount:a}:{},$=W();return o.createElement(y,{...p},$({ourProps:w,theirProps:i,slot:h,defaultTag:Bl,name:"Dialog.Panel"}))}let Xl="div";function zl(e,t){let{transition:r=!1,...n}=e,[{dialogState:l,unmount:i}]=Qe("Dialog.Backdrop"),u=Ee({open:l===0}),a={ref:t,"aria-hidden":!0},s=r?me:o.Fragment,d=r?{unmount:i}:{},h=W();return o.createElement(s,{...d},h({ourProps:a,theirProps:n,slot:u,defaultTag:Xl,name:"Dialog.Backdrop"}))}let Gl="h2";function Kl(e,t){let r=o.useId(),{id:n=`headlessui-dialog-title-${r}`,...l}=e,[{dialogState:i,setTitleId:u}]=Qe("Dialog.Title"),a=X(t);o.useEffect(()=>(u(n),()=>u(null)),[n,u]);let s=Ee({open:i===0}),d={ref:a,id:n};return W()({ourProps:d,theirProps:l,slot:s,defaultTag:Gl,name:"Dialog.Title"})}let Yl=j(Vl),St=j(ql);j(zl);let Zl=j(Kl),Jl=Object.assign(Yl,{Panel:St,Title:Zl,Description:mn});function kr({onClick:e}){return O.jsxs("button",{type:"button",className:"im-close-button text-gray-400 hover:text-gray-500",onClick:e,children:[O.jsx("span",{className:"sr-only",children:"Close"}),O.jsx("svg",{className:"size-6",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor","aria-hidden":"true",children:O.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})]})}const Ql=({modalContext:e,config:t,children:r})=>{const[n,l]=o.useState(!1);return O.jsx("div",{className:"im-modal-container fixed inset-0 z-40 overflow-y-auto p-4",children:O.jsx("div",{className:_e("im-modal-positioner flex min-h-full justify-center",{"items-start":t.position==="top","items-center":t.position==="center","items-end":t.position==="bottom"}),children:O.jsx(me,{as:"div",enterFrom:"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",enterTo:"opacity-100 translate-y-0 sm:scale-100",leaveFrom:"opacity-100 translate-y-0 sm:scale-100",leaveTo:"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",afterEnter:()=>l(!0),afterLeave:e.afterLeave,className:_e("im-modal-wrapper w-full transition duration-300 ease-in-out",e.onTopOfStack?"":"blur-sm",{"sm:max-w-sm":t.maxWidth==="sm","sm:max-w-md":t.maxWidth==="md","sm:max-w-md md:max-w-lg":t.maxWidth==="lg","sm:max-w-md md:max-w-xl":t.maxWidth==="xl","sm:max-w-md md:max-w-xl lg:max-w-2xl":t.maxWidth==="2xl","sm:max-w-md md:max-w-xl lg:max-w-3xl":t.maxWidth==="3xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl":t.maxWidth==="4xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl":t.maxWidth==="5xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl":t.maxWidth==="6xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl":t.maxWidth==="7xl"}),children:O.jsxs(St,{className:`im-modal-content relative ${t.paddingClasses} ${t.panelClasses}`,"data-inertiaui-modal-entered":n,children:[t.closeButton&&O.jsx("div",{className:"absolute right-0 top-0 pr-3 pt-3",children:O.jsx(kr,{onClick:e.close})}),typeof r=="function"?r({modalContext:e,config:t}):r]})})})})},Rl=({modalContext:e,config:t,children:r})=>{const[n,l]=o.useState(!1);return O.jsx("div",{className:"im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden",children:O.jsx("div",{className:_e("im-slideover-positioner flex min-h-full items-center",{"justify-start rtl:justify-end":(t==null?void 0:t.position)==="left","justify-end rtl:justify-start":(t==null?void 0:t.position)==="right"}),children:O.jsx(me,{as:"div",enterFrom:`opacity-0 ${t.position==="left"?"-translate-x-full":"translate-x-full"}`,enterTo:"opacity-100 translate-x-0",leaveFrom:"opacity-100 translate-x-0",leaveTo:`opacity-0 ${t.position==="left"?"-translate-x-full":"translate-x-full"}`,afterEnter:()=>l(!0),afterLeave:e.afterLeave,className:_e("im-slideover-wrapper w-full transition duration-300 ease-in-out",e.onTopOfStack?"":"blur-sm",{"sm:max-w-sm":t.maxWidth==="sm","sm:max-w-md":t.maxWidth==="md","sm:max-w-md md:max-w-lg":t.maxWidth==="lg","sm:max-w-md md:max-w-xl":t.maxWidth==="xl","sm:max-w-md md:max-w-xl lg:max-w-2xl":t.maxWidth==="2xl","sm:max-w-md md:max-w-xl lg:max-w-3xl":t.maxWidth==="3xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl":t.maxWidth==="4xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl":t.maxWidth==="5xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl":t.maxWidth==="6xl","sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl":t.maxWidth==="7xl"}),children:O.jsxs(St,{className:`im-slideover-content relative ${t.paddingClasses} ${t.panelClasses}`,"data-inertiaui-modal-entered":n,children:[t.closeButton&&O.jsx("div",{className:"absolute right-0 top-0 pr-3 pt-3",children:O.jsx(kr,{onClick:e.close})}),typeof r=="function"?r({modalContext:e,config:t}):r]})})})})},Lr=o.forwardRef(({name:e,children:t,onFocus:r=null,onBlur:n=null,onClose:l=null,onSuccess:i=null,onAfterLeave:u=null,...a},s)=>{const d=E=>typeof t=="function"?t(E):t,h=o.useRef(null);return o.useImperativeHandle(s,()=>h.current,[h]),O.jsx(it,{ref:h,name:e,onFocus:r,onBlur:n,onClose:l,onSuccess:i,...a,children:({afterLeave:E,close:w,config:y,emit:p,getChildModal:$,getParentModal:v,id:c,index:f,isOpen:g,modalContext:b,onTopOfStack:m,reload:x,setOpen:S,shouldRender:F})=>O.jsx(Tr,{appear:!0,show:g??!1,afterLeave:u,children:O.jsxs(Jl,{as:"div",className:"im-dialog relative z-20",onClose:()=>y.closeExplicitly?null:w(),"data-inertiaui-modal-id":c,"data-inertiaui-modal-index":f,children:[f===0?O.jsx(me,{enter:"transition transform ease-in-out duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"transition transform ease-in-out duration-300",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:m?O.jsx("div",{className:"im-backdrop fixed inset-0 z-30 bg-black/75","aria-hidden":"true"}):O.jsx("div",{})}):null,f>0&&m?O.jsx("div",{className:"im-backdrop fixed inset-0 z-30 bg-black/75"}):null,y.slideover?O.jsx(Rl,{modalContext:b,config:y,children:d({afterLeave:E,close:w,config:y,emit:p,getChildModal:$,getParentModal:v,id:c,index:f,isOpen:g,modalContext:b,onTopOfStack:m,reload:x,setOpen:S,shouldRender:F})}):O.jsx(Ql,{modalContext:b,config:y,children:d({afterLeave:E,close:w,config:y,emit:p,getChildModal:$,getParentModal:v,id:c,index:f,isOpen:g,modalContext:b,onTopOfStack:m,reload:x,setOpen:S,shouldRender:F})})]})})})});Lr.displayName="Modal";const eo=({href:e,method:t="get",data:r={},as:n="a",headers:l={},queryStringArrayFormat:i="brackets",onAfterLeave:u=null,onBlur:a=null,onClose:s=null,onError:d=null,onFocus:h=null,onStart:E=null,onSuccess:w=null,navigate:y=null,children:p,...$})=>{const[v,c]=o.useState(!1),[f,g]=o.useState(null),{stack:b,visit:m}=be(),x=o.useMemo(()=>y??Ne("navigate"),[y]),S={},F={};Object.keys($).forEach(P=>{At.includes(P)||(P.startsWith("on")&&typeof $[P]=="function"?Br(P)?S[P]=$[P]:F[P]=$[P]:S[P]=$[P])});const[_,L]=o.useState(!1);o.useEffect(()=>{f&&(f.onTopOfStack&&_?h==null||h():!f.onTopOfStack&&!_&&(a==null||a()),L(!f.onTopOfStack))},[b]);const A=o.useCallback(()=>{s==null||s()},[s]),H=o.useCallback(()=>{g(null),u==null||u()},[u]),N=o.useCallback(P=>{P==null||P.preventDefault(),!v&&(e.startsWith("#")||(c(!0),E==null||E()),m(e,t,r,l,Vr(Hr($,At)),()=>A(b.length),H,i,x).then(D=>{g(D),D.registerEventListenersFromProps(F),w==null||w()}).catch(D=>{console.error(D),d==null||d(D)}).finally(()=>c(!1)))},[e,t,r,l,i,$,A,H]);return O.jsx(n,{...S,href:e,onClick:N,children:typeof p=="function"?p({loading:v}):p})},Fr=({children:e,data:t,params:r,buffer:n,as:l,always:i,fallback:u})=>{i=i??!1,l=l??"div",u=u??null;const[a,s]=o.useState(!1),d=o.useRef(!1),h=o.useRef(!1),E=o.useRef(null),w=ot(),y=o.useCallback(()=>{if(t)return{only:Array.isArray(t)?t:[t]};if(!r)throw new Error("You must provide either a `data` or `params` prop.");return r},[r,t]);return o.useEffect(()=>{if(!E.current)return;const p=new IntersectionObserver($=>{if(!$[0].isIntersecting||(!i&&d.current&&p.disconnect(),h.current))return;d.current=!0,h.current=!0;const v=y();w.reload({...v,onStart:c=>{var f;h.current=!0,(f=v.onStart)==null||f.call(v,c)},onFinish:c=>{var f;s(!0),h.current=!1,(f=v.onFinish)==null||f.call(v,c),i||p.disconnect()}})},{rootMargin:`${n||0}px`});return p.observe(E.current),()=>{p.disconnect()}},[E,y,n]),i||!a?o.createElement(l,{props:null,ref:E},a?e:u):a?e:null};Fr.displayName="InertiaWhenVisible";const to=e=>t=>(t.default.layout=r=>o.createElement(e,{},r),t);C.Deferred=_t,C.HeadlessModal=it,C.Modal=Lr,C.ModalLink=eo,C.ModalRoot=It,C.ModalStackProvider=Ft,C.WhenVisible=Fr,C.getConfig=Ne,C.initFromPageProps=Nt,C.putConfig=Dr,C.renderApp=qr,C.resetConfig=_r,C.setPageLayout=to,C.useModal=ot,C.useModalIndex=lt,C.useModalStack=be,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(global, factory) {
|
|
2
|
+
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime"), require("axios"), require("@inertiaui/vanilla"), require("@inertiajs/react"), require("@inertiajs/core"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react/jsx-runtime", "axios", "@inertiaui/vanilla", "@inertiajs/react", "@inertiajs/core", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.InertiaUIModal = {}, global.React, global.ReactJSXRuntime, global.axios, global.InertiaUIVanilla, global.InertiaReact, global.InertiaCore, global.ReactDOM));
|
|
3
|
+
})(this, (function(exports2, React, jsxRuntime, Axios, vanilla, react, core, reactDom) {
|
|
4
|
+
"use strict";
|
|
5
|
+
function _interopNamespaceDefault(e) {
|
|
6
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
7
|
+
if (e) {
|
|
8
|
+
for (const k in e) {
|
|
9
|
+
if (k !== "default") {
|
|
10
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
11
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: () => e[k]
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
n.default = e;
|
|
19
|
+
return Object.freeze(n);
|
|
20
|
+
}
|
|
21
|
+
const vanilla__namespace = /* @__PURE__ */ _interopNamespaceDefault(vanilla);
|
|
22
|
+
const defaultConfig = {
|
|
23
|
+
type: "modal",
|
|
24
|
+
navigate: false,
|
|
25
|
+
useNativeDialog: true,
|
|
26
|
+
appElement: "#app",
|
|
27
|
+
modal: {
|
|
28
|
+
closeButton: true,
|
|
29
|
+
closeExplicitly: false,
|
|
30
|
+
closeOnClickOutside: true,
|
|
31
|
+
maxWidth: "2xl",
|
|
32
|
+
paddingClasses: "p-4 sm:p-6",
|
|
33
|
+
panelClasses: "bg-white rounded",
|
|
34
|
+
position: "center"
|
|
35
|
+
},
|
|
36
|
+
slideover: {
|
|
37
|
+
closeButton: true,
|
|
38
|
+
closeExplicitly: false,
|
|
39
|
+
closeOnClickOutside: true,
|
|
40
|
+
maxWidth: "md",
|
|
41
|
+
paddingClasses: "p-4 sm:p-6",
|
|
42
|
+
panelClasses: "bg-white min-h-screen",
|
|
43
|
+
position: "right"
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
class Config {
|
|
47
|
+
constructor() {
|
|
48
|
+
this.config = {};
|
|
49
|
+
this.reset();
|
|
50
|
+
}
|
|
51
|
+
reset() {
|
|
52
|
+
this.config = JSON.parse(JSON.stringify(defaultConfig));
|
|
53
|
+
}
|
|
54
|
+
put(key, value) {
|
|
55
|
+
if (typeof key === "object") {
|
|
56
|
+
this.config = {
|
|
57
|
+
type: key.type ?? defaultConfig.type,
|
|
58
|
+
navigate: key.navigate ?? defaultConfig.navigate,
|
|
59
|
+
useNativeDialog: key.useNativeDialog ?? defaultConfig.useNativeDialog,
|
|
60
|
+
appElement: key.appElement !== void 0 ? key.appElement : defaultConfig.appElement,
|
|
61
|
+
modal: { ...defaultConfig.modal, ...key.modal ?? {} },
|
|
62
|
+
slideover: { ...defaultConfig.slideover, ...key.slideover ?? {} }
|
|
63
|
+
};
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const keys = key.split(".");
|
|
67
|
+
let current = this.config;
|
|
68
|
+
for (let i = 0; i < keys.length - 1; i++) {
|
|
69
|
+
current = current[keys[i]] = current[keys[i]] || {};
|
|
70
|
+
}
|
|
71
|
+
current[keys[keys.length - 1]] = value;
|
|
72
|
+
}
|
|
73
|
+
get(key) {
|
|
74
|
+
if (typeof key === "undefined") {
|
|
75
|
+
return this.config;
|
|
76
|
+
}
|
|
77
|
+
const keys = key.split(".");
|
|
78
|
+
let current = this.config;
|
|
79
|
+
for (const k of keys) {
|
|
80
|
+
if (current === null || current === void 0 || typeof current !== "object") {
|
|
81
|
+
return null;
|
|
82
|
+
}
|
|
83
|
+
current = current[k];
|
|
84
|
+
}
|
|
85
|
+
return current === void 0 ? null : current;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
const configInstance = new Config();
|
|
89
|
+
const resetConfig = () => configInstance.reset();
|
|
90
|
+
const putConfig = (key, value) => configInstance.put(key, value);
|
|
91
|
+
const getConfig = (key) => configInstance.get(key);
|
|
92
|
+
const getConfigByType = (isSlideover, key) => configInstance.get(isSlideover ? `slideover.${key}` : `modal.${key}`);
|
|
93
|
+
function generateId(prefix = "inertiaui_") {
|
|
94
|
+
return vanilla.generateId(prefix);
|
|
95
|
+
}
|
|
96
|
+
const ModalStackContext = React.createContext(null);
|
|
97
|
+
ModalStackContext.displayName = "ModalStackContext";
|
|
98
|
+
let pageVersion = null;
|
|
99
|
+
let resolveComponent = null;
|
|
100
|
+
let baseUrl = null;
|
|
101
|
+
let closingToBaseUrlTarget = null;
|
|
102
|
+
const prefetchCache = /* @__PURE__ */ new Map();
|
|
103
|
+
const prefetchInFlight = /* @__PURE__ */ new Map();
|
|
104
|
+
function getPrefetchCacheKey(url, method, data) {
|
|
105
|
+
return `${method}:${url}:${JSON.stringify(data)}`;
|
|
106
|
+
}
|
|
107
|
+
function getCachedResponse(url, method, data) {
|
|
108
|
+
const key = getPrefetchCacheKey(url, method, data);
|
|
109
|
+
const cached = prefetchCache.get(key);
|
|
110
|
+
if (!cached) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
if (Date.now() > cached.expiresAt) {
|
|
114
|
+
prefetchCache.delete(key);
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
117
|
+
return cached.response;
|
|
118
|
+
}
|
|
119
|
+
function setCachedResponse(url, method, data, response, cacheFor) {
|
|
120
|
+
const key = getPrefetchCacheKey(url, method, data);
|
|
121
|
+
prefetchCache.set(key, {
|
|
122
|
+
response,
|
|
123
|
+
timestamp: Date.now(),
|
|
124
|
+
expiresAt: Date.now() + cacheFor
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
function prefetch(href, options = {}) {
|
|
128
|
+
if (href.startsWith("#")) {
|
|
129
|
+
return Promise.resolve();
|
|
130
|
+
}
|
|
131
|
+
const method = (options.method ?? "get").toLowerCase();
|
|
132
|
+
const data = options.data ?? {};
|
|
133
|
+
const headers = options.headers ?? {};
|
|
134
|
+
const queryStringArrayFormat = options.queryStringArrayFormat ?? "brackets";
|
|
135
|
+
const cacheFor = options.cacheFor ?? 3e4;
|
|
136
|
+
const [url, mergedData] = core.mergeDataIntoQueryString(method, href || "", data, queryStringArrayFormat);
|
|
137
|
+
const cached = getCachedResponse(url, method, mergedData);
|
|
138
|
+
if (cached) {
|
|
139
|
+
return Promise.resolve();
|
|
140
|
+
}
|
|
141
|
+
const cacheKey = getPrefetchCacheKey(url, method, mergedData);
|
|
142
|
+
const inFlight = prefetchInFlight.get(cacheKey);
|
|
143
|
+
if (inFlight) {
|
|
144
|
+
return inFlight.then(() => {
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
options.onPrefetching?.();
|
|
148
|
+
const requestHeaders = {
|
|
149
|
+
...headers,
|
|
150
|
+
Accept: "text/html, application/xhtml+xml",
|
|
151
|
+
"X-Requested-With": "XMLHttpRequest",
|
|
152
|
+
"X-Inertia": "true",
|
|
153
|
+
"X-Inertia-Version": pageVersion ?? "",
|
|
154
|
+
"X-InertiaUI-Modal": generateId(),
|
|
155
|
+
"X-InertiaUI-Modal-Base-Url": baseUrl ?? ""
|
|
156
|
+
};
|
|
157
|
+
const request = Axios({
|
|
158
|
+
url,
|
|
159
|
+
method,
|
|
160
|
+
data: mergedData,
|
|
161
|
+
headers: requestHeaders
|
|
162
|
+
}).then((response) => {
|
|
163
|
+
setCachedResponse(url, method, mergedData, response, cacheFor);
|
|
164
|
+
options.onPrefetched?.();
|
|
165
|
+
return response;
|
|
166
|
+
}).finally(() => {
|
|
167
|
+
prefetchInFlight.delete(cacheKey);
|
|
168
|
+
});
|
|
169
|
+
prefetchInFlight.set(cacheKey, request);
|
|
170
|
+
return request.then(() => {
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
const ModalStackProvider = ({ children }) => {
|
|
174
|
+
const stackRef = React.useRef([]);
|
|
175
|
+
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
|
|
176
|
+
const [localModals, setLocalModals] = React.useState({});
|
|
177
|
+
const updateStack = (withStack) => {
|
|
178
|
+
const newStack = withStack([...stackRef.current]);
|
|
179
|
+
const isOnTopOfStack = (modalId) => {
|
|
180
|
+
if (newStack.length < 2) {
|
|
181
|
+
return true;
|
|
182
|
+
}
|
|
183
|
+
return newStack.map((modal) => ({ id: modal.id, shouldRender: modal.shouldRender })).reverse().find((modal) => modal.shouldRender)?.id === modalId;
|
|
184
|
+
};
|
|
185
|
+
newStack.forEach((modal, index) => {
|
|
186
|
+
newStack[index].onTopOfStack = isOnTopOfStack(modal.id);
|
|
187
|
+
newStack[index].getParentModal = () => {
|
|
188
|
+
if (index < 1) {
|
|
189
|
+
return null;
|
|
190
|
+
}
|
|
191
|
+
return stackRef.current.slice(0, index).reverse().find((m) => m.isOpen) ?? null;
|
|
192
|
+
};
|
|
193
|
+
newStack[index].getChildModal = () => {
|
|
194
|
+
if (index === stackRef.current.length - 1) {
|
|
195
|
+
return null;
|
|
196
|
+
}
|
|
197
|
+
return stackRef.current.slice(index + 1).find((m) => m.isOpen) ?? null;
|
|
198
|
+
};
|
|
199
|
+
});
|
|
200
|
+
stackRef.current = newStack;
|
|
201
|
+
forceUpdate();
|
|
202
|
+
};
|
|
203
|
+
class ModalClass {
|
|
204
|
+
constructor(component, response, config, onClose, afterLeave) {
|
|
205
|
+
this.show = () => {
|
|
206
|
+
updateStack(
|
|
207
|
+
(prevStack) => prevStack.map((modal) => {
|
|
208
|
+
if (modal.id === this.id && !modal.isOpen) {
|
|
209
|
+
modal.isOpen = true;
|
|
210
|
+
modal.shouldRender = true;
|
|
211
|
+
}
|
|
212
|
+
return modal;
|
|
213
|
+
})
|
|
214
|
+
);
|
|
215
|
+
};
|
|
216
|
+
this.setOpen = (open) => {
|
|
217
|
+
if (open) {
|
|
218
|
+
this.show();
|
|
219
|
+
} else {
|
|
220
|
+
this.close();
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
this.close = () => {
|
|
224
|
+
updateStack((currentStack) => {
|
|
225
|
+
let modalClosed = false;
|
|
226
|
+
const newStack = currentStack.map((modal) => {
|
|
227
|
+
if (modal.id === this.id && modal.isOpen) {
|
|
228
|
+
Object.keys(modal.listeners).forEach((event) => {
|
|
229
|
+
modal.off(event);
|
|
230
|
+
});
|
|
231
|
+
modal.isOpen = false;
|
|
232
|
+
modal.onCloseCallback?.();
|
|
233
|
+
modalClosed = true;
|
|
234
|
+
}
|
|
235
|
+
return modal;
|
|
236
|
+
});
|
|
237
|
+
return modalClosed ? newStack : currentStack;
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
this.afterLeave = () => {
|
|
241
|
+
if (this.isOpen) {
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
updateStack((prevStack) => {
|
|
245
|
+
const updatedStack = prevStack.map((modal) => {
|
|
246
|
+
if (modal.id === this.id && !modal.isOpen) {
|
|
247
|
+
modal.shouldRender = false;
|
|
248
|
+
modal.afterLeaveCallback?.();
|
|
249
|
+
modal.afterLeaveCallback = null;
|
|
250
|
+
}
|
|
251
|
+
return modal;
|
|
252
|
+
});
|
|
253
|
+
if (this.index === 0) {
|
|
254
|
+
const savedBaseUrl = baseUrl;
|
|
255
|
+
baseUrl = null;
|
|
256
|
+
closingToBaseUrlTarget = savedBaseUrl;
|
|
257
|
+
if (savedBaseUrl && typeof window !== "undefined") {
|
|
258
|
+
react.router.push({
|
|
259
|
+
url: savedBaseUrl,
|
|
260
|
+
preserveScroll: true,
|
|
261
|
+
preserveState: true,
|
|
262
|
+
// Clear _inertiaui_modal prop to prevent modal from reopening
|
|
263
|
+
props: (currentProps) => {
|
|
264
|
+
const { _inertiaui_modal, ...rest } = currentProps;
|
|
265
|
+
return { ...rest, _inertiaui_modal: void 0 };
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
return [];
|
|
270
|
+
}
|
|
271
|
+
return updatedStack;
|
|
272
|
+
});
|
|
273
|
+
};
|
|
274
|
+
this.on = (event, callback) => {
|
|
275
|
+
event = vanilla.kebabCase(event);
|
|
276
|
+
this.listeners[event] = this.listeners[event] ?? [];
|
|
277
|
+
this.listeners[event].push(callback);
|
|
278
|
+
};
|
|
279
|
+
this.off = (event, callback) => {
|
|
280
|
+
event = vanilla.kebabCase(event);
|
|
281
|
+
if (callback) {
|
|
282
|
+
this.listeners[event] = this.listeners[event]?.filter((cb) => cb !== callback) ?? [];
|
|
283
|
+
} else {
|
|
284
|
+
delete this.listeners[event];
|
|
285
|
+
}
|
|
286
|
+
};
|
|
287
|
+
this.emit = (event, ...args) => {
|
|
288
|
+
this.listeners[vanilla.kebabCase(event)]?.forEach((callback) => callback(...args));
|
|
289
|
+
};
|
|
290
|
+
this.registerEventListenersFromProps = (props) => {
|
|
291
|
+
const unsubscribers = [];
|
|
292
|
+
Object.keys(props).filter((key) => key.startsWith("on")).forEach((key) => {
|
|
293
|
+
const eventName = vanilla.kebabCase(key).replace(/^on-/, "");
|
|
294
|
+
const callback = props[key];
|
|
295
|
+
this.on(eventName, callback);
|
|
296
|
+
unsubscribers.push(() => this.off(eventName, callback));
|
|
297
|
+
});
|
|
298
|
+
return () => unsubscribers.forEach((unsub) => unsub());
|
|
299
|
+
};
|
|
300
|
+
this.reload = (options = {}) => {
|
|
301
|
+
let keys = Object.keys(this.response.props);
|
|
302
|
+
if (options.only) {
|
|
303
|
+
keys = options.only;
|
|
304
|
+
}
|
|
305
|
+
if (options.except) {
|
|
306
|
+
keys = vanilla.except(keys, options.except);
|
|
307
|
+
}
|
|
308
|
+
if (!this.response?.url) {
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const method = (options.method ?? "get").toLowerCase();
|
|
312
|
+
const data = options.data ?? {};
|
|
313
|
+
options.onStart?.();
|
|
314
|
+
Axios({
|
|
315
|
+
url: this.response.url,
|
|
316
|
+
method,
|
|
317
|
+
data: method === "get" ? {} : data,
|
|
318
|
+
params: method === "get" ? data : {},
|
|
319
|
+
headers: {
|
|
320
|
+
...options.headers ?? {},
|
|
321
|
+
Accept: "text/html, application/xhtml+xml",
|
|
322
|
+
"X-Inertia": "true",
|
|
323
|
+
"X-Inertia-Partial-Component": this.response.component,
|
|
324
|
+
"X-Inertia-Version": this.response.version ?? "",
|
|
325
|
+
"X-Inertia-Partial-Data": keys.join(","),
|
|
326
|
+
"X-InertiaUI-Modal": generateId(),
|
|
327
|
+
"X-InertiaUI-Modal-Base-Url": baseUrl ?? ""
|
|
328
|
+
}
|
|
329
|
+
}).then((response2) => {
|
|
330
|
+
this.updateProps(response2.data.props);
|
|
331
|
+
options.onSuccess?.(response2);
|
|
332
|
+
}).catch((error) => {
|
|
333
|
+
options.onError?.(error);
|
|
334
|
+
}).finally(() => {
|
|
335
|
+
options.onFinish?.();
|
|
336
|
+
});
|
|
337
|
+
};
|
|
338
|
+
this.updateProps = (props) => {
|
|
339
|
+
Object.assign(this.props, props);
|
|
340
|
+
updateStack((prevStack) => prevStack);
|
|
341
|
+
};
|
|
342
|
+
this.id = response.id ?? generateId();
|
|
343
|
+
this.isOpen = false;
|
|
344
|
+
this.shouldRender = false;
|
|
345
|
+
this.listeners = {};
|
|
346
|
+
this.component = component;
|
|
347
|
+
this.props = response.props ?? {};
|
|
348
|
+
this.response = response;
|
|
349
|
+
this.config = config ?? {};
|
|
350
|
+
this.onCloseCallback = onClose ?? null;
|
|
351
|
+
this.afterLeaveCallback = afterLeave ?? null;
|
|
352
|
+
this.index = -1;
|
|
353
|
+
this.getParentModal = () => null;
|
|
354
|
+
this.getChildModal = () => null;
|
|
355
|
+
this.onTopOfStack = true;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
const isValidModalResponse = (data) => {
|
|
359
|
+
return typeof data === "object" && data !== null && "component" in data && typeof data.component === "string";
|
|
360
|
+
};
|
|
361
|
+
const pushFromResponseData = (responseData, config = {}, onClose = null, onAfterLeave = null) => {
|
|
362
|
+
if (!resolveComponent) {
|
|
363
|
+
return Promise.reject(new Error("resolveComponent not set"));
|
|
364
|
+
}
|
|
365
|
+
if (!isValidModalResponse(responseData)) {
|
|
366
|
+
return Promise.reject(
|
|
367
|
+
new Error(
|
|
368
|
+
"Invalid modal response. This usually happens when the server returns a redirect (e.g., due to session expiration). Check if the user is still authenticated."
|
|
369
|
+
)
|
|
370
|
+
);
|
|
371
|
+
}
|
|
372
|
+
return resolveComponent(responseData.component).then(
|
|
373
|
+
(component) => push(component, responseData, config, onClose, onAfterLeave)
|
|
374
|
+
);
|
|
375
|
+
};
|
|
376
|
+
const loadDeferredProps = (modal) => {
|
|
377
|
+
const deferred = modal.response?.meta?.deferredProps;
|
|
378
|
+
if (!deferred) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
Object.keys(deferred).forEach((key) => {
|
|
382
|
+
modal.reload({ only: deferred[key] });
|
|
383
|
+
});
|
|
384
|
+
};
|
|
385
|
+
const push = (component, response, config, onClose, afterLeave) => {
|
|
386
|
+
const newModal = new ModalClass(component, response, config, onClose, afterLeave);
|
|
387
|
+
newModal.index = stackRef.current.length;
|
|
388
|
+
updateStack((prevStack) => [...prevStack, newModal]);
|
|
389
|
+
loadDeferredProps(newModal);
|
|
390
|
+
newModal.show();
|
|
391
|
+
return newModal;
|
|
392
|
+
};
|
|
393
|
+
function pushLocalModal(name, config, onClose, afterLeave, props) {
|
|
394
|
+
if (!localModals[name]) {
|
|
395
|
+
throw new Error(`The local modal "${name}" has not been registered.`);
|
|
396
|
+
}
|
|
397
|
+
const responseData = { props: props ?? {} };
|
|
398
|
+
const modal = push(null, responseData, config, onClose, afterLeave);
|
|
399
|
+
modal.name = name;
|
|
400
|
+
localModals[name].callback(modal);
|
|
401
|
+
return modal;
|
|
402
|
+
}
|
|
403
|
+
const visitModal = (url, options = {}) => visit(
|
|
404
|
+
url,
|
|
405
|
+
options.method ?? "get",
|
|
406
|
+
options.data ?? {},
|
|
407
|
+
options.headers ?? {},
|
|
408
|
+
options.config ?? {},
|
|
409
|
+
options.onClose ?? null,
|
|
410
|
+
options.onAfterLeave ?? null,
|
|
411
|
+
options.queryStringArrayFormat ?? "brackets",
|
|
412
|
+
options.navigate ?? getConfig("navigate"),
|
|
413
|
+
options.onStart ?? null,
|
|
414
|
+
options.onSuccess ?? null,
|
|
415
|
+
options.onError ?? null,
|
|
416
|
+
options.props ?? null
|
|
417
|
+
).then((modal) => {
|
|
418
|
+
const listeners = options.listeners ?? {};
|
|
419
|
+
Object.keys(listeners).forEach((event) => {
|
|
420
|
+
const eventName = vanilla.kebabCase(event);
|
|
421
|
+
modal.on(eventName, listeners[event]);
|
|
422
|
+
});
|
|
423
|
+
return modal;
|
|
424
|
+
});
|
|
425
|
+
const updateBrowserUrl = (url, useBrowserHistory, modalData) => {
|
|
426
|
+
if (!url || !useBrowserHistory || typeof window === "undefined") {
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
react.router.push({
|
|
430
|
+
url,
|
|
431
|
+
preserveScroll: true,
|
|
432
|
+
preserveState: true,
|
|
433
|
+
// Store modal data in page props for history navigation
|
|
434
|
+
props: modalData ? (currentProps) => ({
|
|
435
|
+
...currentProps,
|
|
436
|
+
_inertiaui_modal: {
|
|
437
|
+
...modalData,
|
|
438
|
+
baseUrl
|
|
439
|
+
}
|
|
440
|
+
}) : void 0
|
|
441
|
+
});
|
|
442
|
+
};
|
|
443
|
+
const visit = (href, method, payload = {}, headers = {}, config = {}, onClose = null, onAfterLeave = null, queryStringArrayFormat = "brackets", useBrowserHistory = false, onStart = null, onSuccess = null, onError = null, props = null) => {
|
|
444
|
+
const modalId = generateId();
|
|
445
|
+
return new Promise((resolve, reject) => {
|
|
446
|
+
if (href.startsWith("#")) {
|
|
447
|
+
resolve(pushLocalModal(href.substring(1), config, onClose, onAfterLeave, props));
|
|
448
|
+
return;
|
|
449
|
+
}
|
|
450
|
+
const [url, data] = core.mergeDataIntoQueryString(method, href || "", payload, queryStringArrayFormat);
|
|
451
|
+
const cachedResponse = getCachedResponse(url, method, data);
|
|
452
|
+
if (cachedResponse) {
|
|
453
|
+
onSuccess?.(cachedResponse);
|
|
454
|
+
pushFromResponseData(cachedResponse.data, config, onClose, onAfterLeave).then((modal) => {
|
|
455
|
+
updateBrowserUrl(cachedResponse.data.url, useBrowserHistory, cachedResponse.data);
|
|
456
|
+
resolve(modal);
|
|
457
|
+
}).catch(reject);
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
460
|
+
if (stackRef.current.length === 0) {
|
|
461
|
+
baseUrl = typeof window !== "undefined" ? window.location.href : "";
|
|
462
|
+
}
|
|
463
|
+
const requestHeaders = {
|
|
464
|
+
...headers,
|
|
465
|
+
Accept: "text/html, application/xhtml+xml",
|
|
466
|
+
"X-Requested-With": "XMLHttpRequest",
|
|
467
|
+
"X-Inertia": "true",
|
|
468
|
+
"X-Inertia-Version": pageVersion ?? "",
|
|
469
|
+
"X-InertiaUI-Modal": modalId,
|
|
470
|
+
"X-InertiaUI-Modal-Base-Url": baseUrl ?? ""
|
|
471
|
+
};
|
|
472
|
+
onStart?.();
|
|
473
|
+
react.progress?.start();
|
|
474
|
+
Axios({
|
|
475
|
+
url,
|
|
476
|
+
method,
|
|
477
|
+
data,
|
|
478
|
+
headers: requestHeaders
|
|
479
|
+
}).then((response) => {
|
|
480
|
+
onSuccess?.(response);
|
|
481
|
+
pushFromResponseData(response.data, config, onClose, onAfterLeave).then((modal) => {
|
|
482
|
+
updateBrowserUrl(response.data.url, useBrowserHistory, response.data);
|
|
483
|
+
resolve(modal);
|
|
484
|
+
}).catch(reject);
|
|
485
|
+
}).catch((...args) => {
|
|
486
|
+
onError?.(...args);
|
|
487
|
+
reject(args[0]);
|
|
488
|
+
}).finally(() => {
|
|
489
|
+
react.progress?.finish();
|
|
490
|
+
});
|
|
491
|
+
});
|
|
492
|
+
};
|
|
493
|
+
const registerLocalModal = (name, callback) => {
|
|
494
|
+
setLocalModals((prevLocalModals) => ({
|
|
495
|
+
...prevLocalModals,
|
|
496
|
+
[name]: { name, callback }
|
|
497
|
+
}));
|
|
498
|
+
};
|
|
499
|
+
const removeLocalModal = (name) => {
|
|
500
|
+
setLocalModals((prevLocalModals) => {
|
|
501
|
+
const newLocalModals = { ...prevLocalModals };
|
|
502
|
+
delete newLocalModals[name];
|
|
503
|
+
return newLocalModals;
|
|
504
|
+
});
|
|
505
|
+
};
|
|
506
|
+
const value = {
|
|
507
|
+
get stack() {
|
|
508
|
+
return stackRef.current;
|
|
509
|
+
},
|
|
510
|
+
localModals,
|
|
511
|
+
push,
|
|
512
|
+
pushFromResponseData,
|
|
513
|
+
length: () => stackRef.current.length,
|
|
514
|
+
closeAll: (force = false) => {
|
|
515
|
+
if (force) {
|
|
516
|
+
updateStack(() => []);
|
|
517
|
+
} else {
|
|
518
|
+
[...stackRef.current].reverse().forEach((modal) => modal.close());
|
|
519
|
+
}
|
|
520
|
+
},
|
|
521
|
+
reset: () => updateStack(() => []),
|
|
522
|
+
visit,
|
|
523
|
+
visitModal,
|
|
524
|
+
registerLocalModal,
|
|
525
|
+
removeLocalModal
|
|
526
|
+
};
|
|
527
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ModalStackContext.Provider, { value, children });
|
|
528
|
+
};
|
|
529
|
+
const useModalStack = () => {
|
|
530
|
+
const context = React.useContext(ModalStackContext);
|
|
531
|
+
if (context === null) {
|
|
532
|
+
throw new Error("useModalStack must be used within a ModalStackProvider");
|
|
533
|
+
}
|
|
534
|
+
return context;
|
|
535
|
+
};
|
|
536
|
+
const modalPropNames = ["closeButton", "closeExplicitly", "closeOnClickOutside", "maxWidth", "paddingClasses", "panelClasses", "position", "slideover"];
|
|
537
|
+
const initFromPageProps = (pageProps) => {
|
|
538
|
+
if (pageProps.initialPage) {
|
|
539
|
+
pageVersion = pageProps.initialPage.version ?? null;
|
|
540
|
+
}
|
|
541
|
+
if (pageProps.resolveComponent) {
|
|
542
|
+
resolveComponent = pageProps.resolveComponent;
|
|
543
|
+
}
|
|
544
|
+
};
|
|
545
|
+
const renderApp = (App, pageProps) => {
|
|
546
|
+
initFromPageProps(pageProps);
|
|
547
|
+
const renderInertiaApp = ({ Component, props, key }) => {
|
|
548
|
+
const renderComponent = () => {
|
|
549
|
+
const child = React.createElement(Component, { key, ...props });
|
|
550
|
+
if (typeof Component.layout === "function") {
|
|
551
|
+
return Component.layout(child);
|
|
552
|
+
}
|
|
553
|
+
if (Array.isArray(Component.layout)) {
|
|
554
|
+
return Component.layout.slice().reverse().reduce(
|
|
555
|
+
(acc, Layout) => React.createElement(Layout, props, acc),
|
|
556
|
+
child
|
|
557
|
+
);
|
|
558
|
+
}
|
|
559
|
+
return child;
|
|
560
|
+
};
|
|
561
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
562
|
+
renderComponent(),
|
|
563
|
+
/* @__PURE__ */ jsxRuntime.jsx(ModalRoot, {})
|
|
564
|
+
] });
|
|
565
|
+
};
|
|
566
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ModalStackProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(App, { ...pageProps, children: renderInertiaApp }) });
|
|
567
|
+
};
|
|
568
|
+
const ModalRoot = ({ children }) => {
|
|
569
|
+
const context = React.useContext(ModalStackContext);
|
|
570
|
+
const $page = react.usePage();
|
|
571
|
+
const pendingModalKeysRef = React.useRef(/* @__PURE__ */ new Set());
|
|
572
|
+
const getModalKey = (modalData) => modalData.id || `${modalData.component}:${modalData.url}`;
|
|
573
|
+
const isNavigatingRef = React.useRef(false);
|
|
574
|
+
const initialModalStillOpenedRef = React.useRef(!!$page.props?._inertiaui_modal);
|
|
575
|
+
React.useEffect(() => react.router.on("start", () => isNavigatingRef.current = true), []);
|
|
576
|
+
React.useEffect(() => react.router.on("finish", () => isNavigatingRef.current = false), []);
|
|
577
|
+
React.useEffect(
|
|
578
|
+
() => react.router.on("navigate", function($event) {
|
|
579
|
+
const modalOnBase = $event.detail.page.props._inertiaui_modal;
|
|
580
|
+
const pageUrl = $event.detail.page.url;
|
|
581
|
+
if (closingToBaseUrlTarget) {
|
|
582
|
+
const targetPath = new URL(closingToBaseUrlTarget, "http://x").pathname;
|
|
583
|
+
const pagePath = new URL(pageUrl, "http://x").pathname;
|
|
584
|
+
if (targetPath === pagePath) {
|
|
585
|
+
closingToBaseUrlTarget = null;
|
|
586
|
+
context?.closeAll(true);
|
|
587
|
+
baseUrl = null;
|
|
588
|
+
initialModalStillOpenedRef.current = false;
|
|
589
|
+
return;
|
|
590
|
+
}
|
|
591
|
+
closingToBaseUrlTarget = null;
|
|
592
|
+
}
|
|
593
|
+
if (!modalOnBase) {
|
|
594
|
+
context?.closeAll(true);
|
|
595
|
+
baseUrl = null;
|
|
596
|
+
initialModalStillOpenedRef.current = false;
|
|
597
|
+
return;
|
|
598
|
+
}
|
|
599
|
+
if (!vanilla.sameUrlPath(pageUrl, modalOnBase.url)) {
|
|
600
|
+
context?.closeAll(true);
|
|
601
|
+
baseUrl = null;
|
|
602
|
+
initialModalStillOpenedRef.current = false;
|
|
603
|
+
return;
|
|
604
|
+
}
|
|
605
|
+
const modalKey = getModalKey(modalOnBase);
|
|
606
|
+
if (pendingModalKeysRef.current.has(modalKey)) {
|
|
607
|
+
return;
|
|
608
|
+
}
|
|
609
|
+
if (modalOnBase.id && context?.stack.some((m) => m.id === modalOnBase.id)) {
|
|
610
|
+
return;
|
|
611
|
+
}
|
|
612
|
+
if (context?.stack.some((m) => m.response?.component === modalOnBase.component && vanilla.sameUrlPath(m.response?.url, modalOnBase.url))) {
|
|
613
|
+
return;
|
|
614
|
+
}
|
|
615
|
+
baseUrl = modalOnBase.baseUrl;
|
|
616
|
+
pendingModalKeysRef.current.add(modalKey);
|
|
617
|
+
context?.pushFromResponseData(modalOnBase, {}, () => {
|
|
618
|
+
if (!modalOnBase.baseUrl) {
|
|
619
|
+
console.error("No base url in modal response data so cannot navigate back");
|
|
620
|
+
return;
|
|
621
|
+
}
|
|
622
|
+
if (!isNavigatingRef.current && typeof window !== "undefined" && window.location.href !== modalOnBase.baseUrl) {
|
|
623
|
+
react.router.visit(modalOnBase.baseUrl, {
|
|
624
|
+
preserveScroll: true,
|
|
625
|
+
preserveState: true
|
|
626
|
+
});
|
|
627
|
+
}
|
|
628
|
+
}).finally(() => {
|
|
629
|
+
pendingModalKeysRef.current.delete(modalKey);
|
|
630
|
+
});
|
|
631
|
+
}),
|
|
632
|
+
[]
|
|
633
|
+
);
|
|
634
|
+
const axiosRequestInterceptor = (config) => {
|
|
635
|
+
const baseUrlValue = baseUrl ?? (initialModalStillOpenedRef.current ? $page.props._inertiaui_modal?.baseUrl : null);
|
|
636
|
+
if (baseUrlValue) {
|
|
637
|
+
config.headers["X-InertiaUI-Modal-Base-Url"] = baseUrlValue;
|
|
638
|
+
}
|
|
639
|
+
return config;
|
|
640
|
+
};
|
|
641
|
+
React.useEffect(() => {
|
|
642
|
+
const interceptorId = Axios.interceptors.request.use(axiosRequestInterceptor);
|
|
643
|
+
return () => Axios.interceptors.request.eject(interceptorId);
|
|
644
|
+
}, []);
|
|
645
|
+
const previousModalRef = React.useRef(void 0);
|
|
646
|
+
React.useEffect(() => {
|
|
647
|
+
const newModal = $page.props?._inertiaui_modal;
|
|
648
|
+
const previousModal = previousModalRef.current;
|
|
649
|
+
previousModalRef.current = newModal;
|
|
650
|
+
if (!newModal) {
|
|
651
|
+
return;
|
|
652
|
+
}
|
|
653
|
+
if (previousModal && newModal.component === previousModal.component && vanilla.sameUrlPath(newModal.url, previousModal.url)) {
|
|
654
|
+
context?.stack[0]?.updateProps(newModal.props ?? {});
|
|
655
|
+
return;
|
|
656
|
+
}
|
|
657
|
+
if (!previousModal && context && context.stack.length > 0) {
|
|
658
|
+
const existingModal = context.stack.find(
|
|
659
|
+
(m) => m.response?.component === newModal.component && vanilla.sameUrlPath(m.response?.url, newModal.url)
|
|
660
|
+
);
|
|
661
|
+
if (existingModal) {
|
|
662
|
+
existingModal.updateProps(newModal.props ?? {});
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
}, [$page.props?._inertiaui_modal]);
|
|
666
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
667
|
+
children,
|
|
668
|
+
context && context.stack.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ModalRenderer, { index: 0 })
|
|
669
|
+
] });
|
|
670
|
+
};
|
|
671
|
+
const ModalIndexContext = React.createContext(null);
|
|
672
|
+
ModalIndexContext.displayName = "ModalIndexContext";
|
|
673
|
+
const useModalIndex = () => {
|
|
674
|
+
return React.useContext(ModalIndexContext);
|
|
675
|
+
};
|
|
676
|
+
const ModalRenderer = ({ index }) => {
|
|
677
|
+
const { stack } = useModalStack();
|
|
678
|
+
const modalContext = React.useMemo(() => {
|
|
679
|
+
return stack[index];
|
|
680
|
+
}, [stack, index]);
|
|
681
|
+
if (!modalContext?.component) {
|
|
682
|
+
return null;
|
|
683
|
+
}
|
|
684
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ModalIndexContext.Provider, { value: index, children: React.createElement(modalContext.component, {
|
|
685
|
+
...modalContext.props,
|
|
686
|
+
onModalEvent: (...args) => modalContext.emit("modal-event", ...args)
|
|
687
|
+
}) });
|
|
688
|
+
};
|
|
689
|
+
function useModal() {
|
|
690
|
+
return useModalStack().stack[useModalIndex()] ?? null;
|
|
691
|
+
}
|
|
692
|
+
const Deferred = ({ children, data, fallback }) => {
|
|
693
|
+
if (!data) {
|
|
694
|
+
throw new Error("`<Deferred>` requires a `data` prop to be a string or array of strings");
|
|
695
|
+
}
|
|
696
|
+
const [loaded, setLoaded] = React.useState(false);
|
|
697
|
+
const keys = Array.isArray(data) ? data : [data];
|
|
698
|
+
const modal = useModal();
|
|
699
|
+
const modalProps = modal?.props ?? {};
|
|
700
|
+
React.useEffect(() => {
|
|
701
|
+
setLoaded(keys.every((key) => modalProps[key] !== void 0));
|
|
702
|
+
}, [modalProps, keys]);
|
|
703
|
+
return loaded ? children : fallback;
|
|
704
|
+
};
|
|
705
|
+
Deferred.displayName = "InertiaModalDeferred";
|
|
706
|
+
const HeadlessModal = React.forwardRef(
|
|
707
|
+
(allProps, ref) => {
|
|
708
|
+
const { name, children, onFocus, onBlur, onClose, onSuccess, ...props } = allProps;
|
|
709
|
+
const modalIndex = useModalIndex();
|
|
710
|
+
const { stack, registerLocalModal, removeLocalModal } = useModalStack();
|
|
711
|
+
const [localModalContext, setLocalModalContext] = React.useState(null);
|
|
712
|
+
const modalContext = React.useMemo(
|
|
713
|
+
() => name ? localModalContext : stack[modalIndex],
|
|
714
|
+
[name, localModalContext, modalIndex, stack]
|
|
715
|
+
);
|
|
716
|
+
const nextIndex = React.useMemo(() => {
|
|
717
|
+
return stack.find((m) => m.shouldRender && m.index > (modalContext?.index ?? -1))?.index;
|
|
718
|
+
}, [modalIndex, stack]);
|
|
719
|
+
const configSlideover = React.useMemo(
|
|
720
|
+
() => modalContext?.config.slideover ?? props.slideover ?? getConfig("type") === "slideover",
|
|
721
|
+
[props.slideover, modalContext?.config.slideover]
|
|
722
|
+
);
|
|
723
|
+
const config = React.useMemo(
|
|
724
|
+
() => ({
|
|
725
|
+
slideover: configSlideover,
|
|
726
|
+
closeButton: props.closeButton ?? getConfigByType(configSlideover, "closeButton"),
|
|
727
|
+
closeExplicitly: props.closeExplicitly ?? getConfigByType(configSlideover, "closeExplicitly"),
|
|
728
|
+
closeOnClickOutside: props.closeOnClickOutside ?? getConfigByType(configSlideover, "closeOnClickOutside"),
|
|
729
|
+
maxWidth: props.maxWidth ?? getConfigByType(configSlideover, "maxWidth"),
|
|
730
|
+
paddingClasses: props.paddingClasses ?? getConfigByType(configSlideover, "paddingClasses"),
|
|
731
|
+
panelClasses: props.panelClasses ?? getConfigByType(configSlideover, "panelClasses"),
|
|
732
|
+
position: props.position ?? getConfigByType(configSlideover, "position"),
|
|
733
|
+
...modalContext?.config
|
|
734
|
+
}),
|
|
735
|
+
[props, modalContext?.config, configSlideover]
|
|
736
|
+
);
|
|
737
|
+
React.useEffect(() => {
|
|
738
|
+
if (name) {
|
|
739
|
+
let removeListeners = null;
|
|
740
|
+
registerLocalModal(name, (localContext) => {
|
|
741
|
+
removeListeners = localContext.registerEventListenersFromProps(props);
|
|
742
|
+
setLocalModalContext(localContext);
|
|
743
|
+
});
|
|
744
|
+
return () => {
|
|
745
|
+
removeListeners?.();
|
|
746
|
+
removeListeners = null;
|
|
747
|
+
removeLocalModal(name);
|
|
748
|
+
};
|
|
749
|
+
}
|
|
750
|
+
return modalContext?.registerEventListenersFromProps(props);
|
|
751
|
+
}, [name]);
|
|
752
|
+
const modalContextRef = React.useRef(modalContext);
|
|
753
|
+
React.useEffect(() => {
|
|
754
|
+
modalContextRef.current = modalContext;
|
|
755
|
+
}, [modalContext]);
|
|
756
|
+
const previousIsOpenRef = React.useRef(void 0);
|
|
757
|
+
React.useEffect(() => {
|
|
758
|
+
if (modalContext !== null) {
|
|
759
|
+
if (modalContext.isOpen) {
|
|
760
|
+
onSuccess?.();
|
|
761
|
+
} else if (previousIsOpenRef.current === true) {
|
|
762
|
+
onClose?.();
|
|
763
|
+
}
|
|
764
|
+
previousIsOpenRef.current = modalContext.isOpen;
|
|
765
|
+
}
|
|
766
|
+
}, [modalContext?.isOpen]);
|
|
767
|
+
const [rendered, setRendered] = React.useState(false);
|
|
768
|
+
React.useEffect(() => {
|
|
769
|
+
if (rendered && modalContext !== null && modalContext.isOpen) {
|
|
770
|
+
if (modalContext.onTopOfStack) {
|
|
771
|
+
onFocus?.();
|
|
772
|
+
} else {
|
|
773
|
+
onBlur?.();
|
|
774
|
+
}
|
|
775
|
+
}
|
|
776
|
+
setRendered(true);
|
|
777
|
+
}, [modalContext?.onTopOfStack]);
|
|
778
|
+
React.useImperativeHandle(
|
|
779
|
+
ref,
|
|
780
|
+
() => ({
|
|
781
|
+
afterLeave: () => modalContextRef.current?.afterLeave(),
|
|
782
|
+
close: () => modalContextRef.current?.close(),
|
|
783
|
+
emit: (...args) => modalContextRef.current?.emit(...args),
|
|
784
|
+
getChildModal: () => modalContextRef.current?.getChildModal(),
|
|
785
|
+
getParentModal: () => modalContextRef.current?.getParentModal(),
|
|
786
|
+
reload: (options) => modalContextRef.current?.reload(options),
|
|
787
|
+
setOpen: (open) => modalContextRef.current?.setOpen(open),
|
|
788
|
+
get id() {
|
|
789
|
+
return modalContextRef.current?.id;
|
|
790
|
+
},
|
|
791
|
+
get index() {
|
|
792
|
+
return modalContextRef.current?.index;
|
|
793
|
+
},
|
|
794
|
+
get isOpen() {
|
|
795
|
+
return modalContextRef.current?.isOpen;
|
|
796
|
+
},
|
|
797
|
+
get config() {
|
|
798
|
+
return modalContextRef.current?.config;
|
|
799
|
+
},
|
|
800
|
+
get modalContext() {
|
|
801
|
+
return modalContextRef.current;
|
|
802
|
+
},
|
|
803
|
+
get onTopOfStack() {
|
|
804
|
+
return modalContextRef.current?.onTopOfStack;
|
|
805
|
+
},
|
|
806
|
+
get shouldRender() {
|
|
807
|
+
return modalContextRef.current?.shouldRender;
|
|
808
|
+
}
|
|
809
|
+
}),
|
|
810
|
+
[modalContext]
|
|
811
|
+
);
|
|
812
|
+
if (!modalContext?.shouldRender) {
|
|
813
|
+
return null;
|
|
814
|
+
}
|
|
815
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
816
|
+
typeof children === "function" ? children({
|
|
817
|
+
// Spread props first so they can be overridden by built-in props
|
|
818
|
+
...modalContext.props,
|
|
819
|
+
afterLeave: modalContext.afterLeave,
|
|
820
|
+
close: modalContext.close,
|
|
821
|
+
config,
|
|
822
|
+
emit: modalContext.emit,
|
|
823
|
+
getChildModal: modalContext.getChildModal,
|
|
824
|
+
getParentModal: modalContext.getParentModal,
|
|
825
|
+
id: modalContext.id,
|
|
826
|
+
index: modalContext.index,
|
|
827
|
+
isOpen: modalContext.isOpen,
|
|
828
|
+
modalContext,
|
|
829
|
+
onTopOfStack: modalContext.onTopOfStack,
|
|
830
|
+
reload: modalContext.reload,
|
|
831
|
+
setOpen: modalContext.setOpen,
|
|
832
|
+
shouldRender: modalContext.shouldRender
|
|
833
|
+
}) : children,
|
|
834
|
+
nextIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(ModalRenderer, { index: nextIndex })
|
|
835
|
+
] });
|
|
836
|
+
}
|
|
837
|
+
);
|
|
838
|
+
HeadlessModal.displayName = "HeadlessModal";
|
|
839
|
+
function CloseButton({ onClick }) {
|
|
840
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
841
|
+
"button",
|
|
842
|
+
{
|
|
843
|
+
type: "button",
|
|
844
|
+
className: "im-close-button text-gray-400 hover:text-gray-500",
|
|
845
|
+
onClick,
|
|
846
|
+
children: [
|
|
847
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
|
|
848
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
849
|
+
"svg",
|
|
850
|
+
{
|
|
851
|
+
className: "size-6",
|
|
852
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
853
|
+
fill: "none",
|
|
854
|
+
viewBox: "0 0 24 24",
|
|
855
|
+
strokeWidth: "2",
|
|
856
|
+
stroke: "currentColor",
|
|
857
|
+
"aria-hidden": "true",
|
|
858
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
859
|
+
"path",
|
|
860
|
+
{
|
|
861
|
+
strokeLinecap: "round",
|
|
862
|
+
strokeLinejoin: "round",
|
|
863
|
+
d: "M6 18L18 6M6 6l12 12"
|
|
864
|
+
}
|
|
865
|
+
)
|
|
866
|
+
}
|
|
867
|
+
)
|
|
868
|
+
]
|
|
869
|
+
}
|
|
870
|
+
);
|
|
871
|
+
}
|
|
872
|
+
function r(e) {
|
|
873
|
+
var t, f, n = "";
|
|
874
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
875
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
876
|
+
var o = e.length;
|
|
877
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
878
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
879
|
+
return n;
|
|
880
|
+
}
|
|
881
|
+
function clsx() {
|
|
882
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
883
|
+
return n;
|
|
884
|
+
}
|
|
885
|
+
const maxWidthClasses = {
|
|
886
|
+
sm: "sm:max-w-sm",
|
|
887
|
+
md: "sm:max-w-md",
|
|
888
|
+
lg: "sm:max-w-md md:max-w-lg",
|
|
889
|
+
xl: "sm:max-w-md md:max-w-xl",
|
|
890
|
+
"2xl": "sm:max-w-md md:max-w-xl lg:max-w-2xl",
|
|
891
|
+
"3xl": "sm:max-w-md md:max-w-xl lg:max-w-3xl",
|
|
892
|
+
"4xl": "sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-4xl",
|
|
893
|
+
"5xl": "sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl",
|
|
894
|
+
"6xl": "sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-6xl",
|
|
895
|
+
"7xl": "sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl"
|
|
896
|
+
};
|
|
897
|
+
const defaultMaxWidth = "2xl";
|
|
898
|
+
function getMaxWidthClass(maxWidth) {
|
|
899
|
+
return maxWidthClasses[maxWidth] || maxWidthClasses[defaultMaxWidth];
|
|
900
|
+
}
|
|
901
|
+
const ModalContent = ({ modalContext, config, useNativeDialog, isFirstModal, onAfterLeave, children }) => {
|
|
902
|
+
const [isRendered, setIsRendered] = React.useState(false);
|
|
903
|
+
const [isVisible, setIsVisible] = React.useState(false);
|
|
904
|
+
const [entered, setEntered] = React.useState(false);
|
|
905
|
+
const wrapperRef = React.useRef(null);
|
|
906
|
+
const dialogRef = React.useRef(null);
|
|
907
|
+
const nativeWrapperRef = React.useRef(null);
|
|
908
|
+
const cleanupFocusTrapRef = React.useRef(null);
|
|
909
|
+
const cleanupEscapeKeyRef = React.useRef(null);
|
|
910
|
+
const maxWidthClass = React.useMemo(() => getMaxWidthClass(config.maxWidth), [config.maxWidth]);
|
|
911
|
+
const animateIn = React.useCallback(async (element) => {
|
|
912
|
+
if (!element) return;
|
|
913
|
+
setIsVisible(true);
|
|
914
|
+
await vanilla.animate(element, [
|
|
915
|
+
{ transform: "translate3d(0, 1rem, 0) scale(0.95)", opacity: 0 },
|
|
916
|
+
{ transform: "translate3d(0, 0, 0) scale(1)", opacity: 1 }
|
|
917
|
+
]);
|
|
918
|
+
setEntered(true);
|
|
919
|
+
}, []);
|
|
920
|
+
const animateOut = React.useCallback(
|
|
921
|
+
async (element) => {
|
|
922
|
+
if (!element) return;
|
|
923
|
+
setIsVisible(false);
|
|
924
|
+
await vanilla.animate(element, [
|
|
925
|
+
{ transform: "translate3d(0, 0, 0) scale(1)", opacity: 1 },
|
|
926
|
+
{ transform: "translate3d(0, 1rem, 0) scale(0.95)", opacity: 0 }
|
|
927
|
+
]);
|
|
928
|
+
setIsRendered(false);
|
|
929
|
+
if (useNativeDialog && dialogRef.current) {
|
|
930
|
+
dialogRef.current.close();
|
|
931
|
+
}
|
|
932
|
+
onAfterLeave?.();
|
|
933
|
+
modalContext.afterLeave();
|
|
934
|
+
},
|
|
935
|
+
[useNativeDialog, onAfterLeave, modalContext]
|
|
936
|
+
);
|
|
937
|
+
const setupFocusTrap = React.useCallback(() => {
|
|
938
|
+
if (useNativeDialog) return;
|
|
939
|
+
if (!wrapperRef.current || !modalContext.onTopOfStack) return;
|
|
940
|
+
if (cleanupFocusTrapRef.current) return;
|
|
941
|
+
cleanupFocusTrapRef.current = vanilla.createFocusTrap(wrapperRef.current, {
|
|
942
|
+
initialFocus: true,
|
|
943
|
+
returnFocus: false
|
|
944
|
+
});
|
|
945
|
+
}, [modalContext.onTopOfStack, useNativeDialog]);
|
|
946
|
+
const cleanupFocusTrap = React.useCallback(() => {
|
|
947
|
+
if (cleanupFocusTrapRef.current) {
|
|
948
|
+
cleanupFocusTrapRef.current();
|
|
949
|
+
cleanupFocusTrapRef.current = null;
|
|
950
|
+
}
|
|
951
|
+
}, []);
|
|
952
|
+
const setupEscapeKey = React.useCallback(() => {
|
|
953
|
+
if (useNativeDialog) return;
|
|
954
|
+
if (cleanupEscapeKeyRef.current) return;
|
|
955
|
+
if (config?.closeExplicitly) return;
|
|
956
|
+
cleanupEscapeKeyRef.current = vanilla.onEscapeKey(() => {
|
|
957
|
+
if (modalContext.onTopOfStack) {
|
|
958
|
+
modalContext.close();
|
|
959
|
+
}
|
|
960
|
+
});
|
|
961
|
+
}, [config?.closeExplicitly, modalContext, useNativeDialog]);
|
|
962
|
+
const cleanupEscapeKey = React.useCallback(() => {
|
|
963
|
+
if (cleanupEscapeKeyRef.current) {
|
|
964
|
+
cleanupEscapeKeyRef.current();
|
|
965
|
+
cleanupEscapeKeyRef.current = null;
|
|
966
|
+
}
|
|
967
|
+
}, []);
|
|
968
|
+
const handleClickOutside = React.useCallback(
|
|
969
|
+
(event) => {
|
|
970
|
+
if (useNativeDialog) return;
|
|
971
|
+
if (!modalContext.onTopOfStack) return;
|
|
972
|
+
if (config?.closeExplicitly) return;
|
|
973
|
+
if (config?.closeOnClickOutside === false) return;
|
|
974
|
+
if (!wrapperRef.current) return;
|
|
975
|
+
if (!wrapperRef.current.contains(event.target)) {
|
|
976
|
+
modalContext.close();
|
|
977
|
+
}
|
|
978
|
+
},
|
|
979
|
+
[modalContext, config?.closeExplicitly, config?.closeOnClickOutside, useNativeDialog]
|
|
980
|
+
);
|
|
981
|
+
const handleCancel = React.useCallback(
|
|
982
|
+
(event) => {
|
|
983
|
+
event.preventDefault();
|
|
984
|
+
if (modalContext.onTopOfStack && !config?.closeExplicitly) {
|
|
985
|
+
modalContext.close();
|
|
986
|
+
}
|
|
987
|
+
},
|
|
988
|
+
[modalContext, config?.closeExplicitly]
|
|
989
|
+
);
|
|
990
|
+
const handleDialogClick = React.useCallback(
|
|
991
|
+
(event) => {
|
|
992
|
+
if (event.target === dialogRef.current) {
|
|
993
|
+
if (modalContext.onTopOfStack && !config?.closeExplicitly && config?.closeOnClickOutside !== false) {
|
|
994
|
+
modalContext.close();
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
},
|
|
998
|
+
[modalContext, config?.closeExplicitly, config?.closeOnClickOutside]
|
|
999
|
+
);
|
|
1000
|
+
const prevIsOpenRef = React.useRef(modalContext.isOpen);
|
|
1001
|
+
React.useEffect(() => {
|
|
1002
|
+
if (useNativeDialog) {
|
|
1003
|
+
if (modalContext.isOpen && !dialogRef.current?.open) {
|
|
1004
|
+
dialogRef.current?.showModal();
|
|
1005
|
+
animateIn(nativeWrapperRef.current);
|
|
1006
|
+
} else if (!modalContext.isOpen && prevIsOpenRef.current) {
|
|
1007
|
+
setEntered(false);
|
|
1008
|
+
animateOut(nativeWrapperRef.current);
|
|
1009
|
+
}
|
|
1010
|
+
} else {
|
|
1011
|
+
if (modalContext.isOpen && !isRendered) {
|
|
1012
|
+
setIsRendered(true);
|
|
1013
|
+
} else if (!modalContext.isOpen && prevIsOpenRef.current) {
|
|
1014
|
+
setEntered(false);
|
|
1015
|
+
animateOut(wrapperRef.current);
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
prevIsOpenRef.current = modalContext.isOpen;
|
|
1019
|
+
}, [modalContext.isOpen, useNativeDialog, animateIn, animateOut, isRendered]);
|
|
1020
|
+
React.useEffect(() => {
|
|
1021
|
+
if (!useNativeDialog && isRendered && !entered && modalContext.isOpen) {
|
|
1022
|
+
animateIn(wrapperRef.current).then(() => {
|
|
1023
|
+
setupFocusTrap();
|
|
1024
|
+
});
|
|
1025
|
+
}
|
|
1026
|
+
}, [isRendered, useNativeDialog, entered, modalContext.isOpen, animateIn, setupFocusTrap]);
|
|
1027
|
+
React.useEffect(() => {
|
|
1028
|
+
if (!useNativeDialog) {
|
|
1029
|
+
setupEscapeKey();
|
|
1030
|
+
}
|
|
1031
|
+
return () => {
|
|
1032
|
+
cleanupEscapeKey();
|
|
1033
|
+
};
|
|
1034
|
+
}, [useNativeDialog, setupEscapeKey, cleanupEscapeKey]);
|
|
1035
|
+
React.useEffect(() => {
|
|
1036
|
+
if (useNativeDialog) return;
|
|
1037
|
+
if (modalContext.onTopOfStack) {
|
|
1038
|
+
setupEscapeKey();
|
|
1039
|
+
if (entered) {
|
|
1040
|
+
setupFocusTrap();
|
|
1041
|
+
}
|
|
1042
|
+
} else {
|
|
1043
|
+
cleanupFocusTrap();
|
|
1044
|
+
cleanupEscapeKey();
|
|
1045
|
+
}
|
|
1046
|
+
}, [modalContext.onTopOfStack, entered, setupEscapeKey, setupFocusTrap, cleanupFocusTrap, cleanupEscapeKey, useNativeDialog]);
|
|
1047
|
+
React.useEffect(() => {
|
|
1048
|
+
return () => {
|
|
1049
|
+
const wrapper = useNativeDialog ? nativeWrapperRef.current : wrapperRef.current;
|
|
1050
|
+
if (wrapper) {
|
|
1051
|
+
vanilla.cancelAnimations(wrapper);
|
|
1052
|
+
}
|
|
1053
|
+
if (useNativeDialog) {
|
|
1054
|
+
if (dialogRef.current?.open) {
|
|
1055
|
+
dialogRef.current.close();
|
|
1056
|
+
}
|
|
1057
|
+
} else {
|
|
1058
|
+
cleanupFocusTrap();
|
|
1059
|
+
cleanupEscapeKey();
|
|
1060
|
+
}
|
|
1061
|
+
};
|
|
1062
|
+
}, [useNativeDialog, cleanupFocusTrap, cleanupEscapeKey]);
|
|
1063
|
+
const renderContent = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1064
|
+
"div",
|
|
1065
|
+
{
|
|
1066
|
+
className: `im-modal-content relative ${config.paddingClasses} ${config.panelClasses}`,
|
|
1067
|
+
"data-inertiaui-modal-entered": entered,
|
|
1068
|
+
children: [
|
|
1069
|
+
config.closeButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 pr-3 pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: modalContext.close }) }),
|
|
1070
|
+
typeof children === "function" ? children({ modalContext, config }) : children
|
|
1071
|
+
]
|
|
1072
|
+
}
|
|
1073
|
+
);
|
|
1074
|
+
if (useNativeDialog) {
|
|
1075
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1076
|
+
"dialog",
|
|
1077
|
+
{
|
|
1078
|
+
ref: dialogRef,
|
|
1079
|
+
className: clsx(
|
|
1080
|
+
"im-modal-dialog m-0 overflow-visible bg-transparent p-0",
|
|
1081
|
+
"size-full max-h-none max-w-none",
|
|
1082
|
+
"backdrop:bg-black/75 backdrop:transition-opacity backdrop:duration-300",
|
|
1083
|
+
isVisible ? "backdrop:opacity-100" : "backdrop:opacity-0",
|
|
1084
|
+
!isFirstModal && "backdrop:bg-transparent"
|
|
1085
|
+
),
|
|
1086
|
+
onCancel: handleCancel,
|
|
1087
|
+
onClick: handleDialogClick,
|
|
1088
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "im-modal-container fixed inset-0 overflow-y-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1089
|
+
"div",
|
|
1090
|
+
{
|
|
1091
|
+
className: clsx("im-modal-positioner flex min-h-full justify-center", {
|
|
1092
|
+
"items-start": config.position === "top",
|
|
1093
|
+
"items-center": config.position === "center",
|
|
1094
|
+
"items-end": config.position === "bottom"
|
|
1095
|
+
}),
|
|
1096
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1097
|
+
"div",
|
|
1098
|
+
{
|
|
1099
|
+
ref: nativeWrapperRef,
|
|
1100
|
+
className: clsx("im-modal-wrapper w-full transition-[filter] duration-300", modalContext.onTopOfStack ? "" : "blur-xs", maxWidthClass),
|
|
1101
|
+
children: renderContent()
|
|
1102
|
+
}
|
|
1103
|
+
)
|
|
1104
|
+
}
|
|
1105
|
+
) })
|
|
1106
|
+
}
|
|
1107
|
+
);
|
|
1108
|
+
}
|
|
1109
|
+
if (!isRendered) return null;
|
|
1110
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1111
|
+
"div",
|
|
1112
|
+
{
|
|
1113
|
+
className: "im-modal-container fixed inset-0 z-40 overflow-y-auto p-4",
|
|
1114
|
+
onMouseDown: handleClickOutside,
|
|
1115
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1116
|
+
"div",
|
|
1117
|
+
{
|
|
1118
|
+
className: clsx("im-modal-positioner flex min-h-full justify-center", {
|
|
1119
|
+
"items-start": config.position === "top",
|
|
1120
|
+
"items-center": config.position === "center",
|
|
1121
|
+
"items-end": config.position === "bottom"
|
|
1122
|
+
}),
|
|
1123
|
+
onMouseDown: handleClickOutside,
|
|
1124
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1125
|
+
"div",
|
|
1126
|
+
{
|
|
1127
|
+
ref: wrapperRef,
|
|
1128
|
+
role: "dialog",
|
|
1129
|
+
"aria-modal": "true",
|
|
1130
|
+
className: clsx("im-modal-wrapper w-full transition-[filter] duration-300", modalContext.onTopOfStack ? "" : "blur-xs", maxWidthClass),
|
|
1131
|
+
children: [
|
|
1132
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Dialog" }),
|
|
1133
|
+
renderContent()
|
|
1134
|
+
]
|
|
1135
|
+
}
|
|
1136
|
+
)
|
|
1137
|
+
}
|
|
1138
|
+
)
|
|
1139
|
+
}
|
|
1140
|
+
);
|
|
1141
|
+
};
|
|
1142
|
+
const SlideoverContent = ({ modalContext, config, useNativeDialog, isFirstModal, onAfterLeave, children }) => {
|
|
1143
|
+
const [isRendered, setIsRendered] = React.useState(false);
|
|
1144
|
+
const [isVisible, setIsVisible] = React.useState(false);
|
|
1145
|
+
const [entered, setEntered] = React.useState(false);
|
|
1146
|
+
const wrapperRef = React.useRef(null);
|
|
1147
|
+
const dialogRef = React.useRef(null);
|
|
1148
|
+
const nativeWrapperRef = React.useRef(null);
|
|
1149
|
+
const cleanupFocusTrapRef = React.useRef(null);
|
|
1150
|
+
const cleanupEscapeKeyRef = React.useRef(null);
|
|
1151
|
+
const isLeft = config.position === "left";
|
|
1152
|
+
const maxWidthClass = React.useMemo(() => getMaxWidthClass(config.maxWidth), [config.maxWidth]);
|
|
1153
|
+
const getTranslateX = React.useCallback(() => isLeft ? "-100%" : "100%", [isLeft]);
|
|
1154
|
+
const animateIn = React.useCallback(
|
|
1155
|
+
async (element) => {
|
|
1156
|
+
if (!element) return;
|
|
1157
|
+
setIsVisible(true);
|
|
1158
|
+
const translateX = getTranslateX();
|
|
1159
|
+
await vanilla.animate(element, [
|
|
1160
|
+
{ transform: `translate3d(${translateX}, 0, 0)`, opacity: 0 },
|
|
1161
|
+
{ transform: "translate3d(0, 0, 0)", opacity: 1 }
|
|
1162
|
+
]);
|
|
1163
|
+
setEntered(true);
|
|
1164
|
+
},
|
|
1165
|
+
[getTranslateX]
|
|
1166
|
+
);
|
|
1167
|
+
const animateOut = React.useCallback(
|
|
1168
|
+
async (element) => {
|
|
1169
|
+
if (!element) return;
|
|
1170
|
+
setIsVisible(false);
|
|
1171
|
+
const translateX = getTranslateX();
|
|
1172
|
+
await vanilla.animate(element, [
|
|
1173
|
+
{ transform: "translate3d(0, 0, 0)", opacity: 1 },
|
|
1174
|
+
{ transform: `translate3d(${translateX}, 0, 0)`, opacity: 0 }
|
|
1175
|
+
]);
|
|
1176
|
+
setIsRendered(false);
|
|
1177
|
+
if (useNativeDialog && dialogRef.current) {
|
|
1178
|
+
dialogRef.current.close();
|
|
1179
|
+
}
|
|
1180
|
+
onAfterLeave?.();
|
|
1181
|
+
modalContext.afterLeave();
|
|
1182
|
+
},
|
|
1183
|
+
[getTranslateX, useNativeDialog, onAfterLeave, modalContext]
|
|
1184
|
+
);
|
|
1185
|
+
const setupFocusTrap = React.useCallback(() => {
|
|
1186
|
+
if (useNativeDialog) return;
|
|
1187
|
+
if (!wrapperRef.current || !modalContext.onTopOfStack) return;
|
|
1188
|
+
if (cleanupFocusTrapRef.current) return;
|
|
1189
|
+
cleanupFocusTrapRef.current = vanilla.createFocusTrap(wrapperRef.current, {
|
|
1190
|
+
initialFocus: true,
|
|
1191
|
+
returnFocus: false
|
|
1192
|
+
});
|
|
1193
|
+
}, [modalContext.onTopOfStack, useNativeDialog]);
|
|
1194
|
+
const cleanupFocusTrap = React.useCallback(() => {
|
|
1195
|
+
if (cleanupFocusTrapRef.current) {
|
|
1196
|
+
cleanupFocusTrapRef.current();
|
|
1197
|
+
cleanupFocusTrapRef.current = null;
|
|
1198
|
+
}
|
|
1199
|
+
}, []);
|
|
1200
|
+
const setupEscapeKey = React.useCallback(() => {
|
|
1201
|
+
if (useNativeDialog) return;
|
|
1202
|
+
if (cleanupEscapeKeyRef.current) return;
|
|
1203
|
+
if (config?.closeExplicitly) return;
|
|
1204
|
+
cleanupEscapeKeyRef.current = vanilla.onEscapeKey(() => {
|
|
1205
|
+
if (modalContext.onTopOfStack) {
|
|
1206
|
+
modalContext.close();
|
|
1207
|
+
}
|
|
1208
|
+
});
|
|
1209
|
+
}, [config?.closeExplicitly, modalContext, useNativeDialog]);
|
|
1210
|
+
const cleanupEscapeKey = React.useCallback(() => {
|
|
1211
|
+
if (cleanupEscapeKeyRef.current) {
|
|
1212
|
+
cleanupEscapeKeyRef.current();
|
|
1213
|
+
cleanupEscapeKeyRef.current = null;
|
|
1214
|
+
}
|
|
1215
|
+
}, []);
|
|
1216
|
+
const handleClickOutside = React.useCallback(
|
|
1217
|
+
(event) => {
|
|
1218
|
+
if (useNativeDialog) return;
|
|
1219
|
+
if (!modalContext.onTopOfStack) return;
|
|
1220
|
+
if (config?.closeExplicitly) return;
|
|
1221
|
+
if (config?.closeOnClickOutside === false) return;
|
|
1222
|
+
if (!wrapperRef.current) return;
|
|
1223
|
+
if (!wrapperRef.current.contains(event.target)) {
|
|
1224
|
+
modalContext.close();
|
|
1225
|
+
}
|
|
1226
|
+
},
|
|
1227
|
+
[modalContext, config?.closeExplicitly, config?.closeOnClickOutside, useNativeDialog]
|
|
1228
|
+
);
|
|
1229
|
+
const handleCancel = React.useCallback(
|
|
1230
|
+
(event) => {
|
|
1231
|
+
event.preventDefault();
|
|
1232
|
+
if (modalContext.onTopOfStack && !config?.closeExplicitly) {
|
|
1233
|
+
modalContext.close();
|
|
1234
|
+
}
|
|
1235
|
+
},
|
|
1236
|
+
[modalContext, config?.closeExplicitly]
|
|
1237
|
+
);
|
|
1238
|
+
const handleDialogClick = React.useCallback(
|
|
1239
|
+
(event) => {
|
|
1240
|
+
if (event.target === dialogRef.current) {
|
|
1241
|
+
if (modalContext.onTopOfStack && !config?.closeExplicitly && config?.closeOnClickOutside !== false) {
|
|
1242
|
+
modalContext.close();
|
|
1243
|
+
}
|
|
1244
|
+
}
|
|
1245
|
+
},
|
|
1246
|
+
[modalContext, config?.closeExplicitly, config?.closeOnClickOutside]
|
|
1247
|
+
);
|
|
1248
|
+
const prevIsOpenRef = React.useRef(modalContext.isOpen);
|
|
1249
|
+
React.useEffect(() => {
|
|
1250
|
+
if (useNativeDialog) {
|
|
1251
|
+
if (modalContext.isOpen && !dialogRef.current?.open) {
|
|
1252
|
+
dialogRef.current?.showModal();
|
|
1253
|
+
animateIn(nativeWrapperRef.current);
|
|
1254
|
+
} else if (!modalContext.isOpen && prevIsOpenRef.current) {
|
|
1255
|
+
setEntered(false);
|
|
1256
|
+
animateOut(nativeWrapperRef.current);
|
|
1257
|
+
}
|
|
1258
|
+
} else {
|
|
1259
|
+
if (modalContext.isOpen && !isRendered) {
|
|
1260
|
+
setIsRendered(true);
|
|
1261
|
+
} else if (!modalContext.isOpen && prevIsOpenRef.current) {
|
|
1262
|
+
setEntered(false);
|
|
1263
|
+
animateOut(wrapperRef.current);
|
|
1264
|
+
}
|
|
1265
|
+
}
|
|
1266
|
+
prevIsOpenRef.current = modalContext.isOpen;
|
|
1267
|
+
}, [modalContext.isOpen, useNativeDialog, animateIn, animateOut, isRendered]);
|
|
1268
|
+
React.useEffect(() => {
|
|
1269
|
+
if (!useNativeDialog && isRendered && !entered && modalContext.isOpen) {
|
|
1270
|
+
animateIn(wrapperRef.current).then(() => {
|
|
1271
|
+
setupFocusTrap();
|
|
1272
|
+
});
|
|
1273
|
+
}
|
|
1274
|
+
}, [isRendered, useNativeDialog, entered, modalContext.isOpen, animateIn, setupFocusTrap]);
|
|
1275
|
+
React.useEffect(() => {
|
|
1276
|
+
if (!useNativeDialog) {
|
|
1277
|
+
setupEscapeKey();
|
|
1278
|
+
}
|
|
1279
|
+
return () => {
|
|
1280
|
+
cleanupEscapeKey();
|
|
1281
|
+
};
|
|
1282
|
+
}, [useNativeDialog, setupEscapeKey, cleanupEscapeKey]);
|
|
1283
|
+
React.useEffect(() => {
|
|
1284
|
+
if (useNativeDialog) return;
|
|
1285
|
+
if (modalContext.onTopOfStack) {
|
|
1286
|
+
setupEscapeKey();
|
|
1287
|
+
if (entered) {
|
|
1288
|
+
setupFocusTrap();
|
|
1289
|
+
}
|
|
1290
|
+
} else {
|
|
1291
|
+
cleanupFocusTrap();
|
|
1292
|
+
cleanupEscapeKey();
|
|
1293
|
+
}
|
|
1294
|
+
}, [modalContext.onTopOfStack, entered, setupEscapeKey, setupFocusTrap, cleanupFocusTrap, cleanupEscapeKey, useNativeDialog]);
|
|
1295
|
+
React.useEffect(() => {
|
|
1296
|
+
return () => {
|
|
1297
|
+
const wrapper = useNativeDialog ? nativeWrapperRef.current : wrapperRef.current;
|
|
1298
|
+
if (wrapper) {
|
|
1299
|
+
vanilla.cancelAnimations(wrapper);
|
|
1300
|
+
}
|
|
1301
|
+
if (useNativeDialog) {
|
|
1302
|
+
if (dialogRef.current?.open) {
|
|
1303
|
+
dialogRef.current.close();
|
|
1304
|
+
}
|
|
1305
|
+
} else {
|
|
1306
|
+
cleanupFocusTrap();
|
|
1307
|
+
cleanupEscapeKey();
|
|
1308
|
+
}
|
|
1309
|
+
};
|
|
1310
|
+
}, [useNativeDialog, cleanupFocusTrap, cleanupEscapeKey]);
|
|
1311
|
+
const renderContent = () => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1312
|
+
"div",
|
|
1313
|
+
{
|
|
1314
|
+
className: `im-slideover-content relative ${config.paddingClasses} ${config.panelClasses}`,
|
|
1315
|
+
"data-inertiaui-modal-entered": entered,
|
|
1316
|
+
children: [
|
|
1317
|
+
config.closeButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 pr-3 pt-3", children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: modalContext.close }) }),
|
|
1318
|
+
typeof children === "function" ? children({ modalContext, config }) : children
|
|
1319
|
+
]
|
|
1320
|
+
}
|
|
1321
|
+
);
|
|
1322
|
+
if (useNativeDialog) {
|
|
1323
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1324
|
+
"dialog",
|
|
1325
|
+
{
|
|
1326
|
+
ref: dialogRef,
|
|
1327
|
+
className: clsx(
|
|
1328
|
+
"im-slideover-dialog m-0 overflow-visible bg-transparent p-0",
|
|
1329
|
+
"size-full max-h-none max-w-none",
|
|
1330
|
+
"backdrop:bg-black/75 backdrop:transition-opacity backdrop:duration-300",
|
|
1331
|
+
isVisible ? "backdrop:opacity-100" : "backdrop:opacity-0",
|
|
1332
|
+
!isFirstModal && "backdrop:bg-transparent"
|
|
1333
|
+
),
|
|
1334
|
+
onCancel: handleCancel,
|
|
1335
|
+
onClick: handleDialogClick,
|
|
1336
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "im-slideover-container fixed inset-0 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1337
|
+
"div",
|
|
1338
|
+
{
|
|
1339
|
+
className: clsx("im-slideover-positioner flex min-h-full items-center", {
|
|
1340
|
+
"justify-start rtl:justify-end": config?.position === "left",
|
|
1341
|
+
"justify-end rtl:justify-start": config?.position === "right"
|
|
1342
|
+
}),
|
|
1343
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1344
|
+
"div",
|
|
1345
|
+
{
|
|
1346
|
+
ref: nativeWrapperRef,
|
|
1347
|
+
className: clsx("im-slideover-wrapper w-full transition-[filter] duration-300", modalContext.onTopOfStack ? "" : "blur-xs", maxWidthClass),
|
|
1348
|
+
children: renderContent()
|
|
1349
|
+
}
|
|
1350
|
+
)
|
|
1351
|
+
}
|
|
1352
|
+
) })
|
|
1353
|
+
}
|
|
1354
|
+
);
|
|
1355
|
+
}
|
|
1356
|
+
if (!isRendered) return null;
|
|
1357
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1358
|
+
"div",
|
|
1359
|
+
{
|
|
1360
|
+
className: "im-slideover-container fixed inset-0 z-40 overflow-y-auto overflow-x-hidden",
|
|
1361
|
+
onMouseDown: handleClickOutside,
|
|
1362
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1363
|
+
"div",
|
|
1364
|
+
{
|
|
1365
|
+
className: clsx("im-slideover-positioner flex min-h-full items-center", {
|
|
1366
|
+
"justify-start rtl:justify-end": config?.position === "left",
|
|
1367
|
+
"justify-end rtl:justify-start": config?.position === "right"
|
|
1368
|
+
}),
|
|
1369
|
+
onMouseDown: handleClickOutside,
|
|
1370
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1371
|
+
"div",
|
|
1372
|
+
{
|
|
1373
|
+
ref: wrapperRef,
|
|
1374
|
+
role: "dialog",
|
|
1375
|
+
"aria-modal": "true",
|
|
1376
|
+
className: clsx("im-slideover-wrapper w-full transition-[filter] duration-300", modalContext.onTopOfStack ? "" : "blur-xs", maxWidthClass),
|
|
1377
|
+
children: [
|
|
1378
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Dialog" }),
|
|
1379
|
+
renderContent()
|
|
1380
|
+
]
|
|
1381
|
+
}
|
|
1382
|
+
)
|
|
1383
|
+
}
|
|
1384
|
+
)
|
|
1385
|
+
}
|
|
1386
|
+
);
|
|
1387
|
+
};
|
|
1388
|
+
const Modal = React.forwardRef(
|
|
1389
|
+
(allProps, ref) => {
|
|
1390
|
+
const { name, children, onFocus, onBlur, onClose, onSuccess, onAfterLeave, ...props } = allProps;
|
|
1391
|
+
const renderChildren = (contentProps) => {
|
|
1392
|
+
if (typeof children === "function") {
|
|
1393
|
+
return children(contentProps);
|
|
1394
|
+
}
|
|
1395
|
+
return children;
|
|
1396
|
+
};
|
|
1397
|
+
const headlessModalRef = React.useRef(null);
|
|
1398
|
+
const cleanupScrollLockRef = React.useRef(null);
|
|
1399
|
+
const cleanupAriaHiddenRef = React.useRef(null);
|
|
1400
|
+
const [rendered, setRendered] = React.useState(false);
|
|
1401
|
+
const useNativeDialog = React.useMemo(() => getConfig("useNativeDialog"), []);
|
|
1402
|
+
React.useImperativeHandle(ref, () => headlessModalRef.current, [headlessModalRef]);
|
|
1403
|
+
React.useEffect(() => {
|
|
1404
|
+
return () => {
|
|
1405
|
+
cleanupScrollLockRef.current?.();
|
|
1406
|
+
cleanupAriaHiddenRef.current?.();
|
|
1407
|
+
};
|
|
1408
|
+
}, []);
|
|
1409
|
+
const handleSuccess = React.useCallback(() => {
|
|
1410
|
+
onSuccess?.();
|
|
1411
|
+
if (!cleanupScrollLockRef.current) {
|
|
1412
|
+
cleanupScrollLockRef.current = vanilla.lockScroll();
|
|
1413
|
+
cleanupAriaHiddenRef.current = vanilla.markAriaHidden(getConfig("appElement"));
|
|
1414
|
+
}
|
|
1415
|
+
}, [onSuccess]);
|
|
1416
|
+
const handleClose = React.useCallback(() => {
|
|
1417
|
+
onClose?.();
|
|
1418
|
+
cleanupScrollLockRef.current?.();
|
|
1419
|
+
cleanupAriaHiddenRef.current?.();
|
|
1420
|
+
cleanupScrollLockRef.current = null;
|
|
1421
|
+
cleanupAriaHiddenRef.current = null;
|
|
1422
|
+
}, [onClose]);
|
|
1423
|
+
const handleAfterLeave = React.useCallback(() => {
|
|
1424
|
+
onAfterLeave?.();
|
|
1425
|
+
}, [onAfterLeave]);
|
|
1426
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1427
|
+
HeadlessModal,
|
|
1428
|
+
{
|
|
1429
|
+
ref: headlessModalRef,
|
|
1430
|
+
name,
|
|
1431
|
+
onFocus: onFocus ?? void 0,
|
|
1432
|
+
onBlur: onBlur ?? void 0,
|
|
1433
|
+
onClose: handleClose,
|
|
1434
|
+
onSuccess: handleSuccess,
|
|
1435
|
+
...props,
|
|
1436
|
+
children: ({
|
|
1437
|
+
afterLeave,
|
|
1438
|
+
close,
|
|
1439
|
+
config,
|
|
1440
|
+
emit,
|
|
1441
|
+
getChildModal,
|
|
1442
|
+
getParentModal,
|
|
1443
|
+
id,
|
|
1444
|
+
index,
|
|
1445
|
+
isOpen,
|
|
1446
|
+
modalContext,
|
|
1447
|
+
onTopOfStack,
|
|
1448
|
+
reload,
|
|
1449
|
+
setOpen,
|
|
1450
|
+
shouldRender,
|
|
1451
|
+
...extraProps
|
|
1452
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(ModalPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1453
|
+
"div",
|
|
1454
|
+
{
|
|
1455
|
+
className: "im-dialog relative z-20",
|
|
1456
|
+
"data-inertiaui-modal-id": id,
|
|
1457
|
+
"data-inertiaui-modal-index": index,
|
|
1458
|
+
"aria-hidden": !onTopOfStack,
|
|
1459
|
+
children: [
|
|
1460
|
+
index === 0 && !useNativeDialog && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1461
|
+
BackdropTransition,
|
|
1462
|
+
{
|
|
1463
|
+
show: isOpen,
|
|
1464
|
+
appear: !rendered,
|
|
1465
|
+
onAfterAppear: () => setRendered(true)
|
|
1466
|
+
}
|
|
1467
|
+
),
|
|
1468
|
+
config.slideover ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1469
|
+
SlideoverContent,
|
|
1470
|
+
{
|
|
1471
|
+
modalContext,
|
|
1472
|
+
config,
|
|
1473
|
+
useNativeDialog,
|
|
1474
|
+
isFirstModal: index === 0,
|
|
1475
|
+
onAfterLeave: handleAfterLeave,
|
|
1476
|
+
children: renderChildren({
|
|
1477
|
+
...extraProps,
|
|
1478
|
+
afterLeave,
|
|
1479
|
+
close,
|
|
1480
|
+
config,
|
|
1481
|
+
emit,
|
|
1482
|
+
getChildModal,
|
|
1483
|
+
getParentModal,
|
|
1484
|
+
id,
|
|
1485
|
+
index,
|
|
1486
|
+
isOpen,
|
|
1487
|
+
modalContext,
|
|
1488
|
+
onTopOfStack,
|
|
1489
|
+
reload,
|
|
1490
|
+
setOpen,
|
|
1491
|
+
shouldRender
|
|
1492
|
+
})
|
|
1493
|
+
}
|
|
1494
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1495
|
+
ModalContent,
|
|
1496
|
+
{
|
|
1497
|
+
modalContext,
|
|
1498
|
+
config,
|
|
1499
|
+
useNativeDialog,
|
|
1500
|
+
isFirstModal: index === 0,
|
|
1501
|
+
onAfterLeave: handleAfterLeave,
|
|
1502
|
+
children: renderChildren({
|
|
1503
|
+
...extraProps,
|
|
1504
|
+
afterLeave,
|
|
1505
|
+
close,
|
|
1506
|
+
config,
|
|
1507
|
+
emit,
|
|
1508
|
+
getChildModal,
|
|
1509
|
+
getParentModal,
|
|
1510
|
+
id,
|
|
1511
|
+
index,
|
|
1512
|
+
isOpen,
|
|
1513
|
+
modalContext,
|
|
1514
|
+
onTopOfStack,
|
|
1515
|
+
reload,
|
|
1516
|
+
setOpen,
|
|
1517
|
+
shouldRender
|
|
1518
|
+
})
|
|
1519
|
+
}
|
|
1520
|
+
)
|
|
1521
|
+
]
|
|
1522
|
+
}
|
|
1523
|
+
) })
|
|
1524
|
+
}
|
|
1525
|
+
);
|
|
1526
|
+
}
|
|
1527
|
+
);
|
|
1528
|
+
function ModalPortal({ children }) {
|
|
1529
|
+
const [mounted, setMounted] = React.useState(false);
|
|
1530
|
+
React.useEffect(() => {
|
|
1531
|
+
setMounted(true);
|
|
1532
|
+
}, []);
|
|
1533
|
+
if (!mounted) return null;
|
|
1534
|
+
return reactDom.createPortal(children, document.body);
|
|
1535
|
+
}
|
|
1536
|
+
function BackdropTransition({ show, appear, onAfterAppear }) {
|
|
1537
|
+
const [state, setState] = React.useState(() => {
|
|
1538
|
+
if (appear && show) return "entering";
|
|
1539
|
+
return show ? "entered" : "exited";
|
|
1540
|
+
});
|
|
1541
|
+
const initialRender = React.useRef(true);
|
|
1542
|
+
const backdropRef = React.useRef(null);
|
|
1543
|
+
React.useEffect(() => {
|
|
1544
|
+
if (initialRender.current) {
|
|
1545
|
+
initialRender.current = false;
|
|
1546
|
+
if (appear && show) {
|
|
1547
|
+
requestAnimationFrame(() => {
|
|
1548
|
+
setState("entered");
|
|
1549
|
+
const backdrop = backdropRef.current;
|
|
1550
|
+
if (backdrop) {
|
|
1551
|
+
const onTransitionEnd = (e) => {
|
|
1552
|
+
if (e.target !== backdrop) return;
|
|
1553
|
+
backdrop.removeEventListener("transitionend", onTransitionEnd);
|
|
1554
|
+
onAfterAppear?.();
|
|
1555
|
+
};
|
|
1556
|
+
backdrop.addEventListener("transitionend", onTransitionEnd);
|
|
1557
|
+
}
|
|
1558
|
+
});
|
|
1559
|
+
}
|
|
1560
|
+
return;
|
|
1561
|
+
}
|
|
1562
|
+
if (show) {
|
|
1563
|
+
setState("entering");
|
|
1564
|
+
requestAnimationFrame(() => {
|
|
1565
|
+
setState("entered");
|
|
1566
|
+
});
|
|
1567
|
+
} else {
|
|
1568
|
+
setState("leaving");
|
|
1569
|
+
const backdrop = backdropRef.current;
|
|
1570
|
+
if (backdrop) {
|
|
1571
|
+
const onTransitionEnd = (e) => {
|
|
1572
|
+
if (e.target !== backdrop) return;
|
|
1573
|
+
backdrop.removeEventListener("transitionend", onTransitionEnd);
|
|
1574
|
+
setState("exited");
|
|
1575
|
+
};
|
|
1576
|
+
backdrop.addEventListener("transitionend", onTransitionEnd);
|
|
1577
|
+
}
|
|
1578
|
+
}
|
|
1579
|
+
}, [show, appear, onAfterAppear]);
|
|
1580
|
+
if (state === "exited") return null;
|
|
1581
|
+
const isVisible = state === "entered";
|
|
1582
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1583
|
+
"div",
|
|
1584
|
+
{
|
|
1585
|
+
ref: backdropRef,
|
|
1586
|
+
className: `im-backdrop fixed inset-0 z-30 bg-black/75 transition-opacity duration-300 ease-in-out ${isVisible ? "opacity-100" : "opacity-0"}`,
|
|
1587
|
+
"aria-hidden": "true"
|
|
1588
|
+
}
|
|
1589
|
+
);
|
|
1590
|
+
}
|
|
1591
|
+
Modal.displayName = "Modal";
|
|
1592
|
+
const ModalLink = ({
|
|
1593
|
+
href,
|
|
1594
|
+
method = "get",
|
|
1595
|
+
data = {},
|
|
1596
|
+
as: Component = "a",
|
|
1597
|
+
headers = {},
|
|
1598
|
+
queryStringArrayFormat = "brackets",
|
|
1599
|
+
onAfterLeave,
|
|
1600
|
+
onBlur,
|
|
1601
|
+
onClose,
|
|
1602
|
+
onError,
|
|
1603
|
+
onFocus,
|
|
1604
|
+
onStart,
|
|
1605
|
+
onSuccess,
|
|
1606
|
+
onPrefetching,
|
|
1607
|
+
onPrefetched,
|
|
1608
|
+
navigate,
|
|
1609
|
+
prefetch: prefetch$1 = false,
|
|
1610
|
+
cacheFor = 3e4,
|
|
1611
|
+
children,
|
|
1612
|
+
...props
|
|
1613
|
+
}) => {
|
|
1614
|
+
const [loading, setLoading] = React.useState(false);
|
|
1615
|
+
const [modalContext, setModalContext] = React.useState(null);
|
|
1616
|
+
const { stack, visit } = useModalStack();
|
|
1617
|
+
const hoverTimeout = React.useRef(null);
|
|
1618
|
+
const shouldNavigate = React.useMemo(() => {
|
|
1619
|
+
return navigate ?? getConfig("navigate");
|
|
1620
|
+
}, [navigate]);
|
|
1621
|
+
const prefetchModes = React.useMemo(() => {
|
|
1622
|
+
if (prefetch$1 === true) {
|
|
1623
|
+
return ["hover"];
|
|
1624
|
+
}
|
|
1625
|
+
if (prefetch$1 === false) {
|
|
1626
|
+
return [];
|
|
1627
|
+
}
|
|
1628
|
+
if (Array.isArray(prefetch$1)) {
|
|
1629
|
+
return prefetch$1;
|
|
1630
|
+
}
|
|
1631
|
+
return [prefetch$1];
|
|
1632
|
+
}, [prefetch$1]);
|
|
1633
|
+
const doPrefetch = React.useCallback(() => {
|
|
1634
|
+
prefetch(href, {
|
|
1635
|
+
method,
|
|
1636
|
+
data,
|
|
1637
|
+
headers,
|
|
1638
|
+
queryStringArrayFormat,
|
|
1639
|
+
cacheFor,
|
|
1640
|
+
onPrefetching: onPrefetching ?? void 0,
|
|
1641
|
+
onPrefetched: onPrefetched ?? void 0
|
|
1642
|
+
});
|
|
1643
|
+
}, [href, method, data, headers, queryStringArrayFormat, cacheFor, onPrefetching, onPrefetched]);
|
|
1644
|
+
const handleMouseEnter = React.useCallback(() => {
|
|
1645
|
+
if (!prefetchModes.includes("hover")) return;
|
|
1646
|
+
hoverTimeout.current = setTimeout(() => {
|
|
1647
|
+
doPrefetch();
|
|
1648
|
+
}, 75);
|
|
1649
|
+
}, [prefetchModes, doPrefetch]);
|
|
1650
|
+
const handleMouseLeave = React.useCallback(() => {
|
|
1651
|
+
if (hoverTimeout.current) {
|
|
1652
|
+
clearTimeout(hoverTimeout.current);
|
|
1653
|
+
hoverTimeout.current = null;
|
|
1654
|
+
}
|
|
1655
|
+
}, []);
|
|
1656
|
+
const handleMouseDown = React.useCallback(
|
|
1657
|
+
(event) => {
|
|
1658
|
+
if (!prefetchModes.includes("click")) return;
|
|
1659
|
+
if (event.button !== 0) return;
|
|
1660
|
+
doPrefetch();
|
|
1661
|
+
},
|
|
1662
|
+
[prefetchModes, doPrefetch]
|
|
1663
|
+
);
|
|
1664
|
+
React.useEffect(() => {
|
|
1665
|
+
if (prefetchModes.includes("mount")) {
|
|
1666
|
+
doPrefetch();
|
|
1667
|
+
}
|
|
1668
|
+
}, []);
|
|
1669
|
+
React.useEffect(() => {
|
|
1670
|
+
return () => {
|
|
1671
|
+
if (hoverTimeout.current) {
|
|
1672
|
+
clearTimeout(hoverTimeout.current);
|
|
1673
|
+
}
|
|
1674
|
+
};
|
|
1675
|
+
}, []);
|
|
1676
|
+
const standardProps = {};
|
|
1677
|
+
const customEvents = {};
|
|
1678
|
+
Object.keys(props).forEach((key) => {
|
|
1679
|
+
if (modalPropNames.includes(key)) {
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
if (key.startsWith("on") && typeof props[key] === "function") {
|
|
1683
|
+
if (vanilla.isStandardDomEvent(key)) {
|
|
1684
|
+
standardProps[key] = props[key];
|
|
1685
|
+
} else {
|
|
1686
|
+
customEvents[key] = props[key];
|
|
1687
|
+
}
|
|
1688
|
+
} else {
|
|
1689
|
+
standardProps[key] = props[key];
|
|
1690
|
+
}
|
|
1691
|
+
});
|
|
1692
|
+
const [isBlurred, setIsBlurred] = React.useState(false);
|
|
1693
|
+
React.useEffect(() => {
|
|
1694
|
+
if (!modalContext) {
|
|
1695
|
+
return;
|
|
1696
|
+
}
|
|
1697
|
+
if (modalContext.onTopOfStack && isBlurred) {
|
|
1698
|
+
onFocus?.();
|
|
1699
|
+
} else if (!modalContext.onTopOfStack && !isBlurred) {
|
|
1700
|
+
onBlur?.();
|
|
1701
|
+
}
|
|
1702
|
+
setIsBlurred(!modalContext.onTopOfStack);
|
|
1703
|
+
}, [stack]);
|
|
1704
|
+
const onCloseCallback = React.useCallback(() => {
|
|
1705
|
+
onClose?.();
|
|
1706
|
+
}, [onClose]);
|
|
1707
|
+
const onAfterLeaveCallback = React.useCallback(() => {
|
|
1708
|
+
setModalContext(null);
|
|
1709
|
+
onAfterLeave?.();
|
|
1710
|
+
}, [onAfterLeave]);
|
|
1711
|
+
const handle = React.useCallback(
|
|
1712
|
+
(e) => {
|
|
1713
|
+
e?.preventDefault();
|
|
1714
|
+
if (loading) return;
|
|
1715
|
+
if (!href.startsWith("#")) {
|
|
1716
|
+
setLoading(true);
|
|
1717
|
+
onStart?.();
|
|
1718
|
+
}
|
|
1719
|
+
visit(
|
|
1720
|
+
href,
|
|
1721
|
+
method,
|
|
1722
|
+
data,
|
|
1723
|
+
headers,
|
|
1724
|
+
vanilla.rejectNullValues(vanilla.only(props, modalPropNames)),
|
|
1725
|
+
() => onCloseCallback(),
|
|
1726
|
+
onAfterLeaveCallback,
|
|
1727
|
+
queryStringArrayFormat,
|
|
1728
|
+
shouldNavigate
|
|
1729
|
+
).then((newModalContext) => {
|
|
1730
|
+
setModalContext(newModalContext);
|
|
1731
|
+
newModalContext.registerEventListenersFromProps(customEvents);
|
|
1732
|
+
onSuccess?.();
|
|
1733
|
+
}).catch((error) => {
|
|
1734
|
+
console.error(error);
|
|
1735
|
+
onError?.(error);
|
|
1736
|
+
}).finally(() => setLoading(false));
|
|
1737
|
+
},
|
|
1738
|
+
[href, method, data, headers, queryStringArrayFormat, props, onCloseCallback, onAfterLeaveCallback]
|
|
1739
|
+
);
|
|
1740
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1741
|
+
Component,
|
|
1742
|
+
{
|
|
1743
|
+
...standardProps,
|
|
1744
|
+
href,
|
|
1745
|
+
onClick: handle,
|
|
1746
|
+
onMouseEnter: handleMouseEnter,
|
|
1747
|
+
onMouseLeave: handleMouseLeave,
|
|
1748
|
+
onMouseDown: handleMouseDown,
|
|
1749
|
+
children: typeof children === "function" ? children({ loading }) : children
|
|
1750
|
+
}
|
|
1751
|
+
);
|
|
1752
|
+
};
|
|
1753
|
+
const WhenVisible = ({ children, data, params, buffer, as, always, fallback }) => {
|
|
1754
|
+
always = always ?? false;
|
|
1755
|
+
as = as ?? "div";
|
|
1756
|
+
fallback = fallback ?? null;
|
|
1757
|
+
const [loaded, setLoaded] = React.useState(false);
|
|
1758
|
+
const hasFetched = React.useRef(false);
|
|
1759
|
+
const fetching = React.useRef(false);
|
|
1760
|
+
const ref = React.useRef(null);
|
|
1761
|
+
const modal = useModal();
|
|
1762
|
+
const getReloadParams = React.useCallback(() => {
|
|
1763
|
+
if (data) {
|
|
1764
|
+
return {
|
|
1765
|
+
only: Array.isArray(data) ? data : [data]
|
|
1766
|
+
};
|
|
1767
|
+
}
|
|
1768
|
+
if (!params) {
|
|
1769
|
+
throw new Error("You must provide either a `data` or `params` prop.");
|
|
1770
|
+
}
|
|
1771
|
+
return params;
|
|
1772
|
+
}, [params, data]);
|
|
1773
|
+
React.useEffect(() => {
|
|
1774
|
+
if (!ref.current) {
|
|
1775
|
+
return;
|
|
1776
|
+
}
|
|
1777
|
+
const observer = new IntersectionObserver(
|
|
1778
|
+
(entries) => {
|
|
1779
|
+
if (!entries[0].isIntersecting) {
|
|
1780
|
+
return;
|
|
1781
|
+
}
|
|
1782
|
+
if (!always && hasFetched.current) {
|
|
1783
|
+
observer.disconnect();
|
|
1784
|
+
}
|
|
1785
|
+
if (fetching.current) {
|
|
1786
|
+
return;
|
|
1787
|
+
}
|
|
1788
|
+
hasFetched.current = true;
|
|
1789
|
+
fetching.current = true;
|
|
1790
|
+
const reloadParams = getReloadParams();
|
|
1791
|
+
modal?.reload({
|
|
1792
|
+
...reloadParams,
|
|
1793
|
+
onStart: () => {
|
|
1794
|
+
fetching.current = true;
|
|
1795
|
+
reloadParams.onStart?.();
|
|
1796
|
+
},
|
|
1797
|
+
onFinish: () => {
|
|
1798
|
+
setLoaded(true);
|
|
1799
|
+
fetching.current = false;
|
|
1800
|
+
reloadParams.onFinish?.();
|
|
1801
|
+
if (!always) {
|
|
1802
|
+
observer.disconnect();
|
|
1803
|
+
}
|
|
1804
|
+
}
|
|
1805
|
+
});
|
|
1806
|
+
},
|
|
1807
|
+
{
|
|
1808
|
+
rootMargin: `${buffer || 0}px`
|
|
1809
|
+
}
|
|
1810
|
+
);
|
|
1811
|
+
observer.observe(ref.current);
|
|
1812
|
+
return () => {
|
|
1813
|
+
observer.disconnect();
|
|
1814
|
+
};
|
|
1815
|
+
}, [ref, getReloadParams, buffer]);
|
|
1816
|
+
if (always || !loaded) {
|
|
1817
|
+
return React.createElement(
|
|
1818
|
+
as,
|
|
1819
|
+
{
|
|
1820
|
+
props: null,
|
|
1821
|
+
ref
|
|
1822
|
+
},
|
|
1823
|
+
loaded ? children : fallback
|
|
1824
|
+
);
|
|
1825
|
+
}
|
|
1826
|
+
return loaded ? children : null;
|
|
1827
|
+
};
|
|
1828
|
+
WhenVisible.displayName = "InertiaWhenVisible";
|
|
1829
|
+
const setPageLayout = (layout) => (module2) => {
|
|
1830
|
+
module2.default.layout = (page) => React.createElement(layout, { children: page });
|
|
1831
|
+
return module2;
|
|
1832
|
+
};
|
|
1833
|
+
exports2.dialogUtils = vanilla__namespace;
|
|
1834
|
+
exports2.Deferred = Deferred;
|
|
1835
|
+
exports2.HeadlessModal = HeadlessModal;
|
|
1836
|
+
exports2.Modal = Modal;
|
|
1837
|
+
exports2.ModalLink = ModalLink;
|
|
1838
|
+
exports2.ModalRoot = ModalRoot;
|
|
1839
|
+
exports2.ModalStackProvider = ModalStackProvider;
|
|
1840
|
+
exports2.WhenVisible = WhenVisible;
|
|
1841
|
+
exports2.getConfig = getConfig;
|
|
1842
|
+
exports2.initFromPageProps = initFromPageProps;
|
|
1843
|
+
exports2.modalPropNames = modalPropNames;
|
|
1844
|
+
exports2.prefetch = prefetch;
|
|
1845
|
+
exports2.putConfig = putConfig;
|
|
1846
|
+
exports2.renderApp = renderApp;
|
|
1847
|
+
exports2.resetConfig = resetConfig;
|
|
1848
|
+
exports2.setPageLayout = setPageLayout;
|
|
1849
|
+
exports2.useModal = useModal;
|
|
1850
|
+
exports2.useModalIndex = useModalIndex;
|
|
1851
|
+
exports2.useModalStack = useModalStack;
|
|
1852
|
+
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
|
|
1853
|
+
}));
|
|
1854
|
+
//# sourceMappingURL=inertiaui-modal.umd.cjs.map
|