react-tooltip 5.26.4 → 5.27.0-beta.1205.rc.0

package/dist/react-tooltip.umd.js

@@ -289,6 +289,14 @@
 
     const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
+    const clearTimeoutRef = (ref) => {
+        if (ref.current) {
+            clearTimeout(ref.current);
+            // eslint-disable-next-line no-param-reassign
+            ref.current = null;
+        }
+    };
+
     const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
     const DEFAULT_CONTEXT_DATA = {
         anchorRefs: new Set(),
@@ -427,8 +435,9 @@
         const actualOpenEvents = openEvents
             ? { ...openEvents }
             : {
-                mouseenter: true,
+                mouseover: true,
                 focus: true,
+                mouseenter: false,
                 click: false,
                 dblclick: false,
                 mousedown: false,
@@ -437,14 +446,16 @@
             Object.assign(actualOpenEvents, {
                 mouseenter: false,
                 focus: false,
+                mouseover: false,
                 click: true,
             });
         }
         const actualCloseEvents = closeEvents
             ? { ...closeEvents }
             : {
-                mouseleave: true,
+                mouseout: true,
                 blur: true,
+                mouseleave: false,
                 click: false,
                 dblclick: false,
                 mouseup: false,
@@ -453,6 +464,7 @@
             Object.assign(actualCloseEvents, {
                 mouseleave: false,
                 blur: false,
+                mouseout: false,
             });
         }
         const actualGlobalCloseEvents = globalCloseEvents
@@ -539,9 +551,7 @@
             if (show === wasShowing.current) {
                 return;
             }
-            if (missedTransitionTimerRef.current) {
-                clearTimeout(missedTransitionTimerRef.current);
-            }
+            clearTimeoutRef(missedTransitionTimerRef);
             wasShowing.current = show;
             if (show) {
                 afterShow === null || afterShow === void 0 ? void 0 : afterShow();
@@ -570,9 +580,7 @@
                 : newComputedPosition);
         };
         const handleShowTooltipDelayed = (delay = delayShow) => {
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipShowDelayTimerRef);
             if (rendered) {
                 // if the tooltip is already rendered, ignore delay
                 handleShow(true);
@@ -583,9 +591,7 @@
             }, delay);
         };
         const handleHideTooltipDelayed = (delay = delayHide) => {
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipHideDelayTimerRef);
             tooltipHideDelayTimerRef.current = setTimeout(() => {
                 if (hoveringTooltip.current) {
                     return;
@@ -616,9 +622,7 @@
             }
             setActiveAnchor(target);
             setProviderActiveAnchor({ current: target });
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipHideDelayTimerRef);
         };
         const handleHideTooltip = () => {
             if (clickable) {
@@ -631,9 +635,7 @@
             else {
                 handleShow(false);
             }
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipShowDelayTimerRef);
         };
         const handleTooltipPosition = ({ x, y }) => {
             var _a;
@@ -694,9 +696,7 @@
                 return;
             }
             handleShow(false);
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipShowDelayTimerRef);
         };
         // debounce handler to prevent call twice when
         // mouse enter and focus events being triggered toggether
@@ -834,7 +834,7 @@
                 }
                 handleHideTooltip();
             };
-            const regularEvents = ['mouseenter', 'mouseleave', 'focus', 'blur'];
+            const regularEvents = ['mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'focus', 'blur'];
             const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'];
             Object.entries(actualOpenEvents).forEach(([event, enabled]) => {
                 if (!enabled) {
@@ -980,12 +980,8 @@
                                 setRendered(false);
                                 handleShow(false);
                                 setActiveAnchor(null);
-                                if (tooltipShowDelayTimerRef.current) {
-                                    clearTimeout(tooltipShowDelayTimerRef.current);
-                                }
-                                if (tooltipHideDelayTimerRef.current) {
-                                    clearTimeout(tooltipHideDelayTimerRef.current);
-                                }
+                                clearTimeoutRef(tooltipShowDelayTimerRef);
+                                clearTimeoutRef(tooltipHideDelayTimerRef);
                                 return true;
                             }
                             return false;
@@ -1064,12 +1060,8 @@
                 handleShow(true);
             }
             return () => {
-                if (tooltipShowDelayTimerRef.current) {
-                    clearTimeout(tooltipShowDelayTimerRef.current);
-                }
-                if (tooltipHideDelayTimerRef.current) {
-                    clearTimeout(tooltipHideDelayTimerRef.current);
-                }
+                clearTimeoutRef(tooltipShowDelayTimerRef);
+                clearTimeoutRef(tooltipHideDelayTimerRef);
             };
         }, []);
         React.useEffect(() => {
@@ -1092,7 +1084,11 @@
         }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
         React.useEffect(() => {
             if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
+                /**
+                 * if the delay changes while the tooltip is waiting to show,
+                 * reset the timer with the new delay
+                 */
+                clearTimeoutRef(tooltipShowDelayTimerRef);
                 handleShowTooltipDelayed(delayShow);
             }
         }, [delayShow]);
@@ -1133,9 +1129,7 @@
             isOpen: Boolean(rendered && !hidden && actualContent && canShow),
         }));
         return rendered && !hidden && actualContent ? (React__default["default"].createElement(WrapperElement, { id: id, role: role, className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${computedPosition.place}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
-                if (missedTransitionTimerRef.current) {
-                    clearTimeout(missedTransitionTimerRef.current);
-                }
+                clearTimeoutRef(missedTransitionTimerRef);
                 if (show || event.propertyName !== 'opacity') {
                     return;
                 }