import React , { memo , forwardRef } from 'react' ; import Box , { IBoxProps } from '../../primitives/Box' ; import { usePropsResolution } from '../../../hooks' ; import { ModalContext } from './Context' ; import { Platform } from 'react-native' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const ModalContent = ( props , ref ? ) => { const resolvedProps = usePropsResolution ( 'ModalContent' , props ) ; const { contentSize , initialFocusRef , finalFocusRef , handleClose , visible , } = React . useContext ( ModalContext ) ; React . useEffect ( ( ) => { const finalRefVal = finalFocusRef ? finalFocusRef . current : null ; if ( visible ) { if ( initialFocusRef && initialFocusRef . current ) { initialFocusRef . current . focus ( ) ; } } else { if ( finalRefVal ) { finalRefVal . focus ( ) ; } } } , [ initialFocusRef , finalFocusRef , visible ] ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Box { ... contentSize } { ... resolvedProps } ref = { ref } onAccessibilityEscape = { handleClose } aria - modal = "true" accessibilityRole = { Platform . OS === 'web' ? 'dialog' : undefined } accessibilityViewIsModal / > ) ; } ; export default memo ( forwardRef ( ModalContent ) ) ;