react-tooltip 5.26.1 → 5.26.3

package/dist/react-tooltip.umd.js

@@ -103,6 +103,96 @@
         injected[type] = false;
     }
 
+    const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
+        dom.offset(Number(offsetValue)),
+        dom.flip({
+            fallbackAxisSideDirection: 'start',
+        }),
+        dom.shift({ padding: 5 }),
+    ], border, }) => {
+        if (!elementReference) {
+            // elementReference can be null or undefined and we will not compute the position
+            // eslint-disable-next-line no-console
+            // console.error('The reference element for tooltip was not defined: ', elementReference)
+            return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+        }
+        if (tooltipReference === null) {
+            return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+        }
+        const middleware = middlewares;
+        if (tooltipArrowReference) {
+            middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
+            return dom.computePosition(elementReference, tooltipReference, {
+                placement: place,
+                strategy,
+                middleware,
+            }).then(({ x, y, placement, middlewareData }) => {
+                var _a, _b;
+                const styles = { left: `${x}px`, top: `${y}px`, border };
+                /* c8 ignore start */
+                const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+                const staticSide = (_b = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
+                /* c8 ignore end */
+                const borderSide = border && {
+                    borderBottom: border,
+                    borderRight: border,
+                };
+                let borderWidth = 0;
+                if (border) {
+                    const match = `${border}`.match(/(\d+)px/);
+                    if (match === null || match === void 0 ? void 0 : match[1]) {
+                        borderWidth = Number(match[1]);
+                    }
+                    else {
+                        /**
+                         * this means `border` was set without `width`,
+                         * or non-px value (such as `medium`, `thick`, ...)
+                         */
+                        borderWidth = 1;
+                    }
+                }
+                /* c8 ignore start */
+                const arrowStyle = {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    ...borderSide,
+                    [staticSide]: `-${4 + borderWidth}px`,
+                };
+                /* c8 ignore end */
+                return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
+            });
+        }
+        return dom.computePosition(elementReference, tooltipReference, {
+            placement: 'bottom',
+            strategy,
+            middleware,
+        }).then(({ x, y, placement }) => {
+            const styles = { left: `${x}px`, top: `${y}px` };
+            return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
+        });
+    };
+
+    const cssSupports = (property, value) => {
+        const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
+        return hasCssSupports ? window.CSS.supports(property, value) : true;
+    };
+
+    const cssTimeToMs = (time) => {
+        const match = time.match(/^([\d.]+)(ms|s)$/);
+        if (!match) {
+            return 0;
+        }
+        const [, amount, unit] = match;
+        return Number(amount) * (unit === 'ms' ? 1 : 1000);
+    };
+
     /* eslint-disable @typescript-eslint/no-explicit-any */
     /**
      * This function debounce the received function
@@ -121,7 +211,7 @@
             };
             if (immediate && !timeout) {
                 /**
-                 * there's not need to clear the timeout
+                 * there's no need to clear the timeout
                  * since we expect it to resolve and set `timeout = null`
                  */
                 func.apply(this, args);
@@ -135,15 +225,70 @@
             }
         };
         debounced.cancel = () => {
+            /* c8 ignore start */
             if (!timeout) {
                 return;
             }
+            /* c8 ignore end */
             clearTimeout(timeout);
             timeout = null;
         };
         return debounced;
     };
 
+    const isObject = (object) => {
+        return object !== null && !Array.isArray(object) && typeof object === 'object';
+    };
+    const deepEqual = (object1, object2) => {
+        if (object1 === object2) {
+            return true;
+        }
+        if (Array.isArray(object1) && Array.isArray(object2)) {
+            if (object1.length !== object2.length) {
+                return false;
+            }
+            return object1.every((val, index) => deepEqual(val, object2[index]));
+        }
+        if (Array.isArray(object1) !== Array.isArray(object2)) {
+            return false;
+        }
+        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) => deepEqual(object1[key], object2[key]));
+    };
+
+    const isScrollable = (node) => {
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
+            const value = style.getPropertyValue(propertyName);
+            return value === 'auto' || value === 'scroll';
+        });
+    };
+    const getScrollParent = (node) => {
+        if (!node) {
+            return null;
+        }
+        let currentParent = node.parentElement;
+        while (currentParent) {
+            if (isScrollable(currentParent)) {
+                return currentParent;
+            }
+            currentParent = currentParent.parentElement;
+        }
+        return document.scrollingElement || document.documentElement;
+    };
+
+    const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
     const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
     const DEFAULT_CONTEXT_DATA = {
         anchorRefs: new Set(),
@@ -242,115 +387,6 @@
         return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
     };
 
-    const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-    const isScrollable = (node) => {
-        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-            return false;
-        }
-        const style = getComputedStyle(node);
-        return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
-            const value = style.getPropertyValue(propertyName);
-            return value === 'auto' || value === 'scroll';
-        });
-    };
-    const getScrollParent = (node) => {
-        if (!node) {
-            return null;
-        }
-        let currentParent = node.parentElement;
-        while (currentParent) {
-            if (isScrollable(currentParent)) {
-                return currentParent;
-            }
-            currentParent = currentParent.parentElement;
-        }
-        return document.scrollingElement || document.documentElement;
-    };
-
-    const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
-        dom.offset(Number(offsetValue)),
-        dom.flip({
-            fallbackAxisSideDirection: 'start',
-        }),
-        dom.shift({ padding: 5 }),
-    ], border, }) => {
-        if (!elementReference) {
-            // elementReference can be null or undefined and we will not compute the position
-            // eslint-disable-next-line no-console
-            // console.error('The reference element for tooltip was not defined: ', elementReference)
-            return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
-        }
-        if (tooltipReference === null) {
-            return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
-        }
-        const middleware = middlewares;
-        if (tooltipArrowReference) {
-            middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
-            return dom.computePosition(elementReference, tooltipReference, {
-                placement: place,
-                strategy,
-                middleware,
-            }).then(({ x, y, placement, middlewareData }) => {
-                var _a, _b;
-                const styles = { left: `${x}px`, top: `${y}px`, border };
-                const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
-                const staticSide = (_b = {
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right',
-                }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
-                const borderSide = border && {
-                    borderBottom: border,
-                    borderRight: border,
-                };
-                let borderWidth = 0;
-                if (border) {
-                    const match = `${border}`.match(/(\d+)px/);
-                    if (match === null || match === void 0 ? void 0 : match[1]) {
-                        borderWidth = Number(match[1]);
-                    }
-                    else {
-                        /**
-                         * this means `border` was set without `width`, or non-px value
-                         */
-                        borderWidth = 1;
-                    }
-                }
-                const arrowStyle = {
-                    left: arrowX != null ? `${arrowX}px` : '',
-                    top: arrowY != null ? `${arrowY}px` : '',
-                    right: '',
-                    bottom: '',
-                    ...borderSide,
-                    [staticSide]: `-${4 + borderWidth}px`,
-                };
-                return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
-            });
-        }
-        return dom.computePosition(elementReference, tooltipReference, {
-            placement: 'bottom',
-            strategy,
-            middleware,
-        }).then(({ x, y, placement }) => {
-            const styles = { left: `${x}px`, top: `${y}px` };
-            return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
-        });
-    };
-
-    const cssTimeToMs = (time) => {
-        const match = time.match(/^([\d.]+)(m?s?)$/);
-        if (!match) {
-            return 0;
-        }
-        const [, amount, unit] = match;
-        if (unit !== 's' && unit !== 'ms') {
-            return 0;
-        }
-        return Number(amount) * (unit === 'ms' ? 1 : 1000);
-    };
-
     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"};
@@ -366,9 +402,11 @@
         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 +564,11 @@
                 }, transitionShowDelay + 25);
             }
         }, [show]);
+        const handleComputedPosition = (newComputedPosition) => {
+            setComputedPosition((oldComputedPosition) => deepEqual(oldComputedPosition, newComputedPosition)
+                ? oldComputedPosition
+                : newComputedPosition);
+        };
         const handleShowTooltipDelayed = (delay = delayShow) => {
             if (tooltipShowDelayTimerRef.current) {
                 clearTimeout(tooltipShowDelayTimerRef.current);
@@ -618,13 +661,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) => {
@@ -717,13 +754,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,
@@ -1066,7 +1097,7 @@
             }
         }, [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) {
@@ -1098,10 +1129,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);
                 }
@@ -1113,12 +1144,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,
@@ -1130,11 +1161,6 @@
         return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
     };
 
-    const cssSupports = (property, value) => {
-        const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
-        return hasCssSupports ? window.CSS.supports(property, value) : true;
-    };
-
     const TooltipController = React__default["default"].forwardRef(({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
         const [tooltipContent, setTooltipContent] = React.useState(content);
         const [tooltipHtml, setTooltipHtml] = React.useState(html);
@@ -1255,10 +1281,12 @@
             if (styleInjectionRef.current === disableStyleInjection) {
                 return;
             }
+            /* c8 ignore start */
             {
                 // eslint-disable-next-line no-console
                 console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.');
             }
+            /* c8 ignore end */
         }, [disableStyleInjection]);
         React.useEffect(() => {
             if (typeof window !== 'undefined') {
@@ -1285,10 +1313,12 @@
                     });
                 }
                 catch (_b) {
+                    /* c8 ignore start */
                     {
                         // eslint-disable-next-line no-console
                         console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
                     }
+                    /* c8 ignore end */
                 }
             }
             const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1329,6 +1359,7 @@
             };
         }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
         React.useEffect(() => {
+            /* c8 ignore end */
             if (style === null || style === void 0 ? void 0 : style.border) {
                 // eslint-disable-next-line no-console
                 console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.');