2 lines
6.7 KiB
JavaScript
2 lines
6.7 KiB
JavaScript
import u,{createContext as ce,createRef as De,useCallback as j,useContext as K,useEffect as w,useMemo as y,useReducer as me,useRef as Pe,useState as ye}from"react";import{match as B}from'../../utils/match.js';import{forwardRefWithAs as E,render as A,Features as V}from'../../utils/render.js';import{useSyncRefs as R}from'../../hooks/use-sync-refs.js';import{Keys as Ee}from'../keyboard.js';import{isDisabledReactIssue7711 as Ae}from'../../utils/bugs.js';import{useId as C}from'../../hooks/use-id.js';import{FocusTrap as v}from'../../components/focus-trap/focus-trap.js';import{Portal as H,useNestedPortals as Re}from'../../components/portal/portal.js';import{ForcePortalRoot as G}from'../../internal/portal-force-root.js';import{Description as Ce,useDescriptions as ve}from'../description/description.js';import{useOpenClosed as Oe,State as _}from'../../internal/open-closed.js';import{useServerHandoffComplete as be}from'../../hooks/use-server-handoff-complete.js';import{StackProvider as he,StackMessage as q}from'../../internal/stack-context.js';import{useOutsideClick as Se}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Le}from'../../hooks/use-owner.js';import{useEventListener as Fe}from'../../hooks/use-event-listener.js';import{useEvent as O}from'../../hooks/use-event.js';import{useDocumentOverflowLockedEffect as ke}from'../../hooks/document-overflow/use-document-overflow.js';import{useInert as z}from'../../hooks/use-inert.js';import{useRootContainers as xe}from'../../hooks/use-root-containers.js';var _e=(o=>(o[o.Open=0]="Open",o[o.Closed=1]="Closed",o))(_e||{}),Ie=(e=>(e[e.SetTitleId=0]="SetTitleId",e))(Ie||{});let Me={[0](t,e){return t.titleId===e.id?t:{...t,titleId:e.id}}},I=ce(null);I.displayName="DialogContext";function b(t){let e=K(I);if(e===null){let o=new Error(`<${t} /> is missing a parent <Dialog /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,b),o}return e}function we(t,e,o=()=>[document.body]){ke(t,e,i=>{var n;return{containers:[...(n=i.containers)!=null?n:[],o]}})}function Be(t,e){return B(e.type,Me,t,e)}let He="div",Ge=V.RenderStrategy|V.Static;function Ne(t,e){var X;let o=C(),{id:i=`headlessui-dialog-${o}`,open:n,onClose:l,initialFocus:s,__demoMode:g=!1,...T}=t,[m,h]=ye(0),a=Oe();n===void 0&&a!==null&&(n=(a&_.Open)===_.Open);let D=Pe(null),Q=R(D,e),f=Le(D),N=t.hasOwnProperty("open")||a!==null,U=t.hasOwnProperty("onClose");if(!N&&!U)throw new Error("You have to provide an `open` and an `onClose` prop to the `Dialog` component.");if(!N)throw new Error("You provided an `onClose` prop to the `Dialog`, but forgot an `open` prop.");if(!U)throw new Error("You provided an `open` prop to the `Dialog`, but forgot an `onClose` prop.");if(typeof n!="boolean")throw new Error(`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${n}`);if(typeof l!="function")throw new Error(`You provided an \`onClose\` prop to the \`Dialog\`, but the value is not a function. Received: ${l}`);let p=n?0:1,[S,Z]=me(Be,{titleId:null,descriptionId:null,panelRef:De()}),P=O(()=>l(!1)),W=O(r=>Z({type:0,id:r})),L=be()?g?!1:p===0:!1,F=m>1,Y=K(I)!==null,[ee,te]=Re(),{resolveContainers:M,mainTreeNodeRef:k,MainTreeNode:oe}=xe({portals:ee,defaultContainers:[(X=S.panelRef.current)!=null?X:D.current]}),re=F?"parent":"leaf",$=a!==null?(a&_.Closing)===_.Closing:!1,ne=(()=>Y||$?!1:L)(),le=j(()=>{var r,c;return(c=Array.from((r=f==null?void 0:f.querySelectorAll("body > *"))!=null?r:[]).find(d=>d.id==="headlessui-portal-root"?!1:d.contains(k.current)&&d instanceof HTMLElement))!=null?c:null},[k]);z(le,ne);let ae=(()=>F?!0:L)(),ie=j(()=>{var r,c;return(c=Array.from((r=f==null?void 0:f.querySelectorAll("[data-headlessui-portal]"))!=null?r:[]).find(d=>d.contains(k.current)&&d instanceof HTMLElement))!=null?c:null},[k]);z(ie,ae);let se=(()=>!(!L||F))();Se(M,P,se);let pe=(()=>!(F||p!==0))();Fe(f==null?void 0:f.defaultView,"keydown",r=>{pe&&(r.defaultPrevented||r.key===Ee.Escape&&(r.preventDefault(),r.stopPropagation(),P()))});let de=(()=>!($||p!==0||Y))();we(f,de,M),w(()=>{if(p!==0||!D.current)return;let r=new ResizeObserver(c=>{for(let d of c){let x=d.target.getBoundingClientRect();x.x===0&&x.y===0&&x.width===0&&x.height===0&&P()}});return r.observe(D.current),()=>r.disconnect()},[p,D,P]);let[ue,fe]=ve(),ge=y(()=>[{dialogState:p,close:P,setTitleId:W},S],[p,S,P,W]),J=y(()=>({open:p===0}),[p]),Te={ref:Q,id:i,role:"dialog","aria-modal":p===0?!0:void 0,"aria-labelledby":S.titleId,"aria-describedby":ue};return u.createElement(he,{type:"Dialog",enabled:p===0,element:D,onUpdate:O((r,c)=>{c==="Dialog"&&B(r,{[q.Add]:()=>h(d=>d+1),[q.Remove]:()=>h(d=>d-1)})})},u.createElement(G,{force:!0},u.createElement(H,null,u.createElement(I.Provider,{value:ge},u.createElement(H.Group,{target:D},u.createElement(G,{force:!1},u.createElement(fe,{slot:J,name:"Dialog.Description"},u.createElement(v,{initialFocus:s,containers:M,features:L?B(re,{parent:v.features.RestoreFocus,leaf:v.features.All&~v.features.FocusLock}):v.features.None},u.createElement(te,null,A({ourProps:Te,theirProps:T,slot:J,defaultTag:He,features:Ge,visible:p===0,name:"Dialog"}))))))))),u.createElement(oe,null))}let Ue="div";function We(t,e){let o=C(),{id:i=`headlessui-dialog-overlay-${o}`,...n}=t,[{dialogState:l,close:s}]=b("Dialog.Overlay"),g=R(e),T=O(a=>{if(a.target===a.currentTarget){if(Ae(a.currentTarget))return a.preventDefault();a.preventDefault(),a.stopPropagation(),s()}}),m=y(()=>({open:l===0}),[l]);return A({ourProps:{ref:g,id:i,"aria-hidden":!0,onClick:T},theirProps:n,slot:m,defaultTag:Ue,name:"Dialog.Overlay"})}let Ye="div";function $e(t,e){let o=C(),{id:i=`headlessui-dialog-backdrop-${o}`,...n}=t,[{dialogState:l},s]=b("Dialog.Backdrop"),g=R(e);w(()=>{if(s.panelRef.current===null)throw new Error("A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.")},[s.panelRef]);let T=y(()=>({open:l===0}),[l]);return u.createElement(G,{force:!0},u.createElement(H,null,A({ourProps:{ref:g,id:i,"aria-hidden":!0},theirProps:n,slot:T,defaultTag:Ye,name:"Dialog.Backdrop"})))}let Je="div";function Xe(t,e){let o=C(),{id:i=`headlessui-dialog-panel-${o}`,...n}=t,[{dialogState:l},s]=b("Dialog.Panel"),g=R(e,s.panelRef),T=y(()=>({open:l===0}),[l]),m=O(a=>{a.stopPropagation()});return A({ourProps:{ref:g,id:i,onClick:m},theirProps:n,slot:T,defaultTag:Je,name:"Dialog.Panel"})}let je="h2";function Ke(t,e){let o=C(),{id:i=`headlessui-dialog-title-${o}`,...n}=t,[{dialogState:l,setTitleId:s}]=b("Dialog.Title"),g=R(e);w(()=>(s(i),()=>s(null)),[i,s]);let T=y(()=>({open:l===0}),[l]);return A({ourProps:{ref:g,id:i},theirProps:n,slot:T,defaultTag:je,name:"Dialog.Title"})}let Ve=E(Ne),qe=E($e),ze=E(Xe),Qe=E(We),Ze=E(Ke),_t=Object.assign(Ve,{Backdrop:qe,Panel:ze,Overlay:Qe,Title:Ze,Description:Ce});export{_t as Dialog};
|