import { useClickOutside , useToggle } from '@react-hookz/web' ; import { useRef , Children , cloneElement } from 'react' ; import type { ReactElement } from 'react' ; import { FiMenu } from 'react-icons/fi' ; import styles from './OverflowMenu.module.css' ; import Separator from './Separator' ; interface Props { children : ReactElement [ ] ; } function OverflowMenu ( props ) { const { children } = props ; const rootRef = useRef ( null ) ; const [ isOverflowMenuOpen , toggleOverflowMenu ] = useToggle ( false ) ; useClickOutside ( rootRef , ( ) => { if ( isOverflowMenuOpen ) { toggleOverflowMenu ( false ) ; } } ) ; if ( children . length === 0 ) { return null ; } return ( < > < Separator /> < div ref = { rootRef } className = { styles . root } > < button className = { styles . btn } type = "button" aria - label = "More controls" aria - haspopup = "menu" aria - controls = "more-menu" aria - expanded = { isOverflowMenuOpen } onClick = { ( ) => toggleOverflowMenu ( ) } > < span className = { styles . btnLike } > < FiMenu className = { styles . icon } /> < /span> < /button> < div id = "more-menu" className = { styles . menu } role = "menu" hidden = { ! isOverflowMenuOpen } > < ul className = { styles . menuList } > { Children . map ( children , ( child ) => ( < li role = "menuitem" > { cloneElement ( child ) } < /li>))} < /ul> < /div> < /div> < />); } export default OverflowMenu ;