feat: closeOnEsc prop

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -26,6 +26,7 @@ const Tooltip = ({
   float = false,
   noArrow = false,
   clickable = false,
+  closeOnEsc = false,
   style: externalStyles,
   position,
   afterShow,
@@ -190,6 +191,13 @@ const Tooltip = ({
     handleShow(false)
   }
 
+  const handleEsc = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') {
+      return
+    }
+    handleShow(false)
+  }
+
   // debounce handler to prevent call twice when
   // mouse enter and focus events being triggered toggether
   const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
@@ -210,6 +218,10 @@ const Tooltip = ({
       return () => null
     }
 
+    if (closeOnEsc) {
+      window.addEventListener('keydown', handleEsc)
+    }
+
     const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
 
     if (events.find((event: string) => event === 'click')) {
@@ -252,7 +264,12 @@ const Tooltip = ({
     })
 
     return () => {
-      window.removeEventListener('click', handleClickOutsideAnchor)
+      if (events.find((event: string) => event === 'click')) {
+        window.removeEventListener('click', handleClickOutsideAnchor)
+      }
+      if (closeOnEsc) {
+        window.removeEventListener('keydown', handleEsc)
+      }
       if (clickable) {
         tooltipRef.current?.removeEventListener('mouseenter', handleMouseEnterTooltip)
         tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
@@ -263,7 +280,7 @@ const Tooltip = ({
         })
       })
     }
-  }, [anchorRefs, activeAnchor, anchorId, events, delayHide, delayShow])
+  }, [anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
     if (position) {

src/components/Tooltip/TooltipTypes.d.ts

@@ -53,6 +53,7 @@ export interface ITooltip {
   float?: boolean
   noArrow?: boolean
   clickable?: boolean
+  closeOnEsc?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean

src/components/TooltipController/TooltipController.tsx

@@ -32,6 +32,7 @@ const TooltipController = ({
   float = false,
   noArrow = false,
   clickable = false,
+  closeOnEsc = false,
   style,
   position,
   isOpen,
@@ -187,6 +188,7 @@ const TooltipController = ({
     float: tooltipFloat,
     noArrow,
     clickable,
+    closeOnEsc,
     style,
     position,
     isOpen,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -31,6 +31,7 @@ export interface ITooltipController {
   float?: boolean
   noArrow?: boolean
   clickable?: boolean
+  closeOnEsc?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean