Initial commit

src/hooks/utils/useClickOutside.ts

@@ -0,0 +1,47 @@
+import { useEffect, RefObject } from 'react'
+
+interface UseClickOutsideOptions {
+  enabled?: boolean
+  eventType?: 'mousedown' | 'click'
+  includeEscape?: boolean
+}
+
+export const useClickOutside = (
+  ref: RefObject<HTMLElement | null>,
+  callback: () => void,
+  options: UseClickOutsideOptions = {}
+) => {
+  const {
+    enabled = true,
+    eventType = 'mousedown',
+    includeEscape = false
+  } = options
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback()
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        callback()
+      }
+    }
+
+    document.addEventListener(eventType, handleClickOutside)
+    if (includeEscape) {
+      document.addEventListener('keydown', handleEscape)
+    }
+
+    return () => {
+      document.removeEventListener(eventType, handleClickOutside)
+      if (includeEscape) {
+        document.removeEventListener('keydown', handleEscape)
+      }
+    }
+  }, [ref, callback, enabled, eventType, includeEscape])
+}