feat: new openOnClick prop

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ const Tooltip = ({
   place = 'top',
   offset = 10,
   events = ['hover'],
+  openOnClick = false,
   positionStrategy = 'absolute',
   middlewares,
   wrapper: WrapperElement,
@@ -60,6 +61,8 @@ const Tooltip = ({
   const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])
   const mounted = useRef(false)
 
+  const shouldOpenOnClick = openOnClick || events.includes('click')
+
   /**
    * useLayoutEffect runs before useEffect,
    * but should be used carefully because of caveats
@@ -255,10 +258,11 @@ const Tooltip = ({
 
   const handleClickOutsideAnchors = (event: MouseEvent) => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
-    if (anchorById?.contains(event.target as HTMLElement)) {
+    const anchors = [anchorById, ...anchorsBySelect]
+    if (anchors.some((anchor) => anchor?.contains(event.target as HTMLElement))) {
       return
     }
-    if (anchorsBySelect.some((anchor) => anchor.contains(event.target as HTMLElement))) {
+    if (tooltipRef.current?.contains(event.target as HTMLElement)) {
       return
     }
     handleShow(false)
@@ -294,12 +298,10 @@ const Tooltip = ({
 
     const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
 
-    if (events.find((event: string) => event === 'click')) {
+    if (shouldOpenOnClick) {
       window.addEventListener('click', handleClickOutsideAnchors)
       enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor })
-    }
-
-    if (events.find((event: string) => event === 'hover')) {
+    } else {
       enabledEvents.push(
         { event: 'mouseenter', listener: debouncedHandleShowTooltip },
         { event: 'mouseleave', listener: debouncedHandleHideTooltip },
@@ -322,7 +324,7 @@ const Tooltip = ({
       handleHideTooltip()
     }
 
-    if (clickable) {
+    if (clickable && !shouldOpenOnClick) {
       tooltipRef.current?.addEventListener('mouseenter', handleMouseEnterTooltip)
       tooltipRef.current?.addEventListener('mouseleave', handleMouseLeaveTooltip)
     }
@@ -334,13 +336,13 @@ const Tooltip = ({
     })
 
     return () => {
-      if (events.find((event: string) => event === 'click')) {
+      if (shouldOpenOnClick) {
         window.removeEventListener('click', handleClickOutsideAnchors)
       }
       if (closeOnEsc) {
         window.removeEventListener('keydown', handleEsc)
       }
-      if (clickable) {
+      if (clickable && !shouldOpenOnClick) {
         tooltipRef.current?.removeEventListener('mouseenter', handleMouseEnterTooltip)
         tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
       }

src/components/Tooltip/TooltipTypes.d.ts

@@ -53,7 +53,11 @@ export interface ITooltip {
   anchorSelect?: string
   wrapper: WrapperType
   children?: ChildrenType
+  /**
+   * @deprecated Use `openOnClick` instead.
+   */
   events?: EventsType[]
+  openOnClick?: boolean
   positionStrategy?: PositionStrategy
   middlewares?: Middleware[]
   delayShow?: number

src/components/TooltipController/TooltipController.tsx

@@ -26,6 +26,7 @@ const TooltipController = ({
   wrapper = 'div',
   children = null,
   events = ['hover'],
+  openOnClick = false,
   positionStrategy = 'absolute',
   middlewares,
   delayShow = 0,
@@ -209,6 +210,7 @@ const TooltipController = ({
     offset: tooltipOffset,
     wrapper: tooltipWrapper,
     events: tooltipEvents,
+    openOnClick,
     positionStrategy: tooltipPositionStrategy,
     middlewares,
     delayShow: tooltipDelayShow,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -28,7 +28,11 @@ export interface ITooltipController {
   anchorSelect?: string
   wrapper?: WrapperType
   children?: ChildrenType
+  /**
+   * @deprecated Use `openOnClick` instead.
+   */
   events?: EventsType[]
+  openOnClick?: boolean
   positionStrategy?: PositionStrategy
   middlewares?: Middleware[]
   delayShow?: number
@@ -54,6 +58,9 @@ declare module 'react' {
     'data-tooltip-variant'?: VariantType
     'data-tooltip-offset'?: number
     'data-tooltip-wrapper'?: WrapperType
+    /**
+     * @deprecated Use `openOnClick` tooltip prop instead.
+     */
     'data-tooltip-events'?: EventsType[]
     'data-tooltip-position-strategy'?: PositionStrategy
     'data-tooltip-delay-show'?: number