@tamagui/popover 2.0.0-rc.8 → 2.0.0

package/dist/esm/Popover.mjs

@@ -1,155 +1,317 @@
-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 { 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 { 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.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const needsRepropagation = needsPortalRepropagation(),
-  PopoverContext = createStyledContext(
-  // since we always provide this we can avoid setting here
-  {}, "Popover__"),
-  usePopoverContext = PopoverContext.useStyledContext,
-  PopoverAnchor = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      {
-        onCustomAnchorAdd,
-        onCustomAnchorRemove
-      } = context || {};
-    return React.useEffect(() => (onCustomAnchorAdd(), () => onCustomAnchorRemove()), [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */jsx(PopperAnchor, {
-      scope,
-      ...rest,
-      ref: forwardedRef
-    });
-  }),
-  PopoverTrigger = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      anchorTo = context.anchorTo,
-      composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    if (!props.children) return null;
-    const trigger = /* @__PURE__ */jsx(View, {
-        "aria-expanded": context.open,
-        "data-state": getState(context.open),
-        ...rest,
-        ref: composedTriggerRef,
-        onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-      }),
-      virtualRef = React.useMemo(() => anchorTo ? {
-        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)
-          })
-        }
-      } : null, [context.anchorTo, anchorTo?.x, anchorTo?.y, anchorTo?.height, anchorTo?.width]);
-    return context.hasCustomAnchor ? trigger : /* @__PURE__ */jsx(PopperAnchor, {
-      ...(virtualRef && {
-        virtualRef
-      }),
+const needsRepropagation = needsPortalRepropagation();
+const openPopovers = /* @__PURE__ */new Set();
+const hasOpenPopovers = () => {
+  return openPopovers.size > 0;
+};
+const closeOpenPopovers = () => {
+  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;
+};
+const PopoverContext = createStyledContext(
+// since we always provide this we can avoid setting here
+{}, "Popover__");
+const PopoverZIndexContext = React.createContext(void 0);
+const PopoverTriggerContext = createStyledContext({}, "PopoverTrigger__");
+const usePopoverContext = PopoverContext.useStyledContext;
+const usePopoverTriggerContext = PopoverTriggerContext.useStyledContext;
+function usePopoverOpen(scope) {
+  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 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,
-      asChild: !0,
-      children: trigger
-    });
-  }),
-  PopoverContentFrame = styled(PopperContentFrame, {
-    name: "Popover"
-  }),
-  PopoverContent = PopoverContentFrame.styleable(function (props, forwardedRef) {
-    const {
-        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);
-    return React.useEffect(() => {
-      context.open && isFullyHidden && setIsFullyHidden(!1);
-    }, [context.open, isFullyHidden]), !context.keepChildrenMounted && isFullyHidden && !context.open ? null : /* @__PURE__ */jsx(PopoverPortal, {
+      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 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 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]);
+  if (!context.keepChildrenMounted) {
+    if (isFullyHidden && !open) return null;
+  }
+  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 ?? "auto" : "none",
-        children: /* @__PURE__ */jsx(PopoverContentImpl, {
-          ...contentImplProps,
-          context,
-          enableRemoveScroll,
-          ref: composedRefs,
-          setIsFullyHidden,
-          scope,
-          trapFocus: trapFocus ?? context.open,
-          disableOutsidePointerEvents: !0,
-          onCloseAutoFocus: props.onCloseAutoFocus === !1 ? void 0 : composeEventHandlers(props.onCloseAutoFocus, event => {
-            event.defaultPrevented || (event.preventDefault(), isRightClickOutsideRef.current || context.triggerRef.current?.focus());
-          }),
-          onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, event => {
-            const originalEvent = event.detail.originalEvent,
-              ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
-              isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-            isRightClickOutsideRef.current = isRightClick;
-          }, {
-            checkDefaultPrevented: !1
-          }),
-          onFocusOutside: composeEventHandlers(props.onFocusOutside, event => event.preventDefault(), {
-            checkDefaultPrevented: !1
-          })
+      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
         })
       })
-    });
-  }),
-  useParentContexts = scope => {
-    const context = usePopoverContext(scope),
-      popperContext = usePopperContext(scope),
-      adaptContext = useAdaptContext(context.adaptScope);
-    return {
-      popperContext,
-      adaptContext,
-      context
-    };
+    })
+  });
+});
+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(ProvideAdaptContext, {
-        ...adaptContext,
-        children
+      children: /* @__PURE__ */jsx(PopoverTriggerContext.Provider, {
+        scope: context.popoverScope,
+        ...triggerContext,
+        children: /* @__PURE__ */jsx(ProvideAdaptContext, {
+          ...adaptContext,
+          children
+        })
       })
     })
   });
@@ -158,6 +320,8 @@ const PortalAdaptSafe = ({
   children,
   context
 }) => {
+  "use no memo";
+
   if (needsRepropagation) {
     const parentContexts = useParentContexts(context.popoverScope);
     return /* @__PURE__ */jsx(AdaptPortalContents, {
@@ -175,287 +339,322 @@ const PortalAdaptSafe = ({
 };
 function PopoverPortal({
   context,
+  open,
   zIndex,
   passThrough,
   children,
   onPress
 }) {
-  const themeName = useThemeName();
+  "use no memo";
+
   let content = children;
-  if (needsRepropagation) {
-    const parentContexts = useParentContexts(context.popoverScope);
-    content = /* @__PURE__ */jsx(RepropagateParentContexts, {
-      ...parentContexts,
-      children: content
-    });
-  }
-  return /* @__PURE__ */jsx(Portal, {
+  if (needsRepropagation) content = /* @__PURE__ */jsx(RepropagateParentContexts, {
+    ...useParentContexts(context.popoverScope),
+    children: content
+  });
+  return /* @__PURE__ */jsxs(Portal, {
     passThrough,
-    stackZIndex: !0,
+    stackZIndex: true,
     zIndex,
-    children: /* @__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]
   });
 }
-const PopoverContentImpl = React.forwardRef(function (props, forwardedRef) {
-    const {
-        trapFocus,
-        scope,
-        onOpenAutoFocus,
-        onCloseAutoFocus,
-        disableOutsidePointerEvents,
-        disableFocusScope,
-        onEscapeKeyDown,
-        onPointerDownOutside,
-        onFocusOutside,
-        onInteractOutside,
-        children,
-        enableRemoveScroll,
-        freezeContentsWhenHidden,
-        setIsFullyHidden,
-        lazyMount,
-        context,
-        ...contentProps
-      } = props,
-      {
-        open,
-        keepChildrenMounted
-      } = context,
-      handleExitComplete = React.useCallback(() => {
-        setIsFullyHidden?.(!0);
-      }, [setIsFullyHidden]);
-    let contents = /* @__PURE__ */jsx(ResetPresence, {
-      disable: context.breakpointActive,
-      children
-    });
-    return context.breakpointActive || (contents = /* @__PURE__ */jsx(RemoveScroll, {
-      enabled: context.breakpointActive ? !1 : enableRemoveScroll ? open : !1,
-      children: /* @__PURE__ */jsx(FocusScope, {
-        loop: trapFocus !== !1,
-        enabled: context.breakpointActive || disableFocusScope ? !1 : open,
-        trapped: context.breakpointActive ? !1 : trapFocus,
-        onMountAutoFocus: onOpenAutoFocus,
-        onUnmountAutoFocus: onCloseAutoFocus === !1 ? void 0 : onCloseAutoFocus,
-        children: /* @__PURE__ */jsx("div", {
-          style: dspContentsStyle,
-          children: contents
-        })
+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
       })
-    })), /* @__PURE__ */jsx(Animate, {
-      type: "presence",
-      present: !!open,
-      keepChildrenMounted: !!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)
     });
-  }),
-  dspContentsStyle = {
-    display: "contents"
-  },
-  PopoverClose = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope);
-    return /* @__PURE__ */jsx(YStack, {
-      ...rest,
-      ref: forwardedRef,
-      componentName: "PopoverClose",
-      onPress: composeEventHandlers(props.onPress, () => context?.onOpenChange?.(!1, "press"))
+    if (!alwaysDisable || !alwaysDisable["remove-scroll"]) contents = /* @__PURE__ */jsx(RemoveScroll, {
+      enabled: context.breakpointActive ? false : enableRemoveScroll ? open : false,
+      children: contents
     });
-  }),
-  PopoverArrow = PopperArrowFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope);
-    return useAdaptIsActive(context.adaptScope) ? null : /* @__PURE__ */jsx(PopperArrow, {
-      scope,
-      componentName: "PopoverArrow",
-      ...rest,
-      ref: forwardedRef
+    if (!alwaysDisable || !alwaysDisable.dismiss) contents = /* @__PURE__ */jsx(Dismissable, {
+      branches: context.branches,
+      forceUnmount: disableDismissable || (forceUnmount ?? !open),
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss: handleDismiss,
+      children: contents
     });
-  }),
-  PopoverScrollView = React.forwardRef(({
+  }
+  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 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 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 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
-  }, ref) => {
-    const context = usePopoverContext(scope);
-    return /* @__PURE__ */jsx(ScrollView, {
+  });
+});
+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,
-      pointerEvents: context.breakpointActive ? "none" : void 0,
-      scrollEnabled: !context.breakpointActive,
-      passThrough: context.breakpointActive,
+      id,
+      scope,
       ...props
-    });
-  }),
-  DEFAULT_SCOPE = "",
-  Popover = withStaticProperties(React.forwardRef(function ({
+    })
+  });
+}), {
+  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,
-    ...props
-  }, ref) {
-    const 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 = React.forwardRef(function (props, forwardedRef) {
-    const {
-        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: val => {
-          onOpenChange?.(val, viaRef.current);
-        }
-      }),
-      handleOpenChange = useEvent((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, () => ({
-      anchorTo: setAnchorTo,
-      toggle: () => setOpen(prev => !prev),
-      open: () => setOpen(!0),
-      close: () => setOpen(!1),
-      setOpen
-    }));
-    const popoverContext = {
-        popoverScope: scope,
-        adaptScope,
-        id,
-        contentId: React.useId(),
-        triggerRef,
-        open,
-        breakpointActive: isAdapted,
-        onOpenChange: handleOpenChange,
-        onOpenToggle: useEvent(() => {
-          open && isAdapted || setOpen(!open);
-        }),
-        hasCustomAnchor,
-        anchorTo,
-        onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(!0), []),
-        onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(!1), []),
-        keepChildrenMounted
-      },
-      memoizedChildren = React.useMemo(() => /* @__PURE__ */jsx(PopoverContext.Provider, {
-        scope,
-        ...popoverContext,
-        children: /* @__PURE__ */jsx(PopoverSheetController, {
-          context: popoverContext,
-          onOpenChange: setOpen,
-          children
-        })
-      }), [scope, setOpen, children, ...Object.values(popoverContext)]),
-      contents = /* @__PURE__ */jsx(Popper, {
+    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,
-        passThrough: isAdapted,
         scope,
-        stayInFrame: !0,
-        ...restProps,
-        children: memoizedChildren
-      });
-    return /* @__PURE__ */jsx(Fragment, {
-      children: isWeb ? /* @__PURE__ */jsx(FloatingOverrideContext.Provider, {
-        value: floatingContext,
-        children: contents
-      }) : contents
-    });
+        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";
 }
 const PopoverSheetController = ({
-    context,
-    ...props
-  }) => {
-    const showSheet = useShowPopoverSheet(context),
-      breakpointActive = context.breakpointActive,
-      getShowSheet = useGet(showSheet);
-    return /* @__PURE__ */jsx(SheetController, {
-      onOpenChange: val => {
-        getShowSheet() && props.onOpenChange?.(val);
-      },
-      open: context.open,
-      hidden: !breakpointActive,
-      children: props.children
-    });
-  },
-  useShowPopoverSheet = context => {
-    const isAdapted = useAdaptIsActive(context.adaptScope);
-    return context.open === !1 ? !1 : isAdapted;
-  };
-export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverTrigger, usePopoverContext };
+  open,
+  scope,
+  ...props
+}) => {
+  const context = usePopoverContext(scope);
+  const showSheet = useShowPopoverSheet(context, open);
+  const breakpointActive = context?.breakpointActive;
+  const getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */jsx(SheetController, {
+    onOpenChange: val => {
+      if (getShowSheet()) props.onOpenChange?.(val);
+    },
+    open,
+    hidden: !breakpointActive,
+    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