@tamagui/dialog 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Dialog.mjs

@@ -2,653 +2,605 @@ import { Adapt, AdaptParent, AdaptPortalContents, ProvideAdaptContext, useAdaptC
 import { Animate } from "@tamagui/animate";
 import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { createStyledContext, getExpandedShorthand, LayoutMeasurementController, styled, Theme, useThemeName, View } from "@tamagui/core";
+import { LayoutMeasurementController, Theme, View, createRefComponent, createStyledContext, createStyledHOC, getExpandedShorthand, styled, useThemeName } from "@tamagui/core";
 import { createContext } from "@tamagui/create-context";
 import { Dismissable } from "@tamagui/dismissable";
 import { FocusScope, FocusScopeController } from "@tamagui/focus-scope";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
-import { needsPortalRepropagation, Portal, PortalItem, resolveViewZIndex } from "@tamagui/portal";
+import { Portal, PortalItem, needsPortalRepropagation, resolveViewZIndex } from "@tamagui/portal";
 import { RemoveScroll } from "@tamagui/remove-scroll";
-import { SheetController } from "@tamagui/sheet/controller";
-import { ButtonNestingContext, ThemeableStack, YStack } from "@tamagui/stacks";
+import { ButtonNestingContext, YStack } from "@tamagui/stacks";
 import { H2, Paragraph } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import { StackZIndexContext } from "@tamagui/z-index-stack";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const DialogContext = createStyledContext(
-// since we always provide this we can avoid setting here
-{}, "Dialog__");
-const {
-  useStyledContext: useDialogContext,
-  Provider: DialogProvider
-} = DialogContext;
-const DialogAdaptHiddenContext = React.createContext(true);
-const DialogTriggerFrame = styled(View, {
-  name: "DialogTrigger"
-});
-const DialogTrigger = DialogTriggerFrame.styleable(function DialogTrigger2(props, forwardedRef) {
-  const {
-    scope,
-    ...triggerProps
-  } = props;
-  const isInsideButton = React.useContext(ButtonNestingContext);
-  const context = useDialogContext(scope);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  return /* @__PURE__ */jsx(ButtonNestingContext.Provider, {
-    value: true,
-    children: /* @__PURE__ */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: composeEventHandlers(props.onPress, context.onOpenToggle)
-    })
-  });
+
+const DialogContext = createStyledContext({}, "Dialog__");
+const { useStyledContext: useDialogContext, Provider: DialogProvider } = DialogContext;
+const DialogTriggerFrame = styled(View, { displayName: "DialogTrigger" });
+const DialogTrigger = createStyledHOC(DialogTriggerFrame, function DialogTrigger2(props, forwardedRef) {
+	const { scope, ...triggerProps } = props;
+	const isInsideButton = React.useContext(ButtonNestingContext);
+	const context = useDialogContext(scope);
+	const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+	return /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
+		value: props.asChild ? isInsideButton : true,
+		children: /* @__PURE__ */ 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: composeEventHandlers(props.onPress, context.onOpenToggle)
+		})
+	});
 });
 const DialogPortalFrame = styled(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"
-  }
+	pointerEvents: "none",
+	alignItems: "center",
+	justifyContent: "center",
+	position: "absolute web:fixed",
+	inset: 0,
+	borderWidth: "web:0px",
+	backgroundColor: "web:transparent",
+	color: "web:inherit",
+	maxInlineSize: "web:none",
+	margin: "web:0px",
+	width: "web:auto",
+	height: "web:auto",
+	maxHeight: "web:100vh",
+	zIndex: "web:1",
+	render: "dialog"
 });
 const needsRepropagation = needsPortalRepropagation();
-const DialogPortalItem = ({
-  context,
-  children
-}) => {
-  const themeName = useThemeName();
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  const adaptContext = useAdaptContext(context.adaptScope);
-  let content = /* @__PURE__ */jsx(Theme, {
-    name: themeName,
-    children
-  });
-  if (needsRepropagation) {
-    content = /* @__PURE__ */jsx(ProvideAdaptContext, {
-      ...adaptContext,
-      children: /* @__PURE__ */jsx(DialogProvider, {
-        ...context,
-        children: content
-      })
-    });
-  }
-  return isAdapted ? /* @__PURE__ */jsx(AdaptPortalContents, {
-    scope: context.adaptScope,
-    children: content
-  }) : context.modal ? /* @__PURE__ */jsx(PortalItem, {
-    hostName: context.modal ? "root" : context.adaptScope,
-    children: content
-  }) : content;
+const DialogPortalItem = ({ context, children }) => {
+	const themeName = useThemeName();
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const adaptContext = useAdaptContext(context.adaptScope);
+	let content = /* @__PURE__ */ jsx(Theme, {
+		name: themeName,
+		children
+	});
+	if (needsRepropagation) {
+		content = /* @__PURE__ */ jsx(ProvideAdaptContext, {
+			...adaptContext,
+			children: /* @__PURE__ */ jsx(DialogProvider, {
+				...context,
+				children: content
+			})
+		});
+	}
+	return isAdapted ? /* @__PURE__ */ jsx(AdaptPortalContents, {
+		scope: context.adaptScope,
+		children: content
+	}) : context.modal ? /* @__PURE__ */ jsx(PortalItem, {
+		hostName: "root",
+		children: content
+	}) : content;
 };
-const DialogPortal = React.forwardRef((props, forwardRef) => {
-  const {
-    scope,
-    forceMount,
-    children,
-    ...frameProps
-  } = props;
-  const dialogRef = React.useRef(null);
-  const ref = composeRefs(dialogRef, forwardRef);
-  const context = useDialogContext(scope);
-  const keepMounted = forceMount || context.keepChildrenMounted;
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
-  if (context.open && isFullyHidden) {
-    setIsFullyHidden(false);
-  }
-  const isVisible = context.open ? true : !isFullyHidden;
-  if (isWeb) {
-    useIsomorphicLayoutEffect(() => {
-      const node = dialogRef.current;
-      if (!(node instanceof HTMLDialogElement)) return;
-      if (isVisible) {
-        node.show?.();
-      } else {
-        node.close?.();
-      }
-    }, [isVisible]);
-  }
-  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 = getExpandedShorthand("zIndex", props);
-  const contents = /* @__PURE__ */jsx(StackZIndexContext, {
-    zIndex: resolveViewZIndex(zIndex),
-    children: /* @__PURE__ */jsx(Animate, {
-      type: "presence",
-      present: Boolean(context.open),
-      keepChildrenMounted: Boolean(keepMounted),
-      onExitComplete: handleExitComplete,
-      passThrough: isAdapted,
-      children
-    })
-  });
-  const framedContents = isFullyHidden && !keepMounted && !isAdapted ? null : /* @__PURE__ */jsx(LayoutMeasurementController, {
-    disable: !context.open,
-    children: /* @__PURE__ */jsx(DialogPortalFrame, {
-      ref,
-      ...(isWeb && context.open && {
-        "aria-modal": true
-      }),
-      pointerEvents: context.open ? "auto" : "none",
-      ...frameProps,
-      className: `_no_backdrop ` + (frameProps.className || ""),
-      children: contents
-    })
-  });
-  if (isWeb) {
-    return /* @__PURE__ */jsx(Portal, {
-      zIndex,
-      stackZIndex: 1e5,
-      passThrough: isAdapted,
-      children: /* @__PURE__ */jsx(PassthroughTheme, {
-        passThrough: isAdapted,
-        children: framedContents
-      })
-    });
-  }
-  return isAdapted ? framedContents : /* @__PURE__ */jsx(DialogPortalItem, {
-    context,
-    children: framedContents
-  });
+const DialogPortal = createRefComponent((props, forwardedRef) => {
+	const { scope, forceMount, children, ...frameProps } = props;
+	const dialogRef = React.useRef(null);
+	const ref = composeRefs(dialogRef, forwardedRef);
+	const context = useDialogContext(scope);
+	const portalContext = forceMount ? {
+		...context,
+		forceMount: true
+	} : context;
+	const keepMounted = forceMount || context.keepChildrenMounted;
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const isVisible = context.open || context.hasPresentParts;
+	if (isWeb) {
+		useIsomorphicLayoutEffect(() => {
+			const node = dialogRef.current;
+			if (!(node instanceof HTMLDialogElement)) return;
+			if (isVisible) {
+				node.show?.();
+			} else {
+				node.close?.();
+			}
+		}, [isVisible]);
+	}
+	const zIndex = getExpandedShorthand("zIndex", props);
+	const contents = /* @__PURE__ */ jsx(StackZIndexContext, {
+		zIndex: resolveViewZIndex(zIndex),
+		children: /* @__PURE__ */ jsx(DialogProvider, {
+			scope: context.dialogScope,
+			...portalContext,
+			children
+		})
+	});
+	const framedContents = !isVisible && !keepMounted && !isAdapted ? null : /* @__PURE__ */ jsx(LayoutMeasurementController, {
+		disable: !context.open,
+		children: /* @__PURE__ */ jsx(DialogPortalFrame, {
+			ref,
+			...isWeb && context.open && context.modal && { "aria-modal": true },
+			pointerEvents: context.open && context.modal ? "auto" : "none",
+			...frameProps,
+			className: `_no_backdrop ` + (frameProps.className || ""),
+			children: contents
+		})
+	});
+	if (isWeb) {
+		return /* @__PURE__ */ jsx(Portal, {
+			zIndex,
+			stackZIndex: 1e5,
+			passThrough: isAdapted,
+			hidden: !isVisible,
+			children: /* @__PURE__ */ jsx(PassthroughTheme, {
+				passThrough: isAdapted,
+				children: framedContents
+			})
+		});
+	}
+	return isAdapted ? framedContents : /* @__PURE__ */ jsx(DialogPortalItem, {
+		context: portalContext,
+		children: framedContents
+	});
 });
-const PassthroughTheme = ({
-  children,
-  passThrough
-}) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */jsx(Theme, {
-    passThrough,
-    name: themeName,
-    forceClassName: true,
-    children
-  });
+const PassthroughTheme = ({ children, passThrough }) => {
+	const themeName = useThemeName();
+	return /* @__PURE__ */ jsx(Theme, {
+		passThrough,
+		name: themeName,
+		forceClassName: true,
+		children
+	});
 };
+function useDialogAnimationReporter(context) {
+	const onAnimationCompleteRef = React.useRef(context.onAnimationComplete);
+	onAnimationCompleteRef.current = context.onAnimationComplete;
+	const openRef = React.useRef(context.open);
+	const pendingTransitionRef = React.useRef(context.open ? true : null);
+	if (openRef.current !== context.open) {
+		openRef.current = context.open;
+		pendingTransitionRef.current = context.open;
+	}
+	const reportComplete = React.useCallback((open) => {
+		if (pendingTransitionRef.current !== open) return;
+		if (openRef.current !== open) return;
+		pendingTransitionRef.current = null;
+		onAnimationCompleteRef.current?.({ open });
+	}, []);
+	return React.useMemo(() => ({
+		onEnterComplete: () => reportComplete(true),
+		onExitComplete: () => reportComplete(false)
+	}), [reportComplete]);
+}
+function useDialogPartPresence(context, options) {
+	const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
+	const reactId = React.useId();
+	const partPresenceId = `${context.contentId}-${options.id}-${reactId}`;
+	const keepMounted = options.forceMount || context.keepChildrenMounted;
+	const isPresent = context.open || !isFullyHidden;
+	useIsomorphicLayoutEffect(() => {
+		if (context.open && isFullyHidden) {
+			setIsFullyHidden(false);
+		}
+	}, [context.open, isFullyHidden]);
+	useIsomorphicLayoutEffect(() => {
+		if (options.disabled) return;
+		context.setPartPresence(partPresenceId, isPresent);
+		return () => {
+			context.setPartPresence(partPresenceId, false);
+		};
+	}, [
+		context.setPartPresence,
+		isPresent,
+		options.disabled,
+		partPresenceId
+	]);
+	const onExitComplete = React.useCallback(() => {
+		setIsFullyHidden(true);
+		options.onExitComplete?.();
+	}, [options.onExitComplete]);
+	return {
+		keepMounted,
+		onExitComplete,
+		shouldRender: Boolean(keepMounted || context.open || !isFullyHidden)
+	};
+}
 const OVERLAY_NAME = "DialogOverlay";
 const DialogOverlayFrame = styled(YStack, {
-  name: OVERLAY_NAME,
-  zIndex: 1,
-  variants: {
-    open: {
-      true: {
-        pointerEvents: "auto"
-      },
-      false: {
-        pointerEvents: "none"
-      }
-    },
-    unstyled: {
-      false: {
-        fullscreen: true,
-        position: "absolute",
-        backgroundColor: "$background",
-        pointerEvents: "auto"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: OVERLAY_NAME,
+	zIndex: 1,
+	inset: 0,
+	position: "absolute",
+	pointerEvents: "auto",
+	variants: { open: {
+		true: { pointerEvents: "auto" },
+		false: { pointerEvents: "none" }
+	} }
 });
-const DialogOverlay = DialogOverlayFrame.styleable(function DialogOverlay2({
-  scope,
-  ...props
-}, forwardedRef) {
-  const context = useDialogContext(scope);
-  const {
-    forceMount = context.forceMount,
-    ...overlayProps
-  } = props;
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  if (!forceMount) {
-    if (!context.modal || isAdapted) {
-      return null;
-    }
-  }
-  return /* @__PURE__ */jsx(DialogOverlayFrame, {
-    "data-state": getState(context.open),
-    pointerEvents: context.open ? "auto" : "none",
-    ...overlayProps,
-    ref: forwardedRef
-  });
+const DialogOverlay = createStyledHOC(DialogOverlayFrame, function DialogOverlay2({ scope, ...props }, forwardedRef) {
+	const context = useDialogContext(scope);
+	const { forceMount = context.forceMount, ...overlayProps } = props;
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const presence = useDialogPartPresence(context, {
+		disabled: isAdapted,
+		forceMount,
+		id: "overlay"
+	});
+	if (!forceMount && isAdapted) {
+		return null;
+	}
+	if (!presence.shouldRender) {
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Animate, {
+		type: "presence",
+		present: Boolean(context.open),
+		keepChildrenMounted: Boolean(presence.keepMounted),
+		onExitComplete: presence.onExitComplete,
+		passThrough: isAdapted,
+		children: /* @__PURE__ */ jsx(DialogOverlayFrame, {
+			"data-state": getState(context.open),
+			pointerEvents: context.open && context.modal ? "auto exit:none" : "none",
+			...overlayProps,
+			ref: forwardedRef
+		}, `${context.contentId}-overlay`)
+	});
 });
 const CONTENT_NAME = "DialogContent";
-const DialogContentFrame = styled(ThemeableStack, {
-  name: CONTENT_NAME,
-  zIndex: 2,
-  variants: {
-    size: {
-      "...size": (val, extras) => {
-        return {};
-      }
-    },
-    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"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$true",
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const DialogContentFrame = styled(YStack, {
+	displayName: CONTENT_NAME,
+	zIndex: 2,
+	position: "relative",
+	pointerEvents: "auto",
+	variants: {
+		elevate: { true: {
+			shadowColor: "shadow-color",
+			shadowRadius: 24,
+			shadowOffset: {
+				width: 0,
+				height: 12
+			}
+		} },
+		bordered: { true: {
+			borderWidth: 1,
+			borderColor: "border-color"
+		} }
+	}
 });
-const DialogContent = DialogContentFrame.styleable(function DialogContent2({
-  scope,
-  ...props
-}, forwardedRef) {
-  const context = useDialogContext(scope);
-  const contents = /* @__PURE__ */jsx(Fragment, {
-    children: context.modal ? /* @__PURE__ */jsx(DialogContentModal, {
-      context,
-      ...props,
-      ref: forwardedRef
-    }) : /* @__PURE__ */jsx(DialogContentNonModal, {
-      context,
-      ...props,
-      ref: forwardedRef
-    })
-  });
-  if (!isWeb || context.disableRemoveScroll) {
-    return contents;
-  }
-  return /* @__PURE__ */jsx(RemoveScroll, {
-    enabled: context.open,
-    children: /* @__PURE__ */jsx("div", {
-      "data-remove-scroll-container": true,
-      className: "_dsp_contents",
-      children: contents
-    })
-  });
+const DialogContent = createStyledHOC(DialogContentFrame, function DialogContent2({ scope, ...props }, forwardedRef) {
+	const context = useDialogContext(scope);
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const reporter = useDialogAnimationReporter(context);
+	const onTransitionProp = props.onTransition;
+	const onTransition = React.useCallback((event) => {
+		if (event.phase === "end" && event.cause === "enter") {
+			reporter.onEnterComplete();
+		}
+		onTransitionProp?.(event);
+	}, [reporter.onEnterComplete, onTransitionProp]);
+	const presence = useDialogPartPresence(context, {
+		disabled: isAdapted,
+		forceMount: context.forceMount,
+		id: "content",
+		onExitComplete: reporter.onExitComplete
+	});
+	const contents = /* @__PURE__ */ jsx(Fragment, { children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, {
+		context,
+		...props,
+		onTransition,
+		ref: forwardedRef
+	}) : /* @__PURE__ */ jsx(DialogContentNonModal, {
+		context,
+		...props,
+		onTransition,
+		ref: forwardedRef
+	}) });
+	if (isAdapted) {
+		if (!isWeb || context.disableRemoveScroll) {
+			return contents;
+		}
+		return /* @__PURE__ */ jsx(RemoveScroll, {
+			enabled: context.open && context.modal,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-remove-scroll-container": true,
+				className: "_dsp_contents",
+				children: contents
+			})
+		});
+	}
+	if (!presence.shouldRender) {
+		return null;
+	}
+	const animated = /* @__PURE__ */ jsx(Animate, {
+		type: "presence",
+		present: Boolean(context.open),
+		keepChildrenMounted: Boolean(presence.keepMounted),
+		onExitComplete: presence.onExitComplete,
+		children: /* @__PURE__ */ jsx(React.Fragment, { children: contents }, context.contentId)
+	});
+	if (!isWeb || context.disableRemoveScroll) {
+		return animated;
+	}
+	return /* @__PURE__ */ jsx(RemoveScroll, {
+		enabled: context.open && context.modal,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-remove-scroll-container": true,
+			className: "_dsp_contents",
+			children: animated
+		})
+	});
 });
-const DialogContentModal = React.forwardRef(({
-  children,
-  context,
-  ...props
-}, forwardedRef) => {
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-  return /* @__PURE__ */jsx(DialogContentImpl, {
-    ...props,
-    context,
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    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()),
-    ...(!props.unstyled && {
-      outlineStyle: "none"
-    }),
-    children
-  });
+const DialogContentModal = createRefComponent(({ children, context: contextProp, ...props }, forwardedRef) => {
+	const context = useDialogContext(contextProp.dialogScope);
+	const contentRef = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+	return /* @__PURE__ */ jsx(DialogContentImpl, {
+		...props,
+		context,
+		ref: composedRefs,
+		trapFocus: context.open,
+		disableOutsidePointerEvents: true,
+		onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+			event.cancel();
+			context.triggerRef.current?.focus();
+		}),
+		onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+			const originalEvent = event.event;
+			if (!originalEvent) return;
+			const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+			const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+			if (isRightClick) event.cancel();
+		}),
+		onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.cancel()),
+		outlineStyle: "none",
+		children
+	});
 });
-const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const hasInteractedOutsideRef = React.useRef(false);
-  return /* @__PURE__ */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();
-      }
-      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 DialogContentNonModal = createRefComponent((props, forwardedRef) => {
+	const context = useDialogContext(props.context.dialogScope);
+	const hasInteractedOutsideRef = React.useRef(false);
+	return /* @__PURE__ */ jsx(DialogContentImpl, {
+		...props,
+		context,
+		ref: forwardedRef,
+		trapFocus: false,
+		disableOutsidePointerEvents: false,
+		onCloseAutoFocus: (event) => {
+			props.onCloseAutoFocus?.(event);
+			if (!event.isCanceled) {
+				if (!hasInteractedOutsideRef.current) {
+					props.context.triggerRef.current?.focus();
+				}
+				event.cancel();
+			}
+			hasInteractedOutsideRef.current = false;
+		},
+		onInteractOutside: (event) => {
+			props.onInteractOutside?.(event);
+			if (!event.isCanceled) hasInteractedOutsideRef.current = true;
+			const target = event.event?.target;
+			const trigger = props.context.triggerRef.current;
+			if (!target || !(trigger instanceof HTMLElement)) return;
+			const targetIsTrigger = trigger.contains(target);
+			if (targetIsTrigger) event.cancel();
+		}
+	});
 });
-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 = useComposedRefs(forwardedRef, contentRef);
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  const isAdaptFullyHidden = React.useContext(DialogAdaptHiddenContext);
-  if (isAdapted) {
-    if (!context.open && !context.keepChildrenMounted && isAdaptFullyHidden) {
-      return null;
-    }
-    return /* @__PURE__ */jsx(DialogPortalItem, {
-      context,
-      children: contentProps.children
-    });
-  }
-  const contents = /* @__PURE__ */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 (!isWeb) {
-    return contents;
-  }
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [/* @__PURE__ */jsx(Dismissable, {
-      disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
-      forceUnmount: !context.open,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss: () => context?.onOpenChange?.(false),
-      children: /* @__PURE__ */jsx(FocusScope, {
-        loop: true,
-        enabled: context.open,
-        trapped: trapFocus,
-        onMountAutoFocus: onOpenAutoFocus,
-        forceUnmount: !context.open,
-        onUnmountAutoFocus: onCloseAutoFocus,
-        children: contents
-      })
-    }), process.env.NODE_ENV === "development" && /* @__PURE__ */jsxs(Fragment, {
-      children: [/* @__PURE__ */jsx(TitleWarning, {
-        titleId: context.titleId
-      }), /* @__PURE__ */jsx(DescriptionWarning, {
-        contentRef,
-        descriptionId: context.descriptionId
-      })]
-    })]
-  });
+const DialogContentImpl = createRefComponent((props, forwardedRef) => {
+	const { trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, context, onTransition, ...contentProps } = props;
+	const contentRef = React.useRef(null);
+	const composedRefs = useComposedRefs(forwardedRef, contentRef);
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const adaptContext = useAdaptContext(context.adaptScope);
+	if (isAdapted) {
+		if (!context.open && !context.keepChildrenMounted && adaptContext.targetFullyHidden) {
+			return null;
+		}
+		return /* @__PURE__ */ jsx(DialogPortalItem, {
+			context,
+			children: contentProps.children
+		});
+	}
+	const contents = /* @__PURE__ */ 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",
+		onTransition,
+		...contentProps
+	});
+	if (!isWeb) {
+		return contents;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dismissable, {
+		disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+		forceUnmount: !context.open,
+		onEscapeKeyDown,
+		onPointerDownOutside,
+		onFocusOutside,
+		onInteractOutside,
+		onDismiss: () => context?.onOpenChange?.(false),
+		children: /* @__PURE__ */ jsx(FocusScope, {
+			loop: true,
+			enabled: context.open,
+			trapped: trapFocus,
+			onMountAutoFocus: onOpenAutoFocus,
+			forceUnmount: !context.open,
+			onUnmountAutoFocus: onCloseAutoFocus,
+			children: contents
+		})
+	}), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }), /* @__PURE__ */ jsx(DescriptionWarning, {
+		contentRef,
+		descriptionId: context.descriptionId
+	})] })] });
 });
-const DialogTitleFrame = styled(H2, {
-  name: "DialogTitle"
+const DialogTitleFrame = styled(H2, { displayName: "DialogTitle" });
+const DialogTitle = createStyledHOC(DialogTitleFrame, function DialogTitle2(props, forwardedRef) {
+	const { scope, ...titleProps } = props;
+	const context = useDialogContext(scope);
+	return /* @__PURE__ */ jsx(DialogTitleFrame, {
+		id: context.titleId,
+		...titleProps,
+		ref: forwardedRef
+	});
 });
-const DialogTitle = DialogTitleFrame.styleable(function DialogTitle2(props, forwardedRef) {
-  const {
-    scope,
-    ...titleProps
-  } = props;
-  const context = useDialogContext(scope);
-  return /* @__PURE__ */jsx(DialogTitleFrame, {
-    id: context.titleId,
-    ...titleProps,
-    ref: forwardedRef
-  });
-});
-const DialogDescriptionFrame = styled(Paragraph, {
-  name: "DialogDescription"
-});
-const DialogDescription = DialogDescriptionFrame.styleable(function DialogDescription2(props, forwardedRef) {
-  const {
-    scope,
-    ...descriptionProps
-  } = props;
-  const context = useDialogContext(scope);
-  return /* @__PURE__ */jsx(DialogDescriptionFrame, {
-    id: context.descriptionId,
-    ...descriptionProps,
-    ref: forwardedRef
-  });
+const DialogDescriptionFrame = styled(Paragraph, { displayName: "DialogDescription" });
+const DialogDescription = createStyledHOC(DialogDescriptionFrame, function DialogDescription2(props, forwardedRef) {
+	const { scope, ...descriptionProps } = props;
+	const context = useDialogContext(scope);
+	return /* @__PURE__ */ jsx(DialogDescriptionFrame, {
+		id: context.descriptionId,
+		...descriptionProps,
+		ref: forwardedRef
+	});
 });
 const CLOSE_NAME = "DialogClose";
 const DialogCloseFrame = styled(View, {
-  name: CLOSE_NAME,
-  render: "button"
+	displayName: CLOSE_NAME,
+	render: "button"
 });
-const DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
-  const {
-    scope,
-    displayWhenAdapted,
-    ...closeProps
-  } = props;
-  const context = useDialogContext(scope);
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  const isInsideButton = React.useContext(ButtonNestingContext);
-  if (isAdapted && !displayWhenAdapted) {
-    return null;
-  }
-  return /* @__PURE__ */jsx(DialogCloseFrame, {
-    "aria-label": "Dialog Close",
-    render: isInsideButton ? "span" : "button",
-    ...closeProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress, () => {
-      context.onOpenChange(false);
-    })
-  });
+const DialogClose = createStyledHOC(DialogCloseFrame, (props, forwardedRef) => {
+	const { scope, displayWhenAdapted, ...closeProps } = props;
+	const context = useDialogContext(scope);
+	const isAdapted = useAdaptIsActive(context.adaptScope);
+	const isInsideButton = React.useContext(ButtonNestingContext);
+	if (isAdapted && !displayWhenAdapted) {
+		return null;
+	}
+	return /* @__PURE__ */ jsx(DialogCloseFrame, {
+		"aria-label": "Dialog Close",
+		render: isInsideButton ? "span" : "button",
+		...closeProps,
+		ref: forwardedRef,
+		onPress: composeEventHandlers(props.onPress, () => {
+			context.onOpenChange(false);
+		})
+	});
 });
 function getState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
 const TITLE_WARNING_NAME = "DialogTitleWarning";
 const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME,
-  titleName: "DialogTitle",
-  docsSlug: "dialog"
+	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 (!isWeb) return;
-      if (titleId) {
-        const hasTitle = document.getElementById(titleId);
-        if (!hasTitle) {
-          console.warn(MESSAGE);
-        }
-      }
-    }, [MESSAGE, titleId]);
-  }
-  return null;
+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 (!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 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 {
-    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] = 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,
-    contentId,
-    titleId,
-    descriptionId,
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle,
-    modal,
-    keepChildrenMounted,
-    disableRemoveScroll,
-    onAnimationComplete
-  };
-  React.useImperativeHandle(ref, () => ({
-    open: setOpen
-  }), [setOpen]);
-  return /* @__PURE__ */jsx(AdaptParent, {
-    scope: adaptScope,
-    portal: {
-      forwardProps: props
-    },
-    children: /* @__PURE__ */jsx(DialogProvider, {
-      scope,
-      ...context,
-      children: /* @__PURE__ */jsx(DialogSheetController, {
-        onOpenChange: setOpen,
-        scope,
-        children
-      })
-    })
-  });
+const Dialog = withStaticProperties(createRefComponent(function Dialog2(props) {
+	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 presentPartIdsRef = React.useRef(/* @__PURE__ */ new Set());
+	const [presentPartCount, setPresentPartCount] = React.useState(0);
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen,
+		onChange: onOpenChange
+	});
+	const onOpenToggle = React.useCallback(() => {
+		setOpen((prevOpen) => !prevOpen);
+	}, [setOpen]);
+	const adaptScope = `DialogAdapt${scope}`;
+	const setPartPresence = React.useCallback((id, present) => {
+		const presentPartIds = presentPartIdsRef.current;
+		const hasPart = presentPartIds.has(id);
+		if (present && !hasPart) {
+			presentPartIds.add(id);
+			setPresentPartCount(presentPartIds.size);
+		} else if (!present && hasPart) {
+			presentPartIds.delete(id);
+			setPresentPartCount(presentPartIds.size);
+		}
+	}, []);
+	const context = {
+		dialogScope: scope,
+		adaptScope,
+		triggerRef,
+		contentRef,
+		contentId,
+		titleId,
+		descriptionId,
+		open,
+		onOpenChange: setOpen,
+		onOpenToggle,
+		modal,
+		keepChildrenMounted,
+		disableRemoveScroll,
+		hasPresentParts: presentPartCount > 0,
+		setPartPresence,
+		onAnimationComplete
+	};
+	return /* @__PURE__ */ jsx(AdaptParent, {
+		scope: adaptScope,
+		open,
+		onOpenChange: setOpen,
+		state: context,
+		children: /* @__PURE__ */ jsx(DialogProvider, {
+			scope,
+			...context,
+			children
+		})
+	});
 }), {
-  Trigger: DialogTrigger,
-  Portal: DialogPortal,
-  Overlay: DialogOverlay,
-  Content: DialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-  FocusScope: FocusScopeController,
-  Adapt
+	Trigger: DialogTrigger,
+	Portal: DialogPortal,
+	Overlay: DialogOverlay,
+	Content: DialogContent,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose,
+	FocusScope: FocusScopeController,
+	Adapt
 });
-const DialogSheetController = props => {
-  const context = useDialogContext(props.scope);
-  const isAdapted = 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__ */jsx(SheetController, {
-    onOpenChange: val => {
-      if (isAdapted) {
-        props.onOpenChange?.(val);
-      }
-    },
-    onAnimationComplete: handleSheetAnimationComplete,
-    open: context.open,
-    hidden: !isAdapted,
-    children: /* @__PURE__ */jsx(DialogAdaptHiddenContext.Provider, {
-      value: isAdaptFullyHidden,
-      children: props.children
-    })
-  });
-};
+
 export { Dialog, DialogClose, DialogContent, DialogContext, DialogDescription, DialogOverlay, DialogOverlayFrame, DialogPortal, DialogPortalFrame, DialogProvider, DialogTitle, DialogTrigger, DialogWarningProvider, useDialogContext };
 //# sourceMappingURL=Dialog.mjs.map