@tamagui/popover 2.7.7 → 3.0.0-beta.637.1

package/dist/esm/Popover.native.js

@@ -4,7 +4,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 { DismissableBranch } from "@tamagui/dismissable";
 import { FloatingOverrideContext } from "@tamagui/floating";
 import { FocusScopeController } from "@tamagui/focus-scope";
@@ -12,684 +12,539 @@ import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperProvider, usePopperContext } from "@tamagui/popper";
 import { Portal, needsPortalRepropagation } from "@tamagui/portal";
 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.native.js";
+
 var needsRepropagation = needsPortalRepropagation();
-var openPopovers = /* @__PURE__ */new Set();
-var hasOpenPopovers = function () {
-  return openPopovers.size > 0;
+var openPopovers = /* @__PURE__ */ new Set();
+var hasOpenPopovers = function() {
+	return openPopovers.size > 0;
 };
-var closeOpenPopovers = function () {
-  if (openPopovers.size === 0) return false;
-  openPopovers.forEach(function (setOpen) {
-    return setOpen(false);
-  });
-  return true;
+var closeOpenPopovers = function() {
+	if (openPopovers.size === 0) return false;
+	openPopovers.forEach(function(setOpen) {
+		return setOpen(false);
+	});
+	return true;
 };
-var closeLastOpenedPopover = function () {
-  if (openPopovers.size === 0) return false;
-  var last = Array.from(openPopovers).pop();
-  if (last) {
-    last(false);
-    return true;
-  }
-  return false;
+var closeLastOpenedPopover = function() {
+	if (openPopovers.size === 0) return false;
+	var last = Array.from(openPopovers).pop();
+	if (last) {
+		last(false);
+		return true;
+	}
+	return false;
 };
 var PopoverContext = createStyledContext({}, "Popover__");
-var PopoverZIndexContext = /* @__PURE__ */React.createContext(void 0);
-var PopoverAdaptHiddenContext = /* @__PURE__ */React.createContext(true);
+var PopoverZIndexContext = /* @__PURE__ */ React.createContext(void 0);
 var PopoverTriggerContext = createStyledContext({}, "PopoverTrigger__");
 var usePopoverContext = PopoverContext.useStyledContext;
 var usePopoverTriggerContext = PopoverTriggerContext.useStyledContext;
 function usePopoverOpen(scope) {
-  return usePopoverContext(scope).open;
+	return usePopoverContext(scope).open;
 }
 function usePopoverTriggerSetup(open) {
-  var triggerStateSettersRef = React.useRef(/* @__PURE__ */new Map());
-  var activeTriggerIdRef = React.useRef(null);
-  var setActiveTrigger = useEvent(function (id) {
-    var prevId = activeTriggerIdRef.current;
-    if (prevId === id) return;
-    if (prevId) {
-      var _triggerStateSettersRef_current_get;
-      (_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(prevId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(false);
-    }
-    activeTriggerIdRef.current = id;
-    if (id && open) {
-      var _triggerStateSettersRef_current_get1;
-      (_triggerStateSettersRef_current_get1 = triggerStateSettersRef.current.get(id)) === null || _triggerStateSettersRef_current_get1 === void 0 || _triggerStateSettersRef_current_get1(true);
-    }
-  });
-  var registerTrigger = useEvent(function (id, setOpenState) {
-    triggerStateSettersRef.current.set(id, setOpenState);
-    setOpenState(activeTriggerIdRef.current === id && open);
-  });
-  var unregisterTrigger = useEvent(function (id) {
-    triggerStateSettersRef.current.delete(id);
-    if (activeTriggerIdRef.current === id) activeTriggerIdRef.current = null;
-  });
-  React.useEffect(function () {
-    if (!open) {
-      setActiveTrigger(null);
-      return;
-    }
-    var activeId = activeTriggerIdRef.current;
-    if (activeId) {
-      var _triggerStateSettersRef_current_get;
-      (_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(activeId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(true);
-    }
-  }, [open, setActiveTrigger]);
-  return {
-    setActiveTrigger,
-    registerTrigger,
-    unregisterTrigger
-  };
+	var triggerStateSettersRef = React.useRef(/* @__PURE__ */ new Map());
+	var activeTriggerIdRef = React.useRef(null);
+	var setActiveTrigger = useEvent(function(id) {
+		var prevId = activeTriggerIdRef.current;
+		if (prevId === id) return;
+		if (prevId) {
+			var _triggerStateSettersRef_current_get;
+			(_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(prevId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(false);
+		}
+		activeTriggerIdRef.current = id;
+		if (id && open) {
+			var _triggerStateSettersRef_current_get1;
+			(_triggerStateSettersRef_current_get1 = triggerStateSettersRef.current.get(id)) === null || _triggerStateSettersRef_current_get1 === void 0 || _triggerStateSettersRef_current_get1(true);
+		}
+	});
+	var registerTrigger = useEvent(function(id, setOpenState) {
+		triggerStateSettersRef.current.set(id, setOpenState);
+		setOpenState(activeTriggerIdRef.current === id && open);
+	});
+	var unregisterTrigger = useEvent(function(id) {
+		triggerStateSettersRef.current.delete(id);
+		if (activeTriggerIdRef.current === id) activeTriggerIdRef.current = null;
+	});
+	React.useEffect(function() {
+		if (!open) {
+			setActiveTrigger(null);
+			return;
+		}
+		var activeId = activeTriggerIdRef.current;
+		if (activeId) {
+			var _triggerStateSettersRef_current_get;
+			(_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(activeId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(true);
+		}
+	}, [open, setActiveTrigger]);
+	return {
+		setActiveTrigger,
+		registerTrigger,
+		unregisterTrigger
+	};
 }
-var PopoverContextProvider = /* @__PURE__ */React.memo(function (param) {
-  var {
-    scope,
-    children,
-    open,
-    onOpenChange,
-    onOpenToggle,
-    triggerRef,
-    id = "",
-    contentId,
-    hasCustomAnchor = false,
-    onCustomAnchorAdd = voidFn,
-    onCustomAnchorRemove = voidFn,
-    anchorTo,
-    adaptScope,
-    breakpointActive,
-    keepChildrenMounted,
-    disableDismissable,
-    hoverable
-  } = param;
-  var [branches] = React.useState(function () {
-    return /* @__PURE__ */new Set();
-  });
-  var {
-    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
-    })
-  });
+var PopoverContextProvider = /* @__PURE__ */ React.memo(function(param) {
+	var { scope, children, open, onOpenChange, onOpenToggle, triggerRef, id = "", contentId, hasCustomAnchor = false, onCustomAnchorAdd = voidFn, onCustomAnchorRemove = voidFn, anchorTo, adaptScope, breakpointActive, keepChildrenMounted, disableDismissable, hoverable } = param;
+	var [branches] = React.useState(function() {
+		return /* @__PURE__ */ new Set();
+	});
+	var { 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
+		})
+	});
 });
-var voidFn = function () {};
-var PopoverAnchor = /* @__PURE__ */React.memo(/* @__PURE__ */React.forwardRef(function PopoverAnchor2(props, forwardedRef) {
-  var {
-    scope,
-    ...rest
-  } = props;
-  var {
-    onCustomAnchorAdd,
-    onCustomAnchorRemove
-  } = usePopoverContext(scope) || {};
-  React.useEffect(function () {
-    onCustomAnchorAdd();
-    return function () {
-      return onCustomAnchorRemove();
-    };
-  }, [onCustomAnchorAdd, onCustomAnchorRemove]);
-  return /* @__PURE__ */jsx(PopperAnchor, {
-    scope,
-    ...rest,
-    ref: forwardedRef
-  });
+var voidFn = function() {};
+var PopoverAnchor = /* @__PURE__ */ React.memo(createRefComponent(function PopoverAnchor2(props, forwardedRef) {
+	var { scope, ...rest } = props;
+	var { onCustomAnchorAdd, onCustomAnchorRemove } = usePopoverContext(scope) || {};
+	React.useEffect(function() {
+		onCustomAnchorAdd();
+		return function() {
+			return onCustomAnchorRemove();
+		};
+	}, [onCustomAnchorAdd, onCustomAnchorRemove]);
+	return /* @__PURE__ */ jsx(PopperAnchor, {
+		scope,
+		...rest,
+		ref: forwardedRef
+	});
 }));
-var PopoverTrigger = /* @__PURE__ */React.memo(/* @__PURE__ */React.forwardRef(function PopoverTrigger2(props, forwardedRef) {
-  var {
-    scope,
-    disablePressTrigger,
-    ...rest
-  } = props;
-  var triggerContext = usePopoverTriggerContext(scope);
-  var triggerId = React.useId();
-  var [open, setOpen] = React.useState(false);
-  var anchorTo = triggerContext.anchorTo;
-  var triggerElRef = React.useRef(null);
-  var composedTriggerRef = useComposedRefs(forwardedRef, triggerElRef);
-  var {
-    registerTrigger,
-    unregisterTrigger
-  } = triggerContext;
-  React.useEffect(function () {
-    registerTrigger(triggerId, setOpen);
-    return function () {
-      unregisterTrigger(triggerId);
-    };
-  }, [registerTrigger, unregisterTrigger, triggerId]);
-  if (!rest.children) return null;
-  var activateSelf = function () {
-    triggerContext.setActiveTrigger(triggerId);
-    var el = triggerElRef.current;
-    if (el) triggerContext.triggerRef.current = el;
-  };
-  var trigger = /* @__PURE__ */jsx(View, {
-    "aria-expanded": open,
-    "data-state": getState(open),
-    ...rest,
-    ref: composedTriggerRef,
-    onPress: composeEventHandlers(rest.onPress, function () {
-      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)
-  });
-  var virtualRef = React.useMemo(function () {
-    if (!anchorTo) return null;
-    return {
-      current: {
-        getBoundingClientRect: function () {
-          return isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
-        },
-        ...(!isWeb && {
-          measure: function (c) {
-            return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
-          },
-          measureInWindow: function (c) {
-            return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
-          }
-        })
-      }
-    };
-  }, [triggerContext.anchorTo, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width]);
-  var 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
-  });
+var PopoverTrigger = /* @__PURE__ */ React.memo(createRefComponent(function PopoverTrigger2(props, forwardedRef) {
+	var { scope, disablePressTrigger, ...rest } = props;
+	var triggerContext = usePopoverTriggerContext(scope);
+	var triggerId = React.useId();
+	var [open, setOpen] = React.useState(false);
+	var anchorTo = triggerContext.anchorTo;
+	var triggerElRef = React.useRef(null);
+	var composedTriggerRef = useComposedRefs(forwardedRef, triggerElRef);
+	var { registerTrigger, unregisterTrigger } = triggerContext;
+	React.useEffect(function() {
+		registerTrigger(triggerId, setOpen);
+		return function() {
+			unregisterTrigger(triggerId);
+		};
+	}, [
+		registerTrigger,
+		unregisterTrigger,
+		triggerId
+	]);
+	if (!rest.children) return null;
+	var activateSelf = function() {
+		triggerContext.setActiveTrigger(triggerId);
+		var el = triggerElRef.current;
+		if (el) triggerContext.triggerRef.current = el;
+	};
+	var trigger = /* @__PURE__ */ jsx(View, {
+		"aria-expanded": open,
+		"data-state": getState(open),
+		...rest,
+		ref: composedTriggerRef,
+		onPress: composeEventHandlers(rest.onPress, function() {
+			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)
+	});
+	var virtualRef = React.useMemo(function() {
+		if (!anchorTo) return null;
+		return { current: {
+			getBoundingClientRect: function() {
+				return isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
+			},
+			...!isWeb && {
+				measure: function(c) {
+					return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
+				},
+				measureInWindow: function(c) {
+					return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
+				}
+			}
+		} };
+	}, [
+		triggerContext.anchorTo,
+		anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x,
+		anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y,
+		anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height,
+		anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width
+	]);
+	var 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
+	});
 }));
-var PopoverContent = PopperContentFrame.styleable(function PopoverContent2(props, forwardedRef) {
-  var {
-    trapFocus,
-    enableRemoveScroll = false,
-    zIndex: zIndexProp,
-    scope,
-    ...contentImplProps
-  } = props;
-  var context = usePopoverContext(scope);
-  var zIndexFromContext = React.useContext(PopoverZIndexContext);
-  var zIndex = zIndexProp !== null && zIndexProp !== void 0 ? zIndexProp : zIndexFromContext;
-  var open = usePopoverOpen(scope);
-  var composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
-  var isRightClickOutsideRef = React.useRef(false);
-  var [isFullyHidden, setIsFullyHidden] = React.useState(!open);
-  useIsomorphicLayoutEffect(function () {
-    if (open && isFullyHidden) setIsFullyHidden(false);
-  }, [open, isFullyHidden]);
-  var isAdaptFullyHidden = React.useContext(PopoverAdaptHiddenContext);
-  if (!context.keepChildrenMounted) {
-    if (context.breakpointActive) {
-      if (!open && isAdaptFullyHidden) return null;
-    } else if (isFullyHidden && !open) return null;
-  }
-  var _contentImplProps_pointerEvents;
-  return /* @__PURE__ */jsx(PopoverPortal, {
-    passThrough: context.breakpointActive,
-    context,
-    open,
-    zIndex,
-    children: /* @__PURE__ */jsx(View, {
-      passThrough: context.breakpointActive,
-      pointerEvents: open ? (_contentImplProps_pointerEvents = contentImplProps.pointerEvents) !== null && _contentImplProps_pointerEvents !== void 0 ? _contentImplProps_pointerEvents : "auto" : "none",
-      children: /* @__PURE__ */jsx(PopoverContentImpl, {
-        ...contentImplProps,
-        context,
-        open,
-        enableRemoveScroll,
-        ref: composedRefs,
-        setIsFullyHidden,
-        scope,
-        trapFocus: trapFocus !== null && trapFocus !== void 0 ? trapFocus : open,
-        disableOutsidePointerEvents: true,
-        onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : composeEventHandlers(props.onCloseAutoFocus, function (event) {
-          var _context_triggerRef_current;
-          if (event.defaultPrevented) return;
-          event.preventDefault();
-          if (!isRightClickOutsideRef.current) (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, function (event) {
-          var originalEvent = event.detail.originalEvent;
-          var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-          isRightClickOutsideRef.current = originalEvent.button === 2 || ctrlLeftClick;
-        }, {
-          checkDefaultPrevented: false
-        }),
-        onFocusOutside: composeEventHandlers(props.onFocusOutside, function (event) {
-          return event.preventDefault();
-        }, {
-          checkDefaultPrevented: false
-        })
-      })
-    })
-  });
+var PopoverContent = createStyledHOC(PopperContentFrame, function PopoverContent2(props, forwardedRef) {
+	var { trapFocus, enableRemoveScroll = false, zIndex: zIndexProp, scope, forceMount, ...contentImplProps } = props;
+	var context = usePopoverContext(scope);
+	var adaptContext = useAdaptContext(context.adaptScope);
+	var zIndexFromContext = React.useContext(PopoverZIndexContext);
+	var zIndex = zIndexProp !== null && zIndexProp !== void 0 ? zIndexProp : zIndexFromContext;
+	var open = usePopoverOpen(scope);
+	var composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
+	var isRightClickOutsideRef = React.useRef(false);
+	var [isFullyHidden, setIsFullyHidden] = React.useState(!open);
+	useIsomorphicLayoutEffect(function() {
+		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;
+	}
+	var _contentImplProps_pointerEvents;
+	return /* @__PURE__ */ jsx(PopoverPortal, {
+		passThrough: context.breakpointActive,
+		context,
+		open,
+		visuallyActive: open || !isFullyHidden,
+		zIndex,
+		children: /* @__PURE__ */ jsx(View, {
+			passThrough: context.breakpointActive,
+			pointerEvents: open ? (_contentImplProps_pointerEvents = contentImplProps.pointerEvents) !== null && _contentImplProps_pointerEvents !== void 0 ? _contentImplProps_pointerEvents : "auto" : "none",
+			children: /* @__PURE__ */ jsx(PopoverContentImpl, {
+				...contentImplProps,
+				context,
+				open,
+				forceMount,
+				enableRemoveScroll,
+				ref: composedRefs,
+				setIsFullyHidden,
+				scope,
+				trapFocus: trapFocus !== null && trapFocus !== void 0 ? trapFocus : open,
+				disableOutsidePointerEvents: true,
+				onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : composeEventHandlers(props.onCloseAutoFocus, function(event) {
+					var _context_triggerRef_current;
+					if (event.isCanceled) return;
+					event.cancel();
+					if (!isRightClickOutsideRef.current) (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
+				}),
+				onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, function(event) {
+					var originalEvent = event.event;
+					if (!originalEvent) return;
+					var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+					isRightClickOutsideRef.current = originalEvent.button === 2 || ctrlLeftClick;
+				}, { checkDefaultPrevented: false }),
+				onFocusOutside: composeEventHandlers(props.onFocusOutside, function(event) {
+					if (trapFocus !== null && trapFocus !== void 0 ? trapFocus : open) event.cancel();
+				}, { checkDefaultPrevented: false })
+			})
+		})
+	});
 });
-var useParentContexts = function (scope) {
-  var context = usePopoverContext(scope);
-  var triggerContext = usePopoverTriggerContext(scope);
-  return {
-    popperContext: usePopperContext(scope),
-    adaptContext: useAdaptContext(context.adaptScope),
-    context,
-    triggerContext
-  };
+var useParentContexts = function(scope) {
+	var context = usePopoverContext(scope);
+	var triggerContext = usePopoverTriggerContext(scope);
+	return {
+		popperContext: usePopperContext(scope),
+		adaptContext: useAdaptContext(context.adaptScope),
+		context,
+		triggerContext
+	};
 };
 function RepropagateParentContexts(param) {
-  var {
-    adaptContext,
-    children,
-    context,
-    triggerContext,
-    popperContext
-  } = param;
-  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
-        })
-      })
-    })
-  });
+	var { adaptContext, children, context, triggerContext, popperContext } = param;
+	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
+				})
+			})
+		})
+	});
 }
-var PortalAdaptSafe = function (param) {
-  "use no memo";
-
-  var {
-    children,
-    context
-  } = param;
-  if (needsRepropagation) {
-    var 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
-  });
+var PortalAdaptSafe = function(param) {
+	"use no memo";
+	var { children, context } = param;
+	if (needsRepropagation) {
+		var 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(param) {
-  "use no memo";
-
-  var {
-    context,
-    open,
-    zIndex,
-    passThrough,
-    children,
-    onPress
-  } = param;
-  var 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]
-  });
+	"use no memo";
+	var { context, open, visuallyActive, zIndex, passThrough, children, onPress } = param;
+	var 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]
+	});
 }
-var PopoverContentImpl = /* @__PURE__ */React.forwardRef(function PopoverContentImpl2(props, forwardedRef) {
-  var {
-    trapFocus,
-    scope,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    disableFocusScope,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    children,
-    enableRemoveScroll,
-    freezeContentsWhenHidden,
-    setIsFullyHidden,
-    lazyMount,
-    forceUnmount,
-    context,
-    open,
-    alwaysDisable,
-    ...contentProps
-  } = props;
-  var {
-    keepChildrenMounted,
-    disableDismissable
-  } = context;
-  var handleExitComplete = React.useCallback(function () {
-    setIsFullyHidden === null || setIsFullyHidden === void 0 || setIsFullyHidden(true);
-  }, [setIsFullyHidden]);
-  var contents = /* @__PURE__ */jsx(ResetPresence, {
-    disable: context.breakpointActive,
-    children
-  });
-  React.useCallback(function () {
-    context.onOpenChange(false, "press");
-  }, [context]);
-  if (!context.breakpointActive) {}
-  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)
-  });
+var PopoverContentImpl = createRefComponent(function PopoverContentImpl2(props, forwardedRef) {
+	var { trapFocus, scope, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, enableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, lazyMount, forceUnmount, forceMount, context, open, alwaysDisable, ...contentProps } = props;
+	var { disableDismissable } = context;
+	var keepChildrenMounted = context.keepChildrenMounted || forceMount;
+	var handleExitComplete = React.useCallback(function() {
+		setIsFullyHidden === null || setIsFullyHidden === void 0 || setIsFullyHidden(true);
+	}, [setIsFullyHidden]);
+	var contents = /* @__PURE__ */ jsx(ResetPresence, {
+		disable: context.breakpointActive,
+		children
+	});
+	React.useCallback(function() {
+		context.onOpenChange(false, "press");
+	}, [context]);
+	if (!context.breakpointActive) {}
+	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)
+	});
 });
-var PopoverClose = /* @__PURE__ */React.forwardRef(function PopoverClose2(props, forwardedRef) {
-  var {
-    scope,
-    ...rest
-  } = props;
-  var context = usePopoverContext(scope);
-  return /* @__PURE__ */jsx(YStack, {
-    ...rest,
-    ref: forwardedRef,
-    componentName: "PopoverClose",
-    onPress: composeEventHandlers(props.onPress, function () {
-      var _context_onOpenChange;
-      return context === null || context === void 0 ? void 0 : (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, false, "press");
-    })
-  });
+var PopoverClose = createRefComponent(function PopoverClose2(props, forwardedRef) {
+	var { scope, className, ...rest } = props;
+	var context = usePopoverContext(scope);
+	return /* @__PURE__ */ jsx(YStack, {
+		...rest,
+		ref: forwardedRef,
+		className: `is_PopoverClose ${className || ""}`.trim(),
+		onPress: composeEventHandlers(props.onPress, function() {
+			var _context_onOpenChange;
+			return context === null || context === void 0 ? void 0 : (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, false, "press");
+		})
+	});
 });
-var PopoverArrow = PopperArrowFrame.styleable(function PopoverArrow2(props, forwardedRef) {
-  var {
-    scope,
-    ...rest
-  } = props;
-  if (useAdaptIsActive(usePopoverContext(scope).adaptScope)) return null;
-  return /* @__PURE__ */jsx(PopperArrow, {
-    scope,
-    componentName: "PopoverArrow",
-    ...rest,
-    ref: forwardedRef
-  });
+var PopoverArrow = createStyledHOC(PopperArrowFrame, function PopoverArrow2(props, forwardedRef) {
+	var { scope, className, ...rest } = props;
+	if (useAdaptIsActive(usePopoverContext(scope).adaptScope)) return null;
+	return /* @__PURE__ */ jsx(PopperArrow, {
+		scope,
+		className: `is_PopoverArrow ${className || ""}`.trim(),
+		...rest,
+		ref: forwardedRef
+	});
 });
-var PopoverScrollView = /* @__PURE__ */React.forwardRef(function (param, ref) {
-  var {
-    scope,
-    ...props
-  } = param;
-  var context = usePopoverContext(scope);
-  return /* @__PURE__ */jsx(ScrollView, {
-    ref,
-    pointerEvents: context.breakpointActive ? "none" : void 0,
-    scrollEnabled: !context.breakpointActive,
-    passThrough: context.breakpointActive,
-    ...props
-  });
+var PopoverScrollView = createRefComponent(function(param, ref) {
+	var { scope, ...props } = param;
+	var context = usePopoverContext(scope);
+	return /* @__PURE__ */ jsx(ScrollView, {
+		ref,
+		pointerEvents: context.breakpointActive ? "none" : void 0,
+		scrollEnabled: !context.breakpointActive,
+		passThrough: context.breakpointActive,
+		...props
+	});
 });
 var DEFAULT_SCOPE = "";
-var Popover = withStaticProperties(/* @__PURE__ */React.forwardRef(function Popover2(param, ref) {
-  var {
-    scope = DEFAULT_SCOPE,
-    ...props
-  } = param;
-  var id = React.useId();
-  var adaptScope = `PopoverAdapt${scope}`;
-  return /* @__PURE__ */jsx(AdaptParent, {
-    scope: adaptScope,
-    portal: true,
-    children: /* @__PURE__ */jsx(PopoverInner, {
-      adaptScope,
-      ref,
-      id,
-      scope,
-      ...props
-    })
-  });
+var Popover = withStaticProperties(createRefComponent(function Popover2(param, ref) {
+	var { scope = DEFAULT_SCOPE, ...props } = param;
+	var id = React.useId();
+	var adaptScope = `PopoverAdapt${scope}`;
+	var { open: openProp, defaultOpen, onOpenChange } = props;
+	var viaRef = React.useRef(void 0);
+	var [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen || false,
+		onChange: function(val) {
+			onOpenChange === null || onOpenChange === void 0 || onOpenChange(val, viaRef.current);
+		}
+	});
+	var handleOpenChange = useEvent(function(val, via) {
+		viaRef.current = via;
+		setOpen(val);
+	});
+	React.useEffect(function() {
+		if (!open) return;
+		openPopovers.add(setOpen);
+		return function() {
+			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
 });
-var PopoverInner = /* @__PURE__ */React.forwardRef(function PopoverInner2(props, forwardedRef) {
-  var {
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    scope = DEFAULT_SCOPE,
-    keepChildrenMounted: keepChildrenMountedProp,
-    hoverable,
-    disableFocus,
-    disableDismissable,
-    zIndex,
-    id,
-    adaptScope,
-    ...restProps
-  } = props;
-  var triggerRef = React.useRef(null);
-  var [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
-  var viaRef = React.useRef(void 0);
-  var [keepChildrenMounted] = useControllableState({
-    prop: keepChildrenMountedProp,
-    defaultProp: false,
-    transition: keepChildrenMountedProp === "lazy"
-  });
-  var [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: function (val) {
-      onOpenChange === null || onOpenChange === void 0 || onOpenChange(val, viaRef.current);
-    }
-  });
-  React.useEffect(function () {
-    if (!open) return;
-    openPopovers.add(setOpen);
-    return function () {
-      openPopovers.delete(setOpen);
-    };
-  }, [open, setOpen]);
-  var handleOpenChange = useEvent(function (val, via) {
-    viaRef.current = via;
-    setOpen(val);
-  });
-  var isAdapted = useAdaptIsActive(adaptScope);
-  var floatingContext = useFloatingContext({
-    open,
-    setOpen: handleOpenChange,
-    disable: isAdapted,
-    hoverable,
-    disableFocus
-  });
-  var [anchorTo, setAnchorToRaw] = React.useState();
-  var setAnchorTo = useCreateShallowSetState(setAnchorToRaw);
-  React.useImperativeHandle(forwardedRef, function () {
-    return {
-      anchorTo: setAnchorTo,
-      toggle: function () {
-        return setOpen(function (prev) {
-          return !prev;
-        });
-      },
-      open: function () {
-        return setOpen(true);
-      },
-      close: function () {
-        return setOpen(false);
-      },
-      setOpen
-    };
-  });
-  var contentId = React.useId();
-  var onOpenToggle = useEvent(function () {
-    if (open && isAdapted) return;
-    setOpen(!open);
-  });
-  var onCustomAnchorAdd = React.useCallback(function () {
-    return setHasCustomAnchor(true);
-  }, []);
-  var onCustomAnchorRemove = React.useCallback(function () {
-    return setHasCustomAnchor(false);
-  }, []);
-  var 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
-      })
-    })
-  });
-  var 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;
+var PopoverInner = createRefComponent(function PopoverInner2(props, forwardedRef) {
+	var { children, open: _openProp, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, scope = DEFAULT_SCOPE, keepChildrenMounted: keepChildrenMountedProp, hoverable, disableFocus, disableDismissable, zIndex, id, adaptScope, open, setOpen, handleOpenChange, ...restProps } = props;
+	var triggerRef = React.useRef(null);
+	var [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
+	var [keepChildrenMounted] = useControllableState({
+		prop: keepChildrenMountedProp,
+		defaultProp: false,
+		transition: keepChildrenMountedProp === "lazy"
+	});
+	var isAdapted = useAdaptIsActive(adaptScope);
+	var floatingContext = useFloatingContext({
+		open,
+		setOpen: handleOpenChange,
+		disable: isAdapted,
+		hoverable,
+		disableFocus
+	});
+	var [anchorTo, setAnchorToRaw] = React.useState();
+	var setAnchorTo = useCreateShallowSetState(setAnchorToRaw);
+	React.useImperativeHandle(forwardedRef, function() {
+		return {
+			anchorTo: setAnchorTo,
+			toggle: function() {
+				return setOpen(function(prev) {
+					return !prev;
+				});
+			},
+			open: function() {
+				return setOpen(true);
+			},
+			close: function() {
+				return setOpen(false);
+			},
+			setOpen
+		};
+	});
+	var contentId = React.useId();
+	var onOpenToggle = useEvent(function() {
+		if (open && isAdapted) return;
+		setOpen(!open);
+	});
+	var onCustomAnchorAdd = React.useCallback(function() {
+		return setHasCustomAnchor(true);
+	}, []);
+	var onCustomAnchorRemove = React.useCallback(function() {
+		return setHasCustomAnchor(false);
+	}, []);
+	var 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
+		})
+	});
+	var 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";
 }
-var PopoverSheetController = function (param) {
-  var {
-    open,
-    scope,
-    ...props
-  } = param;
-  var context = usePopoverContext(scope);
-  var showSheet = useShowPopoverSheet(context, open);
-  var breakpointActive = context === null || context === void 0 ? void 0 : context.breakpointActive;
-  var getShowSheet = useGet(showSheet);
-  var [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!open);
-  if (open && isAdaptFullyHidden) setIsAdaptFullyHidden(false);
-  return /* @__PURE__ */jsx(SheetController, {
-    onOpenChange: function (val) {
-      if (getShowSheet()) {
-        var _props_onOpenChange;
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 || _props_onOpenChange.call(props, val);
-      }
-    },
-    onAnimationComplete: React.useCallback(function (param2) {
-      var {
-        open: isOpen
-      } = param2;
-      if (!isOpen) setIsAdaptFullyHidden(true);
-    }, []),
-    open,
-    hidden: !breakpointActive,
-    children: /* @__PURE__ */jsx(PopoverAdaptHiddenContext.Provider, {
-      value: isAdaptFullyHidden,
-      children: props.children
-    })
-  });
-};
-var useShowPopoverSheet = function (context, open) {
-  var 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.native.js.map