Updates

components/(partials)/PopoverComponent.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
-import { TWUI_MODAL_PROPS } from "../elements/Modal";
+import type { TWUI_MODAL_PROPS } from "../elements/Modal";
 import Paper from "../elements/Paper";
 import _ from "lodash";
 import twuiGrabPopoverStyles from "../(functions)/popver/grab-popover-styles";
@@ -44,17 +44,18 @@ export default function PopoverComponent({
         }
     }, [open, targetElRef, position]);
 
-    let closeTimeout: any;
+    const closeTimeoutRef = React.useRef<any>(null);
 
     const popoverEnterFn = React.useCallback(() => {
         popoverContentActiveRef.current = true;
         popoverTargetActiveRef.current = false;
+        window.clearTimeout(closeTimeoutRef.current);
         setOpen(true);
     }, []);
 
     const popoverLeaveFn = React.useCallback(() => {
-        window.clearTimeout(closeTimeout);
-        closeTimeout = setTimeout(() => {
+        window.clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = setTimeout(() => {
             if (popoverTargetActiveRef.current) {
                 popoverTargetActiveRef.current = false;
                 return;
@@ -71,7 +72,7 @@ export default function PopoverComponent({
             className={twMerge(
                 "max-w-[300px] z-[250]",
                 "twui-popover-content",
-                props.className
+                props.className,
             )}
             style={{ ...style, ...props.style }}
             onMouseEnter={
@@ -110,6 +111,6 @@ export default function PopoverComponent({
             /> */}
             {props.children}
         </Paper>,
-        document.getElementById("twui-popover-root") as HTMLElement
+        document.getElementById("twui-popover-root") as HTMLElement,
     );
 }