@tamagui/dialog 1.130.7 → 1.131.0

package/dist/cjs/Dialog.cjs

@@ -34,15 +34,17 @@ __export(Dialog_exports, {
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
+  DialogContext: () => DialogContext,
   DialogDescription: () => DialogDescription,
   DialogOverlay: () => DialogOverlay,
   DialogOverlayFrame: () => DialogOverlayFrame,
   DialogPortal: () => DialogPortal,
   DialogPortalFrame: () => DialogPortalFrame,
+  DialogProvider: () => DialogProvider,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
   DialogWarningProvider: () => DialogWarningProvider,
-  createDialogScope: () => createDialogScope
+  useDialogContext: () => useDialogContext
 });
 module.exports = __toCommonJS(Dialog_exports);
 var import_adapt = require("@tamagui/adapt"),
@@ -64,20 +66,23 @@ var import_adapt = require("@tamagui/adapt"),
   import_z_index_stack = require("@tamagui/z-index-stack"),
   React = __toESM(require("react")),
   import_jsx_runtime = require("react/jsx-runtime");
-const DIALOG_NAME = "Dialog",
-  [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME),
-  [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME),
-  TRIGGER_NAME = "DialogTrigger",
+const DialogContext = (0, import_core.createStyledContext)(
+  // since we always provide this we can avoid setting here
+  {}, "Dialog__"),
+  {
+    useStyledContext: useDialogContext,
+    Provider: DialogProvider
+  } = DialogContext,
   DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
-    name: TRIGGER_NAME
+    name: "DialogTrigger"
   }),
   DialogTrigger = DialogTriggerFrame.styleable(function (props, forwardedRef) {
     const {
-        __scopeDialog,
+        scope,
         ...triggerProps
       } = props,
       isInsideButton = React.useContext(import_stacks.ButtonNestingContext),
-      context = useDialogContext(TRIGGER_NAME, __scopeDialog),
+      context = useDialogContext(scope),
       composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
       value: !0,
@@ -92,12 +97,8 @@ const DIALOG_NAME = "Dialog",
         onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
       })
     });
-  }),
-  PORTAL_NAME = "DialogPortal",
-  [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
-    forceMount: void 0
-  }),
-  DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
+  });
+const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
     pointerEvents: "none",
     variants: {
       unstyled: {
@@ -116,50 +117,43 @@ const DIALOG_NAME = "Dialog",
       unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
   }),
-  DialogPortalItem = props => {
-    const {
-        __scopeDialog,
-        children,
-        space,
-        spaceDirection,
-        separator
-      } = props,
-      themeName = (0, import_core.useThemeName)(),
-      context = useDialogContext(PORTAL_NAME, props.__scopeDialog),
-      isAdapted = (0, import_adapt.useAdaptIsActive)();
-    let childrenSpaced = children;
-    (space || separator) && (childrenSpaced = (0, import_core.spacedChildren)({
-      children,
-      separator,
-      space,
-      direction: spaceDirection
-    }));
-    const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
-      scope: __scopeDialog,
-      ...context,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-        name: themeName,
-        children: childrenSpaced
-      })
+  needsRepropagation = import_constants.isAndroid || import_constants.isIos && !import_portal.USE_NATIVE_PORTAL,
+  DialogPortalItem = ({
+    context,
+    children
+  }) => {
+    const themeName = (0, import_core.useThemeName)(),
+      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope),
+      adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
+    let content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+      name: themeName,
+      children
     });
-    return isAdapted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
+    return needsRepropagation && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
+      ...adaptContext,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
+        ...context,
+        children: content
+      })
+    })), isAdapted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
+      scope: context.adaptScope,
       children: content
     }) : context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
-      hostName: context.modal ? "root" : context.adaptName,
+      hostName: context.modal ? "root" : context.adaptScope,
       children: content
     }) : content;
   },
   DialogPortal = props => {
     const {
-        __scopeDialog,
+        scope,
         forceMount,
         children,
         ...frameProps
       } = props,
-      context = useDialogContext(PORTAL_NAME, __scopeDialog),
+      context = useDialogContext(scope),
       isShowing = forceMount || context.open,
       [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing),
-      isAdapted = (0, import_adapt.useAdaptIsActive)();
+      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
     isShowing && isFullyHidden && setIsFullyHidden(!1);
     const handleExitComplete = React.useCallback(() => {
         setIsFullyHidden(!0);
@@ -168,36 +162,37 @@ const DIALOG_NAME = "Dialog",
       contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
         zIndex: (0, import_portal.resolveViewZIndex)(zIndex),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+          passThrough: isAdapted,
           onExitComplete: handleExitComplete,
           children: isShowing || isAdapted ? children : null
         })
       });
     if (isFullyHidden && !isAdapted) return null;
-    const framedContents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(PortalProvider, {
-      scope: __scopeDialog,
-      forceMount,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
-        pointerEvents: isShowing ? "auto" : "none",
-        ...frameProps,
-        children: contents
-      })
+    const framedContents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
+      pointerEvents: isShowing ? "auto" : "none",
+      ...frameProps,
+      children: contents
     });
     return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
       zIndex,
       stackZIndex: 1e3,
+      passThrough: isAdapted,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PassthroughTheme, {
+        passThrough: isAdapted,
         children: framedContents
       })
     }) : isAdapted ? framedContents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
-      __scopeDialog,
+      context,
       children: framedContents
     });
   },
   PassthroughTheme = ({
-    children
+    children,
+    passThrough
   }) => {
     const themeName = (0, import_core.useThemeName)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+      passThrough,
       name: themeName,
       forceClassName: !0,
       children
@@ -207,24 +202,23 @@ const DIALOG_NAME = "Dialog",
   DialogOverlayFrame = (0, import_core.styled)(import_sheet.Overlay, {
     name: OVERLAY_NAME
   }),
-  DialogOverlay = DialogOverlayFrame.extractable(React.forwardRef(function ({
-    __scopeDialog,
+  DialogOverlay = DialogOverlayFrame.styleable(function ({
+    scope,
     ...props
   }, forwardedRef) {
-    const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog),
+    const context = useDialogContext(scope),
       {
-        forceMount = portalContext.forceMount,
+        forceMount = context.forceMount,
         ...overlayProps
       } = props,
-      context = useDialogContext(OVERLAY_NAME, __scopeDialog),
-      isAdapted = (0, import_adapt.useAdaptIsActive)();
+      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
     return !forceMount && (!context.modal || isAdapted) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
       "data-state": getState(context.open),
       pointerEvents: context.open ? "auto" : "none",
       ...overlayProps,
       ref: forwardedRef
     });
-  })),
+  }),
   CONTENT_NAME = "DialogContent",
   DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
     name: CONTENT_NAME,
@@ -249,16 +243,15 @@ const DIALOG_NAME = "Dialog",
       unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
   }),
-  DialogContent = DialogContentFrame.extractable(React.forwardRef(function ({
-    __scopeDialog,
+  DialogContent = DialogContentFrame.styleable(function ({
+    scope,
     ...props
   }, forwardedRef) {
-    const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog),
+    const context = useDialogContext(scope),
       {
-        forceMount = portalContext.forceMount,
+        forceMount = context.forceMount,
         ...contentProps
       } = props,
-      context = useDialogContext(CONTENT_NAME, __scopeDialog),
       contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
         children: context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
           context,
@@ -278,7 +271,7 @@ const DIALOG_NAME = "Dialog",
         children: contents
       })
     });
-  })),
+  }),
   DialogContentModal = React.forwardRef(({
     children,
     context,
@@ -332,7 +325,6 @@ const DIALOG_NAME = "Dialog",
   }),
   DialogContentImpl = React.forwardRef((props, forwardedRef) => {
     const {
-        __scopeDialog,
         trapFocus,
         onOpenAutoFocus,
         onCloseAutoFocus,
@@ -348,7 +340,8 @@ const DIALOG_NAME = "Dialog",
       // TODO react 19 type workaround
       void 0),
       composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
-    if ((0, import_adapt.useAdaptIsActive)()) return !import_constants.isWeb && !context.open ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+    if ((0, import_adapt.useAdaptIsActive)(context.adaptScope)) return !import_constants.isWeb && !context.open ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+      context,
       children: contentProps.children
     });
     const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
@@ -392,10 +385,10 @@ const DIALOG_NAME = "Dialog",
   }),
   DialogTitle = DialogTitleFrame.styleable(function (props, forwardedRef) {
     const {
-        __scopeDialog,
+        scope,
         ...titleProps
       } = props,
-      context = useDialogContext("DialogTitle", __scopeDialog);
+      context = useDialogContext(scope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
       id: context.titleId,
       ...titleProps,
@@ -405,13 +398,12 @@ const DIALOG_NAME = "Dialog",
   DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
     name: "DialogDescription"
   }),
-  DESCRIPTION_NAME = "DialogDescription",
   DialogDescription = DialogDescriptionFrame.styleable(function (props, forwardedRef) {
     const {
-        __scopeDialog,
+        scope,
         ...descriptionProps
       } = props,
-      context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+      context = useDialogContext(scope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
       id: context.descriptionId,
       ...descriptionProps,
@@ -425,15 +417,12 @@ const DIALOG_NAME = "Dialog",
   }),
   DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
     const {
-        __scopeDialog,
+        scope,
         displayWhenAdapted,
         ...closeProps
       } = props,
-      context = useDialogContext(CLOSE_NAME, __scopeDialog, {
-        warn: !1,
-        fallback: {}
-      }),
-      isAdapted = (0, import_adapt.useAdaptIsActive)(),
+      context = useDialogContext(scope),
+      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope),
       isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
     return isAdapted && !displayWhenAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogCloseFrame, {
       accessibilityLabel: "Dialog Close",
@@ -485,7 +474,7 @@ const TITLE_WARNING_NAME = "DialogTitleWarning",
   },
   Dialog = (0, import_helpers.withStaticProperties)(React.forwardRef(function (props, ref) {
     const {
-        __scopeDialog,
+        scope = "",
         children,
         open: openProp,
         defaultOpen = !1,
@@ -494,15 +483,10 @@ const TITLE_WARNING_NAME = "DialogTitleWarning",
         disableRemoveScroll = !1
       } = props,
       baseId = React.useId(),
-      scopeId = `scope-${baseId}`,
-      contentId = `content-${baseId}`,
-      titleId = `title-${baseId}`,
-      descriptionId = `description-${baseId}`,
-      scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId,
-      adaptName = getAdaptName({
-        scopeKey,
-        contentId
-      }),
+      dialogId = `Dialog-${scope}-${baseId}`,
+      contentId = `${dialogId}-content`,
+      titleId = `${dialogId}-title`,
+      descriptionId = `${dialogId}-description`,
       triggerRef = React.useRef(null),
       contentRef = React.useRef(null),
       [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
@@ -513,9 +497,10 @@ const TITLE_WARNING_NAME = "DialogTitleWarning",
       onOpenToggle = React.useCallback(() => {
         setOpen(prevOpen => !prevOpen);
       }, [setOpen]),
+      adaptScope = `DialogAdapt${scope}`,
       context = {
-        scope: __scopeDialog,
-        scopeKey,
+        dialogScope: scope,
+        adaptScope,
         triggerRef,
         contentRef,
         contentId,
@@ -525,21 +510,21 @@ const TITLE_WARNING_NAME = "DialogTitleWarning",
         onOpenChange: setOpen,
         onOpenToggle,
         modal,
-        disableRemoveScroll,
-        adaptName
+        disableRemoveScroll
       };
     return React.useImperativeHandle(ref, () => ({
       open: setOpen
     }), [setOpen]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
-      scope: adaptName,
+      scope: adaptScope,
       portal: {
         forwardProps: props
       },
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
+        scope,
         ...context,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogSheetController, {
           onOpenChange: setOpen,
-          __scopeDialog,
+          scope,
           children
         })
       })
@@ -555,20 +540,16 @@ const TITLE_WARNING_NAME = "DialogTitleWarning",
     Sheet: import_sheet.Sheet.Controlled,
     FocusScope: import_focus_scope.FocusScopeController,
     Adapt: import_adapt.Adapt
-  }),
-  getAdaptName = ({
-    scopeKey,
-    contentId
-  }) => `${scopeKey || contentId}DialogAdapt`,
-  DialogSheetController = props => {
-    const context = useDialogContext("DialogSheetController", props.__scopeDialog),
-      isAdapted = (0, import_adapt.useAdaptIsActive)();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
-      onOpenChange: val => {
-        isAdapted && props.onOpenChange?.(val);
-      },
-      open: context.open,
-      hidden: !isAdapted,
-      children: props.children
-    });
-  };
+  });
+const DialogSheetController = props => {
+  const context = useDialogContext(props.scope),
+    isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
+    onOpenChange: val => {
+      isAdapted && props.onOpenChange?.(val);
+    },
+    open: context.open,
+    hidden: !isAdapted,
+    children: props.children
+  });
+};