improve how data changes are handled

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -175,7 +175,7 @@ const Tooltip = ({
       strategy: positionStrategy,
     }).then((computedStylesData) => {
       if (!mounted) {
-        // invalidate computed positions after unmount
+        // invalidate computed positions after remount
         return
       }
       setCalculatingPosition(false)

src/components/Tooltip/TooltipTypes.d.ts

@@ -27,7 +27,7 @@ export type DataAttribute =
 export interface ITooltip {
   className?: string
   classNameArrow?: string
-  content?: string | number
+  content?: string
   html?: string
   place?: PlacesType
   offset?: number

src/components/TooltipController/TooltipController.tsx

@@ -7,6 +7,7 @@ import type {
   VariantType,
   WrapperType,
   DataAttribute,
+  ITooltip,
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import type { ITooltipController } from './TooltipControllerTypes'
@@ -46,10 +47,11 @@ const TooltipController = ({
   const getDataAttributesFromAnchorElement = (elementReference: HTMLElement) => {
     const dataAttributes = elementReference?.getAttributeNames().reduce((acc, name) => {
       if (name.startsWith('data-tooltip-')) {
-        acc[name] = elementReference?.getAttribute(name) ?? null
+        const parsedAttribute = name.replace(/^data-tooltip-/, '') as DataAttribute
+        acc[parsedAttribute] = elementReference?.getAttribute(name) ?? null
       }
       return acc
-    }, {} as Record<string, string | null>)
+    }, {} as Record<DataAttribute, string | null>)
 
     return dataAttributes
   }
@@ -63,51 +65,43 @@ const TooltipController = ({
       },
       content: (value) => {
         setIsHtmlContent(false)
-        setTooltipContent(value ?? '')
+        setTooltipContent(value ?? content)
       },
       html: (value) => {
         setIsHtmlContent(true)
-        setTooltipContent(value ?? '')
+        setTooltipContent(value ?? html)
       },
       variant: (value) => {
         setTooltipVariant((value as VariantType) ?? variant)
       },
       offset: (value) => {
-        setTooltipOffset(Number(value) ?? offset)
+        setTooltipOffset(value === null ? offset : Number(value))
       },
       wrapper: (value) => {
-        setTooltipWrapper((value as WrapperType) ?? wrapper)
+        setTooltipWrapper((value as WrapperType) ?? 'div')
       },
       events: (value) => {
-        const parsedEvents = value?.split(' ')
-        setTooltipEvents((parsedEvents as EventsType[]) ?? events)
+        const parsed = value?.split(' ') as EventsType[]
+        setTooltipEvents(parsed ?? events)
       },
       'position-strategy': (value) => {
         setTooltipPositionStrategy((value as PositionStrategy) ?? positionStrategy)
       },
       'delay-show': (value) => {
-        setTooltipDelayShow(Number(value) ?? delayShow)
+        setTooltipDelayShow(value === null ? delayShow : Number(value))
       },
       'delay-hide': (value) => {
-        setTooltipDelayHide(Number(value) ?? delayHide)
+        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]) => {
-      const formattedKey = key.replace(/^data-tooltip-/, '') as DataAttribute
-      handleDataAttributes[formattedKey]?.(value)
+      handleDataAttributes[key as DataAttribute]?.(value)
     })
   }
 
-  const getElementSpecificAttributeKeyAndValueParsed = ({
-    element,
-    attributeName,
-  }: {
-    element: HTMLElement
-    attributeName: string
-  }) => {
-    return { [attributeName]: element.getAttribute(attributeName) }
-  }
-
   useEffect(() => {
     if (content) {
       setTooltipContent(content)
@@ -130,42 +124,35 @@ const TooltipController = ({
       return () => {}
     }
 
-    // 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: MutationCallback = (mutationList) => {
       mutationList.forEach((mutation) => {
-        if (!activeAnchor.current) {
-          return
-        }
-        if (mutation.type !== 'attributes' || !mutation.attributeName) {
+        if (
+          !activeAnchor.current ||
+          mutation.type !== 'attributes' ||
+          !mutation.attributeName?.startsWith('data-tooltip-')
+        ) {
           return
         }
-        const attributeKeyAndValue = getElementSpecificAttributeKeyAndValueParsed({
-          element: activeAnchor.current,
-          attributeName: mutation.attributeName,
-        })
-        applyAllDataAttributesFromAnchorElement(attributeKeyAndValue)
+        // 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)
 
-    elementRefs.forEach((ref) => {
-      if (!ref.current) {
-        return
-      }
-      // Start observing the target nodes for configured mutations
-      observer.observe(ref.current, observerConfig)
-    })
+    // 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 () => {
@@ -174,15 +161,7 @@ const TooltipController = ({
     }
   }, [anchorRefs, activeAnchor, anchorId])
 
-  useEffect(() => {
-    if (!activeAnchor.current) {
-      return
-    }
-    const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor.current)
-    applyAllDataAttributesFromAnchorElement(dataAttributes)
-  }, [activeAnchor])
-
-  const props = {
+  const props: ITooltip = {
     id,
     anchorId,
     className,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -12,7 +12,7 @@ import type {
 export interface ITooltipController {
   className?: string
   classNameArrow?: string
-  content?: string | number
+  content?: string
   html?: string
   place?: PlacesType
   offset?: number
@@ -33,7 +33,7 @@ export interface ITooltipController {
 declare module 'react' {
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     'data-tooltip-place'?: PlacesType
-    'data-tooltip-content'?: string | number
+    'data-tooltip-content'?: string
     'data-tooltip-html'?: string
     'data-tooltip-variant'?: VariantType
     'data-tooltip-offset'?: number

src/components/TooltipProvider/TooltipProviderTypes.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject, ReactElement, RefObject } from 'react'
-import type { ITooltipController } from '../TooltipController/TooltipControllerTypes'
+import type { ITooltipController } from 'components/TooltipController/TooltipControllerTypes'
 
 export type AnchorRef = RefObject<HTMLElement>