@tamagui/dialog 1.13.3 → 1.14.0

package/dist/jsx/Dialog.js

@@ -1,561 +1,6 @@
-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.
+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.
 
-If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
+If you want to hide the \`${o.titleName}\`, you can wrap it with our VisuallyHidden component.
 
-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
-};
+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};
 //# sourceMappingURL=Dialog.js.map