react-tooltip 5.26.1-beta.1169.0 → 5.26.1

package/dist/react-tooltip.mjs

@@ -344,28 +344,6 @@ 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"};
@@ -376,17 +354,14 @@ forwardRef, id, className, classNameArrow, variant = 'dark', anchorId, anchorSel
 // props handled by controller
 content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
     var _a;
-    console.log('render');
     const tooltipRef = useRef(null);
     const tooltipArrowRef = useRef(null);
     const tooltipShowDelayTimerRef = useRef(null);
     const tooltipHideDelayTimerRef = useRef(null);
     const missedTransitionTimerRef = useRef(null);
-    const [computedPosition, setComputedPosition] = useState({
-        tooltipStyles: {},
-        tooltipArrowStyles: {},
-        place,
-    });
+    const [actualPlacement, setActualPlacement] = useState(place);
+    const [inlineStyles, setInlineStyles] = useState({});
+    const [inlineArrowStyles, setInlineArrowStyles] = useState({});
     const [show, setShow] = useState(false);
     const [rendered, setRendered] = useState(false);
     const [imperativeOptions, setImperativeOptions] = useState(null);
@@ -544,15 +519,15 @@ 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);
@@ -636,7 +611,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             middlewares,
             border,
         }).then((computedStylesData) => {
-            handleComputedPosition(computedStylesData);
+            if (Object.keys(computedStylesData.tooltipStyles).length) {
+                setInlineStyles(computedStylesData.tooltipStyles);
+            }
+            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
+            }
+            setActualPlacement(computedStylesData.place);
         });
     };
     const handlePointerMove = (event) => {
@@ -657,6 +638,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             return;
         }
         const target = event.target;
+        if (!target.isConnected) {
+            return;
+        }
         if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
             return;
         }
@@ -726,7 +710,13 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 // invalidate computed positions after remount
                 return;
             }
-            handleComputedPosition(computedStylesData);
+            if (Object.keys(computedStylesData.tooltipStyles).length) {
+                setInlineStyles(computedStylesData.tooltipStyles);
+            }
+            if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+                setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
+            }
+            setActualPlacement(computedStylesData.place);
         });
     }, [
         show,
@@ -902,6 +892,8 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         closeEvents,
         globalCloseEvents,
         shouldOpenOnClick,
+        delayShow,
+        delayHide,
     ]);
     useEffect(() => {
         var _a, _b;
@@ -1060,8 +1052,14 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             setAnchorsBySelect([]);
         }
     }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
+    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(computedPosition.tooltipStyles).length > 0;
+    const canShow = show && Object.keys(inlineStyles).length > 0;
     useImperativeHandle(forwardRef, () => ({
         open: (options) => {
             if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1093,10 +1091,10 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             }
         },
         activeAnchor,
-        place: computedPosition.place,
+        place: actualPlacement,
         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) => {
+    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-${actualPlacement}`, 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);
             }
@@ -1108,12 +1106,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             afterHide === null || afterHide === void 0 ? void 0 : afterHide();
         }, style: {
             ...externalStyles,
-            ...computedPosition.tooltipStyles,
+            ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
         actualContent,
         React.createElement(WrapperElement, { className: classNames('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
-                ...computedPosition.tooltipArrowStyles,
+                ...inlineArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                     : undefined,
@@ -1348,7 +1346,8 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
     let renderedContent = children;
     const contentWrapperRef = 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.createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
     }
     else if (tooltipContent) {