import React , { FunctionComponent , RefObject } from "react" ; import { Card , CardCloseButton , Flex , Modal , ModalProps , } from "coral-ui/components/v2" ; import styles from "./ChangeStatusModal.css" ; type RenderPropsCallback = ( lastFocusableRef : RefObject < any > ) => React . ReactNode ; function isRenderProp ( children ) { return typeof children === "function" ; } interface Props extends Partial < ModalProps > { onClose : ( ) => void ; } const ChangeStatusModal = ( { children , onClose , ... rest } ) => { return ( < Modal { ... rest } onClose = { onClose } > { ( renderProps ) => ( < Card className = { styles . root } > < Flex justifyContent = "flex-end" > < CardCloseButton onClick = { onClose } ref = { renderProps . firstFocusableRef } / > < /Flex> { isRenderProp ( children ) ? children . call ( null , [ renderProps ] ) : children } < /Card>)} < /Modal>); } ; export default ChangeStatusModal ;