feat: close on click outside

docs/app.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import {render} from 'react-dom'
-import OverlayTrigger from 'react-overlay-trigger'
+import OverlayTrigger from '..'
 
 function Example({children, code, title}) {
   return (
@@ -96,7 +96,6 @@ const App = () => {
               <OverlayTrigger 
                 placement="right" 
                 triggers={['click']} 
-                ref={(ref) => { window.console.log(ref) }} 
                 overlay={overlay}
               >
                 <Button className="Trigger">click to toggle tips</Button>

package.json

@@ -6,12 +6,14 @@
   "module": "dist/index.esm.js",
   "types": "dist/type.d.ts",
   "scripts": {
-    "clean:docs": "rm -rf docs/dist",
     "prepublishOnly": "rm -rf dist && npm run build",
+    "dev": "yarn build:lib --watch",
     "build": "yarn build:lib && yarn build:types",
     "build:lib": "bunchee src/index.js --no-sourcemap",
     "build:types": "cp type.d.ts dist/type.d.ts",
-    "dev": "yarn build:lib --watch"
+    "docs:clean": "rm -rf docs/dist",
+    "docs:build": "yarn vite build docs",
+    "docs:dev": "yarn vite docs"
   },
   "files": [
     "dist"
@@ -38,7 +40,10 @@
     "react-dom": ">= 16.8"
   },
   "devDependencies": {
-    "bunchee": "1.5.4",
-    "vite": "2.1.2"
+    "bunchee": "^1.7.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.4.3",
+    "vite": "^2.6.5"
   }
 }

src/OverlayTrigger.jsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useEffect} from 'react'
 import Overlay from './Overlay'
 import DomObserver from './DomObserver'
 import { combineRef } from './utils'
@@ -12,6 +12,21 @@ const safeCall = (fn, ...args) => {
   }
 }
 
+function DocumentClick({condition, callback}) {
+  const handleClick = e => {
+    if (condition(e)) {
+      callback()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick)
+    return () => document.removeEventListener('click', handleClick)
+  }, [condition, callback])
+
+  return null
+}
+
 class OverlayTrigger extends React.Component {
   constructor(props) {
     super(props)
@@ -63,6 +78,17 @@ class OverlayTrigger extends React.Component {
     }
   }
 
+  isClickOutside = (e) => {
+    const { target } = e
+    const overlay = this.overlayRef.current
+    const trigger = this.triggerRef.current
+    // outside of the trigger or overlay
+    return (
+      (trigger && !trigger.contains(target)) && 
+      (overlay && overlay.overlayRef.current && !overlay.overlayRef.current.contains(target))
+    )
+  }
+
   handleFocus = (e) => {
     safeCall(this.getChildProps().onFocus, e)
     this.open()
@@ -105,7 +131,7 @@ class OverlayTrigger extends React.Component {
   }
 
   scheduleUpdate = () => {
-    const {current: overlayInstance} = this.overlayRef
+    const overlayInstance = this.overlayRef.current
     if (overlayInstance) {
       overlayInstance.adjustPosition()
     }
@@ -120,6 +146,10 @@ class OverlayTrigger extends React.Component {
         <DomObserver ref={combineRef(this.triggerRef, forwardRef)} onMeasure={this.scheduleUpdate}>
           {(child != null && child !== false) && React.cloneElement(child, this.getTriggerProps())}
         </DomObserver>
+        <DocumentClick
+          condition={this.isClickOutside}
+          callback={this.close}
+        />
         {this.state.visible &&
           <Overlay
             arrowProps={arrowProps}