From aa704722940de27b1d5944d33e1bcb7f51d06f28 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Wed, 29 Mar 2023 14:21:35 -0300
Subject: [PATCH] feat: tooltip content wrapper and resize observer

---
 src/components/Tooltip/Tooltip.tsx                 | 14 +++++---------
 src/components/Tooltip/TooltipTypes.d.ts           |  2 +-
 .../TooltipController/TooltipController.tsx        | 10 +++++++---
 .../TooltipController/TooltipControllerTypes.d.ts  |  8 ++------
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index c7de5a05..615aa890 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -34,7 +34,7 @@ const Tooltip = ({
   afterHide,
   // props handled by controller
   content,
-  contentRef,
+  contentWrapperRef,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -476,21 +476,17 @@ const Tooltip = ({
   }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position])
 
   useEffect(() => {
-    if (!contentRef?.current) {
+    if (!contentWrapperRef?.current) {
       return () => null
     }
-    const contentObserver = new MutationObserver(() => {
+    const contentObserver = new ResizeObserver(() => {
       updateTooltipPosition()
     })
-    contentObserver.observe(contentRef.current, {
-      attributes: true,
-      childList: true,
-      subtree: true,
-    })
+    contentObserver.observe(contentWrapperRef.current)
     return () => {
       contentObserver.disconnect()
     }
-  }, [content, contentRef?.current])
+  }, [content, contentWrapperRef?.current])
 
   useEffect(() => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index bcdf4970..9026c580 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -40,7 +40,7 @@ export interface ITooltip {
   className?: string
   classNameArrow?: string
   content?: ChildrenType
-  contentRef?: RefObject<HTMLElement>
+  contentWrapperRef?: RefObject<HTMLDivElement>
   place?: PlacesType
   offset?: number
   id?: string
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 4a1916b6..202ac8cd 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -205,9 +205,13 @@ const TooltipController = ({
    * children should be lower priority so that it can be used as the "default" content
    */
   let renderedContent: ChildrenType = children
-  const contentRef = useRef<HTMLElement>(null)
+  const contentWrapperRef = useRef<HTMLDivElement>(null)
   if (render) {
-    renderedContent = render({ ref: contentRef, content: tooltipContent ?? null, activeAnchor })
+    renderedContent = (
+      <div ref={contentWrapperRef} className="react-tooltip-content-wrapper">
+        {render({ content: tooltipContent ?? null, activeAnchor }) as React.ReactNode}
+      </div>
+    )
   } else if (tooltipContent) {
     renderedContent = tooltipContent
   }
@@ -222,7 +226,7 @@ const TooltipController = ({
     className,
     classNameArrow,
     content: renderedContent,
-    contentRef,
+    contentWrapperRef,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,
diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
index 716b89b3..4612bb78 100644
--- a/src/components/TooltipController/TooltipControllerTypes.d.ts
+++ b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -1,4 +1,4 @@
-import type { CSSProperties, RefObject } from 'react'
+import type { CSSProperties } from 'react'
 
 import type {
   PlacesType,
@@ -19,11 +19,7 @@ export interface ITooltipController {
    * @deprecated Use `children` or `render` instead
    */
   html?: string
-  render?: (render: {
-    ref: RefObject<HTMLElement>
-    content: string | null
-    activeAnchor: HTMLElement | null
-  }) => ChildrenType
+  render?: (render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType
   place?: PlacesType
   offset?: number
   id?: string