react-tooltip 5.26.0 → 5.26.1-beta.1169.0

package/dist/react-tooltip.mjs

@@ -344,6 +344,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"};
@@ -354,14 +376,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 = useRef(null);
     const tooltipArrowRef = useRef(null);
     const tooltipShowDelayTimerRef = useRef(null);
     const tooltipHideDelayTimerRef = useRef(null);
     const missedTransitionTimerRef = useRef(null);
-    const [actualPlacement, setActualPlacement] = useState(place);
-    const [inlineStyles, setInlineStyles] = useState({});
-    const [inlineArrowStyles, setInlineArrowStyles] = useState({});
+    const [computedPosition, setComputedPosition] = useState({
+        tooltipStyles: {},
+        tooltipArrowStyles: {},
+        place,
+    });
     const [show, setShow] = useState(false);
     const [rendered, setRendered] = useState(false);
     const [imperativeOptions, setImperativeOptions] = useState(null);
@@ -519,6 +544,11 @@ 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);
@@ -606,13 +636,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) => {
@@ -702,13 +726,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,
@@ -1043,7 +1061,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
     }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect]);
     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;
     useImperativeHandle(forwardRef, () => ({
         open: (options) => {
             if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1075,10 +1093,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.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) => {
+    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);
             }
@@ -1090,12 +1108,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.createElement(WrapperElement, { className: classNames('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,