@tamagui/popover 2.7.7 → 3.0.0-beta.643.1

package/dist/jsx/Popover.mjs

@@ -3,7 +3,7 @@ import { Animate } from "@tamagui/animate";
 import { ResetPresence } from "@tamagui/animate-presence";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { View, createStyledContext, useCreateShallowSetState, useEvent, useGet } from "@tamagui/core";
+import { View, createRefComponent, createStyledContext, createStyledHOC, useCreateShallowSetState, useEvent } from "@tamagui/core";
 import { Dismissable, DismissableBranch } from "@tamagui/dismissable";
 import { FloatingOverrideContext } from "@tamagui/floating";
 import { FocusScope, FocusScopeController } from "@tamagui/focus-scope";
@@ -12,661 +12,517 @@ import { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, Pop
 import { Portal, needsPortalRepropagation } from "@tamagui/portal";
 import { RemoveScroll } from "@tamagui/remove-scroll";
 import { ScrollView } from "@tamagui/scroll-view";
-import { SheetController } from "@tamagui/sheet/controller";
 import { YStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
 import { useFloatingContext } from "./useFloatingContext.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 const needsRepropagation = needsPortalRepropagation();
-const openPopovers = /* @__PURE__ */new Set();
+const openPopovers = /* @__PURE__ */ new Set();
 const hasOpenPopovers = () => {
-  return openPopovers.size > 0;
+	return openPopovers.size > 0;
 };
 const closeOpenPopovers = () => {
-  if (openPopovers.size === 0) return false;
-  openPopovers.forEach(setOpen => setOpen(false));
-  return true;
+	if (openPopovers.size === 0) return false;
+	openPopovers.forEach((setOpen) => setOpen(false));
+	return true;
 };
 const closeLastOpenedPopover = () => {
-  if (openPopovers.size === 0) return false;
-  const last = Array.from(openPopovers).pop();
-  if (last) {
-    last(false);
-    return true;
-  }
-  return false;
+	if (openPopovers.size === 0) return false;
+	const last = Array.from(openPopovers).pop();
+	if (last) {
+		last(false);
+		return true;
+	}
+	return false;
 };
 const PopoverContext = createStyledContext({}, "Popover__");
 const PopoverZIndexContext = React.createContext(void 0);
-const PopoverAdaptHiddenContext = React.createContext(true);
 const PopoverTriggerContext = createStyledContext({}, "PopoverTrigger__");
 const usePopoverContext = PopoverContext.useStyledContext;
 const usePopoverTriggerContext = PopoverTriggerContext.useStyledContext;
 function usePopoverOpen(scope) {
-  return usePopoverContext(scope).open;
+	return usePopoverContext(scope).open;
 }
 function usePopoverTriggerSetup(open) {
-  const triggerStateSettersRef = React.useRef(/* @__PURE__ */new Map());
-  const activeTriggerIdRef = React.useRef(null);
-  const setActiveTrigger = useEvent(id => {
-    const prevId = activeTriggerIdRef.current;
-    if (prevId === id) return;
-    if (prevId) triggerStateSettersRef.current.get(prevId)?.(false);
-    activeTriggerIdRef.current = id;
-    if (id && open) triggerStateSettersRef.current.get(id)?.(true);
-  });
-  const registerTrigger = useEvent((id, setOpenState) => {
-    triggerStateSettersRef.current.set(id, setOpenState);
-    setOpenState(activeTriggerIdRef.current === id && open);
-  });
-  const unregisterTrigger = useEvent(id => {
-    triggerStateSettersRef.current.delete(id);
-    if (activeTriggerIdRef.current === id) activeTriggerIdRef.current = null;
-  });
-  React.useEffect(() => {
-    if (!open) {
-      setActiveTrigger(null);
-      return;
-    }
-    const activeId = activeTriggerIdRef.current;
-    if (activeId) triggerStateSettersRef.current.get(activeId)?.(true);
-  }, [open, setActiveTrigger]);
-  return {
-    setActiveTrigger,
-    registerTrigger,
-    unregisterTrigger
-  };
+	const triggerStateSettersRef = React.useRef(/* @__PURE__ */ new Map());
+	const activeTriggerIdRef = React.useRef(null);
+	const setActiveTrigger = useEvent((id) => {
+		const prevId = activeTriggerIdRef.current;
+		if (prevId === id) return;
+		if (prevId) triggerStateSettersRef.current.get(prevId)?.(false);
+		activeTriggerIdRef.current = id;
+		if (id && open) triggerStateSettersRef.current.get(id)?.(true);
+	});
+	const registerTrigger = useEvent((id, setOpenState) => {
+		triggerStateSettersRef.current.set(id, setOpenState);
+		setOpenState(activeTriggerIdRef.current === id && open);
+	});
+	const unregisterTrigger = useEvent((id) => {
+		triggerStateSettersRef.current.delete(id);
+		if (activeTriggerIdRef.current === id) activeTriggerIdRef.current = null;
+	});
+	React.useEffect(() => {
+		if (!open) {
+			setActiveTrigger(null);
+			return;
+		}
+		const activeId = activeTriggerIdRef.current;
+		if (activeId) triggerStateSettersRef.current.get(activeId)?.(true);
+	}, [open, setActiveTrigger]);
+	return {
+		setActiveTrigger,
+		registerTrigger,
+		unregisterTrigger
+	};
 }
-const PopoverContextProvider = React.memo(({
-  scope,
-  children,
-  open,
-  onOpenChange,
-  onOpenToggle,
-  triggerRef,
-  id = "",
-  contentId,
-  hasCustomAnchor = false,
-  onCustomAnchorAdd = voidFn,
-  onCustomAnchorRemove = voidFn,
-  anchorTo,
-  adaptScope,
-  breakpointActive,
-  keepChildrenMounted,
-  disableDismissable,
-  hoverable
-}) => {
-  const [branches] = React.useState(() => /* @__PURE__ */new Set());
-  const {
-    setActiveTrigger,
-    registerTrigger,
-    unregisterTrigger
-  } = usePopoverTriggerSetup(open);
-  return /* @__PURE__ */jsx(PopoverContext.Provider, {
-    scope,
-    popoverScope: scope,
-    adaptScope,
-    id,
-    contentId,
-    triggerRef,
-    open,
-    onOpenChange,
-    onOpenToggle,
-    hasCustomAnchor,
-    onCustomAnchorAdd,
-    onCustomAnchorRemove,
-    anchorTo,
-    branches,
-    breakpointActive,
-    keepChildrenMounted,
-    disableDismissable,
-    hoverable,
-    children: /* @__PURE__ */jsx(PopoverTriggerContext.Provider, {
-      scope,
-      triggerRef,
-      hasCustomAnchor,
-      anchorTo,
-      branches,
-      onOpenToggle,
-      setActiveTrigger,
-      registerTrigger,
-      unregisterTrigger,
-      children
-    })
-  });
+const PopoverContextProvider = React.memo(({ scope, children, open, onOpenChange, onOpenToggle, triggerRef, id = "", contentId, hasCustomAnchor = false, onCustomAnchorAdd = voidFn, onCustomAnchorRemove = voidFn, anchorTo, adaptScope, breakpointActive, keepChildrenMounted, disableDismissable, hoverable }) => {
+	const [branches] = React.useState(() => /* @__PURE__ */ new Set());
+	const { setActiveTrigger, registerTrigger, unregisterTrigger } = usePopoverTriggerSetup(open);
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		scope,
+		popoverScope: scope,
+		adaptScope,
+		id,
+		contentId,
+		triggerRef,
+		open,
+		onOpenChange,
+		onOpenToggle,
+		hasCustomAnchor,
+		onCustomAnchorAdd,
+		onCustomAnchorRemove,
+		anchorTo,
+		branches,
+		breakpointActive,
+		keepChildrenMounted,
+		disableDismissable,
+		hoverable,
+		children: /* @__PURE__ */ jsx(PopoverTriggerContext.Provider, {
+			scope,
+			triggerRef,
+			hasCustomAnchor,
+			anchorTo,
+			branches,
+			onOpenToggle,
+			setActiveTrigger,
+			registerTrigger,
+			unregisterTrigger,
+			children
+		})
+	});
 });
 const voidFn = () => {};
-const PopoverAnchor = React.memo(React.forwardRef(function PopoverAnchor2(props, forwardedRef) {
-  const {
-    scope,
-    ...rest
-  } = props;
-  const {
-    onCustomAnchorAdd,
-    onCustomAnchorRemove
-  } = usePopoverContext(scope) || {};
-  React.useEffect(() => {
-    onCustomAnchorAdd();
-    return () => onCustomAnchorRemove();
-  }, [onCustomAnchorAdd, onCustomAnchorRemove]);
-  return /* @__PURE__ */jsx(PopperAnchor, {
-    scope,
-    ...rest,
-    ref: forwardedRef
-  });
+const PopoverAnchor = React.memo(createRefComponent(function PopoverAnchor2(props, forwardedRef) {
+	const { scope, ...rest } = props;
+	const { onCustomAnchorAdd, onCustomAnchorRemove } = usePopoverContext(scope) || {};
+	React.useEffect(() => {
+		onCustomAnchorAdd();
+		return () => onCustomAnchorRemove();
+	}, [onCustomAnchorAdd, onCustomAnchorRemove]);
+	return /* @__PURE__ */ jsx(PopperAnchor, {
+		scope,
+		...rest,
+		ref: forwardedRef
+	});
 }));
-const PopoverTrigger = React.memo(React.forwardRef(function PopoverTrigger2(props, forwardedRef) {
-  const {
-    scope,
-    disablePressTrigger,
-    ...rest
-  } = props;
-  const triggerContext = usePopoverTriggerContext(scope);
-  const triggerId = React.useId();
-  const [open, setOpen] = React.useState(false);
-  const anchorTo = triggerContext.anchorTo;
-  const triggerElRef = React.useRef(null);
-  const composedTriggerRef = useComposedRefs(forwardedRef, triggerElRef);
-  const {
-    registerTrigger,
-    unregisterTrigger
-  } = triggerContext;
-  React.useEffect(() => {
-    registerTrigger(triggerId, setOpen);
-    return () => {
-      unregisterTrigger(triggerId);
-    };
-  }, [registerTrigger, unregisterTrigger, triggerId]);
-  if (!rest.children) return null;
-  const activateSelf = () => {
-    triggerContext.setActiveTrigger(triggerId);
-    const el = triggerElRef.current;
-    if (el) triggerContext.triggerRef.current = el;
-  };
-  const trigger = /* @__PURE__ */jsx(View, {
-    "aria-expanded": open,
-    "data-state": getState(open),
-    ...rest,
-    ref: composedTriggerRef,
-    onPress: composeEventHandlers(rest.onPress, () => {
-      if (disablePressTrigger) return;
-      triggerContext.setActiveTrigger(open ? null : triggerId);
-      triggerContext.onOpenToggle();
-    }),
-    onMouseEnter: composeEventHandlers(rest.onMouseEnter, activateSelf),
-    onPressIn: composeEventHandlers(rest.onPressIn, activateSelf),
-    onFocus: composeEventHandlers(rest.onFocus, activateSelf)
-  });
-  const virtualRef = React.useMemo(() => {
-    if (!anchorTo) return null;
-    return {
-      current: {
-        getBoundingClientRect: () => isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
-        ...(!isWeb && {
-          measure: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height),
-          measureInWindow: c => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height)
-        })
-      }
-    };
-  }, [triggerContext.anchorTo, anchorTo?.x, anchorTo?.y, anchorTo?.height, anchorTo?.width]);
-  const wrappedTrigger = isWeb ? /* @__PURE__ */jsx(DismissableBranch, {
-    branches: triggerContext.branches,
-    children: trigger
-  }) : trigger;
-  return triggerContext.hasCustomAnchor ? wrappedTrigger : /* @__PURE__ */jsx(PopperAnchor, {
-    ...(virtualRef && {
-      virtualRef
-    }),
-    scope,
-    asChild: true,
-    children: wrappedTrigger
-  });
+const PopoverTrigger = React.memo(createRefComponent(function PopoverTrigger2(props, forwardedRef) {
+	const { scope, disablePressTrigger, ...rest } = props;
+	const triggerContext = usePopoverTriggerContext(scope);
+	const triggerId = React.useId();
+	const [open, setOpen] = React.useState(false);
+	const anchorTo = triggerContext.anchorTo;
+	const triggerElRef = React.useRef(null);
+	const composedTriggerRef = useComposedRefs(forwardedRef, triggerElRef);
+	const { registerTrigger, unregisterTrigger } = triggerContext;
+	React.useEffect(() => {
+		registerTrigger(triggerId, setOpen);
+		return () => {
+			unregisterTrigger(triggerId);
+		};
+	}, [
+		registerTrigger,
+		unregisterTrigger,
+		triggerId
+	]);
+	if (!rest.children) return null;
+	const activateSelf = () => {
+		triggerContext.setActiveTrigger(triggerId);
+		const el = triggerElRef.current;
+		if (el) triggerContext.triggerRef.current = el;
+	};
+	const trigger = /* @__PURE__ */ jsx(View, {
+		"aria-expanded": open,
+		"data-state": getState(open),
+		...rest,
+		ref: composedTriggerRef,
+		onPress: composeEventHandlers(rest.onPress, () => {
+			if (disablePressTrigger) return;
+			triggerContext.setActiveTrigger(open ? null : triggerId);
+			triggerContext.onOpenToggle();
+		}),
+		onMouseEnter: composeEventHandlers(rest.onMouseEnter, activateSelf),
+		onPressIn: composeEventHandlers(rest.onPressIn, activateSelf),
+		onFocus: composeEventHandlers(rest.onFocus, activateSelf)
+	});
+	const virtualRef = React.useMemo(() => {
+		if (!anchorTo) return null;
+		return { current: {
+			getBoundingClientRect: () => isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
+			...!isWeb && {
+				measure: (c) => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height),
+				measureInWindow: (c) => c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height)
+			}
+		} };
+	}, [
+		triggerContext.anchorTo,
+		anchorTo?.x,
+		anchorTo?.y,
+		anchorTo?.height,
+		anchorTo?.width
+	]);
+	const wrappedTrigger = isWeb ? /* @__PURE__ */ jsx(DismissableBranch, {
+		branches: triggerContext.branches,
+		children: trigger
+	}) : trigger;
+	return triggerContext.hasCustomAnchor ? wrappedTrigger : /* @__PURE__ */ jsx(PopperAnchor, {
+		...virtualRef && { virtualRef },
+		scope,
+		asChild: true,
+		children: wrappedTrigger
+	});
 }));
-const PopoverContent = PopperContentFrame.styleable(function PopoverContent2(props, forwardedRef) {
-  const {
-    trapFocus,
-    enableRemoveScroll = false,
-    zIndex: zIndexProp,
-    scope,
-    ...contentImplProps
-  } = props;
-  const context = usePopoverContext(scope);
-  const zIndexFromContext = React.useContext(PopoverZIndexContext);
-  const zIndex = zIndexProp ?? zIndexFromContext;
-  const open = usePopoverOpen(scope);
-  const composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
-  const isRightClickOutsideRef = React.useRef(false);
-  const [isFullyHidden, setIsFullyHidden] = React.useState(!open);
-  useIsomorphicLayoutEffect(() => {
-    if (open && isFullyHidden) setIsFullyHidden(false);
-  }, [open, isFullyHidden]);
-  const isAdaptFullyHidden = React.useContext(PopoverAdaptHiddenContext);
-  if (!context.keepChildrenMounted) {
-    if (context.breakpointActive) {
-      if (!open && isAdaptFullyHidden) return null;
-    } else if (isFullyHidden && !open) return null;
-  }
-  return /* @__PURE__ */jsx(PopoverPortal, {
-    passThrough: context.breakpointActive,
-    context,
-    open,
-    zIndex,
-    children: /* @__PURE__ */jsx(View, {
-      passThrough: context.breakpointActive,
-      pointerEvents: open ? contentImplProps.pointerEvents ?? "auto" : "none",
-      children: /* @__PURE__ */jsx(PopoverContentImpl, {
-        ...contentImplProps,
-        context,
-        open,
-        enableRemoveScroll,
-        ref: composedRefs,
-        setIsFullyHidden,
-        scope,
-        trapFocus: trapFocus ?? open,
-        disableOutsidePointerEvents: true,
-        onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : composeEventHandlers(props.onCloseAutoFocus, event => {
-          if (event.defaultPrevented) return;
-          event.preventDefault();
-          if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, event => {
-          const originalEvent = event.detail.originalEvent;
-          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-          isRightClickOutsideRef.current = originalEvent.button === 2 || ctrlLeftClick;
-        }, {
-          checkDefaultPrevented: false
-        }),
-        onFocusOutside: composeEventHandlers(props.onFocusOutside, event => event.preventDefault(), {
-          checkDefaultPrevented: false
-        })
-      })
-    })
-  });
+const PopoverContent = createStyledHOC(PopperContentFrame, function PopoverContent2(props, forwardedRef) {
+	const { trapFocus, enableRemoveScroll = false, zIndex: zIndexProp, scope, forceMount, ...contentImplProps } = props;
+	const context = usePopoverContext(scope);
+	const adaptContext = useAdaptContext(context.adaptScope);
+	const zIndexFromContext = React.useContext(PopoverZIndexContext);
+	const zIndex = zIndexProp ?? zIndexFromContext;
+	const open = usePopoverOpen(scope);
+	const composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
+	const isRightClickOutsideRef = React.useRef(false);
+	const [isFullyHidden, setIsFullyHidden] = React.useState(!open);
+	useIsomorphicLayoutEffect(() => {
+		if (open && isFullyHidden) setIsFullyHidden(false);
+	}, [open, isFullyHidden]);
+	if (!forceMount && !context.keepChildrenMounted) {
+		if (context.breakpointActive) {
+			if (!open && adaptContext.targetFullyHidden) return null;
+		} else if (isFullyHidden && !open) return null;
+	}
+	return /* @__PURE__ */ jsx(PopoverPortal, {
+		passThrough: context.breakpointActive,
+		context,
+		open,
+		visuallyActive: open || !isFullyHidden,
+		zIndex,
+		children: /* @__PURE__ */ jsx(View, {
+			passThrough: context.breakpointActive,
+			pointerEvents: open ? contentImplProps.pointerEvents ?? "auto" : "none",
+			children: /* @__PURE__ */ jsx(PopoverContentImpl, {
+				...contentImplProps,
+				context,
+				open,
+				forceMount,
+				enableRemoveScroll,
+				ref: composedRefs,
+				setIsFullyHidden,
+				scope,
+				trapFocus: trapFocus ?? open,
+				disableOutsidePointerEvents: true,
+				onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : composeEventHandlers(props.onCloseAutoFocus, (event) => {
+					if (event.isCanceled) return;
+					event.cancel();
+					if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
+				}),
+				onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+					const originalEvent = event.event;
+					if (!originalEvent) return;
+					const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+					isRightClickOutsideRef.current = originalEvent.button === 2 || ctrlLeftClick;
+				}, { checkDefaultPrevented: false }),
+				onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
+					if (trapFocus ?? open) event.cancel();
+				}, { checkDefaultPrevented: false })
+			})
+		})
+	});
 });
-const useParentContexts = scope => {
-  const context = usePopoverContext(scope);
-  const triggerContext = usePopoverTriggerContext(scope);
-  return {
-    popperContext: usePopperContext(scope),
-    adaptContext: useAdaptContext(context.adaptScope),
-    context,
-    triggerContext
-  };
+const useParentContexts = (scope) => {
+	const context = usePopoverContext(scope);
+	const triggerContext = usePopoverTriggerContext(scope);
+	return {
+		popperContext: usePopperContext(scope),
+		adaptContext: useAdaptContext(context.adaptScope),
+		context,
+		triggerContext
+	};
 };
-function RepropagateParentContexts({
-  adaptContext,
-  children,
-  context,
-  triggerContext,
-  popperContext
-}) {
-  return /* @__PURE__ */jsx(PopperProvider, {
-    scope: context.popoverScope,
-    ...popperContext,
-    children: /* @__PURE__ */jsx(PopoverContext.Provider, {
-      scope: context.popoverScope,
-      ...context,
-      children: /* @__PURE__ */jsx(PopoverTriggerContext.Provider, {
-        scope: context.popoverScope,
-        ...triggerContext,
-        children: /* @__PURE__ */jsx(ProvideAdaptContext, {
-          ...adaptContext,
-          children
-        })
-      })
-    })
-  });
+function RepropagateParentContexts({ adaptContext, children, context, triggerContext, popperContext }) {
+	return /* @__PURE__ */ jsx(PopperProvider, {
+		scope: context.popoverScope,
+		...popperContext,
+		children: /* @__PURE__ */ jsx(PopoverContext.Provider, {
+			scope: context.popoverScope,
+			...context,
+			children: /* @__PURE__ */ jsx(PopoverTriggerContext.Provider, {
+				scope: context.popoverScope,
+				...triggerContext,
+				children: /* @__PURE__ */ jsx(ProvideAdaptContext, {
+					...adaptContext,
+					children
+				})
+			})
+		})
+	});
 }
-const PortalAdaptSafe = ({
-  children,
-  context
-}) => {
-  "use no memo";
-
-  if (needsRepropagation) {
-    const parentContexts = useParentContexts(context.popoverScope);
-    return /* @__PURE__ */jsx(AdaptPortalContents, {
-      scope: context.adaptScope,
-      children: /* @__PURE__ */jsx(RepropagateParentContexts, {
-        ...parentContexts,
-        children
-      })
-    });
-  }
-  return /* @__PURE__ */jsx(AdaptPortalContents, {
-    scope: context.adaptScope,
-    children
-  });
+const PortalAdaptSafe = ({ children, context }) => {
+	"use no memo";
+	if (needsRepropagation) {
+		const parentContexts = useParentContexts(context.popoverScope);
+		return /* @__PURE__ */ jsx(AdaptPortalContents, {
+			scope: context.adaptScope,
+			children: /* @__PURE__ */ jsx(RepropagateParentContexts, {
+				...parentContexts,
+				children
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(AdaptPortalContents, {
+		scope: context.adaptScope,
+		children
+	});
 };
-function PopoverPortal({
-  context,
-  open,
-  zIndex,
-  passThrough,
-  children,
-  onPress
-}) {
-  "use no memo";
-
-  let content = children;
-  if (needsRepropagation) content = /* @__PURE__ */jsx(RepropagateParentContexts, {
-    ...useParentContexts(context.popoverScope),
-    children: content
-  });
-  return /* @__PURE__ */jsxs(Portal, {
-    passThrough,
-    stackZIndex: true,
-    zIndex,
-    children: [!!open && !context.breakpointActive && !context.hoverable && /* @__PURE__ */jsx(YStack, {
-      fullscreen: true,
-      onPress: composeEventHandlers(onPress, context.onOpenToggle)
-    }), content]
-  });
+function PopoverPortal({ context, open, visuallyActive, zIndex, passThrough, children, onPress }) {
+	"use no memo";
+	let content = children;
+	if (needsRepropagation) content = /* @__PURE__ */ jsx(RepropagateParentContexts, {
+		...useParentContexts(context.popoverScope),
+		children: content
+	});
+	return /* @__PURE__ */ jsxs(Portal, {
+		passThrough,
+		stackZIndex: true,
+		zIndex,
+		hidden: !visuallyActive,
+		children: [!!open && !context.breakpointActive && !context.hoverable && /* @__PURE__ */ jsx(YStack, {
+			position: "absolute",
+			inset: 0,
+			onPress: composeEventHandlers(onPress, context.onOpenToggle)
+		}), content]
+	});
 }
-const PopoverContentImpl = React.forwardRef(function PopoverContentImpl2(props, forwardedRef) {
-  const {
-    trapFocus,
-    scope,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    disableFocusScope,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    children,
-    enableRemoveScroll,
-    freezeContentsWhenHidden,
-    setIsFullyHidden,
-    lazyMount,
-    forceUnmount,
-    context,
-    open,
-    alwaysDisable,
-    ...contentProps
-  } = props;
-  const {
-    keepChildrenMounted,
-    disableDismissable
-  } = context;
-  const handleExitComplete = React.useCallback(() => {
-    setIsFullyHidden?.(true);
-  }, [setIsFullyHidden]);
-  let contents = /* @__PURE__ */jsx(ResetPresence, {
-    disable: context.breakpointActive,
-    children
-  });
-  const handleDismiss = React.useCallback(() => {
-    context.onOpenChange(false, "press");
-  }, [context]);
-  if (!context.breakpointActive) {
-    if (!alwaysDisable || !alwaysDisable.focus) contents = /* @__PURE__ */jsx(FocusScope, {
-      loop: trapFocus !== false,
-      enabled: context.breakpointActive ? false : disableFocusScope ? false : open,
-      trapped: context.breakpointActive ? false : trapFocus,
-      onMountAutoFocus: onOpenAutoFocus,
-      onUnmountAutoFocus: onCloseAutoFocus === false ? void 0 : onCloseAutoFocus,
-      children: /* @__PURE__ */jsx("div", {
-        style: dspContentsStyle,
-        children: contents
-      })
-    });
-    if (!alwaysDisable || !alwaysDisable["remove-scroll"]) contents = /* @__PURE__ */jsx(RemoveScroll, {
-      enabled: context.breakpointActive ? false : enableRemoveScroll ? open : false,
-      children: contents
-    });
-    if (!alwaysDisable || !alwaysDisable.dismiss) contents = /* @__PURE__ */jsx(Dismissable, {
-      branches: context.branches,
-      forceUnmount: disableDismissable || (forceUnmount ?? !open),
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss: handleDismiss,
-      children: contents
-    });
-  }
-  return /* @__PURE__ */jsx(Animate, {
-    type: "presence",
-    present: Boolean(open),
-    keepChildrenMounted: Boolean(keepChildrenMounted),
-    onExitComplete: handleExitComplete,
-    lazyMount,
-    passThrough: context.breakpointActive,
-    children: /* @__PURE__ */jsx(PopperContent, {
-      scope,
-      "data-state": getState(open),
-      id: context.contentId,
-      ref: forwardedRef,
-      passThrough: context.breakpointActive,
-      ...(!contentProps.unstyled && {
-        size: "$true",
-        backgroundColor: "$background",
-        alignItems: "center"
-      }),
-      ...contentProps,
-      children: /* @__PURE__ */jsx(PortalAdaptSafe, {
-        context,
-        children: contents
-      })
-    }, context.contentId)
-  });
+const PopoverContentImpl = createRefComponent(function PopoverContentImpl2(props, forwardedRef) {
+	const { trapFocus, scope, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, enableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, lazyMount, forceUnmount, forceMount, context, open, alwaysDisable, ...contentProps } = props;
+	const { disableDismissable } = context;
+	const keepChildrenMounted = context.keepChildrenMounted || forceMount;
+	const handleExitComplete = React.useCallback(() => {
+		setIsFullyHidden?.(true);
+	}, [setIsFullyHidden]);
+	let contents = /* @__PURE__ */ jsx(ResetPresence, {
+		disable: context.breakpointActive,
+		children
+	});
+	const handleDismiss = React.useCallback(() => {
+		context.onOpenChange(false, "press");
+	}, [context]);
+	if (!context.breakpointActive) {
+		if (!alwaysDisable || !alwaysDisable.focus) contents = /* @__PURE__ */ jsx(FocusScope, {
+			loop: trapFocus !== false,
+			enabled: context.breakpointActive ? false : disableFocusScope ? false : open,
+			trapped: context.breakpointActive ? false : trapFocus,
+			onMountAutoFocus: onOpenAutoFocus,
+			onUnmountAutoFocus: onCloseAutoFocus === false ? void 0 : onCloseAutoFocus,
+			children: contents
+		});
+		if (!alwaysDisable || !alwaysDisable["remove-scroll"]) contents = /* @__PURE__ */ jsx(RemoveScroll, {
+			enabled: context.breakpointActive ? false : enableRemoveScroll ? open : false,
+			children: contents
+		});
+		if (!alwaysDisable || !alwaysDisable.dismiss) contents = /* @__PURE__ */ jsx(Dismissable, {
+			branches: context.branches,
+			forceUnmount: disableDismissable || (forceUnmount ?? !open),
+			onEscapeKeyDown,
+			onPointerDownOutside,
+			onFocusOutside,
+			onInteractOutside,
+			onDismiss: handleDismiss,
+			children: contents
+		});
+	}
+	return /* @__PURE__ */ jsx(Animate, {
+		type: "presence",
+		present: Boolean(open),
+		keepChildrenMounted: Boolean(keepChildrenMounted),
+		onExitComplete: handleExitComplete,
+		lazyMount,
+		passThrough: context.breakpointActive,
+		children: /* @__PURE__ */ jsx(PopperContent, {
+			scope,
+			"data-state": getState(open),
+			id: context.contentId,
+			ref: forwardedRef,
+			passThrough: context.breakpointActive,
+			...contentProps,
+			children: /* @__PURE__ */ jsx(PortalAdaptSafe, {
+				context,
+				children: contents
+			})
+		}, context.contentId)
+	});
 });
-const dspContentsStyle = {
-  display: "contents"
-};
-const PopoverClose = React.forwardRef(function PopoverClose2(props, forwardedRef) {
-  const {
-    scope,
-    ...rest
-  } = props;
-  const context = usePopoverContext(scope);
-  return /* @__PURE__ */jsx(YStack, {
-    ...rest,
-    ref: forwardedRef,
-    componentName: "PopoverClose",
-    onPress: composeEventHandlers(props.onPress, () => context?.onOpenChange?.(false, "press"))
-  });
+const PopoverClose = createRefComponent(function PopoverClose2(props, forwardedRef) {
+	const { scope, className, ...rest } = props;
+	const context = usePopoverContext(scope);
+	return /* @__PURE__ */ jsx(YStack, {
+		...rest,
+		ref: forwardedRef,
+		className: `is_PopoverClose ${className || ""}`.trim(),
+		onPress: composeEventHandlers(props.onPress, () => context?.onOpenChange?.(false, "press"))
+	});
 });
-const PopoverArrow = PopperArrowFrame.styleable(function PopoverArrow2(props, forwardedRef) {
-  const {
-    scope,
-    ...rest
-  } = props;
-  if (useAdaptIsActive(usePopoverContext(scope).adaptScope)) return null;
-  return /* @__PURE__ */jsx(PopperArrow, {
-    scope,
-    componentName: "PopoverArrow",
-    ...rest,
-    ref: forwardedRef
-  });
+const PopoverArrow = createStyledHOC(PopperArrowFrame, function PopoverArrow2(props, forwardedRef) {
+	const { scope, className, ...rest } = props;
+	if (useAdaptIsActive(usePopoverContext(scope).adaptScope)) return null;
+	return /* @__PURE__ */ jsx(PopperArrow, {
+		scope,
+		className: `is_PopoverArrow ${className || ""}`.trim(),
+		...rest,
+		ref: forwardedRef
+	});
 });
-const PopoverScrollView = React.forwardRef(({
-  scope,
-  ...props
-}, ref) => {
-  const context = usePopoverContext(scope);
-  return /* @__PURE__ */jsx(ScrollView, {
-    ref,
-    pointerEvents: context.breakpointActive ? "none" : void 0,
-    scrollEnabled: !context.breakpointActive,
-    passThrough: context.breakpointActive,
-    ...props
-  });
+const PopoverScrollView = createRefComponent(({ scope, ...props }, ref) => {
+	const context = usePopoverContext(scope);
+	return /* @__PURE__ */ jsx(ScrollView, {
+		ref,
+		pointerEvents: context.breakpointActive ? "none" : void 0,
+		scrollEnabled: !context.breakpointActive,
+		passThrough: context.breakpointActive,
+		...props
+	});
 });
 const DEFAULT_SCOPE = "";
-const Popover = withStaticProperties(React.forwardRef(function Popover2({
-  scope = DEFAULT_SCOPE,
-  ...props
-}, ref) {
-  const id = React.useId();
-  const adaptScope = `PopoverAdapt${scope}`;
-  return /* @__PURE__ */jsx(AdaptParent, {
-    scope: adaptScope,
-    portal: true,
-    children: /* @__PURE__ */jsx(PopoverInner, {
-      adaptScope,
-      ref,
-      id,
-      scope,
-      ...props
-    })
-  });
+const Popover = withStaticProperties(createRefComponent(function Popover2({ scope = DEFAULT_SCOPE, ...props }, ref) {
+	const id = React.useId();
+	const adaptScope = `PopoverAdapt${scope}`;
+	const { open: openProp, defaultOpen, onOpenChange } = props;
+	const viaRef = React.useRef(void 0);
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen || false,
+		onChange: (val) => {
+			onOpenChange?.(val, viaRef.current);
+		}
+	});
+	const handleOpenChange = useEvent((val, via) => {
+		viaRef.current = via;
+		setOpen(val);
+	});
+	React.useEffect(() => {
+		if (!open) return;
+		openPopovers.add(setOpen);
+		return () => {
+			openPopovers.delete(setOpen);
+		};
+	}, [open, setOpen]);
+	return /* @__PURE__ */ jsx(AdaptParent, {
+		scope: adaptScope,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(PopoverInner, {
+			adaptScope,
+			ref,
+			id,
+			scope,
+			open,
+			setOpen,
+			handleOpenChange,
+			...props
+		})
+	});
 }), {
-  Anchor: PopoverAnchor,
-  Arrow: PopoverArrow,
-  Trigger: PopoverTrigger,
-  Content: PopoverContent,
-  Close: PopoverClose,
-  Adapt,
-  ScrollView: PopoverScrollView,
-  FocusScope: FocusScopeController
+	Anchor: PopoverAnchor,
+	Arrow: PopoverArrow,
+	Trigger: PopoverTrigger,
+	Content: PopoverContent,
+	Close: PopoverClose,
+	Adapt,
+	ScrollView: PopoverScrollView,
+	FocusScope: FocusScopeController
 });
-const PopoverInner = React.forwardRef(function PopoverInner2(props, forwardedRef) {
-  const {
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    scope = DEFAULT_SCOPE,
-    keepChildrenMounted: keepChildrenMountedProp,
-    hoverable,
-    disableFocus,
-    disableDismissable,
-    zIndex,
-    id,
-    adaptScope,
-    ...restProps
-  } = props;
-  const triggerRef = React.useRef(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
-  const viaRef = React.useRef(void 0);
-  const [keepChildrenMounted] = useControllableState({
-    prop: keepChildrenMountedProp,
-    defaultProp: false,
-    transition: keepChildrenMountedProp === "lazy"
-  });
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: val => {
-      onOpenChange?.(val, viaRef.current);
-    }
-  });
-  React.useEffect(() => {
-    if (!open) return;
-    openPopovers.add(setOpen);
-    return () => {
-      openPopovers.delete(setOpen);
-    };
-  }, [open, setOpen]);
-  const handleOpenChange = useEvent((val, via) => {
-    viaRef.current = via;
-    setOpen(val);
-  });
-  const isAdapted = useAdaptIsActive(adaptScope);
-  const floatingContext = useFloatingContext({
-    open,
-    setOpen: handleOpenChange,
-    disable: isAdapted,
-    hoverable,
-    disableFocus
-  });
-  const [anchorTo, setAnchorToRaw] = React.useState();
-  const setAnchorTo = useCreateShallowSetState(setAnchorToRaw);
-  React.useImperativeHandle(forwardedRef, () => ({
-    anchorTo: setAnchorTo,
-    toggle: () => setOpen(prev => !prev),
-    open: () => setOpen(true),
-    close: () => setOpen(false),
-    setOpen
-  }));
-  const contentId = React.useId();
-  const onOpenToggle = useEvent(() => {
-    if (open && isAdapted) return;
-    setOpen(!open);
-  });
-  const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);
-  const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);
-  const contents = /* @__PURE__ */jsx(Popper, {
-    open,
-    passThrough: isAdapted,
-    scope,
-    stayInFrame: true,
-    ...restProps,
-    children: /* @__PURE__ */jsx(PopoverContextProvider, {
-      scope,
-      open,
-      onOpenChange: handleOpenChange,
-      onOpenToggle,
-      triggerRef,
-      id,
-      contentId,
-      hasCustomAnchor,
-      onCustomAnchorAdd,
-      onCustomAnchorRemove,
-      anchorTo,
-      adaptScope,
-      breakpointActive: isAdapted,
-      keepChildrenMounted,
-      disableDismissable,
-      hoverable,
-      children: /* @__PURE__ */jsx(PopoverSheetController, {
-        onOpenChange: setOpen,
-        open,
-        scope,
-        children
-      })
-    })
-  });
-  let result = /* @__PURE__ */jsx(Fragment, {
-    children: isWeb ? /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
-      value: floatingContext,
-      children: contents
-    }) : contents
-  });
-  if (zIndex !== void 0) return /* @__PURE__ */jsx(PopoverZIndexContext.Provider, {
-    value: zIndex,
-    children: result
-  });
-  return result;
+const PopoverInner = createRefComponent(function PopoverInner2(props, forwardedRef) {
+	const { children, open: _openProp, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, scope = DEFAULT_SCOPE, keepChildrenMounted: keepChildrenMountedProp, hoverable, disableFocus, disableDismissable, zIndex, id, adaptScope, open, setOpen, handleOpenChange, ...restProps } = props;
+	const triggerRef = React.useRef(null);
+	const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
+	const [keepChildrenMounted] = useControllableState({
+		prop: keepChildrenMountedProp,
+		defaultProp: false,
+		transition: keepChildrenMountedProp === "lazy"
+	});
+	const isAdapted = useAdaptIsActive(adaptScope);
+	const floatingContext = useFloatingContext({
+		open,
+		setOpen: handleOpenChange,
+		disable: isAdapted,
+		hoverable,
+		disableFocus
+	});
+	const [anchorTo, setAnchorToRaw] = React.useState();
+	const setAnchorTo = useCreateShallowSetState(setAnchorToRaw);
+	React.useImperativeHandle(forwardedRef, () => ({
+		anchorTo: setAnchorTo,
+		toggle: () => setOpen((prev) => !prev),
+		open: () => setOpen(true),
+		close: () => setOpen(false),
+		setOpen
+	}));
+	const contentId = React.useId();
+	const onOpenToggle = useEvent(() => {
+		if (open && isAdapted) return;
+		setOpen(!open);
+	});
+	const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);
+	const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);
+	const contents = /* @__PURE__ */ jsx(Popper, {
+		open,
+		passThrough: isAdapted,
+		scope,
+		stayInFrame: true,
+		...restProps,
+		children: /* @__PURE__ */ jsx(PopoverContextProvider, {
+			scope,
+			open,
+			onOpenChange: handleOpenChange,
+			onOpenToggle,
+			triggerRef,
+			id,
+			contentId,
+			hasCustomAnchor,
+			onCustomAnchorAdd,
+			onCustomAnchorRemove,
+			anchorTo,
+			adaptScope,
+			breakpointActive: isAdapted,
+			keepChildrenMounted,
+			disableDismissable,
+			hoverable,
+			children
+		})
+	});
+	let result = /* @__PURE__ */ jsx(Fragment, { children: isWeb ? /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, {
+		value: floatingContext,
+		children: contents
+	}) : contents });
+	if (zIndex !== void 0) return /* @__PURE__ */ jsx(PopoverZIndexContext.Provider, {
+		value: zIndex,
+		children: result
+	});
+	return result;
 });
 function getState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
-const PopoverSheetController = ({
-  open,
-  scope,
-  ...props
-}) => {
-  const context = usePopoverContext(scope);
-  const showSheet = useShowPopoverSheet(context, open);
-  const breakpointActive = context?.breakpointActive;
-  const getShowSheet = useGet(showSheet);
-  const [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!open);
-  if (open && isAdaptFullyHidden) setIsAdaptFullyHidden(false);
-  return /* @__PURE__ */jsx(SheetController, {
-    onOpenChange: val => {
-      if (getShowSheet()) props.onOpenChange?.(val);
-    },
-    onAnimationComplete: React.useCallback(({
-      open: isOpen
-    }) => {
-      if (!isOpen) setIsAdaptFullyHidden(true);
-    }, []),
-    open,
-    hidden: !breakpointActive,
-    children: /* @__PURE__ */jsx(PopoverAdaptHiddenContext.Provider, {
-      value: isAdaptFullyHidden,
-      children: props.children
-    })
-  });
-};
-const useShowPopoverSheet = (context, open) => {
-  const isAdapted = useAdaptIsActive(context.adaptScope);
-  return open === false ? false : isAdapted;
-};
+
 export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverContextProvider, PopoverTrigger, PopoverTriggerContext, PopoverZIndexContext, closeLastOpenedPopover, closeOpenPopovers, hasOpenPopovers, usePopoverContext, usePopoverOpen, usePopoverTriggerContext, usePopoverTriggerSetup };
 //# sourceMappingURL=Popover.mjs.map