import { RefObject , useEffect } from 'react' ; type AnyEvent = MouseEvent | TouchEvent ; export function useOnClickOutside < T extends HTMLElement = HTMLElement > ( refs , handler ) { useEffect ( ( ) => { const listener = ( event ) => { const els = refs . map ( ref => ref ?. current ) ; for ( let el of els ) { if ( ! el || el . contains ( event . target as Node ) ) { return ; } } handler ( event ) ; } ; document . addEventListener ( `mousedown` , listener ) ; document . addEventListener ( `touchstart` , listener ) ; return ( ) => { document . removeEventListener ( `mousedown` , listener ) ; document . removeEventListener ( `touchstart` , listener ) ; } ; } , [ refs , handler ] ) ; } export default useOnClickOutside ;