Adding Click Outside

lib/click-outside/click-outside.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef, useEffect, Ref, MouseEvent } from 'react'
+import hasParent from './has-parent'
+
+interface ClickOutsideProps {
+  active: boolean
+  onClick: (e?: MouseEvent) => void
+  children: any
+}
+
+const ClickOutside = (
+  { active = true, onClick, children }: ClickOutsideProps,
+  ref: Ref<HTMLDivElement> | null | any = {}
+) => {
+  console.log('--------', active, '-----------')
+  const innerRef = ref?.current
+
+  const handleClick = (event: any) => {
+    console.log(innerRef, event.target)
+    if (!hasParent(event.target, innerRef)) {
+      if (typeof onClick === 'function') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        onClick(event)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (active) {
+      document.addEventListener('mousedown', handleClick)
+      document.addEventListener('touchstart', handleClick)
+    }
+
+    return () => {
+      if (active) {
+        document.removeEventListener('mousedown', handleClick)
+        document.removeEventListener('touchstart', handleClick)
+      }
+    }
+  })
+
+  return React.cloneElement(children, { ref })
+}
+
+export default forwardRef(ClickOutside)

lib/click-outside/has-parent.js

@@ -0,0 +1,5 @@
+import isInDOM from './is-in-dom'
+
+export default function hasParent(element, root) {
+  return root && root.contains(element) && isInDOM(element)
+}

lib/click-outside/index.ts

@@ -0,0 +1 @@
+export { default } from './click-outside'

lib/click-outside/is-in-dom.js

@@ -0,0 +1,3 @@
+export default function isInDom(obj) {
+  return Boolean(obj.closest('body'))
+}