refactor: format and lint codebase (#971)

app/assets/javascripts/Hooks/useCloseOnClickOutside.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect } from 'preact/hooks'
+
+export function useCloseOnClickOutside(
+  container: { current: HTMLDivElement | null },
+  callback: () => void,
+): void {
+  const closeOnClickOutside = useCallback(
+    (event: { target: EventTarget | null }) => {
+      if (!container.current) {
+        return
+      }
+      const isDescendantOfContainer = container.current.contains(event.target as Node)
+      const isDescendantOfDialog = (event.target as HTMLElement).closest('[role="dialog"]')
+      if (!isDescendantOfContainer && !isDescendantOfDialog) {
+        callback()
+      }
+    },
+    [container, callback],
+  )
+
+  useEffect(() => {
+    document.addEventListener('click', closeOnClickOutside, { capture: true })
+    return () => {
+      document.removeEventListener('click', closeOnClickOutside, {
+        capture: true,
+      })
+    }
+  }, [closeOnClickOutside])
+}