react-tooltip 5.26.1 → 5.26.3

package/dist/react-tooltip.mjs

@@ -5,7 +5,7 @@
 * @copyright ReactTooltip Team
 * @license MIT
 */
-import React, { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useLayoutEffect, useEffect, createContext, useState, useCallback, useMemo, useContext, useRef, useImperativeHandle } from 'react';
 import { arrow, computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 import classNames from 'classnames';
 
@@ -96,6 +96,96 @@ function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, } = {})
     injected[type] = false;
 }
 
+const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
+    offset(Number(offsetValue)),
+    flip({
+        fallbackAxisSideDirection: 'start',
+    }),
+    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(arrow({ element: tooltipArrowReference, padding: 5 }));
+        return 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 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
@@ -114,7 +204,7 @@ const debounce = (func, wait, immediate) => {
         };
         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);
@@ -128,15 +218,70 @@ const debounce = (func, wait, immediate) => {
         }
     };
     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' ? useLayoutEffect : useEffect;
+
 const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
 const DEFAULT_CONTEXT_DATA = {
     anchorRefs: new Set(),
@@ -235,115 +380,6 @@ const TooltipWrapper = ({ tooltipId, children, className, place, content, html,
     return (React.createElement("span", { ref: anchorRef, className: classNames('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' ? useLayoutEffect : 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 = [
-    offset(Number(offsetValue)),
-    flip({
-        fallbackAxisSideDirection: 'start',
-    }),
-    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(arrow({ element: tooltipArrowReference, padding: 5 }));
-        return 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 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"};
@@ -359,9 +395,11 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
     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 +557,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);
@@ -611,13 +654,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) => {
@@ -710,13 +747,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,
@@ -1059,7 +1090,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         }
     }, [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;
     useImperativeHandle(forwardRef, () => ({
         open: (options) => {
             if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
@@ -1091,10 +1122,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);
             }
@@ -1106,12 +1137,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,
@@ -1123,11 +1154,6 @@ const TooltipContent = ({ content }) => {
     return React.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.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] = useState(content);
     const [tooltipHtml, setTooltipHtml] = useState(html);
@@ -1248,10 +1274,12 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         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]);
     useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -1278,10 +1306,12 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
                 });
             }
             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}']`);
@@ -1322,6 +1352,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         };
     }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
     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.');