@stanfordspezi/spezi-web-design-system/dist/Dialog-DALBkrQm.js

Stanford Biodesign Digital Health Spezi Web Design System

"use strict";const s=require("react/jsx-runtime"),D=require("./index-DwV9MiDB.js"),K=require("./utils/tailwind.cjs"),U=require("./x-Wmdptsoi.js"),X=require("react"),g=require("./index-CLdeiAAB.js"),C=require("./index-UhBwhhTY.js"),h=require("./index-Bqh8zfKH.js"),Y=require("./index-vkqCyWtx.js"),x=require("./index-oKsk7EpR.js"),y=require("./index-DM1mqyG5.js"),m=require("./index-14SsMENa.js");function Z(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const i=Z(X);var _="Dialog",[E,ye]=g.createContextScope(_),[J,u]=E(_),O=e=>{const{__scopeDialog:t,children:o,open:r,defaultOpen:a,onOpenChange:n,modal:c=!0}=e,l=i.useRef(null),d=i.useRef(null),[p=!1,R]=g.useControllableState({prop:r,defaultProp:a,onChange:n});return s.jsx(J,{scope:t,triggerRef:l,contentRef:d,contentId:h.useId(),titleId:h.useId(),descriptionId:h.useId(),open:p,onOpenChange:R,onOpenToggle:i.useCallback(()=>R(V=>!V),[R]),modal:c,children:o})};O.displayName=_;var b="DialogTrigger",I=i.forwardRef((e,t)=>{const{__scopeDialog:o,...r}=e,a=u(b,o),n=C.useComposedRefs(t,a.triggerRef);return s.jsx(m.Primitive.button,{type:"button","aria-haspopup":"dialog","aria-expanded":a.open,"aria-controls":a.contentId,"data-state":j(a.open),...r,ref:n,onClick:g.composeEventHandlers(e.onClick,a.onOpenToggle)})});I.displayName=b;var N="DialogPortal",[Q,T]=E(N,{forceMount:void 0}),A=e=>{const{__scopeDialog:t,forceMount:o,children:r,container:a}=e,n=u(N,t);return s.jsx(Q,{scope:t,forceMount:o,children:i.Children.map(r,c=>s.jsx(y.Presence,{present:o||n.open,children:s.jsx(x.Portal,{asChild:!0,container:a,children:c})}))})};A.displayName=N;var v="DialogOverlay",M=i.forwardRef((e,t)=>{const o=T(v,e.__scopeDialog),{forceMount:r=o.forceMount,...a}=e,n=u(v,e.__scopeDialog);return n.modal?s.jsx(y.Presence,{present:r||n.open,children:s.jsx(te,{...a,ref:t})}):null});M.displayName=v;var ee=C.createSlot("DialogOverlay.RemoveScroll"),te=i.forwardRef((e,t)=>{const{__scopeDialog:o,...r}=e,a=u(v,o);return s.jsx(x.ReactRemoveScroll,{as:ee,allowPinchZoom:!0,shards:[a.contentRef],children:s.jsx(m.Primitive.div,{"data-state":j(a.open),...r,ref:t,style:{pointerEvents:"auto",...r.style}})})}),f="DialogContent",w=i.forwardRef((e,t)=>{const o=T(f,e.__scopeDialog),{forceMount:r=o.forceMount,...a}=e,n=u(f,e.__scopeDialog);return s.jsx(y.Presence,{present:r||n.open,children:n.modal?s.jsx(oe,{...a,ref:t}):s.jsx(ne,{...a,ref:t})})});w.displayName=f;var oe=i.forwardRef((e,t)=>{const o=u(f,e.__scopeDialog),r=i.useRef(null),a=C.useComposedRefs(t,o.contentRef,r);return i.useEffect(()=>{const n=r.current;if(n)return x.hideOthers(n)},[]),s.jsx(F,{...e,ref:a,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:g.composeEventHandlers(e.onCloseAutoFocus,n=>{var c;n.preventDefault(),(c=o.triggerRef.current)==null||c.focus()}),onPointerDownOutside:g.composeEventHandlers(e.onPointerDownOutside,n=>{const c=n.detail.originalEvent,l=c.button===0&&c.ctrlKey===!0;(c.button===2||l)&&n.preventDefault()}),onFocusOutside:g.composeEventHandlers(e.onFocusOutside,n=>n.preventDefault())})}),ne=i.forwardRef((e,t)=>{const o=u(f,e.__scopeDialog),r=i.useRef(!1),a=i.useRef(!1);return s.jsx(F,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var c,l;(c=e.onCloseAutoFocus)==null||c.call(e,n),n.defaultPrevented||(r.current||(l=o.triggerRef.current)==null||l.focus(),n.preventDefault()),r.current=!1,a.current=!1},onInteractOutside:n=>{var d,p;(d=e.onInteractOutside)==null||d.call(e,n),n.defaultPrevented||(r.current=!0,n.detail.originalEvent.type==="pointerdown"&&(a.current=!0));const c=n.target;((p=o.triggerRef.current)==null?void 0:p.contains(c))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&a.current&&n.preventDefault()}})}),F=i.forwardRef((e,t)=>{const{__scopeDialog:o,trapFocus:r,onOpenAutoFocus:a,onCloseAutoFocus:n,...c}=e,l=u(f,o),d=i.useRef(null),p=C.useComposedRefs(t,d);return x.useFocusGuards(),s.jsxs(s.Fragment,{children:[s.jsx(x.FocusScope,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:a,onUnmountAutoFocus:n,children:s.jsx(Y.DismissableLayer,{role:"dialog",id:l.contentId,"aria-describedby":l.descriptionId,"aria-labelledby":l.titleId,"data-state":j(l.open),...c,ref:p,onDismiss:()=>l.onOpenChange(!1)})}),s.jsxs(s.Fragment,{children:[s.jsx(re,{titleId:l.titleId}),s.jsx(ae,{contentRef:d,descriptionId:l.descriptionId})]})]})}),P="DialogTitle",S=i.forwardRef((e,t)=>{const{__scopeDialog:o,...r}=e,a=u(P,o);return s.jsx(m.Primitive.h2,{id:a.titleId,...r,ref:t})});S.displayName=P;var $="DialogDescription",q=i.forwardRef((e,t)=>{const{__scopeDialog:o,...r}=e,a=u($,o);return s.jsx(m.Primitive.p,{id:a.descriptionId,...r,ref:t})});q.displayName=$;var W="DialogClose",k=i.forwardRef((e,t)=>{const{__scopeDialog:o,...r}=e,a=u(W,o);return s.jsx(m.Primitive.button,{type:"button",...r,ref:t,onClick:g.composeEventHandlers(e.onClick,()=>a.onOpenChange(!1))})});k.displayName=W;function j(e){return e?"open":"closed"}var G="DialogTitleWarning",[_e,H]=g.createContext2(G,{contentName:f,titleName:P,docsSlug:"dialog"}),re=({titleId:e})=>{const t=H(G),o=`\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.

If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.

For more information, see https://radix-ui.com/primitives/docs/components/${t.docsSlug}`;return i.useEffect(()=>{e&&(document.getElementById(e)||console.error(o))},[o,e]),null},se="DialogDescriptionWarning",ae=({contentRef:e,descriptionId:t})=>{const r=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${H(se).contentName}}.`;return i.useEffect(()=>{var n;const a=(n=e.current)==null?void 0:n.getAttribute("aria-describedby");t&&a&&(document.getElementById(t)||console.warn(r))},[r,e,t]),null},ie=O,ce=I,le=A,ue=M,de=w,ge=S,fe=q,L=k;const pe=ie,De=ce,z=le,xe=L,B=({className:e,...t})=>s.jsx(ue,{className:D.cn("animate-entrance-fade fixed inset-0 z-50 bg-black/20",e),...t}),me=({className:e,children:t,size:o="lg",...r})=>s.jsxs(z,{children:[s.jsx(B,{}),s.jsxs(de,{className:D.cn("animate-entrance-fade-zoom bg-surface fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg",o&&K.sizeToMaxWidthRecord[o],e),...r,children:[t,s.jsxs(L,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[s.jsx(U.X,{className:"size-4"}),s.jsx("span",{className:"sr-only",children:"Close"})]})]})]}),ve=({className:e,...t})=>s.jsx("div",{className:D.cn("flex flex-col space-y-1.5 text-center sm:text-left",e),...t}),Ce=({className:e,...t})=>s.jsx("div",{className:D.cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t}),Re=({className:e,...t})=>s.jsx(ge,{className:D.cn("text-lg font-semibold",e),...t}),he=({className:e,...t})=>s.jsx(fe,{className:D.cn("text-muted-foreground text-sm",e),...t});exports.Dialog=pe;exports.DialogClose=xe;exports.DialogContent=me;exports.DialogDescription=he;exports.DialogFooter=Ce;exports.DialogHeader=ve;exports.DialogOverlay=B;exports.DialogPortal=z;exports.DialogTitle=Re;exports.DialogTrigger=De;