react-tooltip 5.26.1-beta.1170.0 → 5.26.2

package/dist/react-tooltip.cjs

@@ -353,6 +353,28 @@ const cssTimeToMs = (time) => {
     return Number(amount) * (unit === 'ms' ? 1 : 1000);
 };
 
+const isObject = (object) => {
+    return object !== null && typeof object === 'object';
+};
+const deepEqual = (object1, object2) => {
+    if (!isObject(object1) || !isObject(object2)) {
+        return object1 === object2;
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    return keys1.every((key) => {
+        const val1 = object1[key];
+        const val2 = object2[key];
+        if (isObject(val1) && isObject(val2)) {
+            return deepEqual(val1, val2);
+        }
+        return val1 === val2;
+    });
+};
+
 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"};
@@ -368,9 +390,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
     const tooltipShowDelayTimerRef = React.useRef(null);
     const tooltipHideDelayTimerRef = React.useRef(null);
     const missedTransitionTimerRef = React.useRef(null);
-    const [actualPlacement, setActualPlacement] = React.useState(place);
-    const [inlineStyles, setInlineStyles] = React.useState({});
-    const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
+    const [computedPosition, setComputedPosition] = React.useState({
+        tooltipStyles: {},
+        tooltipArrowStyles: {},
+        place,
+    });
     const [show, setShow] = React.useState(false);
     const [rendered, setRendered] = React.useState(false);
     const [imperativeOptions, setImperativeOptions] = React.useState(null);
@@ -528,10 +552,20 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }, transitionShowDelay + 25);
         }
     }, [show]);
+    const handleComputedPosition = (newComputedPosition) => {
+        setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
+            ? oldComputedPosition
+            : newComputedPosition);
+    };
     const handleShowTooltipDelayed = (delay = delayShow) => {
         if (tooltipShowDelayTimerRef.current) {
             clearTimeout(tooltipShowDelayTimerRef.current);
         }
+        if (rendered) {
+            // if the tooltip is already rendered, ignore delay
+            handleShow(true);
+            return;
+        }
         tooltipShowDelayTimerRef.current = setTimeout(() => {
             handleShow(true);
         }, delay);
@@ -615,13 +649,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             middlewares,
             border,
         }).then((computedStylesData) => {
-            if (Object.keys(computedStylesData.tooltipStyles).length) {
-                setInlineStyles(computedStylesData.tooltipStyles);
-            }
-            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
-                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
-            }
-            setActualPlacement(computedStylesData.place);
+            handleComputedPosition(computedStylesData);
         });
     };
     const handlePointerMove = (event) => {
@@ -714,13 +742,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 // invalidate computed positions after remount
                 return;
             }
-            if (Object.keys(computedStylesData.tooltipStyles).length) {
-                setInlineStyles(computedStylesData.tooltipStyles);
-            }
-            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
-                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
-            }
-            setActualPlacement(computedStylesData.place);
+            handleComputedPosition(computedStylesData);
         });
     }, [
         show,
@@ -896,6 +918,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         closeEvents,
         globalCloseEvents,
         shouldOpenOnClick,
+        delayShow,
+        delayHide,
     ]);
     React.useEffect(() => {
         var _a, _b;
@@ -1054,8 +1078,14 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             setAnchorsBySelect([]);
         }
     }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
+    React.useEffect(() => {
+        if (tooltipShowDelayTimerRef.current) {
+            clearTimeout(tooltipShowDelayTimerRef.current);
+            handleShowTooltipDelayed(delayShow);
+        }
+    }, [delayShow]);
     const actualContent = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.content) !== null && _a !== void 0 ? _a : content;
-    const canShow = show && Object.keys(inlineStyles).length > 0;
+    const canShow = show && Object.keys(computedPosition.tooltipStyles).length > 0;
     React.useImperativeHandle(forwardRef, () => ({
         open: (options) => {
             if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1087,10 +1117,10 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }
         },
         activeAnchor,
-        place: actualPlacement,
+        place: computedPosition.place,
         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-${actualPlacement}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
+    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);
             }
@@ -1102,12 +1132,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             afterHide === null || afterHide === void 0 ? void 0 : afterHide();
         }, style: {
             ...externalStyles,
-            ...inlineStyles,
+            ...computedPosition.tooltipStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
         actualContent,
         React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
-                ...inlineArrowStyles,
+                ...computedPosition.tooltipArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                     : undefined,
@@ -1342,7 +1372,8 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
     let renderedContent = children;
     const contentWrapperRef = React.useRef(null);
     if (render) {
-        const rendered = render({ content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : null, activeAnchor });
+        const actualContent = (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.getAttribute('data-tooltip-content')) || tooltipContent || null;
+        const rendered = render({ content: actualContent, activeAnchor });
         renderedContent = rendered ? (React__default["default"].createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
     }
     else if (tooltipContent) {