feat: Use autoUpdate method from floating-ui/dom

Author: Tanmay Shetty

package.json

@@ -59,7 +59,6 @@
     "@types/css-modules": "^1.0.2",
     "@types/jest": "29.4.0",
     "@types/node": "^18.15.3",
-    "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
@@ -125,6 +124,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
+    "@types/react": "^18.2.17",
     "classnames": "^2.3.0"
   }
 }

src/components/Tooltip/Tooltip.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
+import { autoUpdate } from '@floating-ui/dom'
 import { getScrollParent } from 'utils/get-scroll-parent'
 import { computeTooltipPosition } from 'utils/compute-positions'
 import coreStyles from './core-styles.module.css'
@@ -335,7 +336,6 @@ const Tooltip = ({
       setActualPlacement(computedStylesData.place as PlacesType)
     })
   }
-  const debouncedUpdateTooltipPosition = debounce(updateTooltipPosition, 100, true)
 
   useEffect(() => {
     const elementRefs = new Set(anchorRefs)
@@ -361,10 +361,20 @@ const Tooltip = ({
       anchorScrollParent?.addEventListener('scroll', handleScrollResize)
       tooltipScrollParent?.addEventListener('scroll', handleScrollResize)
     }
+    let updateTooltipCleanup: null | (() => void) = null
     if (closeOnResize) {
       window.addEventListener('resize', handleScrollResize)
-    } else {
-      window.addEventListener('resize', debouncedUpdateTooltipPosition)
+    } else if (activeAnchor && tooltipRef.current) {
+      updateTooltipCleanup = autoUpdate(
+        activeAnchor as HTMLElement,
+        tooltipRef.current as HTMLElement,
+        updateTooltipPosition,
+        {
+          ancestorResize: true,
+          elementResize: true,
+          layoutShift: true,
+        },
+      )
     }
 
     const handleEsc = (event: KeyboardEvent) => {
@@ -426,7 +436,7 @@ const Tooltip = ({
       if (closeOnResize) {
         window.removeEventListener('resize', handleScrollResize)
       } else {
-        window.removeEventListener('resize', debouncedUpdateTooltipPosition)
+        updateTooltipCleanup?.()
       }
       if (shouldOpenOnClick) {
         window.removeEventListener('click', handleClickOutsideAnchors)