react-tooltip 5.1.0 → 5.1.2

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useState, useRef } from 'react'
+import classNames from 'classnames'
+import debounce from 'utils/debounce'
+import { TooltipContent } from 'components/TooltipContent'
+import { useTooltip } from 'components/TooltipProvider'
+import { computeTooltipPosition } from '../../utils/compute-positions'
+import styles from './styles.module.css'
+import type { ITooltip } from './TooltipTypes'
+
+const Tooltip = ({
+  // props
+  id,
+  className,
+  classNameArrow,
+  variant = 'dark',
+  anchorId,
+  place = 'top',
+  offset = 10,
+  events = ['hover'],
+  positionStrategy = 'absolute',
+  wrapper: WrapperElement = 'div',
+  children = null,
+  delayShow = 0,
+  delayHide = 0,
+  style: externalStyles,
+  // props handled by controller
+  isHtmlContent = false,
+  content,
+  isOpen,
+  setIsOpen,
+}: ITooltip) => {
+  const tooltipRef = useRef<HTMLElement>(null)
+  const tooltipArrowRef = useRef<HTMLDivElement>(null)
+  const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [inlineStyles, setInlineStyles] = useState({})
+  const [inlineArrowStyles, setInlineArrowStyles] = useState({})
+  const [show, setShow] = useState<boolean>(false)
+  const [calculatingPosition, setCalculatingPosition] = useState(false)
+  const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
+  const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
+
+  const handleShow = (value: boolean) => {
+    if (setIsOpen) {
+      setIsOpen(value)
+    } else if (isOpen === undefined) {
+      setShow(value)
+    }
+  }
+
+  const handleShowTooltipDelayed = () => {
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current)
+    }
+
+    tooltipShowDelayTimerRef.current = setTimeout(() => {
+      handleShow(true)
+    }, delayShow)
+  }
+
+  const handleHideTooltipDelayed = () => {
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current)
+    }
+
+    tooltipHideDelayTimerRef.current = setTimeout(() => {
+      handleShow(false)
+    }, delayHide)
+  }
+
+  const handleShowTooltip = (event?: Event) => {
+    if (!event) {
+      return
+    }
+    if (delayShow) {
+      handleShowTooltipDelayed()
+    } else {
+      handleShow(true)
+    }
+    setActiveAnchor((anchor) =>
+      anchor.current === event.target ? anchor : { current: event.target as HTMLElement },
+    )
+    setProviderActiveAnchor({ current: event.target as HTMLElement })
+
+    if (tooltipHideDelayTimerRef.current) {
+      clearTimeout(tooltipHideDelayTimerRef.current)
+    }
+  }
+
+  const handleHideTooltip = () => {
+    if (delayHide) {
+      handleHideTooltipDelayed()
+    } else {
+      handleShow(false)
+    }
+
+    if (tooltipShowDelayTimerRef.current) {
+      clearTimeout(tooltipShowDelayTimerRef.current)
+    }
+  }
+
+  const handleClickTooltipAnchor = () => {
+    if (setIsOpen) {
+      setIsOpen(!isOpen)
+    } else if (isOpen === undefined) {
+      setShow((currentValue) => !currentValue)
+    }
+  }
+
+  // debounce handler to prevent call twice when
+  // mouse enter and focus events being triggered toggether
+  const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
+  const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50)
+
+  useEffect(() => {
+    const elementRefs = new Set(anchorRefs)
+
+    const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    if (anchorById) {
+      setActiveAnchor((anchor) =>
+        anchor.current === anchorById ? anchor : { current: anchorById },
+      )
+      elementRefs.add({ current: anchorById })
+    }
+
+    if (!elementRefs.size) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {}
+    }
+
+    const enabledEvents: { event: string; listener: (event?: Event) => void }[] = []
+
+    if (events.find((event: string) => event === 'click')) {
+      enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor })
+    }
+
+    if (events.find((event: string) => event === 'hover')) {
+      enabledEvents.push(
+        { event: 'mouseenter', listener: debouncedHandleShowTooltip },
+        { event: 'mouseleave', listener: debouncedHandleHideTooltip },
+        { event: 'focus', listener: debouncedHandleShowTooltip },
+        { event: 'blur', listener: debouncedHandleHideTooltip },
+      )
+    }
+
+    enabledEvents.forEach(({ event, listener }) => {
+      elementRefs.forEach((ref) => {
+        ref.current?.addEventListener(event, listener)
+      })
+    })
+
+    return () => {
+      enabledEvents.forEach(({ event, listener }) => {
+        elementRefs.forEach((ref) => {
+          ref.current?.removeEventListener(event, listener)
+        })
+      })
+    }
+  }, [anchorRefs, anchorId, events, delayHide, delayShow])
+
+  useEffect(() => {
+    let elementReference = activeAnchor.current
+    if (anchorId) {
+      // `anchorId` element takes precedence
+      elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    }
+    setCalculatingPosition(true)
+    let mounted = true
+    computeTooltipPosition({
+      place,
+      offset,
+      elementReference,
+      tooltipReference: tooltipRef.current,
+      tooltipArrowReference: tooltipArrowRef.current,
+      strategy: positionStrategy,
+    }).then((computedStylesData) => {
+      if (!mounted) {
+        // invalidate computed positions after remount
+        return
+      }
+      setCalculatingPosition(false)
+      if (Object.keys(computedStylesData.tooltipStyles).length) {
+        setInlineStyles(computedStylesData.tooltipStyles)
+      }
+      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+        setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
+      }
+    })
+    return () => {
+      mounted = false
+    }
+  }, [show, isOpen, anchorId, activeAnchor, content, place, offset, positionStrategy])
+
+  useEffect(() => {
+    return () => {
+      if (tooltipShowDelayTimerRef.current) {
+        clearTimeout(tooltipShowDelayTimerRef.current)
+      }
+      if (tooltipHideDelayTimerRef.current) {
+        clearTimeout(tooltipHideDelayTimerRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <WrapperElement
+      id={id}
+      role="tooltip"
+      className={classNames(styles['tooltip'], styles[variant], className, {
+        [styles['show']]: !calculatingPosition && (isOpen || show),
+        [styles['fixed']]: positionStrategy === 'fixed',
+      })}
+      style={{ ...externalStyles, ...inlineStyles }}
+      ref={tooltipRef}
+    >
+      {children || (isHtmlContent ? <TooltipContent content={content as string} /> : content)}
+      <div
+        className={classNames(styles['arrow'], classNameArrow)}
+        style={inlineArrowStyles}
+        ref={tooltipArrowRef}
+      />
+    </WrapperElement>
+  )
+}
+
+export default Tooltip

package/src/components/Tooltip/TooltipTypes.d.ts

@@ -0,0 +1,47 @@
+import type { ElementType, ReactNode, Element, CSSProperties } from 'react'
+
+export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
+
+export type VariantType = 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'
+
+export type WrapperType = ElementType | 'div' | 'span'
+
+export type ChildrenType = Element | ElementType | ReactNode
+
+export type EventsType = 'hover' | 'click'
+
+export type PositionStrategy = 'absolute' | 'fixed'
+
+export type DataAttribute =
+  | 'place'
+  | 'content'
+  | 'html'
+  | 'variant'
+  | 'offset'
+  | 'wrapper'
+  | 'events'
+  | 'position-strategy'
+  | 'delay-show'
+  | 'delay-hide'
+
+export interface ITooltip {
+  className?: string
+  classNameArrow?: string
+  content?: string
+  html?: string
+  place?: PlacesType
+  offset?: number
+  id?: string
+  variant?: VariantType
+  anchorId?: string
+  isHtmlContent?: boolean
+  wrapper?: WrapperType
+  children?: ChildrenType
+  events?: EventsType[]
+  positionStrategy?: PositionStrategy
+  delayShow?: number
+  delayHide?: number
+  style?: CSSProperties
+  isOpen?: boolean
+  setIsOpen?: (value: boolean) => void
+}

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip'

package/src/components/Tooltip/styles.module.css

@@ -0,0 +1,62 @@
+.tooltip {
+  visibility: hidden;
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 8px 16px;
+  border-radius: 3px;
+  font-size: 90%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  will-change: opacity, visibility;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.arrow {
+  position: absolute;
+  background: inherit;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.show {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+/** Types variant **/
+.dark {
+  background: var(--rt-color-dark);
+  color: var(--rt-color-white);
+}
+
+.light {
+  background-color: var(--rt-color-white);
+  color: var(--rt-color-dark);
+}
+
+.success {
+  background-color: var(--rt-color-success);
+  color: var(--rt-color-white);
+}
+
+.warning {
+  background-color: var(--rt-color-warning);
+  color: var(--rt-color-white);
+}
+
+.error {
+  background-color: var(--rt-color-error);
+  color: var(--rt-color-white);
+}
+
+.info {
+  background-color: var(--rt-color-info);
+  color: var(--rt-color-white);
+}

package/src/components/TooltipContent/TooltipContent.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable react/no-danger */
+import type { ITooltipContent } from './TooltipContentTypes'
+
+const TooltipContent = ({ content }: ITooltipContent) => {
+  return <span dangerouslySetInnerHTML={{ __html: content }} />
+}
+
+export default TooltipContent

package/src/components/TooltipContent/TooltipContentTypes.d.ts

@@ -0,0 +1,3 @@
+export interface ITooltipContent {
+  content: string
+}

package/src/components/TooltipContent/index.ts

@@ -0,0 +1 @@
+export { default as TooltipContent } from './TooltipContent'

package/src/components/TooltipController/TooltipController.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react'
+import { Tooltip } from 'components/Tooltip'
+import type {
+  EventsType,
+  PositionStrategy,
+  PlacesType,
+  VariantType,
+  WrapperType,
+  DataAttribute,
+  ITooltip,
+} from 'components/Tooltip/TooltipTypes'
+import { useTooltip } from 'components/TooltipProvider'
+import type { ITooltipController } from './TooltipControllerTypes'
+
+const TooltipController = ({
+  id,
+  anchorId,
+  content,
+  html,
+  className,
+  classNameArrow,
+  variant = 'dark',
+  place = 'top',
+  offset = 10,
+  wrapper = 'div',
+  children = null,
+  events = ['hover'],
+  positionStrategy = 'absolute',
+  delayShow = 0,
+  delayHide = 0,
+  style,
+  isOpen,
+  setIsOpen,
+}: ITooltipController) => {
+  const [tooltipContent, setTooltipContent] = useState(content || html)
+  const [tooltipPlace, setTooltipPlace] = useState(place)
+  const [tooltipVariant, setTooltipVariant] = useState(variant)
+  const [tooltipOffset, setTooltipOffset] = useState(offset)
+  const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
+  const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
+  const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
+  const [tooltipEvents, setTooltipEvents] = useState(events)
+  const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
+  const [isHtmlContent, setIsHtmlContent] = useState(Boolean(html))
+  const { anchorRefs, activeAnchor } = useTooltip()(id)
+
+  const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
+    const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {
+      if (name.startsWith('data-tooltip-')) {
+        const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute
+        acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null
+      }
+      return acc
+    }, {} as Record<DataAttribute, string | null>)
+
+    return dataAttributes
+  }
+
+  const applyAllDataAttributesFromAnchorElement = (
+    dataAttributes: Record<string, string | null>,
+  ) => {
+    const handleDataAttributes: Record<DataAttribute, (value: string | null) => void> = {
+      place: (value) => {
+        setTooltipPlace((value as PlacesType) ?? place)
+      },
+      content: (value) => {
+        setIsHtmlContent(false)
+        setTooltipContent(value ?? content)
+      },
+      html: (value) => {
+        setIsHtmlContent(!!value)
+        setTooltipContent(value ?? html ?? content)
+      },
+      variant: (value) => {
+        setTooltipVariant((value as VariantType) ?? variant)
+      },
+      offset: (value) => {
+        setTooltipOffset(value === null ? offset : Number(value))
+      },
+      wrapper: (value) => {
+        setTooltipWrapper((value as WrapperType) ?? 'div')
+      },
+      events: (value) => {
+        const parsed = value?.split(' ') as EventsType[]
+        setTooltipEvents(parsed ?? events)
+      },
+      'position-strategy': (value) => {
+        setTooltipPositionStrategy((value as PositionStrategy) ?? positionStrategy)
+      },
+      'delay-show': (value) => {
+        setTooltipDelayShow(value === null ? delayShow : Number(value))
+      },
+      'delay-hide': (value) => {
+        setTooltipDelayHide(value === null ? delayHide : Number(value))
+      },
+    }
+    // reset unset data attributes to default values
+    // without this, data attributes from the last active anchor will still be used
+    Object.values(handleDataAttributes).forEach((handler) => handler(null))
+    Object.entries(dataAttributes).forEach(([key, value]) => {
+      handleDataAttributes[key as DataAttribute]?.(value)
+    })
+  }
+
+  useEffect(() => {
+    if (content) {
+      setTooltipContent(content)
+    }
+    if (html) {
+      setTooltipContent(html)
+    }
+  }, [content, html])
+
+  useEffect(() => {
+    const elementRefs = new Set(anchorRefs)
+
+    const anchorById = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    if (anchorById) {
+      elementRefs.add({ current: anchorById })
+    }
+
+    if (!elementRefs.size) {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {}
+    }
+
+    const observerCallback: MutationCallback = (mutationList) => {
+      mutationList.forEach((mutation) => {
+        if (
+          !activeAnchor.current ||
+          mutation.type !== 'attributes' ||
+          !mutation.attributeName?.startsWith('data-tooltip-')
+        ) {
+          return
+        }
+        // make sure to get all set attributes, since all unset attributes are reset
+        const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor.current)
+        applyAllDataAttributesFromAnchorElement(dataAttributes)
+      })
+    }
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(observerCallback)
+
+    // do not check for subtree and childrens, we only want to know attribute changes
+    // to stay watching `data-attributes-*` from anchor element
+    const observerConfig = { attributes: true, childList: false, subtree: false }
+
+    const element = activeAnchor.current ?? anchorById
+
+    if (element) {
+      const dataAttributes = getDataAttributesFromAnchorElement(element)
+      applyAllDataAttributesFromAnchorElement(dataAttributes)
+      // Start observing the target node for configured mutations
+      observer.observe(element, observerConfig)
+    }
+
+    return () => {
+      // Remove the observer when the tooltip is destroyed
+      observer.disconnect()
+    }
+  }, [anchorRefs, activeAnchor, anchorId])
+
+  const props: ITooltip = {
+    id,
+    anchorId,
+    className,
+    classNameArrow,
+    content: tooltipContent,
+    isHtmlContent,
+    place: tooltipPlace,
+    variant: tooltipVariant,
+    offset: tooltipOffset,
+    wrapper: tooltipWrapper,
+    events: tooltipEvents,
+    positionStrategy: tooltipPositionStrategy,
+    delayShow: tooltipDelayShow,
+    delayHide: tooltipDelayHide,
+    style,
+    isOpen,
+    setIsOpen,
+  }
+
+  return children ? <Tooltip {...props}>{children}</Tooltip> : <Tooltip {...props} />
+}
+
+export default TooltipController

package/src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'react'
+
+import type {
+  PlacesType,
+  VariantType,
+  WrapperType,
+  ChildrenType,
+  EventsType,
+  PositionStrategy,
+} from 'components/Tooltip/TooltipTypes'
+
+export interface ITooltipController {
+  className?: string
+  classNameArrow?: string
+  content?: string
+  html?: string
+  place?: PlacesType
+  offset?: number
+  id?: string
+  variant?: VariantType
+  anchorId?: string
+  wrapper?: WrapperType
+  children?: ChildrenType
+  events?: EventsType[]
+  positionStrategy?: PositionStrategy
+  delayShow?: number
+  delayHide?: number
+  style?: CSSProperties
+  isOpen?: boolean
+  setIsOpen?: (value: boolean) => void
+}
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    'data-tooltip-place'?: PlacesType
+    'data-tooltip-content'?: string
+    'data-tooltip-html'?: string
+    'data-tooltip-variant'?: VariantType
+    'data-tooltip-offset'?: number
+    'data-tooltip-wrapper'?: WrapperType
+    'data-tooltip-events'?: EventsType[]
+    'data-tooltip-position-strategy'?: PositionStrategy
+    'data-tooltip-delay-show'?: number
+    'data-tooltip-delay-hide'?: number
+  }
+}

package/src/components/TooltipController/index.ts

@@ -0,0 +1 @@
+export { default as TooltipController } from './TooltipController'

package/src/components/TooltipProvider/TooltipProvider.tsx

@@ -0,0 +1,110 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
+
+import type {
+  AnchorRef,
+  TooltipContextData,
+  TooltipContextDataWrapper,
+} from './TooltipProviderTypes'
+
+const defaultContextData: TooltipContextData = {
+  anchorRefs: new Set(),
+  activeAnchor: { current: null },
+  attach: () => {
+    /* attach anchor element */
+  },
+  detach: () => {
+    /* detach anchor element */
+  },
+  setActiveAnchor: () => {
+    /* set active anchor */
+  },
+}
+
+const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData)
+const TooltipContext = createContext<TooltipContextDataWrapper>(defaultContextWrapper)
+
+const TooltipProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const defaultTooltipId = useId()
+  const [anchorRefMap, setAnchorRefMap] = useState<Record<string, Set<AnchorRef>>>({
+    [defaultTooltipId]: new Set(),
+  })
+  const [activeAnchorMap, setActiveAnchorMap] = useState<Record<string, AnchorRef>>({
+    [defaultTooltipId]: { current: null },
+  })
+
+  const attach = (tooltipId: string, ...refs: AnchorRef[]) => {
+    setAnchorRefMap((oldMap) => {
+      const tooltipRefs = oldMap[tooltipId] ?? new Set()
+      refs.forEach((ref) => tooltipRefs.add(ref))
+      // create new object to trigger re-render
+      return { ...oldMap, [tooltipId]: new Set(tooltipRefs) }
+    })
+  }
+
+  const detach = (tooltipId: string, ...refs: AnchorRef[]) => {
+    setAnchorRefMap((oldMap) => {
+      const tooltipRefs = oldMap[tooltipId]
+      if (!tooltipRefs) {
+        // tooltip not found
+        // maybe thow error?
+        return oldMap
+      }
+      refs.forEach((ref) => tooltipRefs.delete(ref))
+      // create new object to trigger re-render
+      return { ...oldMap }
+    })
+  }
+
+  const setActiveAnchor = (tooltipId: string, ref: React.RefObject<HTMLElement>) => {
+    setActiveAnchorMap((oldMap) => {
+      if (oldMap[tooltipId]?.current === ref.current) {
+        return oldMap
+      }
+      // create new object to trigger re-render
+      return { ...oldMap, [tooltipId]: ref }
+    })
+  }
+
+  const getTooltipData = useCallback(
+    (tooltipId?: string) => ({
+      anchorRefs: anchorRefMap[tooltipId ?? defaultTooltipId] ?? new Set(),
+      activeAnchor: activeAnchorMap[tooltipId ?? defaultTooltipId] ?? { current: null },
+      attach: (...refs: AnchorRef[]) => attach(tooltipId ?? defaultTooltipId, ...refs),
+      detach: (...refs: AnchorRef[]) => detach(tooltipId ?? defaultTooltipId, ...refs),
+      setActiveAnchor: (ref: AnchorRef) => setActiveAnchor(tooltipId ?? defaultTooltipId, ref),
+    }),
+    [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach],
+  )
+
+  const context = useMemo(() => {
+    const contextData: TooltipContextData = getTooltipData(defaultTooltipId)
+    const contextWrapper = Object.assign(
+      (tooltipId?: string) => getTooltipData(tooltipId),
+      contextData,
+    )
+    return contextWrapper
+  }, [getTooltipData])
+
+  return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>
+}
+
+/*
+  // this will use the "global" tooltip (same as `useTooltip()()`)
+  const { anchorRefs, attach, detach } = useTooltip()
+
+  // this will use the tooltip with id `tooltip-id`
+  const { anchorRefs, attach, detach } = useTooltip()('tooltip-id')
+*/
+export function useTooltip() {
+  return useContext(TooltipContext)
+}
+
+export default TooltipProvider