@tamagui/popover 2.0.0-rc.8 → 2.0.0

package/src/Popover.tsx

@@ -1,6 +1,6 @@
 import '@tamagui/polyfill-dev'
 
-import type { UseHoverProps } from '@floating-ui/react'
+import type { UseHoverProps } from '@tamagui/floating'
 import {
   Adapt,
   AdaptParent,
@@ -12,19 +12,20 @@ import {
 import { Animate } from '@tamagui/animate'
 import { ResetPresence } from '@tamagui/animate-presence'
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { isWeb } from '@tamagui/constants'
-import type { SizeTokens, ViewProps, TamaguiElement } from '@tamagui/core'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import type { SizeTokens, TamaguiElement, ViewProps } from '@tamagui/core'
 import {
   createStyledContext,
-  styled,
-  Theme,
   useCreateShallowSetState,
   useEvent,
   useGet,
-  useThemeName,
   View,
 } from '@tamagui/core'
-import type { DismissableProps } from '@tamagui/dismissable'
+import {
+  Dismissable,
+  DismissableBranch,
+  type DismissableProps,
+} from '@tamagui/dismissable'
 import { FloatingOverrideContext } from '@tamagui/floating'
 import type { FocusScopeProps } from '@tamagui/focus-scope'
 import { FocusScope, FocusScopeController } from '@tamagui/focus-scope'
@@ -43,14 +44,13 @@ import {
   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, type ScrollViewProps } from '@tamagui/scroll-view'
 import { SheetController } from '@tamagui/sheet/controller'
 import type { YStackProps } from '@tamagui/stacks'
 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'
 
@@ -62,6 +62,28 @@ type ScopedPopoverProps<P> = Omit<P, 'scope'> & {
 
 const needsRepropagation = needsPortalRepropagation()
 
+const openPopovers = new Set<React.Dispatch<React.SetStateAction<boolean>>>()
+
+export const hasOpenPopovers = () => {
+  return openPopovers.size > 0
+}
+
+export const closeOpenPopovers = () => {
+  if (openPopovers.size === 0) return false
+  openPopovers.forEach((setOpen) => setOpen(false))
+  return true
+}
+
+export const closeLastOpenedPopover = () => {
+  if (openPopovers.size === 0) return false
+  const last = Array.from(openPopovers).pop()
+  if (last) {
+    last(false)
+    return true
+  }
+  return false
+}
+
 type PopoverVia = 'hover' | 'press'
 
 export type PopoverProps = ScopedPopoverProps<PopperProps> & {
@@ -86,6 +108,24 @@ export type PopoverProps = ScopedPopoverProps<PopperProps> & {
    * Disable focusing behavior on open
    */
   disableFocus?: boolean
+
+  /**
+   * Disable the dismissable layer (escape key, outside click handling).
+   * Useful for popovers that stay mounted but are visually hidden.
+   */
+  disableDismissable?: boolean
+
+  /**
+   * z-index for the popover portal. Use this when popovers need to appear
+   * above other portaled content like dialogs or fixed headers.
+   *
+   * By default, Tamagui automatically stacks overlays - later-opened content
+   * appears above earlier content, and nested content appears above its parent.
+   * Only set this if you need to override the automatic stacking behavior.
+   *
+   * @see https://tamagui.dev/ui/z-index
+   */
+  zIndex?: number
 }
 
 // let users override for type safety
@@ -106,7 +146,24 @@ type PopoverContextValue = {
   size?: SizeTokens
   breakpointActive?: boolean
   keepChildrenMounted?: boolean | 'lazy'
+  disableDismissable?: boolean
+  hoverable?: boolean | object
   anchorTo?: Rect
+  // scoped branches Set for DismissableBranch/Dismissable to share
+  branches: Set<HTMLElement>
+}
+
+type PopoverTriggerStateSetter = React.Dispatch<React.SetStateAction<boolean>>
+
+type PopoverTriggerContextValue = {
+  triggerRef: React.RefObject<any>
+  hasCustomAnchor: boolean
+  anchorTo?: Rect
+  branches: Set<HTMLElement>
+  onOpenToggle(): void
+  setActiveTrigger(id: string | null): void
+  registerTrigger(id: string, setOpen: PopoverTriggerStateSetter): void
+  unregisterTrigger(id: string): void
 }
 
 export const PopoverContext = createStyledContext<PopoverContextValue>(
@@ -115,93 +172,302 @@ export const PopoverContext = createStyledContext<PopoverContextValue>(
   'Popover__'
 )
 
+// zIndex flows from root Popover prop to PopoverContent portal
+export const PopoverZIndexContext = React.createContext<number | undefined>(undefined)
+
+export const PopoverTriggerContext = createStyledContext<PopoverTriggerContextValue>(
+  {} as PopoverTriggerContextValue,
+  'PopoverTrigger__'
+)
+
 export const usePopoverContext = PopoverContext.useStyledContext
+export const usePopoverTriggerContext = PopoverTriggerContext.useStyledContext
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverAnchor
- * -----------------------------------------------------------------------------------------------*/
+/**
+ * Read reactive popover open state from the popover context.
+ */
+export function usePopoverOpen(scope?: string): boolean {
+  return usePopoverContext(scope).open
+}
 
-export type PopoverAnchorProps = ScopedPopoverProps<YStackProps>
+/**
+ * Hook to set up trigger registration/isolation logic.
+ * Used internally by Popover and can be used by Tooltip.
+ */
+export function usePopoverTriggerSetup(open: boolean) {
+  const triggerStateSettersRef = React.useRef(
+    new Map<string, PopoverTriggerStateSetter>()
+  )
+  const activeTriggerIdRef = React.useRef<string | null>(null)
 
-export const PopoverAnchor = React.forwardRef<TamaguiElement, PopoverAnchorProps>(
-  function PopoverAnchor(props, forwardedRef) {
-    const { scope, ...rest } = props
-    const context = usePopoverContext(scope)
-    const { onCustomAnchorAdd, onCustomAnchorRemove } = context || {}
+  const setActiveTrigger = useEvent((id: string | null) => {
+    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)
+    }
+  })
 
-    React.useEffect(() => {
-      onCustomAnchorAdd()
-      return () => onCustomAnchorRemove()
-    }, [onCustomAnchorAdd, onCustomAnchorRemove])
+  const registerTrigger = useEvent(
+    (id: string, setOpenState: PopoverTriggerStateSetter) => {
+      triggerStateSettersRef.current.set(id, setOpenState)
+      setOpenState(activeTriggerIdRef.current === id && open)
+    }
+  )
 
-    return <PopperAnchor scope={scope} {...rest} ref={forwardedRef} />
+  const unregisterTrigger = useEvent((id: string) => {
+    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 }
+}
+
+export type PopoverContextProviderProps = {
+  scope: string
+  children: React.ReactNode
+  // PopoverContext values
+  open: boolean
+  onOpenChange(open: boolean, via?: 'hover' | 'press'): void
+  onOpenToggle(): void
+  triggerRef: React.RefObject<any>
+  id?: string
+  contentId?: string
+  hasCustomAnchor?: boolean
+  onCustomAnchorAdd?: () => void
+  onCustomAnchorRemove?: () => void
+  anchorTo?: Rect
+  // extra props for Popover (optional for Tooltip)
+  adaptScope?: string
+  breakpointActive?: boolean
+  keepChildrenMounted?: boolean | 'lazy'
+  disableDismissable?: boolean
+  hoverable?: boolean | object
+}
+
+/**
+ * Provider that sets up both PopoverContext and PopoverTriggerContext.
+ * Use this in Tooltip or other components that need popover trigger behavior.
+ */
+export const PopoverContextProvider = React.memo(
+  ({
+    scope,
+    children,
+    open,
+    onOpenChange,
+    onOpenToggle,
+    triggerRef,
+    id = '',
+    contentId,
+    hasCustomAnchor = false,
+    onCustomAnchorAdd = voidFn,
+    onCustomAnchorRemove = voidFn,
+    anchorTo,
+    adaptScope,
+    breakpointActive,
+    keepChildrenMounted,
+    disableDismissable,
+    hoverable,
+  }: PopoverContextProviderProps) => {
+    const [branches] = React.useState(() => new Set<HTMLElement>())
+    const { setActiveTrigger, registerTrigger, unregisterTrigger } =
+      usePopoverTriggerSetup(open)
+
+    return (
+      <PopoverContext.Provider
+        scope={scope}
+        popoverScope={scope}
+        adaptScope={adaptScope}
+        id={id}
+        contentId={contentId}
+        triggerRef={triggerRef}
+        open={open}
+        onOpenChange={onOpenChange}
+        onOpenToggle={onOpenToggle}
+        hasCustomAnchor={hasCustomAnchor}
+        onCustomAnchorAdd={onCustomAnchorAdd}
+        onCustomAnchorRemove={onCustomAnchorRemove}
+        anchorTo={anchorTo}
+        branches={branches}
+        breakpointActive={breakpointActive}
+        keepChildrenMounted={keepChildrenMounted}
+        disableDismissable={disableDismissable}
+        hoverable={hoverable}
+      >
+        <PopoverTriggerContext.Provider
+          scope={scope}
+          triggerRef={triggerRef}
+          hasCustomAnchor={hasCustomAnchor}
+          anchorTo={anchorTo}
+          branches={branches}
+          onOpenToggle={onOpenToggle}
+          setActiveTrigger={setActiveTrigger}
+          registerTrigger={registerTrigger}
+          unregisterTrigger={unregisterTrigger}
+        >
+          {children}
+        </PopoverTriggerContext.Provider>
+      </PopoverContext.Provider>
+    )
   }
 )
 
+const voidFn = () => {}
+
 /* -------------------------------------------------------------------------------------------------
- * PopoverTrigger
+ * PopoverAnchor
  * -----------------------------------------------------------------------------------------------*/
 
-export type PopoverTriggerProps = ScopedPopoverProps<ViewProps>
+export type PopoverAnchorProps = ScopedPopoverProps<YStackProps>
 
-export const PopoverTrigger = React.forwardRef<TamaguiElement, PopoverTriggerProps>(
-  function PopoverTrigger(props, forwardedRef) {
-    const { scope, ...rest } = props
-    const context = usePopoverContext(scope)
+export const PopoverAnchor = React.memo(
+  React.forwardRef<TamaguiElement, PopoverAnchorProps>(
+    function PopoverAnchor(props, forwardedRef) {
+      const { scope, ...rest } = props
+      const context = usePopoverContext(scope)
+      const { onCustomAnchorAdd, onCustomAnchorRemove } = context || {}
 
-    const anchorTo = context.anchorTo
-    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)
+      React.useEffect(() => {
+        onCustomAnchorAdd()
+        return () => onCustomAnchorRemove()
+      }, [onCustomAnchorAdd, onCustomAnchorRemove])
 
-    if (!props.children) {
-      return null
+      return <PopperAnchor scope={scope} {...rest} ref={forwardedRef} />
     }
+  )
+)
 
-    const trigger = (
-      <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 as any, context.onOpenToggle)}
-      />
-    )
+/* -------------------------------------------------------------------------------------------------
+ * PopoverTrigger
+ * -----------------------------------------------------------------------------------------------*/
+
+export type PopoverTriggerProps = ScopedPopoverProps<
+  ViewProps & {
+    /**
+     * When true, disables the built-in click-to-toggle behavior on the trigger.
+     * Useful for hoverable popovers where you want to control open/close
+     * entirely through hover or your own handlers.
+     */
+    disablePressTrigger?: boolean
+  }
+>
+
+export const PopoverTrigger = React.memo(
+  React.forwardRef<TamaguiElement, PopoverTriggerProps>(
+    function PopoverTrigger(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<TamaguiElement>(null)
+      const composedTriggerRef = useComposedRefs(forwardedRef, triggerElRef)
+
+      const { registerTrigger, unregisterTrigger } = triggerContext
+      React.useEffect(() => {
+        registerTrigger(triggerId, setOpen)
+        return () => {
+          unregisterTrigger(triggerId)
+        }
+      }, [registerTrigger, unregisterTrigger, triggerId])
 
-    const virtualRef = React.useMemo(() => {
-      if (!anchorTo) {
+      if (!rest.children) {
         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),
-          }),
-        },
+
+      const activateSelf = () => {
+        triggerContext.setActiveTrigger(triggerId)
+        const el = triggerElRef.current
+        if (el) {
+          triggerContext.triggerRef.current = el
+        }
       }
-    }, [context.anchorTo, anchorTo?.x, anchorTo?.y, anchorTo?.height, anchorTo?.width])
-
-    return context.hasCustomAnchor ? (
-      trigger
-    ) : (
-      <PopperAnchor {...(virtualRef && { virtualRef })} scope={scope} asChild>
-        {trigger}
-      </PopperAnchor>
-    )
-  }
+
+      const trigger = (
+        <View
+          aria-expanded={open}
+          // TODO not matching
+          // aria-controls={context.contentId}
+          data-state={getState(open)}
+          {...rest}
+          // @ts-ignore
+          ref={composedTriggerRef}
+          onPress={composeEventHandlers(rest.onPress as any, () => {
+            if (disablePressTrigger) return
+            triggerContext.setActiveTrigger(open ? null : triggerId)
+            triggerContext.onOpenToggle()
+          })}
+          onMouseEnter={composeEventHandlers(rest.onMouseEnter as any, activateSelf)}
+          onPressIn={composeEventHandlers(rest.onPressIn as any, activateSelf)}
+          onFocus={composeEventHandlers(rest.onFocus as any, 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,
+      ])
+
+      // wrap trigger in DismissableBranch so clicking it doesn't fire pointerDownOutside
+      // which would close the popover before onPress can toggle it
+      const wrappedTrigger = isWeb ? (
+        <DismissableBranch branches={triggerContext.branches}>
+          {trigger}
+        </DismissableBranch>
+      ) : (
+        trigger
+      )
+
+      return triggerContext.hasCustomAnchor ? (
+        wrappedTrigger
+      ) : (
+        <PopperAnchor {...(virtualRef && { virtualRef })} scope={scope} asChild>
+          {wrappedTrigger}
+        </PopperAnchor>
+      )
+    }
+  )
 )
 
 /* -------------------------------------------------------------------------------------------------
  * PopoverContent
  * -----------------------------------------------------------------------------------------------*/
 
-type PopoverContentTypeElement = PopoverContentImplElement
-
 export interface PopoverContentTypeProps extends Omit<
   PopoverContentImplProps,
   'disableOutsidePointerEvents'
@@ -216,38 +482,38 @@ export interface PopoverContentTypeProps extends Omit<
 
 export type PopoverContentProps = PopoverContentTypeProps
 
-const PopoverContentFrame = styled(PopperContentFrame, {
-  name: 'Popover',
-})
-
-export const PopoverContent = PopoverContentFrame.styleable<PopoverContentProps>(
+export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
   function PopoverContent(props, forwardedRef) {
     const {
       trapFocus,
       enableRemoveScroll = false,
-      zIndex,
+      zIndex: zIndexProp,
       scope,
       ...contentImplProps
     } = props
 
     const context = usePopoverContext(scope)
+    const zIndexFromContext = React.useContext(PopoverZIndexContext)
+    // prop on Content takes precedence for backwards compatibility, then context from root
+    const zIndex = zIndexProp ?? zIndexFromContext
+    const open = usePopoverOpen(scope)
     const contentRef = React.useRef<any>(null)
     const composedRefs = useComposedRefs(forwardedRef, contentRef)
     const isRightClickOutsideRef = React.useRef(false)
-    const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open)
+    const [isFullyHidden, setIsFullyHidden] = React.useState(!open)
 
     // Reset isFullyHidden when popover opens (useEffect avoids render-phase timing issues)
     // there was a hard to isolate bug in tamagui.dev where moving between /ui docs pages quickly
     // caused it to infinite loop, the setState in render (and useLayoutEffect) made it too prone
     // to bug, useEffect maybe fine here because its hidden, ok to be slightly delayed while hidden
-    React.useEffect(() => {
-      if (context.open && isFullyHidden) {
+    useIsomorphicLayoutEffect(() => {
+      if (open && isFullyHidden) {
         setIsFullyHidden(false)
       }
-    }, [context.open, isFullyHidden])
+    }, [open, isFullyHidden])
 
     if (!context.keepChildrenMounted) {
-      if (isFullyHidden && !context.open) {
+      if (isFullyHidden && !open) {
         return null
       }
     }
@@ -256,24 +522,24 @@ export const PopoverContent = PopoverContentFrame.styleable<PopoverContentProps>
       <PopoverPortal
         passThrough={context.breakpointActive}
         context={context}
+        open={open}
         zIndex={zIndex}
       >
         <View
           passThrough={context.breakpointActive}
-          pointerEvents={
-            context.open ? (contentImplProps.pointerEvents ?? 'auto') : 'none'
-          }
+          pointerEvents={open ? (contentImplProps.pointerEvents ?? 'auto') : 'none'}
         >
           <PopoverContentImpl
             {...contentImplProps}
             context={context}
+            open={open}
             enableRemoveScroll={enableRemoveScroll}
             ref={composedRefs}
             setIsFullyHidden={setIsFullyHidden}
             scope={scope}
             // we make sure we're not trapping once it's been closed
             // (closed !== unmounted when animating out)
-            trapFocus={trapFocus ?? context.open}
+            trapFocus={trapFocus ?? open}
             disableOutsidePointerEvents
             onCloseAutoFocus={
               props.onCloseAutoFocus === false
@@ -312,12 +578,14 @@ export const PopoverContent = PopoverContentFrame.styleable<PopoverContentProps>
 
 const useParentContexts = (scope: string) => {
   const context = usePopoverContext(scope)
+  const triggerContext = usePopoverTriggerContext(scope)
   const popperContext = usePopperContext(scope)
   const adaptContext = useAdaptContext(context.adaptScope)
   return {
     popperContext,
     adaptContext,
     context,
+    triggerContext,
   }
 }
 
@@ -327,14 +595,17 @@ function RepropagateParentContexts({
   adaptContext,
   children,
   context,
+  triggerContext,
   popperContext,
 }: ParentContexts & {
   children: React.ReactNode
 }) {
   return (
     <PopperProvider scope={context.popoverScope} {...popperContext}>
-      <PopoverContext.Provider {...context}>
-        <ProvideAdaptContext {...adaptContext}>{children}</ProvideAdaptContext>
+      <PopoverContext.Provider scope={context.popoverScope} {...context}>
+        <PopoverTriggerContext.Provider scope={context.popoverScope} {...triggerContext}>
+          <ProvideAdaptContext {...adaptContext}>{children}</ProvideAdaptContext>
+        </PopoverTriggerContext.Provider>
       </PopoverContext.Provider>
     </PopperProvider>
   )
@@ -347,6 +618,8 @@ const PortalAdaptSafe = ({
   children?: React.ReactNode
   context: PopoverContextValue
 }) => {
+  'use no memo'
+
   if (needsRepropagation) {
     const parentContexts = useParentContexts(context.popoverScope)
     return (
@@ -363,42 +636,40 @@ const PortalAdaptSafe = ({
 
 function PopoverPortal({
   context,
+  open,
   zIndex,
   passThrough,
   children,
   onPress,
 }: Pick<PopoverContentProps, 'zIndex' | 'passThrough' | 'children' | 'onPress'> & {
   context: PopoverContextValue
+  open: boolean
 }) {
-  const themeName = useThemeName()
+  'use no memo'
 
   let content = children
 
-  // native doesnt support portals
+  // native without teleport
   if (needsRepropagation) {
     const parentContexts = useParentContexts(context.popoverScope)
-
     content = (
       <RepropagateParentContexts {...parentContexts}>{content}</RepropagateParentContexts>
     )
   }
 
   return (
-    <Portal passThrough={passThrough} stackZIndex zIndex={zIndex as any}>
+    <Portal passThrough={passThrough} stackZIndex zIndex={zIndex}>
       {/* 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 */}
-      <Theme passThrough={passThrough} contain forceClassName name={themeName}>
-        {!!context.open && !context.breakpointActive && (
-          <YStack
-            fullscreen
-            onPress={composeEventHandlers(onPress as any, context.onOpenToggle)}
-          />
-        )}
+      {!!open && !context.breakpointActive && !context.hoverable && (
+        <YStack
+          fullscreen
+          onPress={composeEventHandlers(onPress as any, context.onOpenToggle)}
+        />
+      )}
 
-        <StackZIndexContext zIndex={resolveViewZIndex(zIndex)}>
-          {content}
-        </StackZIndexContext>
-      </Theme>
+      {/* i removed a hardcoded StackZIndex because Portal has it internally now with useStackedZIndex + ZIndexHardcoded */}
+      {content}
     </Portal>
   )
 }
@@ -440,10 +711,20 @@ export type PopoverContentImplProps = PopperContentProps &
     enableRemoveScroll?: boolean
 
     freezeContentsWhenHidden?: boolean
+
+    /**
+     * Performance - if never going to use feature can permanently disable
+     */
+    alwaysDisable?: {
+      focus?: boolean
+      'remove-scroll'?: boolean
+      dismiss?: boolean
+    }
   }
 
 type PopoverContentImplInteralProps = PopoverContentImplProps & {
   context: PopoverContextValue
+  open: boolean
   setIsFullyHidden: React.Dispatch<React.SetStateAction<boolean>>
 }
 
@@ -467,11 +748,14 @@ const PopoverContentImpl = React.forwardRef<
     freezeContentsWhenHidden,
     setIsFullyHidden,
     lazyMount,
+    forceUnmount,
     context,
+    open,
+    alwaysDisable,
     ...contentProps
   } = props
 
-  const { open, keepChildrenMounted } = context
+  const { keepChildrenMounted, disableDismissable } = context
 
   const handleExitComplete = React.useCallback(() => {
     setIsFullyHidden?.(true)
@@ -481,14 +765,16 @@ const PopoverContentImpl = React.forwardRef<
     <ResetPresence disable={context.breakpointActive}>{children}</ResetPresence>
   )
 
+  const handleDismiss = React.useCallback(() => {
+    context.onOpenChange(false, 'press')
+  }, [context])
+
   // i want to avoid reparenting but react-remove-scroll makes it hard
   // TODO its removed now so we can probable do it now
   if (!context.breakpointActive) {
     if (process.env.TAMAGUI_TARGET !== 'native') {
-      contents = (
-        <RemoveScroll
-          enabled={context.breakpointActive ? false : enableRemoveScroll ? open : false}
-        >
+      if (!alwaysDisable || !alwaysDisable.focus) {
+        contents = (
           <FocusScope
             loop={trapFocus !== false}
             enabled={context.breakpointActive ? false : disableFocusScope ? false : open}
@@ -498,24 +784,36 @@ const PopoverContentImpl = React.forwardRef<
           >
             <div style={dspContentsStyle}>{contents}</div>
           </FocusScope>
-        </RemoveScroll>
-      )
-    }
-  }
+        )
+      }
 
-  // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{
-  //   context.onOpenChange(false);
-  // }, [])
-  // <Dismissable
-  //     disableOutsidePointerEvents={disableOutsidePointerEvents}
-  //     // onInteractOutside={onInteractOutside}
-  //     onEscapeKeyDown={onEscapeKeyDown}
-  //     // onPointerDownOutside={onPointerDownOutside}
-  //     // onFocusOutside={onFocusOutside}
-  //     onDismiss={handleDismiss}
-  //   >
+      if (!alwaysDisable || !alwaysDisable['remove-scroll']) {
+        contents = (
+          <RemoveScroll
+            enabled={context.breakpointActive ? false : enableRemoveScroll ? open : false}
+          >
+            {contents}
+          </RemoveScroll>
+        )
+      }
 
-  // const freeze = Boolean(isFullyHidden && freezeContentsWhenHidden)
+      if (!alwaysDisable || !alwaysDisable.dismiss) {
+        contents = (
+          <Dismissable
+            branches={context.branches}
+            forceUnmount={disableDismissable || (forceUnmount ?? !open)}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+            onFocusOutside={onFocusOutside}
+            onInteractOutside={onInteractOutside}
+            onDismiss={handleDismiss}
+          >
+            {contents}
+          </Dismissable>
+        )
+      }
+    }
+  }
 
   return (
     <Animate
@@ -533,6 +831,11 @@ const PopoverContentImpl = React.forwardRef<
         id={context.contentId}
         ref={forwardedRef}
         passThrough={context.breakpointActive}
+        {...(!contentProps.unstyled && {
+          size: '$true',
+          backgroundColor: '$background',
+          alignItems: 'center',
+        })}
         {...contentProps}
       >
         <PortalAdaptSafe context={context}>{contents}</PortalAdaptSafe>
@@ -683,6 +986,8 @@ const PopoverInner = React.forwardRef<
     keepChildrenMounted: keepChildrenMountedProp,
     hoverable,
     disableFocus,
+    disableDismissable,
+    zIndex,
     id,
     adaptScope,
     ...restProps
@@ -691,11 +996,13 @@ const PopoverInner = React.forwardRef<
   const triggerRef = React.useRef<TamaguiElement>(null)
   const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
   const viaRef = React.useRef<PopoverVia>(undefined)
+
   const [keepChildrenMounted] = useControllableState({
     prop: keepChildrenMountedProp,
     defaultProp: false,
     transition: keepChildrenMountedProp === 'lazy',
   })
+
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen || false,
@@ -704,6 +1011,15 @@ const PopoverInner = React.forwardRef<
     },
   })
 
+  // track open popovers for closeOpenPopovers()
+  React.useEffect(() => {
+    if (!open) return
+    openPopovers.add(setOpen)
+    return () => {
+      openPopovers.delete(setOpen)
+    }
+  }, [open, setOpen])
+
   const handleOpenChange = useEvent((val, via) => {
     viaRef.current = via
     setOpen(val)
@@ -717,7 +1033,7 @@ const PopoverInner = React.forwardRef<
     disable: isAdapted,
     hoverable,
     disableFocus: disableFocus,
-  }) as any
+  })
 
   const [anchorTo, setAnchorToRaw] = React.useState<Rect>()
 
@@ -733,56 +1049,46 @@ const PopoverInner = React.forwardRef<
     setOpen,
   }))
 
-  // needs to be entirely memoized!
-  const popoverContext = {
-    popoverScope: scope,
-    adaptScope,
-    id,
-    contentId: React.useId(),
-    triggerRef,
-    open,
-    breakpointActive: isAdapted,
-    onOpenChange: handleOpenChange,
-    onOpenToggle: useEvent(() => {
-      if (open && isAdapted) {
-        return
-      }
-      setOpen(!open)
-    }),
-    hasCustomAnchor,
-    anchorTo,
-    onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
-    keepChildrenMounted,
-  } satisfies PopoverContextValue
-
-  // // debug if changing too often
-  // if (process.env.NODE_ENV === 'development') {
-  //   Object.keys(popoverContext).forEach((key) => {
-  //     React.useEffect(
-  //       () => console.log(`changed`, key, popoverContext[key]),
-  //       [popoverContext[key]]
-  //     )
-  //   })
-  // }
-
-  const memoizedChildren = React.useMemo(() => {
-    return (
-      <PopoverContext.Provider scope={scope} {...popoverContext}>
-        <PopoverSheetController context={popoverContext} onOpenChange={setOpen}>
-          {children}
-        </PopoverSheetController>
-      </PopoverContext.Provider>
-    )
-  }, [scope, setOpen, children, ...Object.values(popoverContext)])
+  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 = (
     <Popper open={open} passThrough={isAdapted} scope={scope} stayInFrame {...restProps}>
-      {memoizedChildren}
+      <PopoverContextProvider
+        scope={scope}
+        open={open}
+        onOpenChange={handleOpenChange}
+        onOpenToggle={onOpenToggle}
+        triggerRef={triggerRef}
+        id={id}
+        contentId={contentId}
+        hasCustomAnchor={hasCustomAnchor}
+        onCustomAnchorAdd={onCustomAnchorAdd}
+        onCustomAnchorRemove={onCustomAnchorRemove}
+        anchorTo={anchorTo}
+        adaptScope={adaptScope}
+        breakpointActive={isAdapted}
+        keepChildrenMounted={keepChildrenMounted}
+        disableDismissable={disableDismissable}
+        hoverable={hoverable}
+      >
+        <PopoverSheetController onOpenChange={setOpen} open={open} scope={scope}>
+          {children}
+        </PopoverSheetController>
+      </PopoverContextProvider>
     </Popper>
   )
 
-  return (
+  let result = (
     <>
       {isWeb ? (
         <FloatingOverrideContext.Provider value={floatingContext}>
@@ -793,6 +1099,16 @@ const PopoverInner = React.forwardRef<
       )}
     </>
   )
+
+  if (zIndex !== undefined) {
+    return (
+      <PopoverZIndexContext.Provider value={zIndex}>
+        {result}
+      </PopoverZIndexContext.Provider>
+    )
+  }
+
+  return result
 })
 
 /* -----------------------------------------------------------------------------------------------*/
@@ -802,25 +1118,28 @@ function getState(open: boolean) {
 }
 
 const PopoverSheetController = ({
-  context,
+  open,
+  scope,
   ...props
 }: {
-  context: PopoverContextValue
+  open: boolean
+  scope?: string
   children: React.ReactNode
   onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
 }) => {
-  const showSheet = useShowPopoverSheet(context)
-  const breakpointActive = context.breakpointActive
+  const context = usePopoverContext(scope)
+  const showSheet = useShowPopoverSheet(context, open)
+  const breakpointActive = context?.breakpointActive
   const getShowSheet = useGet(showSheet)
 
   return (
     <SheetController
-      onOpenChange={(val) => {
+      onOpenChange={(val: boolean) => {
         if (getShowSheet()) {
           props.onOpenChange?.(val)
         }
       }}
-      open={context.open}
+      open={open}
       hidden={!breakpointActive}
     >
       {props.children}
@@ -828,7 +1147,7 @@ const PopoverSheetController = ({
   )
 }
 
-const useShowPopoverSheet = (context: PopoverContextValue) => {
+const useShowPopoverSheet = (context: PopoverContextValue, open: boolean) => {
   const isAdapted = useAdaptIsActive(context.adaptScope)
-  return context.open === false ? false : isAdapted
+  return open === false ? false : isAdapted
 }