react-tooltip 5.1.0 → 5.1.2

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

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

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

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

package/src/index-dev.tsx

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

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

package/src/styles.module.css

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

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

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

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

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

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

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

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