react-tooltip 5.26.0 → 5.26.1-beta.1169.0

package/dist/react-tooltip.umd.js

@@ -351,6 +351,28 @@
         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"};
@@ -361,14 +383,17 @@
     // 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);
@@ -526,6 +551,11 @@
                 }, transitionShowDelay + 25);
             }
         }, [show]);
+        const handleComputedPosition = (newComputedPosition) => {
+            setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
+                ? oldComputedPosition
+                : newComputedPosition);
+        };
         const handleShowTooltipDelayed = (delay = delayShow) => {
             if (tooltipShowDelayTimerRef.current) {
                 clearTimeout(tooltipShowDelayTimerRef.current);
@@ -613,13 +643,7 @@
                 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) => {
@@ -709,13 +733,7 @@
                     // 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,
@@ -1050,7 +1068,7 @@
             }
         }, [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;
         React.useImperativeHandle(forwardRef, () => ({
             open: (options) => {
                 if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1082,10 +1100,10 @@
                 }
             },
             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);
                 }
@@ -1097,12 +1115,12 @@
                 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,