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

package/dist/react-tooltip.umd.js

@@ -49,11 +49,7 @@
         }
         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];
@@ -289,6 +285,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(),
@@ -393,7 +397,7 @@
 
     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;
@@ -543,9 +547,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();
@@ -574,9 +576,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);
@@ -587,9 +587,7 @@
             }, delay);
         };
         const handleHideTooltipDelayed = (delay = delayHide) => {
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipHideDelayTimerRef);
             tooltipHideDelayTimerRef.current = setTimeout(() => {
                 if (hoveringTooltip.current) {
                     return;
@@ -620,9 +618,7 @@
             }
             setActiveAnchor(target);
             setProviderActiveAnchor({ current: target });
-            if (tooltipHideDelayTimerRef.current) {
-                clearTimeout(tooltipHideDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipHideDelayTimerRef);
         };
         const handleHideTooltip = () => {
             if (clickable) {
@@ -635,9 +631,7 @@
             else {
                 handleShow(false);
             }
-            if (tooltipShowDelayTimerRef.current) {
-                clearTimeout(tooltipShowDelayTimerRef.current);
-            }
+            clearTimeoutRef(tooltipShowDelayTimerRef);
         };
         const handleTooltipPosition = ({ x, y }) => {
             var _a;
@@ -698,9 +692,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
@@ -777,10 +769,13 @@
             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 = () => {
@@ -818,7 +813,8 @@
             }
             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.
@@ -828,7 +824,8 @@
                 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
@@ -984,12 +981,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;
@@ -1068,12 +1061,8 @@
                 handleShow(true);
             }
             return () => {
-                if (tooltipShowDelayTimerRef.current) {
-                    clearTimeout(tooltipShowDelayTimerRef.current);
-                }
-                if (tooltipHideDelayTimerRef.current) {
-                    clearTimeout(tooltipHideDelayTimerRef.current);
-                }
+                clearTimeoutRef(tooltipShowDelayTimerRef);
+                clearTimeoutRef(tooltipHideDelayTimerRef);
             };
         }, []);
         React.useEffect(() => {
@@ -1096,7 +1085,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]);
@@ -1137,9 +1130,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;
                 }
@@ -1165,7 +1156,7 @@
         return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
     };
 
-    const TooltipController = React__default["default"].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__default["default"].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] = React.useState(content);
         const [tooltipHtml, setTooltipHtml] = React.useState(html);
         const [tooltipPlace, setTooltipPlace] = React.useState(place);
@@ -1438,6 +1429,7 @@
             setIsOpen,
             afterShow,
             afterHide,
+            disableTooltip,
             activeAnchor,
             setActiveAnchor: (anchor) => setActiveAnchor(anchor),
             role,