react-tooltip 5.26.1-beta.1168.0 → 5.26.1-beta.1169.0

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"};
@@ -363,14 +385,17 @@ 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 = React.useRef(null);
     const tooltipArrowRef = React.useRef(null);
     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,15 +553,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);
@@ -620,13 +645,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) => {
@@ -716,13 +735,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,
@@ -898,8 +911,6 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         closeEvents,
         globalCloseEvents,
         shouldOpenOnClick,
-        delayShow,
-        delayHide,
     ]);
     React.useEffect(() => {
         var _a, _b;
@@ -1058,14 +1069,8 @@ 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) {
@@ -1097,10 +1102,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);
             }
@@ -1112,12 +1117,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,