react-tooltip 5.27.0 → 5.28.0-beta.1224.rc.0

package/dist/react-tooltip.mjs

@@ -42,11 +42,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];
@@ -282,6 +278,14 @@ const getScrollParent = (node) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : 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(),
@@ -386,7 +390,7 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_ar
 
 const Tooltip = ({ 
 // props
-forwardRef, id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, 
+forwardRef, id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, disableTooltip, 
 // props handled by controller
 content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
     var _a;
@@ -536,9 +540,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();
@@ -567,9 +569,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             : 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);
@@ -580,9 +580,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }, delay);
     };
     const handleHideTooltipDelayed = (delay = delayHide) => {
-        if (tooltipHideDelayTimerRef.current) {
-            clearTimeout(tooltipHideDelayTimerRef.current);
-        }
+        clearTimeoutRef(tooltipHideDelayTimerRef);
         tooltipHideDelayTimerRef.current = setTimeout(() => {
             if (hoveringTooltip.current) {
                 return;
@@ -613,9 +611,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
         setActiveAnchor(target);
         setProviderActiveAnchor({ current: target });
-        if (tooltipHideDelayTimerRef.current) {
-            clearTimeout(tooltipHideDelayTimerRef.current);
-        }
+        clearTimeoutRef(tooltipHideDelayTimerRef);
     };
     const handleHideTooltip = () => {
         if (clickable) {
@@ -628,9 +624,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         else {
             handleShow(false);
         }
-        if (tooltipShowDelayTimerRef.current) {
-            clearTimeout(tooltipShowDelayTimerRef.current);
-        }
+        clearTimeoutRef(tooltipShowDelayTimerRef);
     };
     const handleTooltipPosition = ({ x, y }) => {
         var _a;
@@ -691,9 +685,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             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
@@ -770,10 +762,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         var _a, _b;
         const elementRefs = new Set(anchorRefs);
         anchorsBySelect.forEach((anchor) => {
+            if (disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(anchor)) {
+                return;
+            }
             elementRefs.add({ current: anchor });
         });
         const anchorById = document.querySelector(`[id='${anchorId}']`);
-        if (anchorById) {
+        if (anchorById && !(disableTooltip === null || disableTooltip === void 0 ? void 0 : disableTooltip(anchorById))) {
             elementRefs.add({ current: anchorById });
         }
         const handleScrollResize = () => {
@@ -811,7 +806,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
         const enabledEvents = [];
         const handleClickOpenTooltipAnchor = (event) => {
-            if (show && (event === null || event === void 0 ? void 0 : event.target) === activeAnchor) {
+            var _a;
+            if (show && ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains(activeAnchor))) {
                 /**
                  * ignore clicking the anchor that was used to open the tooltip.
                  * this avoids conflict with the click close event.
@@ -821,7 +817,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             handleShowTooltip(event);
         };
         const handleClickCloseTooltipAnchor = (event) => {
-            if (!show || (event === null || event === void 0 ? void 0 : event.target) !== activeAnchor) {
+            var _a;
+            if (!show || !((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.contains(activeAnchor))) {
                 /**
                  * ignore clicking the anchor that was NOT used to open the tooltip.
                  * this avoids closing the tooltip when clicking on a
@@ -977,12 +974,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;
@@ -1061,12 +1054,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);
         };
     }, []);
     useEffect(() => {
@@ -1089,7 +1078,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
     }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
     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]);
@@ -1130,9 +1123,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: classNames('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;
             }
@@ -1158,7 +1149,7 @@ const TooltipContent = ({ content }) => {
     return React.createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
+const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, disableTooltip, role = 'tooltip', }, ref) => {
     const [tooltipContent, setTooltipContent] = useState(content);
     const [tooltipHtml, setTooltipHtml] = useState(html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
@@ -1431,6 +1422,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         setIsOpen,
         afterShow,
         afterHide,
+        disableTooltip,
         activeAnchor,
         setActiveAnchor: (anchor) => setActiveAnchor(anchor),
         role,