react-tooltip 5.1.0-beta.0 → 5.1.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.1.0-beta.0",
+  "version": "5.1.0-beta.1",
   "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,79 +0,0 @@
-import { TooltipController as Tooltip } from 'components/TooltipController'
-import { useState } from 'react'
-import styles from './styles.module.css'
-
-function App() {
-  const [anchorId, setAnchorId] = useState('button')
-  const [isDarkOpen, setIsDarkOpen] = useState(false)
-
-  return (
-    <main className={styles['main']}>
-      <button
-        id="button"
-        aria-describedby="tooltip"
-        onClick={() => {
-          setAnchorId('button')
-        }}
-      >
-        My button
-      </button>
-      <Tooltip
-        place="bottom"
-        anchorId={anchorId}
-        content="My big tooltip content"
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-      />
-      <Tooltip
-        place="top"
-        variant="success"
-        anchorId="button2"
-        content="My big tooltip content"
-        isOpen={isDarkOpen}
-        setIsOpen={setIsDarkOpen}
-      />
-      <Tooltip
-        place="top"
-        variant="info"
-        anchorId="button3"
-        content="My big tooltip content"
-        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-tip="Hello World from a Tooltip"
-            onClick={() => {
-              setAnchorId('button2')
-            }}
-          >
-            Hover or focus me
-          </button>
-          <button
-            id="button3"
-            data-tip="Hello World from a Tooltip 2"
-            onClick={() => {
-              setAnchorId('button3')
-            }}
-          >
-            Hover or focus me 2
-          </button>
-        </p>
-      </section>
-    </main>
-  )
-}
-
-export default App

package/src/components/Tooltip/Tooltip.tsx

@@ -1,191 +0,0 @@
-import { createRef, useEffect, useState, useId, useRef } from 'react'
-import classNames from 'classnames'
-import debounce from 'utils/debounce'
-import { TooltipContent } from 'components/TooltipContent'
-import { computeToolTipPosition } from '../../utils/compute-positions'
-import styles from './styles.module.css'
-import type { ITooltip } from './TooltipTypes'
-
-const Tooltip = ({
-  // props
-  id = useId(),
-  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 = createRef()
-  const tooltipArrowRef = createRef()
-  const tooltipShowDelayTimerRef = useRef<ReturnType<typeof setTimeout>>()
-  const tooltipHideDelayTimerRef = useRef<ReturnType<typeof setTimeout>>()
-  const [inlineStyles, setInlineStyles] = useState({})
-  const [inlineArrowStyles, setInlineArrowStyles] = useState({})
-  const [show, setShow] = useState<boolean>(false)
-
-  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 = () => {
-    if (delayShow) {
-      handleShowTooltipDelayed()
-    } else {
-      handleShow(true)
-    }
-
-    if (tooltipHideDelayTimerRef.current) {
-      clearTimeout(tooltipHideDelayTimerRef.current)
-    }
-  }
-
-  const handleHideTooltip = () => {
-    if (delayHide) {
-      handleHideTooltipDelayed()
-    } else {
-      handleShow(false)
-    }
-
-    if (show && tooltipShowDelayTimerRef.current) {
-      clearTimeout(tooltipShowDelayTimerRef.current)
-    } else if (!show && tooltipShowDelayTimerRef.current) {
-      // workaround to prevent tooltip being show forever
-      // when we remove the mouse before show tooltip with `delayShow`
-      tooltipHideDelayTimerRef.current = setTimeout(() => {
-        handleShow(false)
-      }, delayShow * 2)
-    }
-  }
-
-  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 elementReference = document.querySelector(`#${anchorId}`)
-
-    if (!elementReference) {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {}
-    }
-
-    const enabledEvents: { event: string; listener: () => 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 }) => {
-      elementReference?.addEventListener(event, listener)
-    })
-
-    return () => {
-      enabledEvents.forEach(({ event, listener }) => {
-        elementReference?.removeEventListener(event, listener)
-      })
-    }
-  }, [anchorId, events, delayHide, delayShow])
-
-  useEffect(() => {
-    const elementReference = document.querySelector(`#${anchorId}`)
-
-    computeToolTipPosition({
-      place,
-      offset,
-      elementReference,
-      tooltipReference: tooltipRef.current as HTMLElement,
-      tooltipArrowReference: tooltipArrowRef.current as HTMLElement,
-      strategy: positionStrategy,
-    }).then((computedStylesData) => {
-      if (Object.keys(computedStylesData.tooltipStyles).length) {
-        setInlineStyles(computedStylesData.tooltipStyles)
-      }
-
-      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
-        setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
-      }
-    })
-
-    return () => {
-      tooltipShowDelayTimerRef.current = undefined
-      tooltipHideDelayTimerRef.current = undefined
-    }
-  }, [show, isOpen, anchorId])
-
-  return (
-    <WrapperElement
-      id={id}
-      role="tooltip"
-      className={classNames(styles['tooltip'], styles[variant], className, {
-        [styles['show']]: isOpen || show,
-        [styles['fixed']]: positionStrategy === 'fixed',
-      })}
-      style={{ ...externalStyles, ...inlineStyles }}
-      ref={tooltipRef as React.RefObject<HTMLDivElement>}
-    >
-      {children || (isHtmlContent ? <TooltipContent content={content as string} /> : content)}
-      <div
-        className={classNames(styles['arrow'], classNameArrow)}
-        style={inlineArrowStyles}
-        ref={tooltipArrowRef as React.RefObject<HTMLDivElement>}
-      />
-    </WrapperElement>
-  )
-}
-
-export default Tooltip

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

@@ -1,35 +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 interface ITooltip {
-  className?: string
-  classNameArrow?: string
-  content?: string | number
-  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,203 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Tooltip } from 'components/Tooltip'
-import type {
-  EventsType,
-  PositionStrategy,
-  PlacesType,
-  VariantType,
-  WrapperType,
-} from 'components/Tooltip/TooltipTypes'
-import { dataAttributesKeys } from './constants'
-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,
-  getContent,
-  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<EventsType[]>(events)
-  const [tooltipPositionStrategy, setTooltipPositionStrategy] =
-    useState<PositionStrategy>(positionStrategy)
-  const [isHtmlContent, setIsHtmlContent] = useState<boolean>(Boolean(html))
-
-  const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
-    const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {
-      if (name.includes('data-tooltip-')) {
-        ;(acc as any)[name] = elementReference?.getAttribute(name)
-      }
-
-      return acc
-    }, {})
-
-    return dataAttributes
-  }
-
-  const applyAllDataAttributesFromAnchorElement = (dataAttributes: {
-    [key: string]: string | number | boolean
-  }) => {
-    const keys = Object.keys(dataAttributes)
-    let formatedKey = null
-
-    const handleDataAttributes = {
-      place: (value: PlacesType) => {
-        setTooltipPlace(value)
-      },
-      content: (value: string) => {
-        setIsHtmlContent(true)
-        if (getContent) {
-          setTooltipContent(getContent(value))
-        } else {
-          setTooltipContent(value)
-        }
-      },
-      html: (value: string) => {
-        setIsHtmlContent(true)
-        if (getContent) {
-          setTooltipContent(getContent(value))
-        } else {
-          setTooltipContent(value)
-        }
-      },
-      variant: (value: VariantType) => {
-        setTooltipVariant(value)
-      },
-      offset: (value: number) => {
-        setTooltipOffset(value)
-      },
-      wrapper: (value: WrapperType) => {
-        setTooltipWrapper(value)
-      },
-      events: (value: string) => {
-        const parsedEvents = value.split(' ')
-        setTooltipEvents(parsedEvents as EventsType[])
-      },
-      positionStrategy: (value: PositionStrategy) => {
-        setTooltipPositionStrategy(value)
-      },
-      'delay-show': (value: number) => {
-        setTooltipDelayShow(Number(value))
-      },
-      'delay-hide': (value: number) => {
-        setTooltipDelayHide(Number(value))
-      },
-    }
-
-    keys.forEach((key) => {
-      formatedKey = key.replace('data-tooltip-', '')
-
-      if (dataAttributesKeys.includes(formatedKey)) {
-        // @ts-ignore
-        handleDataAttributes[formatedKey](dataAttributes[key])
-      }
-    })
-  }
-
-  const getElementSpecificAttributeKeyAndValueParsed = ({
-    element,
-    attributeName,
-  }: {
-    element: HTMLElement
-    attributeName: string
-  }) => {
-    return { [attributeName]: element.getAttribute(attributeName) }
-  }
-
-  useEffect(() => {
-    if (!anchorId) {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {}
-    }
-
-    const elementReference = document.querySelector(`#${anchorId}`)
-
-    if (!elementReference) {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {}
-    }
-
-    if (content && getContent) {
-      setTooltipContent(getContent(content))
-    }
-
-    // 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 observerCallback = (mutationList: any) => {
-      mutationList.forEach((mutation: any) => {
-        if (mutation.type === 'attributes') {
-          const attributeKeyAndValue = getElementSpecificAttributeKeyAndValueParsed({
-            element: elementReference as HTMLElement,
-            attributeName: mutation.attributeName,
-          })
-
-          applyAllDataAttributesFromAnchorElement(
-            attributeKeyAndValue as { [key: string]: string | number | boolean },
-          )
-        }
-      })
-    }
-
-    // Create an observer instance linked to the callback function
-    const observer = new MutationObserver(observerCallback)
-
-    // Start observing the target node for configured mutations
-    observer.observe(elementReference, observerConfig)
-
-    const dataAttributes = getDataAttributesFromAnchorElement(elementReference as HTMLElement)
-
-    applyAllDataAttributesFromAnchorElement(dataAttributes)
-
-    return () => {
-      // Remove the observer when the tooltip is destroyed
-      observer.disconnect()
-    }
-  }, [anchorId])
-
-  const props = {
-    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,32 +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 | number
-  html?: string
-  place?: PlacesType
-  offset?: number
-  id?: string
-  variant?: VariantType
-  anchorId?: string
-  wrapper?: WrapperType
-  children?: ChildrenType
-  events?: EventsType[]
-  positionStrategy?: PositionStrategy
-  delayShow?: number
-  delayHide?: number
-  getContent?: (value) => string
-  style?: CSSProperties
-  isOpen?: boolean
-  setIsOpen?: (value: boolean) => void
-}

package/src/components/TooltipController/constants.ts

@@ -1,11 +0,0 @@
-export const dataAttributesKeys = [
-  'place', // place of tooltip
-  'content', // content of tooltip
-  'html', // html content of tooltip
-  'variant', // variant of tooltip
-  'offset', // offset of tooltip
-  'wrapper', // wrapper of tooltip
-  'events', // events of tooltip
-  'delay-show', // delay to show tooltip
-  'delay-hide', // delay to hide tooltip
-]

package/src/components/TooltipController/index.ts

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

package/src/index-dev.tsx

@@ -1,15 +0,0 @@
-import { StrictMode, version } from 'react'
-import { createRoot } from 'react-dom/client'
-import './tokens.css'
-import App from './App'
-
-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,3 +0,0 @@
-import './tokens.css'
-
-export { TooltipController as Tooltip } from './components/TooltipController'

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,107 +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=""
-    id=":r2:"
-    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=""
-    id=":r4:"
-    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=""
-    id=":r3:"
-    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=""
-    id=":r0:"
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className=""
-      style={{}}
-    />
-  </div>,
-]
-`;
-
-exports[`tooltip props tooltip component - without element reference 1`] = `
-<div
-  className=""
-  id=":r1:"
-  role="tooltip"
-  style={{}}
->
-  <div
-    className=""
-    style={{}}
-  />
-</div>
-`;

package/src/test/index.spec.js

@@ -1,142 +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()
-
-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,66 +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` }
-
-      // @ts-ignore
-      const { x: arrowX, y: arrowY } = middlewareData.arrow
-
-      const staticSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-      }[placement.split('-')[0]]
-
-      const arrowStyle = {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        // @ts-ignore
-        [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,32 +0,0 @@
-/* eslint-disable func-names */
-/* eslint-disable prefer-rest-params */
-/* eslint-disable @typescript-eslint/no-this-alias */
-/**
- * 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: { (): void; (): void; apply?: any }, wait?: number, immediate?: true) => {
-  let timeout: string | number | NodeJS.Timeout | null | undefined
-
-  return function () {
-    // @ts-ignore
-    const context = this
-    const args = arguments
-
-    const later = () => {
-      timeout = null
-      if (!immediate) {
-        func.apply(context, args)
-      }
-    }
-
-    // @ts-ignore
-    clearTimeout(timeout)
-
-    timeout = setTimeout(later, wait)
-  }
-}
-
-export default debounce