import React , { useState , SyntheticEvent } from 'react' ; const mapTextWithLineBreaks = ( popoverTextList ) => popoverTextList . map ( ( text ) => ( < span key = { text . length } > { text } < br / > < br /> < /span>)); export const useIconPopoverEffects = ( ) => { const [ anchorElRef , setAnchorElRef ] = useState ( null ) ; const open = Boolean ( anchorElRef ) ; const handleClick = ( event ) => { if ( event . currentTarget === anchorElRef ) { setAnchorElRef ( null ) ; } else { setAnchorElRef ( event . currentTarget ) ; } } ; const handleClose = ( ) => { setAnchorElRef ( null ) ; } ; const getClickableId = ( open ) => open ? 'simple-popover' : undefined ; const handlePopoverOpen = ( event ) => { setAnchorElRef ( event . currentTarget ) ; } ; const handlePopoverClose = ( ) => { setAnchorElRef ( null ) ; } ; return { handleClose , handleClick , handlePopoverClose , handlePopoverOpen , mapTextWithLineBreaks , getClickableId , open , anchorElRef , } ; } ;