import { useEffect } from 'react' ; import type { BackdropProps } from './Backdrop.d' ; export default function Backdrop ( { childrenRef , onPress , popoverRef , visible , } ) { useEffect ( ( ) => { const handler = ( event ) => { if ( ! popoverRef . current . contains ( event . target ) && ! childrenRef . current . contains ( event . target ) && visible ) { onPress ( ) ; } } ; document . addEventListener ( 'mousedown' , handler ) ; return ( ) => document . removeEventListener ( 'mousedown' , handler ) ; } , [ visible , onPress , popoverRef , childrenRef ] ) ; return null ; }