feat(utils): use-outside-click hook

utils/use-outside-click/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@atls-utils/use-outside-click",
+  "version": "1.0.0",
+  "license": "BSD-3-Clause",
+  "type": "module",
+  "main": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      "./package.json": "./package.json",
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts"
+  }
+}

utils/use-outside-click/src/index.ts

@@ -0,0 +1 @@
+export * from './use-outside-click.hook.js'

utils/use-outside-click/src/use-outside-click.hook.ts

@@ -0,0 +1,24 @@
+import type { UseOutsideClickType } from './use-outside-click.interfaces.js'
+
+import { useEffect }                from 'react'
+import { useRef }                   from 'react'
+
+export const useOutsideClick: UseOutsideClickType = (action) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        action()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [action])
+
+  return { ref }
+}

utils/use-outside-click/src/use-outside-click.interfaces.ts

@@ -0,0 +1 @@
+export type UseOutsideClickType = (action: VoidFunction) => { ref: React.RefObject<HTMLDivElement> }

yarn.lock

@@ -1073,6 +1073,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@atls-utils/use-outside-click@workspace:utils/use-outside-click":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-outside-click@workspace:utils/use-outside-click"
+  dependencies:
+    "@types/react": "npm:18.2.48"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
 "@atls-utils/use-popover@workspace:utils/use-popover":
   version: 0.0.0-use.local
   resolution: "@atls-utils/use-popover@workspace:utils/use-popover"