@tamagui/popover 2.0.0-rc.9 → 2.1.0

package/dist/esm/Popover.native.js

@@ -1,185 +1,355 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "@tamagui/polyfill-dev";
 import { Adapt, AdaptParent, AdaptPortalContents, ProvideAdaptContext, useAdaptContext, useAdaptIsActive } from "@tamagui/adapt";
 import { Animate } from "@tamagui/animate";
 import { ResetPresence } from "@tamagui/animate-presence";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { isWeb } from "@tamagui/constants";
-import { createStyledContext, styled, Theme, useCreateShallowSetState, useEvent, useGet, useThemeName, View } from "@tamagui/core";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { createStyledContext, useCreateShallowSetState, useEvent, useGet, View } from "@tamagui/core";
+import { Dismissable, DismissableBranch } from "@tamagui/dismissable";
 import { FloatingOverrideContext } from "@tamagui/floating";
-import { FocusScopeController } from "@tamagui/focus-scope";
+import { FocusScope, FocusScopeController } from "@tamagui/focus-scope";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import { Popper, PopperAnchor, PopperArrow, PopperArrowFrame, PopperContent, PopperContentFrame, PopperProvider, usePopperContext } from "@tamagui/popper";
-import { needsPortalRepropagation, Portal, resolveViewZIndex } from "@tamagui/portal";
-import "@tamagui/remove-scroll";
+import { needsPortalRepropagation, Portal } 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 { StackZIndexContext } from "@tamagui/z-index-stack";
 import * as React from "react";
 import { useFloatingContext } from "./useFloatingContext.native.js";
-var needsRepropagation = needsPortalRepropagation(),
-  PopoverContext = createStyledContext(
-  // since we always provide this we can avoid setting here
-  {}, "Popover__"),
-  usePopoverContext = PopoverContext.useStyledContext,
-  PopoverAnchor = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      {
-        onCustomAnchorAdd,
-        onCustomAnchorRemove
-      } = context || {};
-    return React.useEffect(function () {
-      return onCustomAnchorAdd(), function () {
-        return onCustomAnchorRemove();
-      };
-    }, [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */_jsx(PopperAnchor, {
+var needsRepropagation = needsPortalRepropagation();
+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 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(
+// since we always provide this we can avoid setting here
+{}, "Popover__");
+var PopoverZIndexContext = /* @__PURE__ */React.createContext(void 0);
+var PopoverAdaptHiddenContext = /* @__PURE__ */React.createContext(true);
+var PopoverTriggerContext = createStyledContext({}, "PopoverTrigger__");
+var usePopoverContext = PopoverContext.useStyledContext;
+var usePopoverTriggerContext = PopoverTriggerContext.useStyledContext;
+function usePopoverOpen(scope) {
+  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 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,
-      ...rest,
-      ref: forwardedRef
-    });
-  }),
-  PopoverTrigger = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      anchorTo = context.anchorTo,
-      composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    if (!props.children) return null;
-    var trigger = /* @__PURE__ */_jsx(View, {
-        "aria-expanded": context.open,
-        // TODO not matching
-        // aria-controls={context.contentId}
-        "data-state": getState(context.open),
-        ...rest,
-        // @ts-ignore
-        ref: composedTriggerRef,
-        onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-      }),
-      virtualRef = React.useMemo(function () {
-        return anchorTo ? {
-          current: {
-            getBoundingClientRect: function () {
-              return isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
-            },
-            ...(!isWeb && {
-              measure: function (c) {
-                return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
-              },
-              measureInWindow: function (c) {
-                return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
-              }
-            })
+      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 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);
           }
-        } : null;
-      }, [context.anchorTo, anchorTo?.x, anchorTo?.y, anchorTo?.height, anchorTo?.width]);
-    return context.hasCustomAnchor ? trigger : /* @__PURE__ */_jsx(PopperAnchor, {
-      ...(virtualRef && {
-        virtualRef
-      }),
-      scope,
-      asChild: !0,
-      children: trigger
-    });
-  }),
-  PopoverContentFrame = styled(PopperContentFrame, {
-    name: "Popover"
-  }),
-  PopoverContent = PopoverContentFrame.styleable(function (props, forwardedRef) {
-    var {
-        trapFocus,
-        enableRemoveScroll = !1,
-        zIndex,
-        scope,
-        ...contentImplProps
-      } = props,
-      context = usePopoverContext(scope),
-      contentRef = React.useRef(null),
-      composedRefs = useComposedRefs(forwardedRef, contentRef),
-      isRightClickOutsideRef = React.useRef(!1),
-      [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
-    if (React.useEffect(function () {
-      context.open && isFullyHidden && setIsFullyHidden(!1);
-    }, [context.open, isFullyHidden]), !context.keepChildrenMounted && isFullyHidden && !context.open) return null;
-    var _contentImplProps_pointerEvents;
-    return /* @__PURE__ */_jsx(PopoverPortal, {
+        })
+      }
+    };
+  }, [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,
-      context,
-      zIndex,
-      children: /* @__PURE__ */_jsx(View, {
-        passThrough: context.breakpointActive,
-        pointerEvents: context.open ? (_contentImplProps_pointerEvents = contentImplProps.pointerEvents) !== null && _contentImplProps_pointerEvents !== void 0 ? _contentImplProps_pointerEvents : "auto" : "none",
-        children: /* @__PURE__ */_jsx(PopoverContentImpl, {
-          ...contentImplProps,
-          context,
-          enableRemoveScroll,
-          ref: composedRefs,
-          setIsFullyHidden,
-          scope,
-          // we make sure we're not trapping once it's been closed
-          // (closed !== unmounted when animating out)
-          trapFocus: trapFocus ?? context.open,
-          disableOutsidePointerEvents: !0,
-          onCloseAutoFocus: props.onCloseAutoFocus === !1 ? void 0 : composeEventHandlers(props.onCloseAutoFocus, function (event) {
-            var _context_triggerRef_current;
-            event.defaultPrevented || (event.preventDefault(), 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,
-              ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
-              isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-            isRightClickOutsideRef.current = isRightClick;
-          }, {
-            checkDefaultPrevented: !1
-          }),
-          // When focus is trapped, a `focusout` event may still happen.
-          // We make sure we don't trigger our `onDismiss` in such case.
-          onFocusOutside: composeEventHandlers(props.onFocusOutside, function (event) {
-            return event.preventDefault();
-          }, {
-            checkDefaultPrevented: !1
-          })
+      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
         })
       })
-    });
-  }),
-  useParentContexts = function (scope) {
-    var context = usePopoverContext(scope),
-      popperContext = usePopperContext(scope),
-      adaptContext = useAdaptContext(context.adaptScope);
-    return {
-      popperContext,
-      adaptContext,
-      context
-    };
+    })
+  });
+});
+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(ProvideAdaptContext, {
-        ...adaptContext,
-        children
+      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
@@ -200,78 +370,73 @@ var PortalAdaptSafe = function (param) {
   });
 };
 function PopoverPortal(param) {
+  "use no memo";
+
   var {
-      context,
-      zIndex,
-      passThrough,
-      children,
-      onPress
-    } = param,
-    themeName = useThemeName(),
-    content = children;
-  if (needsRepropagation) {
-    var parentContexts = useParentContexts(context.popoverScope);
-    content = /* @__PURE__ */_jsx(RepropagateParentContexts, {
-      ...parentContexts,
-      children: content
-    });
-  }
-  return /* @__PURE__ */_jsx(Portal, {
+    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: !0,
+    stackZIndex: true,
     zIndex,
-    children: (/* forceClassName avoids forced re-mount renders for some reason... see the HeadMenu as you change tints a few times */
-    /* without this you'll see the site menu re-rendering. It must be something in wrapping children in Theme */
-    /* @__PURE__ */_jsxs(Theme, {
-      passThrough,
-      contain: !0,
-      forceClassName: !0,
-      name: themeName,
-      children: [!!context.open && !context.breakpointActive && /* @__PURE__ */_jsx(YStack, {
-        fullscreen: !0,
-        onPress: composeEventHandlers(onPress, context.onOpenToggle)
-      }), /* @__PURE__ */_jsx(StackZIndexContext, {
-        zIndex: resolveViewZIndex(zIndex),
-        children: content
-      })]
-    }))
+    children: [!!open && !context.breakpointActive && !context.hoverable && /* @__PURE__ */_jsx(YStack, {
+      fullscreen: true,
+      onPress: composeEventHandlers(onPress, context.onOpenToggle)
+    }), content]
   });
 }
-var PopoverContentImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+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,
-      context,
-      ...contentProps
-    } = props,
-    {
-      open,
-      keepChildrenMounted
-    } = context,
-    handleExitComplete = React.useCallback(function () {
-      setIsFullyHidden?.(!0);
-    }, [setIsFullyHidden]),
-    contents = /* @__PURE__ */_jsx(ResetPresence, {
-      disable: context.breakpointActive,
-      children
-    });
-  return context.breakpointActive, /* @__PURE__ */_jsx(Animate, {
+    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: !!open,
-    keepChildrenMounted: !!keepChildrenMounted,
+    present: Boolean(open),
+    keepChildrenMounted: Boolean(keepChildrenMounted),
     onExitComplete: handleExitComplete,
     lazyMount,
     passThrough: context.breakpointActive,
@@ -281,6 +446,11 @@ var PopoverContentImpl = /* @__PURE__ */React.forwardRef(function (props, forwar
       id: context.contentId,
       ref: forwardedRef,
       passThrough: context.breakpointActive,
+      ...(!contentProps.unstyled && {
+        size: "$true",
+        backgroundColor: "$background",
+        alignItems: "center"
+      }),
       ...contentProps,
       children: /* @__PURE__ */_jsx(PortalAdaptSafe, {
         context,
@@ -289,213 +459,240 @@ var PopoverContentImpl = /* @__PURE__ */React.forwardRef(function (props, forwar
     }, context.contentId)
   });
 });
-var PopoverClose = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope);
-    return /* @__PURE__ */_jsx(YStack, {
-      ...rest,
-      ref: forwardedRef,
-      componentName: "PopoverClose",
-      onPress: composeEventHandlers(props.onPress, function () {
-        var _context_onOpenChange;
-        return context == null || (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, !1, "press");
-      })
-    });
-  }),
-  PopoverArrow = PopperArrowFrame.styleable(function (props, forwardedRef) {
-    var {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      isAdapted = useAdaptIsActive(context.adaptScope);
-    return isAdapted ? null : /* @__PURE__ */_jsx(PopperArrow, {
-      scope,
-      componentName: "PopoverArrow",
-      ...rest,
-      ref: forwardedRef
-    });
-  }),
-  PopoverScrollView = /* @__PURE__ */React.forwardRef(function (param, ref) {
-    var {
-        scope,
-        ...props
-      } = param,
-      context = usePopoverContext(scope);
-    return /* @__PURE__ */_jsx(ScrollView, {
+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 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 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 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,
-      // when adapted, no pointer events!
-      pointerEvents: context.breakpointActive ? "none" : void 0,
-      scrollEnabled: !context.breakpointActive,
-      passThrough: context.breakpointActive,
+      id,
+      scope,
       ...props
-    });
-  }),
-  DEFAULT_SCOPE = "",
-  Popover = withStaticProperties(/* @__PURE__ */React.forwardRef(function (param, ref) {
-    var {
-        scope = DEFAULT_SCOPE,
-        ...props
-      } = param,
-      id = React.useId(),
-      adaptScope = `PopoverAdapt${scope}`;
-    return /* @__PURE__ */_jsx(AdaptParent, {
-      scope: adaptScope,
-      portal: !0,
-      children: /* @__PURE__ */_jsx(PopoverInner, {
-        adaptScope,
-        ref,
-        id,
-        scope,
-        ...props
-      })
-    });
-  }), {
-    Anchor: PopoverAnchor,
-    Arrow: PopoverArrow,
-    Trigger: PopoverTrigger,
-    Content: PopoverContent,
-    Close: PopoverClose,
-    Adapt,
-    ScrollView: PopoverScrollView,
-    FocusScope: FocusScopeController
-  }),
-  PopoverInner = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        children,
-        open: openProp,
-        defaultOpen,
-        onOpenChange,
-        scope = DEFAULT_SCOPE,
-        keepChildrenMounted: keepChildrenMountedProp,
-        hoverable,
-        disableFocus,
-        id,
-        adaptScope,
-        ...restProps
-      } = props,
-      triggerRef = React.useRef(null),
-      [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
-      viaRef = React.useRef(void 0),
-      [keepChildrenMounted] = useControllableState({
-        prop: keepChildrenMountedProp,
-        defaultProp: !1,
-        transition: keepChildrenMountedProp === "lazy"
-      }),
-      [open, setOpen] = useControllableState({
-        prop: openProp,
-        defaultProp: defaultOpen || !1,
-        onChange: function (val) {
-          onOpenChange?.(val, viaRef.current);
-        }
-      }),
-      handleOpenChange = useEvent(function (val, via) {
-        viaRef.current = via, setOpen(val);
-      }),
-      isAdapted = useAdaptIsActive(adaptScope),
-      floatingContext = useFloatingContext({
-        open,
-        setOpen: handleOpenChange,
-        disable: isAdapted,
-        hoverable,
-        disableFocus
-      }),
-      [anchorTo, setAnchorToRaw] = React.useState(),
-      setAnchorTo = useCreateShallowSetState(setAnchorToRaw);
-    React.useImperativeHandle(forwardedRef, function () {
-      return {
-        anchorTo: setAnchorTo,
-        toggle: function () {
-          return setOpen(function (prev) {
-            return !prev;
-          });
-        },
-        open: function () {
-          return setOpen(!0);
-        },
-        close: function () {
-          return setOpen(!1);
-        },
-        setOpen
-      };
-    });
-    var popoverContext = {
-        popoverScope: scope,
-        adaptScope,
-        id,
-        contentId: React.useId(),
-        triggerRef,
-        open,
-        breakpointActive: isAdapted,
-        onOpenChange: handleOpenChange,
-        onOpenToggle: useEvent(function () {
-          open && isAdapted || setOpen(!open);
-        }),
-        hasCustomAnchor,
-        anchorTo,
-        onCustomAnchorAdd: React.useCallback(function () {
-          return setHasCustomAnchor(!0);
-        }, []),
-        onCustomAnchorRemove: React.useCallback(function () {
-          return setHasCustomAnchor(!1);
-        }, []),
-        keepChildrenMounted
-      },
-      memoizedChildren = React.useMemo(function () {
-        return /* @__PURE__ */_jsx(PopoverContext.Provider, {
-          scope,
-          ...popoverContext,
-          children: /* @__PURE__ */_jsx(PopoverSheetController, {
-            context: popoverContext,
-            onOpenChange: setOpen,
-            children
-          })
+    })
+  });
+}), {
+  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;
         });
-      }, [scope, setOpen, children, ...Object.values(popoverContext)]),
-      contents = /* @__PURE__ */_jsx(Popper, {
+      },
+      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,
-        passThrough: isAdapted,
         scope,
-        stayInFrame: !0,
-        ...restProps,
-        children: memoizedChildren
-      });
-    return /* @__PURE__ */_jsx(_Fragment, {
-      children: isWeb ? /* @__PURE__ */_jsx(FloatingOverrideContext.Provider, {
-        value: floatingContext,
-        children: contents
-      }) : contents
-    });
+        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";
 }
 var PopoverSheetController = function (param) {
-    var {
-        context,
-        ...props
-      } = param,
-      showSheet = useShowPopoverSheet(context),
-      breakpointActive = context.breakpointActive,
-      getShowSheet = useGet(showSheet);
-    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);
-        }
-      },
-      open: context.open,
-      hidden: !breakpointActive,
+  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
-    });
-  },
-  useShowPopoverSheet = function (context) {
-    var isAdapted = useAdaptIsActive(context.adaptScope);
-    return context.open === !1 ? !1 : isAdapted;
-  };
-export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverTrigger, usePopoverContext };
+    })
+  });
+};
+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