import { useDebounce } from '@tamagui/use-debounce' ; import React , { forwardRef , useImperativeHandle , useRef , useState } from 'react' ; import { Hoverable , HoverableHandle } from './Hoverable' ; import { Popover } from './Popover/Popover' ; import { IPopoverProps } from './Popover/types' ; React [ 'createElement' ] ; export type HoverablePopoverHandle = { close : ( ) => void ; } ; export type HoverablePopoverProps = IPopoverProps & { delay ? : number ; allowHoverOnContent ? : boolean ; disableUntilSettled ? : boolean ; } ; export const HoverablePopover = forwardRef < HoverablePopoverHandle , HoverablePopoverProps > ( ( { trigger , delay = 0 , children , allowHoverOnContent , disableUntilSettled , ... props } , ref ) => { const hoverableRef = useRef < HoverableHandle > ( null ) ; const [ isActive , set ] = useState ( false ) ; const setOffSlow = useDebounce ( ( ) => set ( false ) , allowHoverOnContent ? 20 : 0 ) ; const setOnSlow = useDebounce ( ( ) => set ( true ) , allowHoverOnContent ? 40 : 0 ) ; const cancelAll = ( ) => { setOnSlow . cancel ( ) ; setOffSlow . cancel ( ) ; } ; const setOff = ( ) => { cancelAll ( ) ; setOffSlow ( ) ; } ; const setOn = ( ) => { cancelAll ( ) ; setOnSlow ( ) ; } ; useImperativeHandle ( ref , ( ) => ( { close : ( ) => { cancelAll ( ) ; set ( false ) ; hoverableRef . current ?. close ( ) ; } , } ) ) ; return ( < Popover isOpen = { isActive } { ... props } trigger = { ( triggerProps , state ) => { return ( < Hoverable ref = { hoverableRef } disableUntilSettled = { disableUntilSettled } onHoverIn = { setOn } onHoverOut = { setOff } hoverDelay = { delay } > { trigger ( triggerProps , state ) } < /Hoverable>); } } > { ( openProps ) => { const childrenElements = typeof children === 'function' ? children ( openProps ) : children ; return ( < Popover . Content > { allowHoverOnContent ? ( < Hoverable onHoverIn = { setOn } onHoverOut = { setOff } > { childrenElements } < /Hoverable>) : (childrenElements)} < /Popover.Content>); } } < /Popover>); } ) ;