import React , { useEffect } from "react" ; interface OutsideAlerterProps { children : React . ReactNode ; enabled : boolean ; onOutsideClick : ( ) => void ; } /**
 * Component that alerts if you click outside of it
 */ export function OutsideAlerter ( { children , enabled , onOutsideClick } ) { const ref = React . useRef < HTMLDivElement > ( null ) ; useEffect ( ( ) => { /**
         * Alert if clicked on outside of element
         */ function handleClickOutside ( event ) { if ( enabled && ! ( ref ?. current ?. contains ( event . target ) ) ) { onOutsideClick ( ) ; } } document . addEventListener ( "mousedown" , handleClickOutside ) ; return ( ) => { document . removeEventListener ( "mousedown" , handleClickOutside ) ; } ; } ) ; return < div style = { { height : "100%" , width : "100%" } } ref = { ref } > { children } < /div>; }