@tamagui/dialog 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/Dialog.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Dialog_exports = {};
 __export(Dialog_exports, {
   Dialog: () => Dialog,
@@ -47,161 +49,190 @@ __export(Dialog_exports, {
   useDialogContext: () => useDialogContext
 });
 module.exports = __toCommonJS(Dialog_exports);
-var import_adapt = require("@tamagui/adapt"),
-  import_animate_presence = require("@tamagui/animate-presence"),
-  import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_create_context = require("@tamagui/create-context"),
-  import_dismissable = require("@tamagui/dismissable"),
-  import_focus_scope = require("@tamagui/focus-scope"),
-  import_helpers = require("@tamagui/helpers"),
-  import_portal = require("@tamagui/portal"),
-  import_remove_scroll = require("@tamagui/remove-scroll"),
-  import_controller = require("@tamagui/sheet/controller"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  import_z_index_stack = require("@tamagui/z-index-stack"),
-  React = __toESM(require("react"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_adapt = require("@tamagui/adapt");
+var import_animate = require("@tamagui/animate");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_dismissable = require("@tamagui/dismissable");
+var import_focus_scope = require("@tamagui/focus-scope");
+var import_helpers = require("@tamagui/helpers");
+var import_portal = require("@tamagui/portal");
+var import_remove_scroll = require("@tamagui/remove-scroll");
+var import_controller = require("@tamagui/sheet/controller");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_z_index_stack = require("@tamagui/z-index-stack");
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 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: "DialogTrigger"
-  }),
-  DialogTrigger = DialogTriggerFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...triggerProps
-      } = props,
-      isInsideButton = React.useContext(import_stacks.ButtonNestingContext),
-      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,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
-        render: isInsideButton ? "span" : "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": getState(context.open),
-        ...triggerProps,
-        ref: composedTriggerRef,
-        onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
-      })
-    });
-  }),
-  DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
-    pointerEvents: "none",
-    render: "dialog",
-    variants: {
-      unstyled: {
-        false: {
-          alignItems: "center",
-          justifyContent: "center",
-          fullscreen: !0,
-          "$platform-web": {
-            // undo dialog styles
-            borderWidth: 0,
-            backgroundColor: "transparent",
-            color: "inherit",
-            maxInlineSize: "none",
-            margin: 0,
-            width: "auto",
-            height: "auto",
-            // ensure always in frame and right height
-            maxHeight: "100vh",
-            position: "fixed",
-            // ensure dialog inherits stacking context from portal wrapper
-            zIndex: 1
-          }
+// since we always provide this we can avoid setting here
+{}, "Dialog__");
+const {
+  useStyledContext: useDialogContext,
+  Provider: DialogProvider
+} = DialogContext;
+const DialogAdaptHiddenContext = React.createContext(true);
+const DialogTriggerFrame = (0, import_core.styled)(import_core.View, {
+  name: "DialogTrigger"
+});
+const DialogTrigger = DialogTriggerFrame.styleable(function DialogTrigger2(props, forwardedRef) {
+  const {
+    scope,
+    ...triggerProps
+  } = props;
+  const isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
+  const context = useDialogContext(scope);
+  const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.ButtonNestingContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
+      render: isInsideButton ? "span" : "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
+    })
+  });
+});
+const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
+  pointerEvents: "none",
+  render: "dialog",
+  variants: {
+    unstyled: {
+      false: {
+        alignItems: "center",
+        justifyContent: "center",
+        fullscreen: true,
+        "$platform-web": {
+          // undo dialog styles
+          borderWidth: 0,
+          backgroundColor: "transparent",
+          color: "inherit",
+          maxInlineSize: "none",
+          margin: 0,
+          width: "auto",
+          height: "auto",
+          // ensure always in frame and right height
+          maxHeight: "100vh",
+          position: "fixed",
+          // ensure dialog inherits stacking context from portal wrapper
+          zIndex: 1
         }
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  needsRepropagation = (0, import_portal.needsPortalRepropagation)(),
-  DialogPortalItem = ({
-    context,
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const needsRepropagation = (0, import_portal.needsPortalRepropagation)();
+const DialogPortalItem = ({
+  context,
+  children
+}) => {
+  const themeName = (0, import_core.useThemeName)();
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
+  let content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+    name: themeName,
     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 needsRepropagation && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
+  });
+  if (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.adaptScope,
-      children: content
-    }) : content;
-  },
-  DialogPortal = React.forwardRef((props, forwardRef) => {
-    const {
-        scope,
-        forceMount,
-        children,
-        ...frameProps
-      } = props,
-      dialogRef = React.useRef(null),
-      ref = (0, import_compose_refs.composeRefs)(dialogRef, forwardRef),
-      context = useDialogContext(scope),
-      isMountedOrOpen = forceMount || context.open,
-      [isFullyHidden, setIsFullyHidden] = React.useState(!isMountedOrOpen),
-      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope),
-      isVisible = isMountedOrOpen ? !0 : !isFullyHidden;
-    isMountedOrOpen && isFullyHidden && setIsFullyHidden(!1), import_constants.isWeb && (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    });
+  }
+  return 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.adaptScope,
+    children: content
+  }) : content;
+};
+const DialogPortal = React.forwardRef((props, forwardRef) => {
+  const {
+    scope,
+    forceMount,
+    children,
+    ...frameProps
+  } = props;
+  const dialogRef = React.useRef(null);
+  const ref = (0, import_compose_refs.composeRefs)(dialogRef, forwardRef);
+  const context = useDialogContext(scope);
+  const keepMounted = forceMount || context.keepChildrenMounted;
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
+  if (context.open && isFullyHidden) {
+    setIsFullyHidden(false);
+  }
+  const isVisible = context.open ? true : !isFullyHidden;
+  if (import_constants.isWeb) {
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
       const node = dialogRef.current;
-      node instanceof HTMLDialogElement && (isVisible ? node.show?.() : node.close?.());
+      if (!(node instanceof HTMLDialogElement)) return;
+      if (isVisible) {
+        node.show?.();
+      } else {
+        node.close?.();
+      }
     }, [isVisible]);
-    const handleExitComplete = React.useCallback(() => {
-        setIsFullyHidden(!0);
-      }, []),
-      zIndex = (0, import_core.getExpandedShorthand)("zIndex", props),
-      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: isMountedOrOpen || isAdapted ? children : null
-        })
+  }
+  const onAnimationCompleteRef = React.useRef(context.onAnimationComplete);
+  onAnimationCompleteRef.current = context.onAnimationComplete;
+  const handleExitComplete = React.useCallback(() => {
+    setIsFullyHidden(true);
+    onAnimationCompleteRef.current?.({
+      open: false
+    });
+  }, []);
+  React.useEffect(() => {
+    if (context.open && !isAdapted && onAnimationCompleteRef.current) {
+      const tm = setTimeout(() => {
+        onAnimationCompleteRef.current?.({
+          open: true
+        });
+      }, 350);
+      return () => clearTimeout(tm);
+    }
+  }, [context.open, isAdapted]);
+  const zIndex = (0, import_core.getExpandedShorthand)("zIndex", props);
+  const 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.Animate, {
+      type: "presence",
+      present: Boolean(context.open),
+      keepChildrenMounted: Boolean(keepMounted),
+      onExitComplete: handleExitComplete,
+      passThrough: isAdapted,
+      children
+    })
+  });
+  const framedContents = isFullyHidden && !keepMounted && !isAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
+    disable: !context.open,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
+      ref,
+      ...(import_constants.isWeb && context.open && {
+        "aria-modal": true
       }),
-      framedContents =
-      // NOTE: we remove the inner frame, but not the portal itself
-      // saw a bug when we removed and re-added portals that caused stale inner contents of the portal
-      // seems like a React bug itself but leaving this for now as it fixes
-      isFullyHidden && !isAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
-        disable: !isMountedOrOpen,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
-          ref,
-          ...(import_constants.isWeb && isMountedOrOpen && {
-            "aria-modal": !0
-          }),
-          pointerEvents: isMountedOrOpen ? "auto" : "none",
-          ...frameProps,
-          className: "_no_backdrop " + (frameProps.className || ""),
-          children: contents
-        })
-      });
-    return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+      pointerEvents: context.open ? "auto" : "none",
+      ...frameProps,
+      className: `_no_backdrop ` + (frameProps.className || ""),
+      children: contents
+    })
+  });
+  if (import_constants.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
       zIndex,
       stackZIndex: 1e5,
       passThrough: isAdapted,
@@ -209,396 +240,464 @@ const DialogContext = (0, import_core.createStyledContext)(
         passThrough: isAdapted,
         children: framedContents
       })
-    }) : isAdapted ? framedContents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
-      context,
-      children: framedContents
-    });
-  }),
-  PassthroughTheme = ({
-    children,
-    passThrough
-  }) => {
-    const themeName = (0, import_core.useThemeName)();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-      passThrough,
-      name: themeName,
-      forceClassName: !0,
-      children
     });
-  },
-  OVERLAY_NAME = "DialogOverlay",
-  DialogOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: OVERLAY_NAME,
-    variants: {
-      open: {
-        true: {
-          pointerEvents: "auto"
-        },
-        false: {
-          pointerEvents: "none"
-        }
+  }
+  return isAdapted ? framedContents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+    context,
+    children: framedContents
+  });
+});
+const PassthroughTheme = ({
+  children,
+  passThrough
+}) => {
+  const themeName = (0, import_core.useThemeName)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+    passThrough,
+    name: themeName,
+    forceClassName: true,
+    children
+  });
+};
+const OVERLAY_NAME = "DialogOverlay";
+const DialogOverlayFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: OVERLAY_NAME,
+  zIndex: 1,
+  variants: {
+    open: {
+      true: {
+        pointerEvents: "auto"
       },
-      unstyled: {
-        false: {
-          fullscreen: !0,
-          position: "absolute",
-          backgroundColor: "$background",
-          zIndex: 99999,
-          pointerEvents: "auto"
-        }
+      false: {
+        pointerEvents: "none"
       }
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    unstyled: {
+      false: {
+        fullscreen: true,
+        position: "absolute",
+        backgroundColor: "$background",
+        pointerEvents: "auto"
+      }
     }
-  }),
-  DialogOverlay = DialogOverlayFrame.styleable(function ({
-    scope,
-    ...props
-  }, forwardedRef) {
-    const context = useDialogContext(scope),
-      {
-        forceMount = context.forceMount,
-        ...overlayProps
-      } = props,
-      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,
-    variants: {
-      size: {
-        "...size": (val, extras) => ({})
-      },
-      unstyled: {
-        false: {
-          position: "relative",
-          backgroundColor: "$background",
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          padding: "$true",
-          borderRadius: "$true",
-          elevate: !0,
-          zIndex: 1e5,
-          // Ensure content receives pointer events (fixes React 19 + display:contents inheritance)
-          pointerEvents: "auto"
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const DialogOverlay = DialogOverlayFrame.styleable(function DialogOverlay2({
+  scope,
+  ...props
+}, forwardedRef) {
+  const context = useDialogContext(scope);
+  const {
+    forceMount = context.forceMount,
+    ...overlayProps
+  } = props;
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  if (!forceMount) {
+    if (!context.modal || isAdapted) {
+      return null;
+    }
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
+    "data-state": getState(context.open),
+    pointerEvents: context.open ? "auto" : "none",
+    ...overlayProps,
+    ref: forwardedRef
+  });
+});
+const CONTENT_NAME = "DialogContent";
+const DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: CONTENT_NAME,
+  zIndex: 2,
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        return {};
       }
     },
-    defaultVariants: {
-      size: "$true",
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    unstyled: {
+      false: {
+        position: "relative",
+        backgroundColor: "$background",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        padding: "$true",
+        borderRadius: "$true",
+        elevate: true,
+        // Ensure content receives pointer events (fixes React 19 + display:contents inheritance)
+        pointerEvents: "auto"
+      }
     }
-  }),
-  DialogContent = DialogContentFrame.styleable(function ({
-    scope,
-    ...props
-  }, forwardedRef) {
-    const context = useDialogContext(scope),
-      {
-        forceMount = context.forceMount,
-        ...contentProps
-      } = props,
-      contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-        children: context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
-          context,
-          ...contentProps,
-          ref: forwardedRef
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentNonModal, {
-          context,
-          ...contentProps,
-          ref: forwardedRef
-        })
-      });
-    return !import_constants.isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
-      enabled: context.open,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-        "data-remove-scroll-container": !0,
-        className: "_dsp_contents",
-        children: contents
-      })
-    });
-  }),
-  DialogContentModal = React.forwardRef(({
-    children,
-    context,
-    ...props
-  }, forwardedRef) => {
-    const contentRef = React.useRef(null),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
+  },
+  defaultVariants: {
+    size: "$true",
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const DialogContent = DialogContentFrame.styleable(function DialogContent2({
+  scope,
+  ...props
+}, forwardedRef) {
+  const context = useDialogContext(scope);
+  const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
+      context,
       ...props,
+      ref: forwardedRef
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentNonModal, {
       context,
-      ref: composedRefs,
-      trapFocus: context.open,
-      disableOutsidePointerEvents: !0,
-      onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
-        event.preventDefault(), context.triggerRef.current?.focus();
-      }),
-      onPointerDownOutside: (0, import_helpers.composeEventHandlers)(props.onPointerDownOutside, event => {
-        const originalEvent = event.detail.originalEvent,
-          ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
-        (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
-      }),
-      onFocusOutside: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault()),
-      ...(!props.unstyled && {
-        outlineStyle: "none"
-      }),
-      children
-    });
-  }),
-  DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
-    const hasInteractedOutsideRef = React.useRef(!1);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
       ...props,
-      ref: forwardedRef,
-      trapFocus: !1,
-      disableOutsidePointerEvents: !1,
-      onCloseAutoFocus: event => {
-        props.onCloseAutoFocus?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current || props.context.triggerRef.current?.focus(), event.preventDefault()), hasInteractedOutsideRef.current = !1;
-      },
-      onInteractOutside: event => {
-        props.onInteractOutside?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
-        const target = event.target,
-          trigger = props.context.triggerRef.current;
-        if (!(trigger instanceof HTMLElement)) return;
-        trigger.contains(target) && event.preventDefault();
+      ref: forwardedRef
+    })
+  });
+  if (!import_constants.isWeb || context.disableRemoveScroll) {
+    return contents;
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
+    enabled: context.open,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      "data-remove-scroll-container": true,
+      className: "_dsp_contents",
+      children: contents
+    })
+  });
+});
+const DialogContentModal = React.forwardRef(({
+  children,
+  context,
+  ...props
+}, forwardedRef) => {
+  const contentRef = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
+    ...props,
+    context,
+    ref: composedRefs,
+    trapFocus: context.open,
+    disableOutsidePointerEvents: true,
+    onCloseAutoFocus: (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
+      event.preventDefault();
+      context.triggerRef.current?.focus();
+    }),
+    onPointerDownOutside: (0, import_helpers.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: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault()),
+    ...(!props.unstyled && {
+      outlineStyle: "none"
+    }),
+    children
+  });
+});
+const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
+  const hasInteractedOutsideRef = React.useRef(false);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(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();
       }
-    });
-  }),
-  DialogContentImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-        trapFocus,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        disableOutsidePointerEvents,
-        onEscapeKeyDown,
-        onPointerDownOutside,
-        onFocusOutside,
-        onInteractOutside,
-        context,
-        ...contentProps
-      } = props,
-      contentRef = React.useRef(null),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
-    if ((0, import_adapt.useAdaptIsActive)(context.adaptScope)) return !import_constants.isWeb && !context.open ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+      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 {
+    trapFocus,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    disableOutsidePointerEvents,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    context,
+    ...contentProps
+  } = props;
+  const contentRef = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const isAdaptFullyHidden = React.useContext(DialogAdaptHiddenContext);
+  if (isAdapted) {
+    if (!context.open && !context.keepChildrenMounted && isAdaptFullyHidden) {
+      return null;
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
       context,
       children: contentProps.children
     });
-    const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
-      ref: composedRefs,
-      id: context.contentId,
-      role: "dialog",
-      "aria-modal": context.modal,
-      "aria-describedby": context.descriptionId,
-      "aria-labelledby": context.titleId,
-      "data-state": getState(context.open),
-      pointerEvents: context.open ? "auto" : "none",
-      ...contentProps
-    });
-    return import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
-        disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+  }
+  const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
+    ref: composedRefs,
+    id: context.contentId,
+    role: "dialog",
+    "aria-modal": context.modal,
+    "aria-describedby": context.descriptionId,
+    "aria-labelledby": context.titleId,
+    "data-state": getState(context.open),
+    pointerEvents: context.open ? "auto" : "none",
+    ...contentProps
+  });
+  if (!import_constants.isWeb) {
+    return contents;
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+      disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+      forceUnmount: !context.open,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss: () => context?.onOpenChange?.(false),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+        loop: true,
+        enabled: context.open,
+        trapped: trapFocus,
+        onMountAutoFocus: onOpenAutoFocus,
         forceUnmount: !context.open,
-        onEscapeKeyDown,
-        onPointerDownOutside,
-        onFocusOutside,
-        onInteractOutside,
-        onDismiss: () => context?.onOpenChange?.(!1),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
-          loop: !0,
-          enabled: context.open,
-          trapped: trapFocus,
-          onMountAutoFocus: onOpenAutoFocus,
-          forceUnmount: !context.open,
-          onUnmountAutoFocus: onCloseAutoFocus,
-          children: contents
-        })
-      }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleWarning, {
-          titleId: context.titleId
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
-          contentRef,
-          descriptionId: context.descriptionId
-        })]
-      })]
-    }) : contents;
-  }),
-  DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
-    name: "DialogTitle"
-  }),
-  DialogTitle = DialogTitleFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...titleProps
-      } = props,
-      context = useDialogContext(scope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
-      id: context.titleId,
-      ...titleProps,
-      ref: forwardedRef
-    });
-  }),
-  DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
-    name: "DialogDescription"
-  }),
-  DialogDescription = DialogDescriptionFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...descriptionProps
-      } = props,
-      context = useDialogContext(scope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
-      id: context.descriptionId,
-      ...descriptionProps,
-      ref: forwardedRef
-    });
-  }),
-  CLOSE_NAME = "DialogClose",
-  DialogCloseFrame = (0, import_core.styled)(import_core.View, {
-    name: CLOSE_NAME,
-    render: "button"
-  }),
-  DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
-    const {
-        scope,
-        displayWhenAdapted,
-        ...closeProps
-      } = props,
-      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, {
-      "aria-label": "Dialog Close",
-      render: isInsideButton ? "span" : "button",
-      ...closeProps,
-      ref: forwardedRef,
-      onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => {
-        context.onOpenChange(!1);
+        onUnmountAutoFocus: onCloseAutoFocus,
+        children: contents
       })
-    });
+    }), process.env.NODE_ENV === "development" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(TitleWarning, {
+        titleId: context.titleId
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DescriptionWarning, {
+        contentRef,
+        descriptionId: context.descriptionId
+      })]
+    })]
+  });
+});
+const DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
+  name: "DialogTitle"
+});
+const DialogTitle = DialogTitleFrame.styleable(function DialogTitle2(props, forwardedRef) {
+  const {
+    scope,
+    ...titleProps
+  } = props;
+  const context = useDialogContext(scope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
+    id: context.titleId,
+    ...titleProps,
+    ref: forwardedRef
   });
+});
+const DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
+  name: "DialogDescription"
+});
+const DialogDescription = DialogDescriptionFrame.styleable(function DialogDescription2(props, forwardedRef) {
+  const {
+    scope,
+    ...descriptionProps
+  } = props;
+  const context = useDialogContext(scope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
+    id: context.descriptionId,
+    ...descriptionProps,
+    ref: forwardedRef
+  });
+});
+const CLOSE_NAME = "DialogClose";
+const DialogCloseFrame = (0, import_core.styled)(import_core.View, {
+  name: CLOSE_NAME,
+  render: "button"
+});
+const DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
+  const {
+    scope,
+    displayWhenAdapted,
+    ...closeProps
+  } = props;
+  const context = useDialogContext(scope);
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const isInsideButton = React.useContext(import_stacks.ButtonNestingContext);
+  if (isAdapted && !displayWhenAdapted) {
+    return null;
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogCloseFrame, {
+    "aria-label": "Dialog Close",
+    render: isInsideButton ? "span" : "button",
+    ...closeProps,
+    ref: forwardedRef,
+    onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => {
+      context.onOpenChange(false);
+    })
+  });
+});
 function getState(open) {
   return open ? "open" : "closed";
 }
-const TITLE_WARNING_NAME = "DialogTitleWarning",
-  [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
-    contentName: CONTENT_NAME,
-    titleName: "DialogTitle",
-    docsSlug: "dialog"
-  }),
-  TitleWarning = ({
-    titleId
-  }) => {
-    if (process.env.NODE_ENV === "development") {
-      const titleWarningContext = useWarningContext(TITLE_WARNING_NAME),
-        MESSAGE = `\`${titleWarningContext.contentName}\` wants a \`${titleWarningContext.titleName}\` to be accessible. If you want to hide the \`${titleWarningContext.titleName}\`, wrap it with <VisuallyHidden />.`;
-      React.useEffect(() => {
-        import_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
-      }, [MESSAGE, titleId]);
-    }
-    return null;
-  },
-  DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning",
-  DescriptionWarning = ({
+const TITLE_WARNING_NAME = "DialogTitleWarning";
+const [DialogWarningProvider, useWarningContext] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME,
+  titleName: "DialogTitle",
+  docsSlug: "dialog"
+});
+const TitleWarning = ({
+  titleId
+}) => {
+  if (process.env.NODE_ENV === "development") {
+    const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+    const MESSAGE = `\`${titleWarningContext.contentName}\` wants a \`${titleWarningContext.titleName}\` to be accessible. If you want to hide the \`${titleWarningContext.titleName}\`, wrap it with <VisuallyHidden />.`;
+    React.useEffect(() => {
+      if (!import_constants.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 (!import_constants.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 = (0, import_helpers.withStaticProperties)(React.forwardRef(function Dialog2(props, ref) {
+  const {
+    scope = "",
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    modal = true,
+    keepChildrenMounted,
+    disableRemoveScroll = false,
+    onAnimationComplete
+  } = props;
+  const baseId = React.useId();
+  const dialogId = `Dialog-${scope}-${baseId}`;
+  const contentId = `${dialogId}-content`;
+  const titleId = `${dialogId}-title`;
+  const descriptionId = `${dialogId}-description`;
+  const triggerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const onOpenToggle = React.useCallback(() => {
+    setOpen(prevOpen => !prevOpen);
+  }, [setOpen]);
+  const adaptScope = `DialogAdapt${scope}`;
+  const context = {
+    dialogScope: scope,
+    adaptScope,
+    triggerRef,
     contentRef,
-    descriptionId
-  }) => {
-    if (process.env.NODE_ENV === "development") {
-      const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
-      React.useEffect(() => {
-        if (!import_constants.isWeb) return;
-        const contentNode = contentRef.current;
-        if (!(contentNode instanceof HTMLElement)) return;
-        const describedById = contentNode.getAttribute("aria-describedby");
-        descriptionId && describedById && (document.getElementById(descriptionId) || console.warn(MESSAGE));
-      }, [MESSAGE, contentRef, descriptionId]);
-    }
-    return null;
-  },
-  Dialog = (0, import_helpers.withStaticProperties)(React.forwardRef(function (props, ref) {
-    const {
-        scope = "",
-        children,
-        open: openProp,
-        defaultOpen = !1,
-        onOpenChange,
-        modal = !0,
-        disableRemoveScroll = !1
-      } = props,
-      baseId = React.useId(),
-      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)({
-        prop: openProp,
-        defaultProp: defaultOpen,
-        onChange: onOpenChange
-      }),
-      onOpenToggle = React.useCallback(() => {
-        setOpen(prevOpen => !prevOpen);
-      }, [setOpen]),
-      adaptScope = `DialogAdapt${scope}`,
-      context = {
-        dialogScope: scope,
-        adaptScope,
-        triggerRef,
-        contentRef,
-        contentId,
-        titleId,
-        descriptionId,
-        open,
+    contentId,
+    titleId,
+    descriptionId,
+    open,
+    onOpenChange: setOpen,
+    onOpenToggle,
+    modal,
+    keepChildrenMounted,
+    disableRemoveScroll,
+    onAnimationComplete
+  };
+  React.useImperativeHandle(ref, () => ({
+    open: setOpen
+  }), [setOpen]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
+    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,
-        onOpenToggle,
-        modal,
-        disableRemoveScroll
-      };
-    return React.useImperativeHandle(ref, () => ({
-      open: setOpen
-    }), [setOpen]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
-      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,
-          scope,
-          children
-        })
+        children
       })
-    });
-  }), {
-    Trigger: DialogTrigger,
-    Portal: DialogPortal,
-    Overlay: DialogOverlay,
-    Content: DialogContent,
-    Title: DialogTitle,
-    Description: DialogDescription,
-    Close: DialogClose,
-    FocusScope: import_focus_scope.FocusScopeController,
-    Adapt: import_adapt.Adapt
+    })
   });
+}), {
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  FocusScope: import_focus_scope.FocusScopeController,
+  Adapt: import_adapt.Adapt
+});
 const DialogSheetController = props => {
-  const context = useDialogContext(props.scope),
-    isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const context = useDialogContext(props.scope);
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!context.open);
+  if (context.open && isAdaptFullyHidden) {
+    setIsAdaptFullyHidden(false);
+  }
+  const handleSheetAnimationComplete = React.useCallback(({
+    open
+  }) => {
+    if (!open) {
+      setIsAdaptFullyHidden(true);
+    }
+  }, []);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
     onOpenChange: val => {
-      isAdapted && props.onOpenChange?.(val);
+      if (isAdapted) {
+        props.onOpenChange?.(val);
+      }
     },
+    onAnimationComplete: handleSheetAnimationComplete,
     open: context.open,
     hidden: !isAdapted,
-    children: props.children
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogAdaptHiddenContext.Provider, {
+      value: isAdaptFullyHidden,
+      children: props.children
+    })
   });
 };