import React , { memo , forwardRef } from 'react' ; import { Platform } from 'react-native' ; import { usePropsResolution } from '../../../hooks' ; import { default as Box , IBoxProps } from '../../primitives/Box' ; import { PopoverContext } from './PopoverContext' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const PopoverHeader = ( props , ref ? ) => { const resolvedProps = usePropsResolution ( 'PopoverHeader' , props ) ; const { setHeaderMounted , headerId } = React . useContext ( PopoverContext ) ; React . useEffect ( ( ) => { setHeaderMounted ( true ) ; return ( ) => { setHeaderMounted ( false ) ; } ; } , [ setHeaderMounted ] ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Box accessibilityRole = { Platform . OS === 'web' ? 'banner' : undefined } nativeID = { headerId } { ... resolvedProps } ref = { ref } / > ) ; } ; export default memo ( forwardRef ( PopoverHeader ) ) ;