react-tooltip 5.26.1-beta.1169.0 → 5.26.1

package/dist/react-tooltip.umd.js

@@ -351,28 +351,6 @@
         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"};
@@ -383,17 +361,14 @@
     // 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 [computedPosition, setComputedPosition] = React.useState({
-            tooltipStyles: {},
-            tooltipArrowStyles: {},
-            place,
-        });
+        const [actualPlacement, setActualPlacement] = React.useState(place);
+        const [inlineStyles, setInlineStyles] = React.useState({});
+        const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
         const [show, setShow] = React.useState(false);
         const [rendered, setRendered] = React.useState(false);
         const [imperativeOptions, setImperativeOptions] = React.useState(null);
@@ -551,15 +526,15 @@
                 }, 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);
@@ -643,7 +618,13 @@
                 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) => {
@@ -664,6 +645,9 @@
                 return;
             }
             const target = event.target;
+            if (!target.isConnected) {
+                return;
+            }
             if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
                 return;
             }
@@ -733,7 +717,13 @@
                     // 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,
@@ -909,6 +899,8 @@
             closeEvents,
             globalCloseEvents,
             shouldOpenOnClick,
+            delayShow,
+            delayHide,
         ]);
         React.useEffect(() => {
             var _a, _b;
@@ -1067,8 +1059,14 @@
                 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(computedPosition.tooltipStyles).length > 0;
+        const canShow = show && Object.keys(inlineStyles).length > 0;
         React.useImperativeHandle(forwardRef, () => ({
             open: (options) => {
                 if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1100,10 +1098,10 @@
                 }
             },
             activeAnchor,
-            place: computedPosition.place,
+            place: actualPlacement,
             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-${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__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) => {
                 if (missedTransitionTimerRef.current) {
                     clearTimeout(missedTransitionTimerRef.current);
                 }
@@ -1115,12 +1113,12 @@
                 afterHide === null || afterHide === void 0 ? void 0 : afterHide();
             }, style: {
                 ...externalStyles,
-                ...computedPosition.tooltipStyles,
+                ...inlineStyles,
                 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: {
-                    ...computedPosition.tooltipArrowStyles,
+                    ...inlineArrowStyles,
                     background: arrowColor
                         ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                         : undefined,
@@ -1355,7 +1353,8 @@
         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) {