import { useEffect, RefObject } from "react"; export const useClickOutside = ( ref: RefObject, handler: () => void, isActive: boolean = true, excludeRefs?: RefObject[] ) => { useEffect(() => { if (!isActive) return; const handleClickOutside = (event: MouseEvent) => { if (ref.current && !ref.current.contains(event.target as Node)) { const isExcluded = excludeRefs?.some((excludeRef) => excludeRef.current?.contains(event.target as Node) ); if (!isExcluded) { handler(); } } }; const handleEscape = (event: KeyboardEvent) => { if (event.key === "Escape") { handler(); } }; document.addEventListener("click", handleClickOutside); document.addEventListener("keydown", handleEscape); return () => { document.removeEventListener("click", handleClickOutside); document.removeEventListener("keydown", handleEscape); }; }, [ref, handler, isActive, excludeRefs]); };