react-tooltip 6.0.0-beta.1179.rc.0 → 6.0.0-beta.1179.rc.2

package/README.md

@@ -54,9 +54,9 @@ React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=
 
 #### Silver Sponsors ✪
 
-<a href="https://dopt.com/?source=react-tooltip">
-  <img alt="Dopt" style="height: 200px; width: 200px;" src="docs/static/img/sponsors/dopt.png" />
-</a>
+<!-- <a href="#">
+  <img alt="Slot" style="height: 200px; width: 200px;" src="docs/static/img/sponsors/slot.png" />
+</a> -->
 
 ## Powered by
 

package/dist/react-tooltip.cjs

@@ -44,11 +44,7 @@ function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, type = 'base', re
     }
     const { insertAt } = ref;
     if (document.getElementById(id)) {
-        // this should never happen because of `injected[type]`
-        {
-            // eslint-disable-next-line no-console
-            console.warn(`[react-tooltip] Element with id '${id}' already exists. Call \`removeStyle()\` first`);
-        }
+        // this could happen in cases the tooltip is imported by multiple js modules
         return;
     }
     const head = document.head || document.getElementsByTagName('head')[0];
@@ -152,11 +148,6 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
     });
 };
 
-const cssSupports = (property, value) => {
-    const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
-    return hasCssSupports ? window.CSS.supports(property, value) : true;
-};
-
 const cssTimeToMs = (time) => {
     const match = time.match(/^([\d.]+)(m?s)$/);
     if (!match) {
@@ -178,11 +169,8 @@ const debounce = (func, wait, immediate) => {
     const debounced = function debounced(...args) {
         const later = () => {
             timeout = null;
-            if (!immediate) {
-                func.apply(this, args);
-            }
         };
-        if (immediate && !timeout) {
+        if (!timeout) {
             /**
              * there's no need to clear the timeout
              * since we expect it to resolve and set `timeout = null`
@@ -190,12 +178,6 @@ const debounce = (func, wait, immediate) => {
             func.apply(this, args);
             timeout = setTimeout(later, wait);
         }
-        if (!immediate) {
-            if (timeout) {
-                clearTimeout(timeout);
-            }
-            timeout = setTimeout(later, wait);
-        }
     };
     debounced.cancel = () => {
         /* c8 ignore start */
@@ -262,6 +244,14 @@ const getScrollParent = (node) => {
 
 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;
+    }
+};
+
 var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
 
 var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
@@ -344,9 +334,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         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();
@@ -564,8 +552,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         };
         // debounce handler to prevent call twice when
         // mouse enter and focus events being triggered toggether
-        const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
-        const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
+        const internalDebouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
+        const internalDebouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
         // If either of the functions is called while the other is still debounced,
         // reset the timeout. Otherwise if there is a sub-50ms (leave A, enter B, leave B)
         // sequence of events, the tooltip will stay open because the hide debounce
@@ -697,7 +685,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }
             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) {
@@ -841,12 +829,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                             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;
@@ -965,12 +949,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             handleShow(true);
         }
         return () => {
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipShowDelayTimerRef);
+            clearTimeoutRef(tooltipHideDelayTimerRef);
         };
     }, [defaultIsOpen, handleShow]);
     React.useEffect(() => {
@@ -993,7 +973,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
     }, [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, handleShowTooltipDelayed]);
@@ -1034,9 +1018,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         isOpen: Boolean(rendered && !hidden && actualContent && canShow),
     }));
     return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: role, className: clsx('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;
             }
@@ -1226,18 +1208,10 @@ const TooltipController = React.forwardRef(({ id, anchorSelect, content, render,
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.');
         }
-        if (border && !cssSupports('border', `${border}`)) {
-            // eslint-disable-next-line no-console
-            console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`);
-        }
         if (style === null || style === void 0 ? void 0 : style.opacity) {
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.');
         }
-        if (opacity && !cssSupports('opacity', `${opacity}`)) {
-            // eslint-disable-next-line no-console
-            console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`);
-        }
     }, [border, opacity, style === null || style === void 0 ? void 0 : style.border, style === null || style === void 0 ? void 0 : style.opacity]);
     /**
      * content priority: children < render or content < html