feat: close click tooltip on click outside

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -143,10 +143,17 @@ const Tooltip = ({
     if (setIsOpen) {
       setIsOpen(!isOpen)
     } else if (!setIsOpen && isOpen === undefined) {
-      setShow((currentValue) => !currentValue)
+      setShow(true)
     }
   }
 
+  const handleClickOutsideAnchor = (e: MouseEvent) => {
+    if (e.target === activeAnchor.current) {
+      return
+    }
+    setShow(false)
+  }
+
   // debounce handler to prevent call twice when
   // mouse enter and focus events being triggered toggether
   const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
@@ -170,6 +177,7 @@ const Tooltip = ({
     const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
 
     if (events.find((event: string) => event === 'click')) {
+      window.addEventListener('click', handleClickOutsideAnchor)
       enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor })
     }
 
@@ -189,13 +197,14 @@ const Tooltip = ({
     })
 
     return () => {
+      window.removeEventListener('click', handleClickOutsideAnchor)
       enabledEvents.forEach(({ event, listener }) => {
         elementRefs.forEach((ref) => {
           ref.current?.removeEventListener(event, listener)
         })
       })
     }
-  }, [anchorRefs, anchorId, events, delayHide, delayShow])
+  }, [anchorRefs, activeAnchor, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
     if (position?.x && position?.y) {

src/components/Tooltip/TooltipTypes.d.ts

@@ -12,8 +12,6 @@ export type EventsType = 'hover' | 'click'
 
 export type PositionStrategy = 'absolute' | 'fixed'
 
-export type Type = 'fixed' | 'float' | 'free'
-
 export type DataAttribute =
   | 'place'
   | 'content'