react-tooltip 5.0.0-beta.2 → 5.1.0-beta.0

package/src/components/TooltipController/TooltipController.tsx

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

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

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

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

package/src/index-dev.tsx

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

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

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,107 @@
+// 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

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

@@ -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,66 @@
+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

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

package/.editorconfig

@@ -1,25 +0,0 @@
-
-# editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true
-max_line_length = 100
-
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
-
-[{*.json, *.svg}]
-indent_style = space
-indent_size = 2
-
-# Matches the exact package.json, or *rc
-[{package.json,*.yml,*rc}]
-indent_style = space
-indent_size = 2