react-tooltip 5.1.2 → 5.1.3

package/dist/react-tooltip.d.ts

@@ -12,6 +12,18 @@ type EventsType = 'hover' | 'click'
 
 type PositionStrategy = 'absolute' | 'fixed'
 
+type DataAttribute =
+  | 'place'
+  | 'content'
+  | 'html'
+  | 'variant'
+  | 'offset'
+  | 'wrapper'
+  | 'events'
+  | 'position-strategy'
+  | 'delay-show'
+  | 'delay-hide'
+
 interface ITooltipController {
   className?: string
   classNameArrow?: string
@@ -48,8 +60,6 @@ declare module 'react' {
   }
 }
 
-declare const TooltipController: ({ id, anchorId, content, html, className, classNameArrow, variant, place, offset, wrapper, children, events, positionStrategy, delayShow, delayHide, style, isOpen, setIsOpen, }: ITooltipController) => JSX.Element;
-
 interface ITooltipWrapper {
   tooltipId?: string
   children: ReactNode
@@ -66,8 +76,10 @@ interface ITooltipWrapper {
   delayHide?: ITooltipController['delayHide']
 }
 
+declare const TooltipController: ({ id, anchorId, content, html, className, classNameArrow, variant, place, offset, wrapper, children, events, positionStrategy, delayShow, delayHide, style, isOpen, setIsOpen, }: ITooltipController) => JSX.Element;
+
 declare const TooltipProvider: React.FC<PropsWithChildren>;
 
 declare const TooltipWrapper: ({ tooltipId, children, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }: ITooltipWrapper) => JSX.Element;
 
-export { TooltipController as Tooltip, TooltipProvider, TooltipWrapper };
+export { ChildrenType, DataAttribute, EventsType, ITooltipController as ITooltip, ITooltipWrapper, PlacesType, PositionStrategy, TooltipController as Tooltip, TooltipProvider, TooltipWrapper, VariantType, WrapperType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "description": "react tooltip component",
   "scripts": {
     "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",

package/src/App.tsx

@@ -1,119 +0,0 @@
-import { TooltipController as Tooltip } from 'components/TooltipController'
-import { TooltipProvider, TooltipWrapper } from 'components/TooltipProvider'
-import { useState } from 'react'
-import styles from './styles.module.css'
-
-function WithProviderMinimal() {
-  return (
-    <section style={{ marginTop: '100px' }}>
-      <p>
-        <TooltipWrapper place="bottom" content="Shared Global Tooltip">
-          <button>Minimal 1</button>
-        </TooltipWrapper>
-        <TooltipWrapper place="right" content="Shared Global Tooltip">
-          <button>Minimal 2</button>
-        </TooltipWrapper>
-      </p>
-      <Tooltip />
-    </section>
-  )
-}
-
-function WithProviderMultiple() {
-  return (
-    <section style={{ marginTop: '100px' }}>
-      <p>
-        <TooltipWrapper tooltipId="tooltip-1" place="bottom">
-          <button>Multiple 1</button>
-        </TooltipWrapper>
-        <TooltipWrapper tooltipId="tooltip-2" place="right">
-          <button>Multiple 2</button>
-        </TooltipWrapper>
-      </p>
-      <Tooltip id="tooltip-1" content="Tooltip 1" />
-      <Tooltip id="tooltip-2" content="Tooltip 2" />
-    </section>
-  )
-}
-
-function App() {
-  const [anchorId, setAnchorId] = useState('button')
-  const [isDarkOpen, setIsDarkOpen] = useState(false)
-
-  return (
-    <main className={styles['main']}>
-      <button
-        id="button"
-        aria-describedby="tooltip"
-        data-tooltip-content="My big tooltip content 1"
-        onClick={() => {
-          setAnchorId('button')
-        }}
-      >
-        My button
-      </button>
-      <Tooltip
-        place="bottom"
-        anchorId={anchorId}
-        // only shown if `data-tooltip-content` is unset
-        content={`Showing tooltip on ${anchorId}`}
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-      />
-      <Tooltip
-        place="top"
-        variant="success"
-        anchorId="button2"
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-      />
-      <Tooltip
-        place="top"
-        variant="info"
-        anchorId="button3"
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-      />
-      <Tooltip
-        place="right"
-        variant="info"
-        anchorId="button3"
-        content="My big tooltip content"
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-        style={{ backgroundColor: '#ff00ff' }}
-      />
-
-      <section style={{ marginTop: '100px' }}>
-        <p>
-          <button
-            id="button2"
-            data-tooltip-content="Hello World from a Tooltip 2"
-            onClick={() => {
-              setAnchorId('button2')
-            }}
-          >
-            Hover or focus me
-          </button>
-          <button
-            id="button3"
-            data-tooltip-content="Hello World from a Tooltip 3"
-            onClick={() => {
-              setAnchorId('button3')
-            }}
-          >
-            Hover or focus me 2
-          </button>
-        </p>
-      </section>
-      <TooltipProvider>
-        <WithProviderMinimal />
-      </TooltipProvider>
-      <TooltipProvider>
-        <WithProviderMultiple />
-      </TooltipProvider>
-    </main>
-  )
-}
-
-export default App

package/src/components/Tooltip/Tooltip.tsx

@@ -1,226 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-/* 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

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

package/src/components/TooltipContent/index.ts

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

package/src/components/TooltipController/TooltipController.tsx

@@ -1,187 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

package/src/components/TooltipProvider/TooltipProvider.tsx

@@ -1,110 +0,0 @@
-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

package/src/components/TooltipProvider/TooltipProviderTypes.d.ts

@@ -1,33 +0,0 @@
-import type { ReactNode, RefObject } from 'react'
-import type { ITooltipController } from 'components/TooltipController/TooltipControllerTypes'
-
-export type AnchorRef = RefObject<HTMLElement>
-
-export interface TooltipContextData {
-  anchorRefs: Set<AnchorRef>
-  activeAnchor: AnchorRef
-  attach: (...refs: AnchorRef[]) => void
-  detach: (...refs: AnchorRef[]) => void
-  setActiveAnchor: (ref: AnchorRef) => void
-}
-
-export type TooltipContextDataWrapper = TooltipContextData & {
-  // This means the context is a callable object
-  (tooltipId?: string): TooltipContextData
-}
-
-export interface ITooltipWrapper {
-  tooltipId?: string
-  children: ReactNode
-
-  place?: ITooltipController['place']
-  content?: ITooltipController['content']
-  html?: ITooltipController['html']
-  variant?: ITooltipController['variant']
-  offset?: ITooltipController['offset']
-  wrapper?: ITooltipController['wrapper']
-  events?: ITooltipController['events']
-  positionStrategy?: ITooltipController['positionStrategy']
-  delayShow?: ITooltipController['delayShow']
-  delayHide?: ITooltipController['delayHide']
-}

package/src/components/TooltipProvider/TooltipWrapper.tsx

@@ -1,48 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { useTooltip } from './TooltipProvider'
-import type { ITooltipWrapper } from './TooltipProviderTypes'
-
-const TooltipWrapper = ({
-  tooltipId,
-  children,
-  place,
-  content,
-  html,
-  variant,
-  offset,
-  wrapper,
-  events,
-  positionStrategy,
-  delayShow,
-  delayHide,
-}: ITooltipWrapper) => {
-  const { attach, detach } = useTooltip()(tooltipId)
-  const anchorRef = useRef<HTMLElement | null>(null)
-
-  useEffect(() => {
-    attach(anchorRef)
-    return () => {
-      detach(anchorRef)
-    }
-  }, [])
-
-  return (
-    <span
-      ref={anchorRef}
-      data-tooltip-place={place}
-      data-tooltip-content={content}
-      data-tooltip-html={html}
-      data-tooltip-variant={variant}
-      data-tooltip-offset={offset}
-      data-tooltip-wrapper={wrapper}
-      data-tooltip-events={events}
-      data-tooltip-position-strategy={positionStrategy}
-      data-tooltip-delay-show={delayShow}
-      data-tooltip-delay-hide={delayHide}
-    >
-      {children}
-    </span>
-  )
-}
-
-export default TooltipWrapper

package/src/components/TooltipProvider/index.ts

@@ -1,2 +0,0 @@
-export { default as TooltipProvider, useTooltip } from './TooltipProvider'
-export { default as TooltipWrapper } from './TooltipWrapper'

package/src/index-dev.tsx

@@ -1,16 +0,0 @@
-import { StrictMode, version } from 'react'
-import { createRoot } from 'react-dom/client'
-import './tokens.css'
-import App from './App'
-
-// eslint-disable-next-line no-console
-console.log('Parent folder loaded react version: ', version)
-
-const container = document.getElementById('app')
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const root = createRoot(container!)
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

package/src/index.tsx

@@ -1,4 +0,0 @@
-import './tokens.css'
-
-export { TooltipController as Tooltip } from './components/TooltipController'
-export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider'

package/src/styles.module.css

@@ -1,5 +0,0 @@
-.main {
-  margin: 0 auto;
-  width: 100%;
-  height: 100vh;
-}

package/src/test/__snapshots__/index.spec.js.snap

@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tooltip props basic tooltip component 1`] = `
-[
-  <span
-    id="basic-example"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className=""
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className=""
-      style={{}}
-    />
-  </div>,
-]
-`;
-
-exports[`tooltip props tooltip component - getContent 1`] = `
-[
-  <span
-    id="basic-example-get-content"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className=""
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className=""
-      style={{}}
-    />
-  </div>,
-]
-`;
-
-exports[`tooltip props tooltip component - html 1`] = `
-[
-  <span
-    id="basic-example-html"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className=""
-    role="tooltip"
-    style={{}}
-  >
-    <span
-      dangerouslySetInnerHTML={
-        {
-          "__html": "Hello World!",
-        }
-      }
-    />
-    <div
-      className=""
-      style={{}}
-    />
-  </div>,
-]
-`;
-
-exports[`tooltip props tooltip component - without anchorId 1`] = `
-[
-  <span>
-    Lorem Ipsum
-  </span>,
-  <div
-    className=""
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className=""
-      style={{}}
-    />
-  </div>,
-]
-`;
-
-exports[`tooltip props tooltip component - without element reference 1`] = `
-<div
-  className=""
-  role="tooltip"
-  style={{}}
->
-  <div
-    className=""
-    style={{}}
-  />
-</div>
-`;

package/src/test/index.spec.js

@@ -1,143 +0,0 @@
-import renderer from 'react-test-renderer'
-import debounce from 'utils/debounce'
-import { computeTooltipPosition } from 'utils/compute-positions'
-import { TooltipController as Tooltip } from '../components/TooltipController'
-
-// Tell Jest to mock all timeout functions
-jest.useFakeTimers()
-
-// eslint-disable-next-line react/prop-types
-const TooltipProps = ({ id, ...tooltipParams }) => (
-  <>
-    <span id={id}>Lorem Ipsum</span>
-    <Tooltip anchorId={id} {...tooltipParams} />
-  </>
-)
-
-describe('tooltip props', () => {
-  test('tooltip component - without anchorId', () => {
-    const component = renderer.create(<TooltipProps content="Hello World!" />)
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('tooltip component - without element reference', () => {
-    const component = renderer.create(<Tooltip />)
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('basic tooltip component', () => {
-    const component = renderer.create(<TooltipProps id="basic-example" content="Hello World!" />)
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('tooltip component - html', () => {
-    const component = renderer.create(
-      <TooltipProps id="basic-example-html" html="Hello World!" variant="info" place="top" />,
-    )
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
-  test('tooltip component - getContent', () => {
-    const component = renderer.create(
-      <TooltipProps
-        id="basic-example-get-content"
-        content="Hello World!"
-        getContent={(value) => `${value} Manipuled!`}
-        variant="info"
-        place="top"
-      />,
-    )
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-})
-
-describe('compute positions', () => {
-  test('empty reference elements', async () => {
-    const value = await computeTooltipPosition({
-      elementReference: null,
-      tooltipReference: null,
-      tooltipArrowReference: null,
-    })
-
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
-  })
-
-  test('empty tooltip reference element', async () => {
-    const element = document.createElement('div')
-    const value = await computeTooltipPosition({
-      elementReference: element,
-      tooltipReference: null,
-      tooltipArrowReference: null,
-    })
-
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
-  })
-
-  test('empty tooltip arrow reference element', async () => {
-    const element = document.createElement('div')
-    const elementTooltip = document.createElement('div')
-    const value = await computeTooltipPosition({
-      elementReference: element,
-      tooltipReference: elementTooltip,
-      tooltipArrowReference: null,
-    })
-
-    expect(value).toEqual({
-      tooltipArrowStyles: {},
-      tooltipStyles: {
-        left: '5px',
-        top: '10px',
-      },
-    })
-  })
-
-  test('all reference elements', async () => {
-    const element = document.createElement('div')
-    const elementTooltip = document.createElement('div')
-    const elementTooltipArrow = document.createElement('div')
-    const value = await computeTooltipPosition({
-      elementReference: element,
-      tooltipReference: elementTooltip,
-      tooltipArrowReference: elementTooltipArrow,
-    })
-
-    expect(value).toEqual({
-      tooltipArrowStyles: {
-        bottom: '-4px',
-        left: '0px',
-        right: '',
-        top: '',
-      },
-      tooltipStyles: {
-        left: '5px',
-        top: '-10px',
-      },
-    })
-  })
-})
-
-describe('debounce', () => {
-  let func
-  let debouncedFunc
-
-  beforeEach((timeout = 1000) => {
-    func = jest.fn()
-    debouncedFunc = debounce(func, timeout)
-  })
-
-  test('execute just once', () => {
-    for (let i = 0; i < 100; i += 1) {
-      debouncedFunc()
-    }
-
-    // Fast-forward time
-    jest.runAllTimers()
-
-    expect(func).toBeCalledTimes(1)
-  })
-})

package/src/tokens.css

@@ -1,8 +0,0 @@
-:root {
-  --rt-color-white: #fff;
-  --rt-color-dark: #222;
-  --rt-color-success: #8dc572;
-  --rt-color-error: #be6464;
-  --rt-color-warning: #f0ad4e;
-  --rt-color-info: #337ab7;
-}

package/src/utils/compute-positions-types.d.ts

@@ -1,8 +0,0 @@
-export interface IComputePositions {
-  elementReference?: Element | HTMLElement | null
-  tooltipReference?: Element | HTMLElement | null
-  tooltipArrowReference?: Element | HTMLElement | null
-  place?: 'top' | 'right' | 'bottom' | 'left'
-  offset?: number
-  strategy?: 'absolute' | 'fixed'
-}

package/src/utils/compute-positions.ts

@@ -1,65 +0,0 @@
-import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom'
-import type { IComputePositions } from './compute-positions-types'
-
-export const computeTooltipPosition = async ({
-  elementReference = null,
-  tooltipReference = null,
-  tooltipArrowReference = null,
-  place = 'top',
-  offset: offsetValue = 10,
-  strategy = 'absolute',
-}: IComputePositions) => {
-  if (!elementReference) {
-    // elementReference can be null or undefined and we will not compute the position
-    // eslint-disable-next-line no-console
-    // console.error('The reference element for tooltip was not defined: ', elementReference)
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
-  }
-
-  if (tooltipReference === null) {
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
-  }
-
-  const middleware = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })]
-
-  if (tooltipArrowReference) {
-    middleware.push(arrow({ element: tooltipArrowReference as HTMLElement }))
-    return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
-      placement: place,
-      strategy,
-      middleware,
-    }).then(({ x, y, placement, middlewareData }) => {
-      const styles = { left: `${x}px`, top: `${y}px` }
-
-      const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }
-
-      const staticSide =
-        {
-          top: 'bottom',
-          right: 'left',
-          bottom: 'top',
-          left: 'right',
-        }[placement.split('-')[0]] ?? 'bottom'
-
-      const arrowStyle = {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [staticSide]: '-4px',
-      }
-
-      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle }
-    })
-  }
-
-  return computePosition(elementReference as HTMLElement, tooltipReference as HTMLElement, {
-    placement: 'bottom',
-    strategy,
-    middleware,
-  }).then(({ x, y }) => {
-    const styles = { left: `${x}px`, top: `${y}px` }
-
-    return { tooltipStyles: styles, tooltipArrowStyles: {} }
-  })
-}

package/src/utils/debounce.ts

@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * This function debounce the received function
- * @param { function } 	func				Function to be debounced
- * @param { number } 		wait				Time to wait before execut the function
- * @param { boolean } 	immediate		Param to define if the function will be executed immediately
- */
-const debounce = (func: (...args: any[]) => void, wait?: number, immediate?: true) => {
-  let timeout: NodeJS.Timeout | null = null
-
-  return function debounced(this: typeof func, ...args: any[]) {
-    const later = () => {
-      timeout = null
-      if (!immediate) {
-        func.apply(this, args)
-      }
-    }
-
-    if (timeout) {
-      clearTimeout(timeout)
-    }
-
-    timeout = setTimeout(later, wait)
-  }
-}
-
-export default debounce