@tamagui/popover 2.7.7 → 3.0.0-beta.643.1

package/src/Popover.tsx

@@ -13,12 +13,13 @@ import { Animate } from '@tamagui/animate'
 import { ResetPresence } from '@tamagui/animate-presence'
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import type { SizeTokens, TamaguiElement, ViewProps } from '@tamagui/core'
+import type { SizeTokens, GetRef, TamaguiElement, ViewProps } from '@tamagui/core'
 import {
+  createStyledHOC,
+  createRefComponent,
   createStyledContext,
   useCreateShallowSetState,
   useEvent,
-  useGet,
   View,
 } from '@tamagui/core'
 import {
@@ -47,7 +48,6 @@ import {
 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'
@@ -168,23 +168,15 @@ type PopoverTriggerContextValue = {
 
 export const PopoverContext = createStyledContext<PopoverContextValue>(
   // since we always provide this we can avoid setting here
-  {} as PopoverContextValue,
+  {},
   'Popover__'
 )
 
 // zIndex flows from root Popover prop to PopoverContent portal
 export const PopoverZIndexContext = React.createContext<number | undefined>(undefined)
 
-// when adapted to a Sheet, tracks whether the sheet has finished sliding out.
-// PopoverSheetController flips this true via SheetController.onAnimationComplete
-// so PopoverContent can hold its adapted children mounted until the slide-out
-// is done, instead of unmounting them on the popup's (passThrough) exit.
-// defaults true (= safe to unmount) for any PopoverContent rendered outside a
-// PopoverSheetController.
-const PopoverAdaptHiddenContext = React.createContext(true)
-
 export const PopoverTriggerContext = createStyledContext<PopoverTriggerContextValue>(
-  {} as PopoverTriggerContextValue,
+  {},
   'PopoverTrigger__'
 )
 
@@ -346,7 +338,7 @@ const voidFn = () => {}
 export type PopoverAnchorProps = ScopedPopoverProps<YStackProps>
 
 export const PopoverAnchor = React.memo(
-  React.forwardRef<TamaguiElement, PopoverAnchorProps>(
+  createRefComponent<TamaguiElement, PopoverAnchorProps>(
     function PopoverAnchor(props, forwardedRef) {
       const { scope, ...rest } = props
       const context = usePopoverContext(scope)
@@ -378,7 +370,7 @@ export type PopoverTriggerProps = ScopedPopoverProps<
 >
 
 export const PopoverTrigger = React.memo(
-  React.forwardRef<TamaguiElement, PopoverTriggerProps>(
+  createRefComponent<TamaguiElement, PopoverTriggerProps>(
     function PopoverTrigger(props, forwardedRef) {
       const { scope, disablePressTrigger, ...rest } = props
       const triggerContext = usePopoverTriggerContext(scope)
@@ -411,8 +403,10 @@ export const PopoverTrigger = React.memo(
       const trigger = (
         <View
           aria-expanded={open}
-          // TODO not matching
-          // aria-controls={context.contentId}
+          // aria-controls is supplied at runtime by floating-ui's useRole
+          // (see useFloatingContext), pointing at the role="dialog" content
+          // element while open - no manual wiring is needed or wanted here
+          // (a manual id would point at the inner frame, not the dialog element)
           data-state={getState(open)}
           {...rest}
           // @ts-ignore
@@ -484,23 +478,24 @@ export interface PopoverContentTypeProps extends Omit<
    * Enable smooth animation when the content position changes (e.g., when flipping sides)
    */
   animatePosition?: boolean | 'even-when-repositioning'
-  /** @deprecated Use `animatePosition` instead */
-  enableAnimationForPositionChange?: boolean
 }
 
 export type PopoverContentProps = PopoverContentTypeProps
 
-export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
-  function PopoverContent(props, forwardedRef) {
+export const PopoverContent = createStyledHOC(
+  PopperContentFrame,
+  function PopoverContent(props: PopoverContentProps, forwardedRef) {
     const {
       trapFocus,
       enableRemoveScroll = false,
       zIndex: zIndexProp,
       scope,
+      forceMount,
       ...contentImplProps
     } = props
 
     const context = usePopoverContext(scope)
+    const adaptContext = useAdaptContext(context.adaptScope)
     const zIndexFromContext = React.useContext(PopoverZIndexContext)
     // prop on Content takes precedence for backwards compatibility, then context from root
     const zIndex = zIndexProp ?? zIndexFromContext
@@ -522,14 +517,13 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
 
     // when adapted to a Sheet, the content is portaled into the sheet via
     // Adapt.Contents. its mount lifecycle must follow the sheet's slide-out
-    // (PopoverAdaptHiddenContext, flipped by SheetController.onAnimationComplete),
-    // NOT the popup's own exit animation (isFullyHidden); the popup runs in
-    // passThrough mode while adapted, so isFullyHidden either fires immediately
-    // (content vanishes mid-slide) or never (content leaks), depending on driver.
-    const isAdaptFullyHidden = React.useContext(PopoverAdaptHiddenContext)
-    if (!context.keepChildrenMounted) {
+    // (adaptContext.targetFullyHidden, driven by the Adapt handoff), NOT the
+    // popup's own exit animation (isFullyHidden); the popup runs in passThrough
+    // mode while adapted, so isFullyHidden either fires immediately (content
+    // vanishes mid-slide) or never (content leaks), depending on driver.
+    if (!forceMount && !context.keepChildrenMounted) {
       if (context.breakpointActive) {
-        if (!open && isAdaptFullyHidden) {
+        if (!open && adaptContext.targetFullyHidden) {
           return null
         }
       } else if (isFullyHidden && !open) {
@@ -542,6 +536,7 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
         passThrough={context.breakpointActive}
         context={context}
         open={open}
+        visuallyActive={open || !isFullyHidden}
         zIndex={zIndex}
       >
         <View
@@ -552,6 +547,7 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
             {...contentImplProps}
             context={context}
             open={open}
+            forceMount={forceMount}
             enableRemoveScroll={enableRemoveScroll}
             ref={composedRefs}
             setIsFullyHidden={setIsFullyHidden}
@@ -564,8 +560,8 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
               props.onCloseAutoFocus === false
                 ? undefined
                 : composeEventHandlers(props.onCloseAutoFocus, (event) => {
-                    if (event.defaultPrevented) return
-                    event.preventDefault()
+                    if (event.isCanceled) return
+                    event.cancel()
                     if (!isRightClickOutsideRef.current)
                       context.triggerRef.current?.focus()
                   })
@@ -573,7 +569,8 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
             onPointerDownOutside={composeEventHandlers(
               props.onPointerDownOutside,
               (event) => {
-                const originalEvent = event.detail.originalEvent
+                const originalEvent = event.event
+                if (!originalEvent) return
                 const ctrlLeftClick =
                   originalEvent.button === 0 && originalEvent.ctrlKey === true
                 const isRightClick = originalEvent.button === 2 || ctrlLeftClick
@@ -585,7 +582,9 @@ export const PopoverContent = PopperContentFrame.styleable<PopoverContentProps>(
             // We make sure we don't trigger our `onDismiss` in such case.
             onFocusOutside={composeEventHandlers(
               props.onFocusOutside,
-              (event) => event.preventDefault(),
+              (event) => {
+                if (trapFocus ?? open) event.cancel()
+              },
               { checkDefaultPrevented: false }
             )}
           />
@@ -656,6 +655,7 @@ const PortalAdaptSafe = ({
 function PopoverPortal({
   context,
   open,
+  visuallyActive,
   zIndex,
   passThrough,
   children,
@@ -663,6 +663,9 @@ function PopoverPortal({
 }: Pick<PopoverContentProps, 'zIndex' | 'passThrough' | 'children' | 'onPress'> & {
   context: PopoverContextValue
   open: boolean
+  // true while open or still animating out - hides the portal host when false
+  // (matters for keepChildrenMounted/forceMount content, see Portal.tsx)
+  visuallyActive: boolean
 }) {
   'use no memo'
 
@@ -677,12 +680,18 @@ function PopoverPortal({
   }
 
   return (
-    <Portal passThrough={passThrough} stackZIndex zIndex={zIndex}>
+    <Portal
+      passThrough={passThrough}
+      stackZIndex
+      zIndex={zIndex}
+      hidden={!visuallyActive}
+    >
       {/* 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 */}
       {!!open && !context.breakpointActive && !context.hoverable && (
         <YStack
-          fullscreen
+          position="absolute"
+          inset={0}
           onPress={composeEventHandlers(onPress as any, context.onOpenToggle)}
         />
       )}
@@ -695,7 +704,7 @@ function PopoverPortal({
 
 /* -----------------------------------------------------------------------------------------------*/
 
-type PopoverContentImplElement = React.ElementRef<typeof PopperContent>
+type PopoverContentImplElement = GetRef<typeof PopperContent>
 
 export type PopoverContentImplProps = PopperContentProps &
   Omit<DismissableProps, 'onDismiss' | 'children' | 'onPointerDownCapture'> & {
@@ -705,6 +714,13 @@ export type PopoverContentImplProps = PopperContentProps &
      */
     lazyMount?: boolean
 
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries. Matches Dialog:
+     * disables part presence gating so the content is always mounted.
+     */
+    forceMount?: boolean
+
     /**
      * Whether focus should be trapped within the `Popover`
      * @default false
@@ -718,12 +734,12 @@ export type PopoverContentImplProps = PopperContentProps &
     disableFocusScope?: boolean
 
     /**
-     * Event handler called when auto-focusing on open. Can be prevented.
+     * Event handler called when auto-focusing on open. Can be canceled.
      */
     onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']
 
     /**
-     * Event handler called when auto-focusing on close. Can be prevented.
+     * Event handler called when auto-focusing on close. Can be canceled.
      */
     onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'] | false
 
@@ -747,7 +763,7 @@ type PopoverContentImplInteralProps = PopoverContentImplProps & {
   setIsFullyHidden: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const PopoverContentImpl = React.forwardRef<
+const PopoverContentImpl = createRefComponent<
   PopoverContentImplElement,
   PopoverContentImplInteralProps
 >(function PopoverContentImpl(props, forwardedRef) {
@@ -768,13 +784,15 @@ const PopoverContentImpl = React.forwardRef<
     setIsFullyHidden,
     lazyMount,
     forceUnmount,
+    forceMount,
     context,
     open,
     alwaysDisable,
     ...contentProps
   } = props
 
-  const { keepChildrenMounted, disableDismissable } = context
+  const { disableDismissable } = context
+  const keepChildrenMounted = context.keepChildrenMounted || forceMount
 
   const handleExitComplete = React.useCallback(() => {
     setIsFullyHidden?.(true)
@@ -801,7 +819,7 @@ const PopoverContentImpl = React.forwardRef<
             onMountAutoFocus={onOpenAutoFocus}
             onUnmountAutoFocus={onCloseAutoFocus === false ? undefined : onCloseAutoFocus}
           >
-            <div style={dspContentsStyle}>{contents}</div>
+            {contents}
           </FocusScope>
         )
       }
@@ -850,11 +868,6 @@ 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>
@@ -863,25 +876,21 @@ const PopoverContentImpl = React.forwardRef<
   )
 })
 
-const dspContentsStyle = {
-  display: 'contents',
-}
-
 /* -------------------------------------------------------------------------------------------------
  * PopoverClose
  * -----------------------------------------------------------------------------------------------*/
 
 export type PopoverCloseProps = ScopedPopoverProps<YStackProps>
 
-export const PopoverClose = React.forwardRef<TamaguiElement, PopoverCloseProps>(
+export const PopoverClose = createRefComponent<TamaguiElement, PopoverCloseProps>(
   function PopoverClose(props: ScopedPopoverProps<PopoverCloseProps>, forwardedRef) {
-    const { scope, ...rest } = props
+    const { scope, className, ...rest } = props
     const context = usePopoverContext(scope)
     return (
       <YStack
         {...rest}
         ref={forwardedRef}
-        componentName="PopoverClose"
+        className={`is_PopoverClose ${className || ''}`.trim()}
         onPress={composeEventHandlers(props.onPress as any, () =>
           context?.onOpenChange?.(false, 'press')
         )}
@@ -896,9 +905,10 @@ export const PopoverClose = React.forwardRef<TamaguiElement, PopoverCloseProps>(
 
 export type PopoverArrowProps = PopperArrowProps
 
-export const PopoverArrow = PopperArrowFrame.styleable<PopperArrowExtraProps>(
-  function PopoverArrow(props, forwardedRef) {
-    const { scope, ...rest } = props
+export const PopoverArrow = createStyledHOC(
+  PopperArrowFrame,
+  function PopoverArrow(props: PopperArrowExtraProps, forwardedRef) {
+    const { scope, className, ...rest } = props as PopperArrowProps
     const context = usePopoverContext(scope)
     const isAdapted = useAdaptIsActive(context.adaptScope)
 
@@ -909,7 +919,7 @@ export const PopoverArrow = PopperArrowFrame.styleable<PopperArrowExtraProps>(
     return (
       <PopperArrow
         scope={scope}
-        componentName="PopoverArrow"
+        className={`is_PopoverArrow ${className || ''}`.trim()}
         {...rest}
         ref={forwardedRef}
       />
@@ -940,7 +950,7 @@ export type PopoverScrollViewProps = ScrollViewProps & {
   scope?: string
 }
 
-const PopoverScrollView = React.forwardRef<ScrollView, PopoverScrollViewProps>(
+const PopoverScrollView = createRefComponent<ScrollView, PopoverScrollViewProps>(
   ({ scope, ...props }, ref) => {
     const context = usePopoverContext(scope)
 
@@ -961,20 +971,49 @@ const PopoverScrollView = React.forwardRef<ScrollView, PopoverScrollViewProps>(
 const DEFAULT_SCOPE = ''
 
 export const Popover = withStaticProperties(
-  React.forwardRef<Popover, PopoverProps>(function Popover(
+  createRefComponent<Popover, PopoverProps>(function Popover(
     { scope = DEFAULT_SCOPE, ...props },
     ref
   ) {
     const id = React.useId()
     const adaptScope = `PopoverAdapt${scope}`
+    const { open: openProp, defaultOpen, onOpenChange } = props
+    const viaRef = React.useRef<PopoverVia>(undefined)
+
+    // open state lives here (above AdaptParent) so the Adapt handoff can drive
+    // the adapted Sheet's open/close and unmount timing directly, mirroring Dialog
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: (val) => {
+        onOpenChange?.(val, viaRef.current)
+      },
+    })
+
+    const handleOpenChange = useEvent((val: boolean, via?: PopoverVia): void => {
+      viaRef.current = via
+      setOpen(val)
+    })
+
+    // track open popovers for closeOpenPopovers()
+    React.useEffect(() => {
+      if (!open) return
+      openPopovers.add(setOpen)
+      return () => {
+        openPopovers.delete(setOpen)
+      }
+    }, [open, setOpen])
 
     return (
-      <AdaptParent scope={adaptScope} portal>
+      <AdaptParent scope={adaptScope} open={open} onOpenChange={setOpen}>
         <PopoverInner
           adaptScope={adaptScope}
           ref={ref}
           id={id}
           scope={scope}
+          open={open}
+          setOpen={setOpen}
+          handleOpenChange={handleOpenChange}
           {...props}
         />
       </AdaptParent>
@@ -992,15 +1031,21 @@ export const Popover = withStaticProperties(
   }
 )
 
-const PopoverInner = React.forwardRef<
+const PopoverInner = createRefComponent<
   Popover,
-  PopoverProps & { id: string; adaptScope: string }
+  PopoverProps & {
+    id: string
+    adaptScope: string
+    open: boolean
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    handleOpenChange: (open: boolean, via?: PopoverVia) => void
+  }
 >(function PopoverInner(props, forwardedRef) {
   const {
     children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
+    open: _openProp,
+    defaultOpen: _defaultOpen,
+    onOpenChange: _onOpenChange,
     scope = DEFAULT_SCOPE,
     keepChildrenMounted: keepChildrenMountedProp,
     hoverable,
@@ -1009,12 +1054,14 @@ const PopoverInner = React.forwardRef<
     zIndex,
     id,
     adaptScope,
+    open,
+    setOpen,
+    handleOpenChange,
     ...restProps
   } = props
 
   const triggerRef = React.useRef<TamaguiElement>(null)
   const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
-  const viaRef = React.useRef<PopoverVia>(undefined)
 
   const [keepChildrenMounted] = useControllableState({
     prop: keepChildrenMountedProp,
@@ -1022,33 +1069,12 @@ const PopoverInner = React.forwardRef<
     transition: keepChildrenMountedProp === 'lazy',
   })
 
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: (val) => {
-      onOpenChange?.(val, viaRef.current)
-    },
-  })
-
-  // 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)
-  })
-
   const isAdapted = useAdaptIsActive(adaptScope)
 
   const floatingContext = useFloatingContext({
     open,
-    setOpen: handleOpenChange,
+    // floating passes a string via ('hover'), widen at this boundary
+    setOpen: handleOpenChange as (val: boolean, type?: string) => void,
     disable: isAdapted,
     hoverable,
     disableFocus: disableFocus,
@@ -1100,9 +1126,7 @@ const PopoverInner = React.forwardRef<
         disableDismissable={disableDismissable}
         hoverable={hoverable}
       >
-        <PopoverSheetController onOpenChange={setOpen} open={open} scope={scope}>
-          {children}
-        </PopoverSheetController>
+        {children}
       </PopoverContextProvider>
     </Popper>
   )
@@ -1135,59 +1159,3 @@ const PopoverInner = React.forwardRef<
 function getState(open: boolean) {
   return open ? 'open' : 'closed'
 }
-
-const PopoverSheetController = ({
-  open,
-  scope,
-  ...props
-}: {
-  open: boolean
-  scope?: string
-  children: React.ReactNode
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
-}) => {
-  const context = usePopoverContext(scope)
-  const showSheet = useShowPopoverSheet(context, open)
-  const breakpointActive = context?.breakpointActive
-  const getShowSheet = useGet(showSheet)
-
-  // tracks whether the adapted Sheet has finished its slide-out animation.
-  // starts true (= safe to unmount) when closed; flips false the moment the
-  // popover opens; flips back to true when the sheet signals onAnimationComplete
-  // with open=false (slide-out finished). mirrors DialogSheetController.
-  const [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!open)
-  if (open && isAdaptFullyHidden) {
-    setIsAdaptFullyHidden(false)
-  }
-
-  const handleSheetAnimationComplete = React.useCallback(
-    ({ open: isOpen }: { open: boolean }) => {
-      if (!isOpen) {
-        setIsAdaptFullyHidden(true)
-      }
-    },
-    []
-  )
-
-  return (
-    <SheetController
-      onOpenChange={(val: boolean) => {
-        if (getShowSheet()) {
-          props.onOpenChange?.(val)
-        }
-      }}
-      onAnimationComplete={handleSheetAnimationComplete}
-      open={open}
-      hidden={!breakpointActive}
-    >
-      <PopoverAdaptHiddenContext.Provider value={isAdaptFullyHidden}>
-        {props.children}
-      </PopoverAdaptHiddenContext.Provider>
-    </SheetController>
-  )
-}
-
-const useShowPopoverSheet = (context: PopoverContextValue, open: boolean) => {
-  const isAdapted = useAdaptIsActive(context.adaptScope)
-  return open === false ? false : isAdapted
-}