/**
 * Adapted from https://usehooks.com/useOnClickOutside/
 */ import { useEffect } from "react" ; const MOUSEDOWN = "mousedown" ; const TOUCHSTART = "touchstart" ; type HandledEvents = [ typeof MOUSEDOWN , typeof TOUCHSTART ] ; type HandledEventsType = HandledEvents [ number ] ; type PossibleEvent = { [ Type in HandledEventsType ] : HTMLElementEventMap [ Type ] ; } [ HandledEventsType ] ; type Callback = ( event : PossibleEvent ) => void ; param ref param callback export const useOnClickOutside = ( ref , callback ) => { useEffect ( ( ) => { const listener = ( event ) => { if ( ! ref . current || ref . current . contains ( event . target as Node ) ) { return ; } callback ( event ) ; } ; document . addEventListener ( "mousedown" , listener ) ; document . addEventListener ( "touchstart" , listener ) ; return ( ) => { document . removeEventListener ( "mousedown" , listener ) ; document . removeEventListener ( "touchstart" , listener ) ; } ; } , [ ref , callback ] ) ; } ;