From a61e684168c22ad0498bf8023d3ec0ff9885af6d Mon Sep 17 00:00:00 2001
From: SerhiiTsybulskyi <c4r0n0s@gmail.com>
Date: Thu, 13 Jun 2024 11:02:49 +0300
Subject: [PATCH] fix tooltip position after scroll

---
 src/layers/Tooltip/Tooltip.tsx                 |  4 ++--
 .../ConnectedOverlay/ConnectedOverlay.tsx      |  4 ++--
 .../ConnectedOverlayContent.tsx                |  4 ++--
 src/utils/Position/usePosition.tsx             | 18 +++++++++---------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx
index c2e880b4..e142d91d 100644
--- a/src/layers/Tooltip/Tooltip.tsx
+++ b/src/layers/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState, useRef, useEffect, ReactNode } from 'react';
 import { ConnectedOverlay, TriggerTypes } from '@/utils/Overlay';
-import { Placement, ReferenceObject } from '@/utils/Position';
+import { Modifiers, Placement, ReferenceObject } from '@/utils/Position';
 import { motion } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
 import { useTooltipState } from './useTooltipState';
@@ -56,7 +56,7 @@ export interface TooltipProps {
   /**
    * floating-ui modifiers.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * External setter for visibility.
diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
index 4b677e11..ef692ed1 100644
--- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
+++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
@@ -9,7 +9,7 @@ import React, {
   useMemo
 } from 'react';
 import { TriggerTypes, OverlayTrigger } from '@/utils/Overlay/OverlayTrigger';
-import { Placement, ReferenceProp } from '@/utils/Position';
+import { Modifiers, Placement, ReferenceProp } from '@/utils/Position';
 import { AnimatePresence } from 'framer-motion';
 import { OverlayContext } from '@/utils/Overlay/OverlayContext';
 import {
@@ -93,7 +93,7 @@ export interface ConnectedOverlayProps {
   /**
    * Position modifiers.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * Overlay should follow cursor or not.
diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
index 65a3b3bb..606071fc 100644
--- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
+++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
@@ -9,7 +9,7 @@ import React, {
   LegacyRef
 } from 'react';
 import { useExitListener } from '@/utils/ExitListener';
-import { Placement, usePosition } from '@/utils/Position';
+import { Modifiers, Placement, usePosition } from '@/utils/Position';
 import { OverlayPortal, portals } from '@/utils/Overlay/OverlayPortal';
 import { useId } from '@/utils/useId';
 
@@ -21,7 +21,7 @@ export interface ConnectedOverlayContentProps {
   /**
    * Modifiers to adjust the behavior of the overlay content.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * If true, the overlay content will follow the cursor.
diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx
index 1b1bb828..41cc3869 100644
--- a/src/utils/Position/usePosition.tsx
+++ b/src/utils/Position/usePosition.tsx
@@ -62,7 +62,7 @@ export const usePosition = ({
   });
 
   useEffect(() => {
-    if (isVirtualElement && reference) {
+    if (isVirtualElement && reference && !followCursor) {
       const refObject = reference as ReferenceObject;
       refs.setPositionReference({
         getBoundingClientRect() {
@@ -79,22 +79,22 @@ export const usePosition = ({
         }
       });
     }
-  }, [reference, refs, isVirtualElement]);
+  }, [reference, refs, isVirtualElement, followCursor]);
 
   const onMouseMove = useCallback(
-    ({ pageX, pageY }: MouseEvent) => {
+    ({ clientX, clientY }: MouseEvent) => {
       // Virtual reference object for cursor position.
       refs.setPositionReference({
         getBoundingClientRect() {
           return {
             width: 0,
             height: 0,
-            x: pageX,
-            y: pageY,
-            left: pageX,
-            top: pageY,
-            right: pageX,
-            bottom: pageY
+            x: clientX,
+            y: clientY,
+            left: clientX,
+            top: clientY,
+            right: clientX,
+            bottom: clientY
           };
         }
       });