import { RefObject , useMemo , useRef } from 'react' ; import type { PopableManager } from './types' ; type Ref = RefObject < PopableManager > ; type UsePopableArray = [ Ref , PopableManager ] ; type UsePopableObject = { ref : Ref ; } & PopableManager ; type UsePopable = UsePopableObject & UsePopableArray ; /**
 * Imperatively manage the popover.
 *
 * ```jsx
 * const [ref, { show, hide }] = usePopable()
 *
 * return <Popable ref={ref} />
 * ```
 *
 * If you prefer, you can destructure as an object:
 *
 * ```js
 * const { ref, show, hide } = usePopable()
 * ```
 */ export default function usePopable ( ) { const ref = useRef < PopableManager > ( null ) ; const handlers = useMemo ( ( ) => ( { show : ( ) => ref . current ?. show ( ) , hide : ( ) => ref . current ?. hide ( ) , } ) , [ ] ) ; const result = ( [ ref , handlers ] as unknown ) as UsePopable ; result . show = handlers . show ; result . hide = handlers . hide ; result . ref = ref ; return result ; }