@seeqdev/qomponents 0.0.130 → 0.0.131

package/dist/index.esm.js

@@ -14735,11 +14735,18 @@ const borderStyles$2 = [
 const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
 const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
-    let timeout;
+    const timeout = useRef(null);
     const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
+    const clearHoverTimeout = () => {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+            timeout.current = null;
+        }
+    };
     const onHoverStart = () => {
         if (isHoverEnabled) {
-            timeout = setTimeout(() => {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
                 setIsHoveredOpen(true);
                 onOpenChange && onOpenChange(true);
             }, hoverOpenDelay);
@@ -14747,13 +14754,14 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     };
     const onHoverEnd = () => {
         if (isHoverEnabled) {
-            timeout = setTimeout(() => {
+            clearHoverTimeout();
+            timeout.current = setTimeout(() => {
                 setIsHoveredOpen(false);
                 onOpenChange && onOpenChange(false);
             }, 200);
         }
     };
-    React.useEffect(() => () => timeout && clearTimeout(timeout), []);
+    React.useEffect(() => clearHoverTimeout, []);
     const renderContent = () => {
         return (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
             React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out