import React , { useEffect } from 'react' ; import { Platform } from 'react-native' ; import { useKeyboardDismissable } from '../../hooks/useKeyboardDismissable' ; import { Popper } from '../Popper' ; import { YStack } from '../Stacks' ; import { PopoverContext } from './PopoverContext' ; import type { IPopoverContentProps } from './types' ; export const PopoverContent = React . forwardRef ( ( props , ref ) => { const { onClose , initialFocusRef , finalFocusRef , popoverContentId , headerMounted , bodyMounted , bodyId , headerId , } = React . useContext ( PopoverContext ) ; useEffect ( ( ) => { const finalFocusRefCurrentVal = finalFocusRef ?. current ; if ( initialFocusRef && initialFocusRef . current ) { initialFocusRef . current . focus ( ) ; } return ( ) => { if ( finalFocusRefCurrentVal ) { finalFocusRefCurrentVal . focus ( ) ; } } ; } , [ finalFocusRef , initialFocusRef ] ) ; useKeyboardDismissable ( { enabled : true , callback : onClose , } ) ; const accessibilityProps = Platform . OS === 'web' ? ( { accessibilityRole : 'dialog' , 'aria-labelledby' : headerMounted ? headerId : undefined , 'aria-describedby' : bodyMounted ? bodyId : undefined , } as any ) : { } ; return ( < Popper . Content nativeID = { popoverContentId } { ... accessibilityProps } ref = { ref } > { } < YStack { ... props } > { props . children } < /YStack> < /Popper.Content>); } ) ; PopoverContent . displayName = 'PopoverContent' ;