@tamagui/popover 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/Popover.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Popover_exports = {};
 __export(Popover_exports, {
   Popover: () => Popover,
@@ -37,162 +39,335 @@ __export(Popover_exports, {
   PopoverClose: () => PopoverClose,
   PopoverContent: () => PopoverContent,
   PopoverContext: () => PopoverContext,
+  PopoverContextProvider: () => PopoverContextProvider,
   PopoverTrigger: () => PopoverTrigger,
-  usePopoverContext: () => usePopoverContext
+  PopoverTriggerContext: () => PopoverTriggerContext,
+  PopoverZIndexContext: () => PopoverZIndexContext,
+  closeLastOpenedPopover: () => closeLastOpenedPopover,
+  closeOpenPopovers: () => closeOpenPopovers,
+  hasOpenPopovers: () => hasOpenPopovers,
+  usePopoverContext: () => usePopoverContext,
+  usePopoverOpen: () => usePopoverOpen,
+  usePopoverTriggerContext: () => usePopoverTriggerContext,
+  usePopoverTriggerSetup: () => usePopoverTriggerSetup
 });
 module.exports = __toCommonJS(Popover_exports);
-var import_polyfill_dev = require("@tamagui/polyfill-dev"),
-  import_adapt = require("@tamagui/adapt"),
-  import_animate = require("@tamagui/animate"),
-  import_animate_presence = require("@tamagui/animate-presence"),
-  import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_floating = require("@tamagui/floating"),
-  import_focus_scope = require("@tamagui/focus-scope"),
-  import_helpers = require("@tamagui/helpers"),
-  import_popper = require("@tamagui/popper"),
-  import_portal = require("@tamagui/portal"),
-  import_remove_scroll = require("@tamagui/remove-scroll"),
-  import_scroll_view = require("@tamagui/scroll-view"),
-  import_controller = require("@tamagui/sheet/controller"),
-  import_stacks = require("@tamagui/stacks"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  import_z_index_stack = require("@tamagui/z-index-stack"),
-  React = __toESM(require("react"), 1),
-  import_useFloatingContext = require("./useFloatingContext.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const needsRepropagation = (0, import_portal.needsPortalRepropagation)(),
-  PopoverContext = (0, import_core.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__ */(0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
-      scope,
-      ...rest,
-      ref: forwardedRef
-    });
-  }),
-  PopoverTrigger = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope),
-      anchorTo = context.anchorTo,
-      composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
-    if (!props.children) return null;
-    const trigger = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-        "aria-expanded": context.open,
-        "data-state": getState(context.open),
-        ...rest,
-        ref: composedTriggerRef,
-        onPress: (0, import_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
-      }),
-      virtualRef = React.useMemo(() => anchorTo ? {
-        current: {
-          getBoundingClientRect: () => import_constants.isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
-          ...(!import_constants.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__ */(0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
-      ...(virtualRef && {
-        virtualRef
-      }),
+require("@tamagui/polyfill-dev");
+var import_adapt = require("@tamagui/adapt");
+var import_animate = require("@tamagui/animate");
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_dismissable = require("@tamagui/dismissable");
+var import_floating = require("@tamagui/floating");
+var import_focus_scope = require("@tamagui/focus-scope");
+var import_helpers = require("@tamagui/helpers");
+var import_popper = require("@tamagui/popper");
+var import_portal = require("@tamagui/portal");
+var import_remove_scroll = require("@tamagui/remove-scroll");
+var import_scroll_view = require("@tamagui/scroll-view");
+var import_controller = require("@tamagui/sheet/controller");
+var import_stacks = require("@tamagui/stacks");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+var import_useFloatingContext = require("./useFloatingContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const needsRepropagation = (0, import_portal.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 = (0, import_core.createStyledContext)(
+// since we always provide this we can avoid setting here
+{}, "Popover__");
+const PopoverZIndexContext = React.createContext(void 0);
+const PopoverTriggerContext = (0, import_core.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 = (0, import_core.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 = (0, import_core.useEvent)((id, setOpenState) => {
+    triggerStateSettersRef.current.set(id, setOpenState);
+    setOpenState(activeTriggerIdRef.current === id && open);
+  });
+  const unregisterTrigger = (0, import_core.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__ */(0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
+    scope,
+    popoverScope: scope,
+    adaptScope,
+    id,
+    contentId,
+    triggerRef,
+    open,
+    onOpenChange,
+    onOpenToggle,
+    hasCustomAnchor,
+    onCustomAnchorAdd,
+    onCustomAnchorRemove,
+    anchorTo,
+    branches,
+    breakpointActive,
+    keepChildrenMounted,
+    disableDismissable,
+    hoverable,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverTriggerContext.Provider, {
       scope,
-      asChild: !0,
-      children: trigger
-    });
-  }),
-  PopoverContentFrame = (0, import_core.styled)(import_popper.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 = (0, import_compose_refs.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_popper.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 = (0, import_compose_refs.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__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    "aria-expanded": open,
+    "data-state": getState(open),
+    ...rest,
+    ref: composedTriggerRef,
+    onPress: (0, import_helpers.composeEventHandlers)(rest.onPress, () => {
+      if (disablePressTrigger) return;
+      triggerContext.setActiveTrigger(open ? null : triggerId);
+      triggerContext.onOpenToggle();
+    }),
+    onMouseEnter: (0, import_helpers.composeEventHandlers)(rest.onMouseEnter, activateSelf),
+    onPressIn: (0, import_helpers.composeEventHandlers)(rest.onPressIn, activateSelf),
+    onFocus: (0, import_helpers.composeEventHandlers)(rest.onFocus, activateSelf)
+  });
+  const virtualRef = React.useMemo(() => {
+    if (!anchorTo) return null;
+    return {
+      current: {
+        getBoundingClientRect: () => import_constants.isWeb ? DOMRect.fromRect(anchorTo) : anchorTo,
+        ...(!import_constants.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 = import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.DismissableBranch, {
+    branches: triggerContext.branches,
+    children: trigger
+  }) : trigger;
+  return triggerContext.hasCustomAnchor ? wrappedTrigger : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
+    ...(virtualRef && {
+      virtualRef
+    }),
+    scope,
+    asChild: true,
+    children: wrappedTrigger
+  });
+}));
+const PopoverContent = import_popper.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 contentRef = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+  const isRightClickOutsideRef = React.useRef(false);
+  const [isFullyHidden, setIsFullyHidden] = React.useState(!open);
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (open && isFullyHidden) setIsFullyHidden(false);
+  }, [open, isFullyHidden]);
+  if (!context.keepChildrenMounted) {
+    if (isFullyHidden && !open) return null;
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverPortal, {
+    passThrough: context.breakpointActive,
+    context,
+    open,
+    zIndex,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
       passThrough: context.breakpointActive,
-      context,
-      zIndex,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-        passThrough: context.breakpointActive,
-        pointerEvents: context.open ? contentImplProps.pointerEvents ?? "auto" : "none",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContentImpl, {
-          ...contentImplProps,
-          context,
-          enableRemoveScroll,
-          ref: composedRefs,
-          setIsFullyHidden,
-          scope,
-          trapFocus: trapFocus ?? context.open,
-          disableOutsidePointerEvents: !0,
-          onCloseAutoFocus: props.onCloseAutoFocus === !1 ? void 0 : (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
-            event.defaultPrevented || (event.preventDefault(), isRightClickOutsideRef.current || context.triggerRef.current?.focus());
-          }),
-          onPointerDownOutside: (0, import_helpers.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: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault(), {
-            checkDefaultPrevented: !1
-          })
+      pointerEvents: open ? contentImplProps.pointerEvents ?? "auto" : "none",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContentImpl, {
+        ...contentImplProps,
+        context,
+        open,
+        enableRemoveScroll,
+        ref: composedRefs,
+        setIsFullyHidden,
+        scope,
+        trapFocus: trapFocus ?? open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
+        }),
+        onPointerDownOutside: (0, import_helpers.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: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault(), {
+          checkDefaultPrevented: false
         })
       })
-    });
-  }),
-  useParentContexts = scope => {
-    const context = usePopoverContext(scope),
-      popperContext = (0, import_popper.usePopperContext)(scope),
-      adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
-    return {
-      popperContext,
-      adaptContext,
-      context
-    };
+    })
+  });
+});
+const useParentContexts = scope => {
+  const context = usePopoverContext(scope);
+  const triggerContext = usePopoverTriggerContext(scope);
+  return {
+    popperContext: (0, import_popper.usePopperContext)(scope),
+    adaptContext: (0, import_adapt.useAdaptContext)(context.adaptScope),
+    context,
+    triggerContext
   };
+};
 function RepropagateParentContexts({
   adaptContext,
   children,
   context,
+  triggerContext,
   popperContext
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperProvider, {
     scope: context.popoverScope,
     ...popperContext,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
+      scope: context.popoverScope,
       ...context,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
-        ...adaptContext,
-        children
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverTriggerContext.Provider, {
+        scope: context.popoverScope,
+        ...triggerContext,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
+          ...adaptContext,
+          children
+        })
       })
     })
   });
@@ -201,6 +376,8 @@ const PortalAdaptSafe = ({
   children,
   context
 }) => {
+  "use no memo";
+
   if (needsRepropagation) {
     const parentContexts = useParentContexts(context.popoverScope);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
@@ -218,12 +395,14 @@ const PortalAdaptSafe = ({
 };
 function PopoverPortal({
   context,
+  open,
   zIndex,
   passThrough,
   children,
   onPress
 }) {
-  const themeName = (0, import_core.useThemeName)();
+  "use no memo";
+
   let content = children;
   if (needsRepropagation) {
     const parentContexts = useParentContexts(context.popoverScope);
@@ -232,271 +411,308 @@ function PopoverPortal({
       children: content
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_portal.Portal, {
     passThrough,
-    stackZIndex: !0,
+    stackZIndex: true,
     zIndex,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_core.Theme, {
-      passThrough,
-      contain: !0,
-      forceClassName: !0,
-      name: themeName,
-      children: [!!context.open && !context.breakpointActive && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-        fullscreen: !0,
-        onPress: (0, import_helpers.composeEventHandlers)(onPress, context.onOpenToggle)
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_z_index_stack.StackZIndexContext, {
-        zIndex: (0, import_portal.resolveViewZIndex)(zIndex),
-        children: content
-      })]
-    })
+    children: [!!open && !context.breakpointActive && !context.hoverable && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+      fullscreen: true,
+      onPress: (0, import_helpers.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__ */(0, import_jsx_runtime.jsx)(import_animate_presence.ResetPresence, {
-      disable: context.breakpointActive,
-      children
-    });
-    return context.breakpointActive || (contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
-      enabled: context.breakpointActive ? !1 : enableRemoveScroll ? open : !1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_animate_presence.ResetPresence, {
+    disable: context.breakpointActive,
+    children
+  });
+  const handleDismiss = React.useCallback(() => {
+    context.onOpenChange(false, "press");
+  }, [context]);
+  if (!context.breakpointActive) {
+    if (!alwaysDisable || !alwaysDisable.focus) contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_focus_scope.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__ */(0, import_jsx_runtime.jsx)("div", {
+        style: dspContentsStyle,
+        children: contents
       })
-    })), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate.Animate, {
-      type: "presence",
-      present: !!open,
-      keepChildrenMounted: !!keepChildrenMounted,
-      onExitComplete: handleExitComplete,
-      lazyMount,
-      passThrough: context.breakpointActive,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperContent, {
-        scope,
-        "data-state": getState(open),
-        id: context.contentId,
-        ref: forwardedRef,
-        passThrough: context.breakpointActive,
-        ...contentProps,
-        children: /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-      ...rest,
-      ref: forwardedRef,
-      componentName: "PopoverClose",
-      onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => context?.onOpenChange?.(!1, "press"))
+    if (!alwaysDisable || !alwaysDisable["remove-scroll"]) contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
+      enabled: context.breakpointActive ? false : enableRemoveScroll ? open : false,
+      children: contents
     });
-  }),
-  PopoverArrow = import_popper.PopperArrowFrame.styleable(function (props, forwardedRef) {
-    const {
-        scope,
-        ...rest
-      } = props,
-      context = usePopoverContext(scope);
-    return (0, import_adapt.useAdaptIsActive)(context.adaptScope) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
-      scope,
-      componentName: "PopoverArrow",
-      ...rest,
-      ref: forwardedRef
+    if (!alwaysDisable || !alwaysDisable.dismiss) contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+      branches: context.branches,
+      forceUnmount: disableDismissable || (forceUnmount ?? !open),
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      onDismiss: handleDismiss,
+      children: contents
     });
-  }),
-  PopoverScrollView = React.forwardRef(({
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate.Animate, {
+    type: "presence",
+    present: Boolean(open),
+    keepChildrenMounted: Boolean(keepChildrenMounted),
+    onExitComplete: handleExitComplete,
+    lazyMount,
+    passThrough: context.breakpointActive,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.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__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+    ...rest,
+    ref: forwardedRef,
+    componentName: "PopoverClose",
+    onPress: (0, import_helpers.composeEventHandlers)(props.onPress, () => context?.onOpenChange?.(false, "press"))
+  });
+});
+const PopoverArrow = import_popper.PopperArrowFrame.styleable(function PopoverArrow2(props, forwardedRef) {
+  const {
+    scope,
+    ...rest
+  } = props;
+  const context = usePopoverContext(scope);
+  if ((0, import_adapt.useAdaptIsActive)(context.adaptScope)) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
+    scope,
+    componentName: "PopoverArrow",
+    ...rest,
+    ref: forwardedRef
+  });
+});
+const PopoverScrollView = React.forwardRef(({
+  scope,
+  ...props
+}, ref) => {
+  const context = usePopoverContext(scope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
+    ref,
+    pointerEvents: context.breakpointActive ? "none" : void 0,
+    scrollEnabled: !context.breakpointActive,
+    passThrough: context.breakpointActive,
     ...props
-  }, ref) => {
-    const context = usePopoverContext(scope);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
+  });
+});
+const DEFAULT_SCOPE = "";
+const Popover = (0, import_helpers.withStaticProperties)(React.forwardRef(function Popover2({
+  scope = DEFAULT_SCOPE,
+  ...props
+}, ref) {
+  const id = React.useId();
+  const adaptScope = `PopoverAdapt${scope}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
+    scope: adaptScope,
+    portal: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverInner, {
+      adaptScope,
       ref,
-      pointerEvents: context.breakpointActive ? "none" : void 0,
-      scrollEnabled: !context.breakpointActive,
-      passThrough: context.breakpointActive,
+      id,
+      scope,
       ...props
-    });
-  }),
-  DEFAULT_SCOPE = "",
-  Popover = (0, import_helpers.withStaticProperties)(React.forwardRef(function ({
+    })
+  });
+}), {
+  Anchor: PopoverAnchor,
+  Arrow: PopoverArrow,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Close: PopoverClose,
+  Adapt: import_adapt.Adapt,
+  ScrollView: PopoverScrollView,
+  FocusScope: import_focus_scope.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__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
-      scope: adaptScope,
-      portal: !0,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverInner, {
-        adaptScope,
-        ref,
-        id,
-        scope,
-        ...props
-      })
-    });
-  }), {
-    Anchor: PopoverAnchor,
-    Arrow: PopoverArrow,
-    Trigger: PopoverTrigger,
-    Content: PopoverContent,
-    Close: PopoverClose,
-    Adapt: import_adapt.Adapt,
-    ScrollView: PopoverScrollView,
-    FocusScope: import_focus_scope.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] = (0, import_use_controllable_state.useControllableState)({
-        prop: keepChildrenMountedProp,
-        defaultProp: !1,
-        transition: keepChildrenMountedProp === "lazy"
-      }),
-      [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-        prop: openProp,
-        defaultProp: defaultOpen || !1,
-        onChange: val => {
-          onOpenChange?.(val, viaRef.current);
-        }
-      }),
-      handleOpenChange = (0, import_core.useEvent)((val, via) => {
-        viaRef.current = via, setOpen(val);
-      }),
-      isAdapted = (0, import_adapt.useAdaptIsActive)(adaptScope),
-      floatingContext = (0, import_useFloatingContext.useFloatingContext)({
-        open,
-        setOpen: handleOpenChange,
-        disable: isAdapted,
-        hoverable,
-        disableFocus
-      }),
-      [anchorTo, setAnchorToRaw] = React.useState(),
-      setAnchorTo = (0, import_core.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: (0, import_core.useEvent)(() => {
-          open && isAdapted || setOpen(!open);
-        }),
-        hasCustomAnchor,
-        anchorTo,
-        onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(!0), []),
-        onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(!1), []),
-        keepChildrenMounted
-      },
-      memoizedChildren = React.useMemo(() => /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
-        scope,
-        ...popoverContext,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverSheetController, {
-          context: popoverContext,
-          onOpenChange: setOpen,
-          children
-        })
-      }), [scope, setOpen, children, ...Object.values(popoverContext)]),
-      contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.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] = (0, import_use_controllable_state.useControllableState)({
+    prop: keepChildrenMountedProp,
+    defaultProp: false,
+    transition: keepChildrenMountedProp === "lazy"
+  });
+  const [open, setOpen] = (0, import_use_controllable_state.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 = (0, import_core.useEvent)((val, via) => {
+    viaRef.current = via;
+    setOpen(val);
+  });
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(adaptScope);
+  const floatingContext = (0, import_useFloatingContext.useFloatingContext)({
+    open,
+    setOpen: handleOpenChange,
+    disable: isAdapted,
+    hoverable,
+    disableFocus
+  });
+  const [anchorTo, setAnchorToRaw] = React.useState();
+  const setAnchorTo = (0, import_core.useCreateShallowSetState)(setAnchorToRaw);
+  React.useImperativeHandle(forwardedRef, () => ({
+    anchorTo: setAnchorTo,
+    toggle: () => setOpen(prev => !prev),
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    setOpen
+  }));
+  const contentId = React.useId();
+  const onOpenToggle = (0, import_core.useEvent)(() => {
+    if (open && isAdapted) return;
+    setOpen(!open);
+  });
+  const onCustomAnchorAdd = React.useCallback(() => setHasCustomAnchor(true), []);
+  const onCustomAnchorRemove = React.useCallback(() => setHasCustomAnchor(false), []);
+  const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_popper.Popper, {
+    open,
+    passThrough: isAdapted,
+    scope,
+    stayInFrame: true,
+    ...restProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverContextProvider, {
+      scope,
+      open,
+      onOpenChange: handleOpenChange,
+      onOpenToggle,
+      triggerRef,
+      id,
+      contentId,
+      hasCustomAnchor,
+      onCustomAnchorAdd,
+      onCustomAnchorRemove,
+      anchorTo,
+      adaptScope,
+      breakpointActive: isAdapted,
+      keepChildrenMounted,
+      disableDismissable,
+      hoverable,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PopoverSheetController, {
+        onOpenChange: setOpen,
         open,
-        passThrough: isAdapted,
         scope,
-        stayInFrame: !0,
-        ...restProps,
-        children: memoizedChildren
-      });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-      children: import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
-        value: floatingContext,
-        children: contents
-      }) : contents
-    });
+        children
+      })
+    })
   });
+  let result = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
+      value: floatingContext,
+      children: contents
+    }) : contents
+  });
+  if (zIndex !== void 0) return /* @__PURE__ */(0, import_jsx_runtime.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 = (0, import_core.useGet)(showSheet);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
-      onOpenChange: val => {
-        getShowSheet() && props.onOpenChange?.(val);
-      },
-      open: context.open,
-      hidden: !breakpointActive,
-      children: props.children
-    });
-  },
-  useShowPopoverSheet = context => {
-    const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
-    return context.open === !1 ? !1 : isAdapted;
-  };
+  open,
+  scope,
+  ...props
+}) => {
+  const context = usePopoverContext(scope);
+  const showSheet = useShowPopoverSheet(context, open);
+  const breakpointActive = context?.breakpointActive;
+  const getShowSheet = (0, import_core.useGet)(showSheet);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
+    onOpenChange: val => {
+      if (getShowSheet()) props.onOpenChange?.(val);
+    },
+    open,
+    hidden: !breakpointActive,
+    children: props.children
+  });
+};
+const useShowPopoverSheet = (context, open) => {
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  return open === false ? false : isAdapted;
+};