@tamagui/dialog 1.14.1 → 1.14.2

package/dist/jsx/Dialog.mjs

@@ -1,6 +1,561 @@
-import{Adapt as Pe,useAdaptParent as Ce}from"@tamagui/adapt";import{AnimatePresence as Se}from"@tamagui/animate-presence";import{hideOthers as ye}from"@tamagui/aria-hidden";import{useComposedRefs as b}from"@tamagui/compose-refs";import{Theme as Te,composeEventHandlers as D,isWeb as m,spacedChildren as Ee,styled as f,useGet as Oe,useId as v,useMedia as ve,useThemeName as Ne,withStaticProperties as Re}from"@tamagui/core";import{createContext as xe,createContextScope as Ie}from"@tamagui/create-context";import{Dismissable as Fe}from"@tamagui/dismissable";import{FocusScope as Ae}from"@tamagui/focus-scope";import{PortalHost as G,PortalItem as _e}from"@tamagui/portal";import{RemoveScroll as Me}from"@tamagui/remove-scroll";import{ControlledSheet as ke,SheetController as We,SheetOverlayFrame as Ve}from"@tamagui/sheet";import{ThemeableStack as He,YStack as F}from"@tamagui/stacks";import{H2 as Le,Paragraph as Ge}from"@tamagui/text";import{useControllableState as Be}from"@tamagui/use-controllable-state";import*as i from"react";const B="Dialog",[Y,Ye]=Ie(B),[Z,u]=Y(B),A="DialogTrigger",Ze=f(F,{name:A}),w=i.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,a=u(A,n),s=b(o,a.triggerRef);return<Ze tag="button"aria-haspopup="dialog"aria-expanded={a.open}aria-controls={a.contentId}data-state={L(a.open)}{...t}ref={s}onPress={D(e.onPress,a.onOpenToggle)}/>});w.displayName=A;const N="DialogPortal",[$e,$]=Y(N,{forceMount:void 0}),Ke=f(F,{alignItems:"center",justifyContent:"center",fullscreen:!0,zIndex:100,...m&&{maxHeight:"100vh",position:"fixed"}}),K=e=>{const o=Ne(),n=u(N,e.__scopeDialog);return<_e hostName={e.hostName}><Ue{...e}themeName={o}context={n}/></_e>};function Ue(e){const{__scopeDialog:o,children:n,context:t,themeName:a,space:s,spaceDirection:r,separator:l}=e;let p=n;return(s||l)&&(p=Ee({children:n,separator:l,space:s,direction:r})),<Z scope={o}{...t}><Te name={a}>{p}</Te></Z>}const _=e=>{const{__scopeDialog:o,forceMount:n,children:t,...a}=e,s=u(N,o),r=n||s.open,[l,p]=i.useState(!r);r&&l&&p(!1);const g=<Se onExitComplete={()=>{p(!0)}}>{r?t:null}</Se>;return C(s)?t:s.modal?l?null:<K __scopeDialog={o}><$e scope={o}forceMount={n}><Ke pointerEvents={r?"auto":"none"}{...a}>{g}</Ke></$e></K>:g};_.displayName=N;const R="DialogOverlay",U=f(Ve,{name:R}),M=U.extractable(i.forwardRef(({__scopeDialog:e,...o},n)=>{const t=$(R,e),{forceMount:a=t.forceMount,...s}=o,r=u(R,e),l=C(r);return!a&&(!r.modal||l)?null:<Je context={r}{...s}ref={n}/>}));M.displayName=R;const Je=i.forwardRef((e,o)=>{const{context:n,...t}=e;return<U data-state={L(n.open)}pointerEvents={n.open?"auto":"none"}{...t}ref={o}/>}),P="DialogContent",J=f(He,{name:P,tag:"dialog",position:"relative",backgrounded:!0,padded:!0,radiused:!0,elevate:!0,variants:{size:{"...size":(e,o)=>({})}},defaultVariants:{size:"$true"}}),k=J.extractable(i.forwardRef(({__scopeDialog:e,...o},n)=>{const t=$(P,e),{forceMount:a=t.forceMount,...s}=o,r=u(P,e),l=r.modal?<Qe context={r}{...s}ref={n}/>:<Xe context={r}{...s}ref={n}/>;return m?<Me forwardProps enabled={r.open}allowPinchZoom={r.allowPinchZoom}shards={[r.contentRef]}removeScrollBar={!1}><div className="_dsp_contents">{l}</div></Me>:l}));k.displayName=P;const Qe=i.forwardRef(({children:e,context:o,...n},t)=>{const a=i.useRef(null),s=b(t,o.contentRef,a);return m&&i.useEffect(()=>{if(!o.open)return;const r=a.current;if(r)return ye(r)},[o.open]),<Q{...n}context={o}ref={s}disableOutsidePointerEvents onCloseAutoFocus={D(n.onCloseAutoFocus,r=>{r.preventDefault(),o.triggerRef.current?.focus()})}onPointerDownOutside={D(n.onPointerDownOutside,r=>{const l=r.detail.originalEvent,p=l.button===0&&l.ctrlKey===!0;(l.button===2||p)&&r.preventDefault()})}onFocusOutside={D(n.onFocusOutside,r=>r.preventDefault())}>{e}</Q>}),Xe=i.forwardRef((e,o)=>{const n=i.useRef(!1);return<Q{...e}ref={o}trapFocus={!1}disableOutsidePointerEvents={!1}onCloseAutoFocus={t=>{e.onCloseAutoFocus?.(t),t.defaultPrevented||(n.current||e.context.triggerRef.current?.focus(),t.preventDefault()),n.current=!1}}onInteractOutside={t=>{e.onInteractOutside?.(t),t.defaultPrevented||(n.current=!0);const a=t.target,s=e.context.triggerRef.current;if(!(s instanceof HTMLElement))return;s.contains(a)&&t.preventDefault()}}/>}),Q=i.forwardRef((e,o)=>{const{__scopeDialog:n,trapFocus:t,onOpenAutoFocus:a,onCloseAutoFocus:s,disableOutsidePointerEvents:r,onEscapeKeyDown:l,onPointerDownOutside:p,onFocusOutside:g,onInteractOutside:h,context:c,...S}=e,y=i.useRef(null),T=b(o,y),E=C(c),O=<J id={c.contentId}aria-describedby={c.descriptionId}aria-labelledby={c.titleId}data-state={L(c.open)}{...S}/>;return E?<K hostName={ne(c)}>{S.children}</K>:m?<><Ae loop trapped={t}onMountAutoFocus={a}forceUnmount={!c.open}onUnmountAutoFocus={s}><Fe disableOutsidePointerEvents={c.open&&r}forceUnmount={!c.open}onEscapeKeyDown={l}onPointerDownOutside={p}onFocusOutside={g}onInteractOutside={h}ref={T}onDismiss={()=>c.onOpenChange(!1)}>{O}</Fe></Ae>{process.env.NODE_ENV==="development"&&<><So titleId={c.titleId}/><To contentRef={y}descriptionId={c.descriptionId}/></>}</>:O}),x="DialogTitle",Do=f(Le,{name:x}),W=i.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,a=u(x,n);return<Do id={a.titleId}{...t}ref={o}/>});W.displayName=x;const Po=f(Ge,{name:"DialogDescription"}),X="DialogDescription",V=i.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,a=u(X,n);return<Po id={a.descriptionId}{...t}ref={o}/>});V.displayName=X;const ee="DialogClose",H=i.forwardRef((e,o)=>{const{__scopeDialog:n,displayWhenAdapted:t,...a}=e,s=u(ee,n,{warn:!1,fallback:{}});return C(s)&&!t?null:<F tag="button"accessibilityLabel="Dialog Close"{...a}ref={o}onPress={D(e.onPress,()=>s.onOpenChange(!1))}/>});H.displayName=ee;function L(e){return e?"open":"closed"}const oe="DialogTitleWarning",[Co,te]=xe(oe,{contentName:P,titleName:x,docsSlug:"dialog"}),So=({titleId:e})=>{if(process.env.NODE_ENV==="development"){const o=te(oe),n=`\`${o.contentName}\` requires a \`${o.titleName}\` for the component to be accessible for screen reader users.
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  Theme,
+  composeEventHandlers,
+  isWeb,
+  spacedChildren,
+  styled,
+  useGet,
+  useId,
+  useMedia,
+  useThemeName,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContext, createContextScope } from "@tamagui/create-context";
+import { Dismissable } from "@tamagui/dismissable";
+import { FocusScope } from "@tamagui/focus-scope";
+import { PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { ControlledSheet, SheetController, SheetOverlayFrame } from "@tamagui/sheet";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import { H2, Paragraph } from "@tamagui/text";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+const DIALOG_NAME = "Dialog";
+const [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
+const TRIGGER_NAME = "DialogTrigger";
+const DialogTriggerFrame = styled(YStack, {
+  name: TRIGGER_NAME
+});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return <DialogTriggerFrame
+      tag="button"
+      aria-haspopup="dialog"
+      aria-expanded={context.open}
+      aria-controls={context.contentId}
+      data-state={getState(context.open)}
+      {...triggerProps}
+      ref={composedTriggerRef}
+      onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
+    />;
+  }
+);
+DialogTrigger.displayName = TRIGGER_NAME;
+const PORTAL_NAME = "DialogPortal";
+const [PortalProvider, usePortalContext] = createDialogContext(
+  PORTAL_NAME,
+  {
+    forceMount: void 0
+  }
+);
+const DialogPortalFrame = styled(YStack, {
+  alignItems: "center",
+  justifyContent: "center",
+  fullscreen: true,
+  zIndex: 100,
+  ...isWeb && {
+    maxHeight: "100vh",
+    position: "fixed"
+  }
+});
+const DialogPortalItem = (props) => {
+  const themeName = useThemeName();
+  const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
+  return <PortalItem hostName={props.hostName}><DialogPortalItemContent {...props} themeName={themeName} context={context} /></PortalItem>;
+};
+function DialogPortalItemContent(props) {
+  const {
+    __scopeDialog,
+    children,
+    context,
+    themeName,
+    space,
+    spaceDirection,
+    separator
+  } = props;
+  let childrenSpaced = children;
+  if (space || separator) {
+    childrenSpaced = spacedChildren({
+      children,
+      separator,
+      space,
+      direction: spaceDirection
+    });
+  }
+  return <DialogProvider scope={__scopeDialog} {...context}><Theme name={themeName}>{childrenSpaced}</Theme></DialogProvider>;
+}
+const DialogPortal = (props) => {
+  const { __scopeDialog, forceMount, children, ...frameProps } = props;
+  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+  const isShowing = forceMount || context.open;
+  const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
+  if (isShowing && isFullyHidden) {
+    setIsFullyHidden(false);
+  }
+  const contents = <AnimatePresence
+    onExitComplete={() => {
+      setIsFullyHidden(true);
+    }}
+  >{isShowing ? children : null}</AnimatePresence>;
+  const isSheet = useShowDialogSheet(context);
+  if (isSheet) {
+    return children;
+  }
+  if (context.modal) {
+    if (isFullyHidden) {
+      return null;
+    }
+    return <DialogPortalItem __scopeDialog={__scopeDialog}><PortalProvider scope={__scopeDialog} forceMount={forceMount}><DialogPortalFrame pointerEvents={isShowing ? "auto" : "none"} {...frameProps}>{contents}</DialogPortalFrame></PortalProvider></DialogPortalItem>;
+  }
+  return contents;
+};
+DialogPortal.displayName = PORTAL_NAME;
+const OVERLAY_NAME = "DialogOverlay";
+const DialogOverlayFrame = styled(SheetOverlayFrame, {
+  name: OVERLAY_NAME
+});
+const DialogOverlay = DialogOverlayFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+      const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+      const showSheet = useShowDialogSheet(context);
+      if (!forceMount) {
+        if (!context.modal || showSheet) {
+          return null;
+        }
+      }
+      return <DialogOverlayImpl context={context} {...overlayProps} ref={forwardedRef} />;
+    }
+  )
+);
+DialogOverlay.displayName = OVERLAY_NAME;
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      <DialogOverlayFrame
+        data-state={getState(context.open)}
+        pointerEvents={context.open ? "auto" : "none"}
+        {...overlayProps}
+        ref={forwardedRef}
+      />
+    );
+  }
+);
+const CONTENT_NAME = "DialogContent";
+const DialogContentFrame = styled(ThemeableStack, {
+  name: CONTENT_NAME,
+  tag: "dialog",
+  position: "relative",
+  backgrounded: true,
+  padded: true,
+  radiused: true,
+  elevate: true,
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        return {};
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$true"
+  }
+});
+const DialogContent = DialogContentFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...contentProps } = props;
+      const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+      const contents = context.modal ? <DialogContentModal context={context} {...contentProps} ref={forwardedRef} /> : <DialogContentNonModal context={context} {...contentProps} ref={forwardedRef} />;
+      if (!isWeb) {
+        return contents;
+      }
+      return <RemoveScroll
+        forwardProps
+        enabled={context.open}
+        allowPinchZoom={context.allowPinchZoom}
+        shards={[context.contentRef]}
+        removeScrollBar={false}
+      ><div className="_dsp_contents">{contents}</div></RemoveScroll>;
+    }
+  )
+);
+DialogContent.displayName = CONTENT_NAME;
+const DialogContentModal = React.forwardRef(
+  ({ children, context, ...props }, forwardedRef) => {
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    if (isWeb) {
+      React.useEffect(() => {
+        if (!context.open)
+          return;
+        const content = contentRef.current;
+        if (content)
+          return hideOthers(content);
+      }, [context.open]);
+    }
+    return <DialogContentImpl
+      {...props}
+      context={context}
+      ref={composedRefs}
+      disableOutsidePointerEvents
+      onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
+        event.preventDefault();
+        context.triggerRef.current?.focus();
+      })}
+      onPointerDownOutside={composeEventHandlers(
+        props.onPointerDownOutside,
+        (event) => {
+          const originalEvent = event["detail"].originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (isRightClick)
+            event.preventDefault();
+        }
+      )}
+      onFocusOutside={composeEventHandlers(
+        props.onFocusOutside,
+        (event) => event.preventDefault()
+      )}
+    >{children}</DialogContentImpl>;
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return <DialogContentImpl
+      {...props}
+      ref={forwardedRef}
+      trapFocus={false}
+      disableOutsidePointerEvents={false}
+      onCloseAutoFocus={(event) => {
+        props.onCloseAutoFocus?.(event);
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef.current) {
+            props.context.triggerRef.current?.focus();
+          }
+          event.preventDefault();
+        }
+        hasInteractedOutsideRef.current = false;
+      }}
+      onInteractOutside={(event) => {
+        props.onInteractOutside?.(event);
+        if (!event.defaultPrevented)
+          hasInteractedOutsideRef.current = true;
+        const target = event.target;
+        const trigger = props.context.triggerRef.current;
+        if (!(trigger instanceof HTMLElement))
+          return;
+        const targetIsTrigger = trigger.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
+      }}
+    />;
+  }
+);
+const DialogContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeDialog,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      context,
+      ...contentProps
+    } = props;
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = <DialogContentFrame
+      id={context.contentId}
+      aria-describedby={context.descriptionId}
+      aria-labelledby={context.titleId}
+      data-state={getState(context.open)}
+      {...contentProps}
+    />;
+    if (showSheet) {
+      return <DialogPortalItem hostName={getSheetContentsName(context)}>{contentProps.children}</DialogPortalItem>;
+    }
+    if (!isWeb) {
+      return contents;
+    }
+    return <>
+      <FocusScope
+        loop
+        trapped={trapFocus}
+        onMountAutoFocus={onOpenAutoFocus}
+        forceUnmount={!context.open}
+        onUnmountAutoFocus={onCloseAutoFocus}
+      ><Dismissable
+        disableOutsidePointerEvents={context.open && disableOutsidePointerEvents}
+        forceUnmount={!context.open}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onPointerDownOutside={onPointerDownOutside}
+        onFocusOutside={onFocusOutside}
+        onInteractOutside={onInteractOutside}
+        ref={composedRefs}
+        onDismiss={() => context.onOpenChange(false)}
+      >{contents}</Dismissable></FocusScope>
+      {process.env.NODE_ENV === "development" && <>
+        <TitleWarning titleId={context.titleId} />
+        <DescriptionWarning
+          contentRef={contentRef}
+          descriptionId={context.descriptionId}
+        />
+      </>}
+    </>;
+  }
+);
+const TITLE_NAME = "DialogTitle";
+const DialogTitleFrame = styled(H2, {
+  name: TITLE_NAME
+});
+const DialogTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return <DialogTitleFrame id={context.titleId} {...titleProps} ref={forwardedRef} />;
+  }
+);
+DialogTitle.displayName = TITLE_NAME;
+const DialogDescriptionFrame = styled(Paragraph, {
+  name: "DialogDescription"
+});
+const DESCRIPTION_NAME = "DialogDescription";
+const DialogDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return <DialogDescriptionFrame
+      id={context.descriptionId}
+      {...descriptionProps}
+      ref={forwardedRef}
+    />;
+  }
+);
+DialogDescription.displayName = DESCRIPTION_NAME;
+const CLOSE_NAME = "DialogClose";
+const DialogClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, displayWhenAdapted, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog, {
+      warn: false,
+      fallback: {}
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (isSheet && !displayWhenAdapted) {
+      return null;
+    }
+    return <YStack
+      tag="button"
+      accessibilityLabel="Dialog Close"
+      {...closeProps}
+      ref={forwardedRef}
+      onPress={composeEventHandlers(
+        props.onPress,
+        () => context.onOpenChange(false)
+      )}
+    />;
+  }
+);
+DialogClose.displayName = CLOSE_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const TITLE_WARNING_NAME = "DialogTitleWarning";
+const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME,
+  titleName: TITLE_NAME,
+  docsSlug: "dialog"
+});
+const TitleWarning = ({ titleId }) => {
+  if (process.env.NODE_ENV === "development") {
+    const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+    const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
 
-If you want to hide the \`${o.titleName}\`, you can wrap it with our VisuallyHidden component.
+If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
 
-For more information, see https://radix-ui.com/primitives/docs/components/${o.docsSlug}`;i.useEffect(()=>{m&&e&&(document.getElementById(e)||console.warn(n))},[n,e])}return null},yo="DialogDescriptionWarning",To=({contentRef:e,descriptionId:o})=>{if(process.env.NODE_ENV==="development"){const t=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${te(yo).contentName}}.`;i.useEffect(()=>{if(!m)return;const a=e.current;if(!(a instanceof HTMLElement))return;const s=a.getAttribute("aria-describedby");o&&s&&(document.getElementById(o)||console.warn(t))},[t,e,o])}return null},Eo=Re(i.forwardRef(function(o,n){const{__scopeDialog:t,children:a,open:s,defaultOpen:r=!1,onOpenChange:l,modal:p=!0,allowPinchZoom:g=!1}=o,h=v(),c=v(),S=v(),y=v(),T=t?Object.keys(t)[0]:h,E=ne({scopeKey:T,contentId:c}),O=i.useRef(null),ae=i.useRef(null),[se,d]=Be({prop:s,defaultProp:r,onChange:l}),ie=i.useCallback(()=>{d(I=>!I)},[d]),le={scope:t,scopeKey:T,triggerRef:O,contentRef:ae,contentId:c,titleId:S,descriptionId:y,open:se,onOpenChange:d,onOpenToggle:ie,modal:p,allowPinchZoom:g},{when:ce,AdaptProvider:De}=Ce({Contents:i.useCallback(I=><G forwardProps={I}name={E}/>,[E])});return i.useImperativeHandle(n,()=>({open:d}),[d]),<De><Z{...le}sheetBreakpoint={ce}><No onOpenChange={d}__scopeDialog={t}>{a}</No></Z></De>}),{Trigger:w,Portal:_,Overlay:M,Content:k,Title:W,Description:V,Close:H,Sheet:ke,Adapt:Pe}),Oo="DialogSheetContents",vo=({name:e,...o})=><G forwardProps={o}name={e}/>;vo.displayName=Oo;const ne=({scopeKey:e,contentId:o})=>`${e||o}SheetContents`,No=e=>{const o=u("DialogSheetController",e.__scopeDialog),n=C(o),t=re(o),a=Oe(n);return<We onOpenChange={s=>{a()&&e.onOpenChange(s)}}open={o.open}hidden={t===!1}>{e.children}</We>},re=e=>{const o=ve();return e.sheetBreakpoint?e.sheetBreakpoint===!0?!0:o[e.sheetBreakpoint]:!1},C=e=>{const o=re(e);return e.open===!1?!1:o};export{Eo as Dialog,H as DialogClose,k as DialogContent,V as DialogDescription,M as DialogOverlay,U as DialogOverlayFrame,_ as DialogPortal,Ke as DialogPortalFrame,vo as DialogSheetContents,W as DialogTitle,w as DialogTrigger,Co as DialogWarningProvider,Ye as createDialogScope};
+For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      if (titleId) {
+        const hasTitle = document.getElementById(titleId);
+        if (!hasTitle) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, titleId]);
+  }
+  return null;
+};
+const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
+const DescriptionWarning = ({
+  contentRef,
+  descriptionId
+}) => {
+  if (process.env.NODE_ENV === "development") {
+    const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
+    const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const contentNode = contentRef.current;
+      if (!(contentNode instanceof HTMLElement)) {
+        return;
+      }
+      const describedById = contentNode.getAttribute("aria-describedby");
+      if (descriptionId && describedById) {
+        const hasDescription = document.getElementById(descriptionId);
+        if (!hasDescription) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, contentRef, descriptionId]);
+  }
+  return null;
+};
+const Dialog = withStaticProperties(
+  React.forwardRef(function Dialog2(props, ref) {
+    const {
+      __scopeDialog,
+      children,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      modal = true,
+      allowPinchZoom = false
+    } = props;
+    const scopeId = useId();
+    const contentId = useId();
+    const titleId = useId();
+    const descriptionId = useId();
+    const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
+    const sheetContentsName = getSheetContentsName({ scopeKey, contentId });
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange
+    });
+    const onOpenToggle = React.useCallback(() => {
+      setOpen((prevOpen) => !prevOpen);
+    }, [setOpen]);
+    const context = {
+      scope: __scopeDialog,
+      scopeKey,
+      triggerRef,
+      contentRef,
+      contentId,
+      titleId,
+      descriptionId,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle,
+      modal,
+      allowPinchZoom
+    };
+    const { when, AdaptProvider } = useAdaptParent({
+      Contents: React.useCallback(
+        (props2) => {
+          return <PortalHost forwardProps={props2} name={sheetContentsName} />;
+        },
+        [sheetContentsName]
+      )
+    });
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        open: setOpen
+      }),
+      [setOpen]
+    );
+    return <AdaptProvider><DialogProvider {...context} sheetBreakpoint={when}><DialogSheetController onOpenChange={setOpen} __scopeDialog={__scopeDialog}>{children}</DialogSheetController></DialogProvider></AdaptProvider>;
+  }),
+  {
+    Trigger: DialogTrigger,
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+    Sheet: ControlledSheet,
+    Adapt
+  }
+);
+const SHEET_CONTENTS_NAME = "DialogSheetContents";
+const DialogSheetContents = ({
+  name,
+  ...props
+}) => {
+  return <PortalHost forwardProps={props} name={name} />;
+};
+DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
+const getSheetContentsName = ({
+  scopeKey,
+  contentId
+}) => `${scopeKey || contentId}SheetContents`;
+const DialogSheetController = (props) => {
+  const context = useDialogContext("DialogSheetController", props.__scopeDialog);
+  const showSheet = useShowDialogSheet(context);
+  const breakpointActive = useSheetBreakpointActive(context);
+  const getShowSheet = useGet(showSheet);
+  return <SheetController
+    onOpenChange={(val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
+      }
+    }}
+    open={context.open}
+    hidden={breakpointActive === false}
+  >{props.children}</SheetController>;
+};
+const useSheetBreakpointActive = (context) => {
+  const media = useMedia();
+  if (!context.sheetBreakpoint)
+    return false;
+  if (context.sheetBreakpoint === true)
+    return true;
+  return media[context.sheetBreakpoint];
+};
+const useShowDialogSheet = (context) => {
+  const breakpointActive = useSheetBreakpointActive(context);
+  return context.open === false ? false : breakpointActive;
+};
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogOverlayFrame,
+  DialogPortal,
+  DialogPortalFrame,
+  DialogSheetContents,
+  DialogTitle,
+  DialogTrigger,
+  DialogWarningProvider,
+  createDialogScope
+};
 //# sourceMappingURL=Dialog.mjs.map