react-tooltip 5.1.0-beta.1 → 5.1.0

package/dist/react-tooltip.esm.js

@@ -1,4 +1,4 @@
-import require$$0, { createRef, useRef, useState, useEffect, useId } from 'react';
+import require$$0, { createContext, useId, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
 
 var jsxRuntime = {exports: {}};
 
@@ -1384,9 +1384,7 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
-/* eslint-disable func-names */
-/* eslint-disable prefer-rest-params */
-/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * This function debounce the received function
  * @param { function } 	func				Function to be debounced
@@ -1394,19 +1392,17 @@ var classNames = classnames.exports;
  * @param { boolean } 	immediate		Param to define if the function will be executed immediately
  */
 const debounce = (func, wait, immediate) => {
-    let timeout;
-    return function () {
-        // @ts-ignore
-        const context = this;
-        const args = arguments;
+    let timeout = null;
+    return function debounced(...args) {
         const later = () => {
             timeout = null;
             if (!immediate) {
-                func.apply(context, args);
+                func.apply(this, args);
             }
         };
-        // @ts-ignore
-        clearTimeout(timeout);
+        if (timeout) {
+            clearTimeout(timeout);
+        }
         timeout = setTimeout(later, wait);
     };
 };
@@ -1415,6 +1411,101 @@ const TooltipContent = ({ content }) => {
     return jsxRuntime.exports.jsx("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
+const defaultContextData = {
+    anchorRefs: new Set(),
+    activeAnchor: { current: null },
+    attach: () => {
+        /* attach anchor element */
+    },
+    detach: () => {
+        /* detach anchor element */
+    },
+    setActiveAnchor: () => {
+        /* set active anchor */
+    },
+};
+const defaultContextWrapper = Object.assign(() => defaultContextData, defaultContextData);
+const TooltipContext = createContext(defaultContextWrapper);
+const TooltipProvider = ({ children }) => {
+    const defaultTooltipId = useId();
+    const [anchorRefMap, setAnchorRefMap] = useState({
+        [defaultTooltipId]: new Set(),
+    });
+    const [activeAnchorMap, setActiveAnchorMap] = useState({
+        [defaultTooltipId]: { current: null },
+    });
+    const attach = (tooltipId, ...refs) => {
+        setAnchorRefMap((oldMap) => {
+            var _a;
+            const tooltipRefs = (_a = oldMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set();
+            refs.forEach((ref) => tooltipRefs.add(ref));
+            // create new object to trigger re-render
+            return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
+        });
+    };
+    const detach = (tooltipId, ...refs) => {
+        setAnchorRefMap((oldMap) => {
+            const tooltipRefs = oldMap[tooltipId];
+            if (!tooltipRefs) {
+                // tooltip not found
+                // maybe thow error?
+                return oldMap;
+            }
+            refs.forEach((ref) => tooltipRefs.delete(ref));
+            // create new object to trigger re-render
+            return { ...oldMap };
+        });
+    };
+    const setActiveAnchor = (tooltipId, ref) => {
+        setActiveAnchorMap((oldMap) => {
+            var _a;
+            if (((_a = oldMap[tooltipId]) === null || _a === void 0 ? void 0 : _a.current) === ref.current) {
+                return oldMap;
+            }
+            // create new object to trigger re-render
+            return { ...oldMap, [tooltipId]: ref };
+        });
+    };
+    const getTooltipData = useCallback((tooltipId) => {
+        var _a, _b;
+        return ({
+            anchorRefs: (_a = anchorRefMap[tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId]) !== null && _a !== void 0 ? _a : new Set(),
+            activeAnchor: (_b = activeAnchorMap[tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId]) !== null && _b !== void 0 ? _b : { current: null },
+            attach: (...refs) => attach(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ...refs),
+            detach: (...refs) => detach(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ...refs),
+            setActiveAnchor: (ref) => setActiveAnchor(tooltipId !== null && tooltipId !== void 0 ? tooltipId : defaultTooltipId, ref),
+        });
+    }, [defaultTooltipId, anchorRefMap, activeAnchorMap, attach, detach]);
+    const context = useMemo(() => {
+        const contextData = getTooltipData(defaultTooltipId);
+        const contextWrapper = Object.assign((tooltipId) => getTooltipData(tooltipId), contextData);
+        return contextWrapper;
+    }, [getTooltipData]);
+    return jsxRuntime.exports.jsx(TooltipContext.Provider, { value: context, children: children });
+};
+/*
+  // this will use the "global" tooltip (same as `useTooltip()()`)
+  const { anchorRefs, attach, detach } = useTooltip()
+
+  // this will use the tooltip with id `tooltip-id`
+  const { anchorRefs, attach, detach } = useTooltip()('tooltip-id')
+*/
+function useTooltip() {
+    return useContext(TooltipContext);
+}
+
+const TooltipWrapper = ({ tooltipId, children, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
+    const { attach, detach } = useTooltip()(tooltipId);
+    const anchorRef = useRef(null);
+    useEffect(() => {
+        attach(anchorRef);
+        return () => {
+            detach(anchorRef);
+        };
+    }, []);
+    return (jsxRuntime.exports.jsx("span", { ref: anchorRef, "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: children }));
+};
+
 function getSide(placement) {
   return placement.split('-')[0];
 }
@@ -2600,7 +2691,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
-const computeToolTipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', }) => {
+const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', }) => {
     if (!elementReference) {
         // elementReference can be null or undefined and we will not compute the position
         // eslint-disable-next-line no-console
@@ -2618,21 +2709,20 @@ const computeToolTipPosition = async ({ elementReference = null, tooltipReferenc
             strategy,
             middleware,
         }).then(({ x, y, placement, middlewareData }) => {
+            var _a, _b;
             const styles = { left: `${x}px`, top: `${y}px` };
-            // @ts-ignore
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-            const staticSide = {
+            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]];
+            }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
             const arrowStyle = {
                 left: arrowX != null ? `${arrowX}px` : '',
                 top: arrowY != null ? `${arrowY}px` : '',
                 right: '',
                 bottom: '',
-                // @ts-ignore
                 [staticSide]: '-4px',
             };
             return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle };
@@ -2652,16 +2742,19 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","fixed":"styles-module_fi
 
 const Tooltip = ({ 
 // props
-id = useId(), className, classNameArrow, variant = 'dark', anchorId, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', wrapper: WrapperElement = 'div', children = null, delayShow = 0, delayHide = 0, style: externalStyles, 
+id, className, classNameArrow, variant = 'dark', anchorId, place = 'top', offset = 10, events = ['hover'], positionStrategy = 'absolute', wrapper: WrapperElement = 'div', children = null, delayShow = 0, delayHide = 0, style: externalStyles, 
 // props handled by controller
 isHtmlContent = false, content, isOpen, setIsOpen, }) => {
-    const tooltipRef = createRef();
-    const tooltipArrowRef = createRef();
-    const tooltipShowDelayTimerRef = useRef();
-    const tooltipHideDelayTimerRef = useRef();
+    const tooltipRef = useRef(null);
+    const tooltipArrowRef = useRef(null);
+    const tooltipShowDelayTimerRef = useRef(null);
+    const tooltipHideDelayTimerRef = useRef(null);
     const [inlineStyles, setInlineStyles] = useState({});
     const [inlineArrowStyles, setInlineArrowStyles] = useState({});
     const [show, setShow] = useState(false);
+    const [calculatingPosition, setCalculatingPosition] = useState(false);
+    const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id);
+    const [activeAnchor, setActiveAnchor] = useState({ current: null });
     const handleShow = (value) => {
         if (setIsOpen) {
             setIsOpen(value);
@@ -2686,13 +2779,18 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
             handleShow(false);
         }, delayHide);
     };
-    const handleShowTooltip = () => {
+    const handleShowTooltip = (event) => {
+        if (!event) {
+            return;
+        }
         if (delayShow) {
             handleShowTooltipDelayed();
         }
         else {
             handleShow(true);
         }
+        setActiveAnchor((anchor) => anchor.current === event.target ? anchor : { current: event.target });
+        setProviderActiveAnchor({ current: event.target });
         if (tooltipHideDelayTimerRef.current) {
             clearTimeout(tooltipHideDelayTimerRef.current);
         }
@@ -2704,16 +2802,9 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
         else {
             handleShow(false);
         }
-        if (show && tooltipShowDelayTimerRef.current) {
+        if (tooltipShowDelayTimerRef.current) {
             clearTimeout(tooltipShowDelayTimerRef.current);
         }
-        else if (!show && tooltipShowDelayTimerRef.current) {
-            // workaround to prevent tooltip being show forever
-            // when we remove the mouse before show tooltip with `delayShow`
-            tooltipHideDelayTimerRef.current = setTimeout(() => {
-                handleShow(false);
-            }, delayShow * 2);
-        }
     };
     const handleClickTooltipAnchor = () => {
         if (setIsOpen) {
@@ -2728,8 +2819,13 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
     const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50);
     const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50);
     useEffect(() => {
-        const elementReference = document.querySelector(`#${anchorId}`);
-        if (!elementReference) {
+        const elementRefs = new Set(anchorRefs);
+        const anchorById = document.querySelector(`[id='${anchorId}']`);
+        if (anchorById) {
+            setActiveAnchor((anchor) => anchor.current === anchorById ? anchor : { current: anchorById });
+            elementRefs.add({ current: anchorById });
+        }
+        if (!elementRefs.size) {
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             return () => { };
         }
@@ -2741,17 +2837,29 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
             enabledEvents.push({ event: 'mouseenter', listener: debouncedHandleShowTooltip }, { event: 'mouseleave', listener: debouncedHandleHideTooltip }, { event: 'focus', listener: debouncedHandleShowTooltip }, { event: 'blur', listener: debouncedHandleHideTooltip });
         }
         enabledEvents.forEach(({ event, listener }) => {
-            elementReference === null || elementReference === void 0 ? void 0 : elementReference.addEventListener(event, listener);
+            elementRefs.forEach((ref) => {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
+            });
         });
         return () => {
             enabledEvents.forEach(({ event, listener }) => {
-                elementReference === null || elementReference === void 0 ? void 0 : elementReference.removeEventListener(event, listener);
+                elementRefs.forEach((ref) => {
+                    var _a;
+                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
+                });
             });
         };
-    }, [anchorId, events, delayHide, delayShow]);
+    }, [anchorRefs, anchorId, events, delayHide, delayShow]);
     useEffect(() => {
-        const elementReference = document.querySelector(`#${anchorId}`);
-        computeToolTipPosition({
+        let elementReference = activeAnchor.current;
+        if (anchorId) {
+            // `anchorId` element takes precedence
+            elementReference = document.querySelector(`[id='${anchorId}']`);
+        }
+        setCalculatingPosition(true);
+        let mounted = true;
+        computeTooltipPosition({
             place,
             offset,
             elementReference,
@@ -2759,6 +2867,11 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
             tooltipArrowReference: tooltipArrowRef.current,
             strategy: positionStrategy,
         }).then((computedStylesData) => {
+            if (!mounted) {
+                // invalidate computed positions after remount
+                return;
+            }
+            setCalculatingPosition(false);
             if (Object.keys(computedStylesData.tooltipStyles).length) {
                 setInlineStyles(computedStylesData.tooltipStyles);
             }
@@ -2767,29 +2880,26 @@ isHtmlContent = false, content, isOpen, setIsOpen, }) => {
             }
         });
         return () => {
-            tooltipShowDelayTimerRef.current = undefined;
-            tooltipHideDelayTimerRef.current = undefined;
+            mounted = false;
         };
-    }, [show, isOpen, anchorId]);
+    }, [show, isOpen, anchorId, activeAnchor, place, offset, positionStrategy]);
+    useEffect(() => {
+        return () => {
+            if (tooltipShowDelayTimerRef.current) {
+                clearTimeout(tooltipShowDelayTimerRef.current);
+            }
+            if (tooltipHideDelayTimerRef.current) {
+                clearTimeout(tooltipHideDelayTimerRef.current);
+            }
+        };
+    }, []);
     return (jsxRuntime.exports.jsxs(WrapperElement, { id: id, role: "tooltip", className: classNames(styles['tooltip'], styles[variant], className, {
-            [styles['show']]: isOpen || show,
+            [styles['show']]: !calculatingPosition && (isOpen || show),
             [styles['fixed']]: positionStrategy === 'fixed',
         }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef, children: [children || (isHtmlContent ? jsxRuntime.exports.jsx(TooltipContent, { content: content }) : content), jsxRuntime.exports.jsx("div", { className: classNames(styles['arrow'], classNameArrow), style: inlineArrowStyles, ref: tooltipArrowRef })] }));
 };
 
-const dataAttributesKeys = [
-    'place',
-    'content',
-    'html',
-    'variant',
-    'offset',
-    'wrapper',
-    'events',
-    'delay-show',
-    'delay-hide', // delay to hide tooltip
-];
-
-const TooltipController = ({ id, anchorId, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', delayShow = 0, delayHide = 0, style, getContent, isOpen, setIsOpen, }) => {
+const TooltipController = ({ id, anchorId, content, html, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], positionStrategy = 'absolute', delayShow = 0, delayHide = 0, style, isOpen, setIsOpen, }) => {
     const [tooltipContent, setTooltipContent] = useState(content || html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
     const [tooltipVariant, setTooltipVariant] = useState(variant);
@@ -2800,112 +2910,116 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
     const [tooltipEvents, setTooltipEvents] = useState(events);
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy);
     const [isHtmlContent, setIsHtmlContent] = useState(Boolean(html));
+    const { anchorRefs, activeAnchor } = useTooltip()(id);
     const getDataAttributesFromAnchorElement = (elementReference) => {
         const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
-            if (name.includes('data-tooltip-')) {
-                acc[name] = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name);
+            var _a;
+            if (name.startsWith('data-tooltip-')) {
+                const parsedAttribute = name.replace(/^data-tooltip-/, '');
+                acc[parsedAttribute] = (_a = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name)) !== null && _a !== void 0 ? _a : null;
             }
             return acc;
         }, {});
         return dataAttributes;
     };
     const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
-        const keys = Object.keys(dataAttributes);
-        let formatedKey = null;
         const handleDataAttributes = {
             place: (value) => {
-                setTooltipPlace(value);
+                var _a;
+                setTooltipPlace((_a = value) !== null && _a !== void 0 ? _a : place);
             },
             content: (value) => {
-                setIsHtmlContent(true);
-                if (getContent) {
-                    setTooltipContent(getContent(value));
-                }
-                else {
-                    setTooltipContent(value);
-                }
+                setIsHtmlContent(false);
+                setTooltipContent(value !== null && value !== void 0 ? value : content);
             },
             html: (value) => {
-                setIsHtmlContent(true);
-                if (getContent) {
-                    setTooltipContent(getContent(value));
-                }
-                else {
-                    setTooltipContent(value);
-                }
+                var _a;
+                setIsHtmlContent(!!value);
+                setTooltipContent((_a = value !== null && value !== void 0 ? value : html) !== null && _a !== void 0 ? _a : content);
             },
             variant: (value) => {
-                setTooltipVariant(value);
+                var _a;
+                setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
             },
             offset: (value) => {
-                setTooltipOffset(value);
+                setTooltipOffset(value === null ? offset : Number(value));
             },
             wrapper: (value) => {
-                setTooltipWrapper(value);
+                var _a;
+                setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : 'div');
             },
             events: (value) => {
-                const parsedEvents = value.split(' ');
-                setTooltipEvents(parsedEvents);
+                const parsed = value === null || value === void 0 ? void 0 : value.split(' ');
+                setTooltipEvents(parsed !== null && parsed !== void 0 ? parsed : events);
             },
-            positionStrategy: (value) => {
-                setTooltipPositionStrategy(value);
+            'position-strategy': (value) => {
+                var _a;
+                setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
             },
             'delay-show': (value) => {
-                setTooltipDelayShow(Number(value));
+                setTooltipDelayShow(value === null ? delayShow : Number(value));
             },
             'delay-hide': (value) => {
-                setTooltipDelayHide(Number(value));
+                setTooltipDelayHide(value === null ? delayHide : Number(value));
             },
         };
-        keys.forEach((key) => {
-            formatedKey = key.replace('data-tooltip-', '');
-            if (dataAttributesKeys.includes(formatedKey)) {
-                // @ts-ignore
-                handleDataAttributes[formatedKey](dataAttributes[key]);
-            }
+        // reset unset data attributes to default values
+        // without this, data attributes from the last active anchor will still be used
+        Object.values(handleDataAttributes).forEach((handler) => handler(null));
+        Object.entries(dataAttributes).forEach(([key, value]) => {
+            var _a;
+            (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
         });
     };
-    const getElementSpecificAttributeKeyAndValueParsed = ({ element, attributeName, }) => {
-        return { [attributeName]: element.getAttribute(attributeName) };
-    };
     useEffect(() => {
-        if (!anchorId) {
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            return () => { };
+        if (content) {
+            setTooltipContent(content);
+        }
+        if (html) {
+            setTooltipContent(html);
+        }
+    }, [content, html]);
+    useEffect(() => {
+        var _a;
+        const elementRefs = new Set(anchorRefs);
+        const anchorById = document.querySelector(`[id='${anchorId}']`);
+        if (anchorById) {
+            elementRefs.add({ current: anchorById });
         }
-        const elementReference = document.querySelector(`#${anchorId}`);
-        if (!elementReference) {
+        if (!elementRefs.size) {
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             return () => { };
         }
-        if (content && getContent) {
-            setTooltipContent(getContent(content));
-        }
-        // do not check for subtree and childrens, we only want to know attribute changes
-        // to stay watching `data-attributes` from anchor element
-        const observerConfig = { attributes: true, childList: false, subtree: false };
         const observerCallback = (mutationList) => {
             mutationList.forEach((mutation) => {
-                if (mutation.type === 'attributes') {
-                    const attributeKeyAndValue = getElementSpecificAttributeKeyAndValueParsed({
-                        element: elementReference,
-                        attributeName: mutation.attributeName,
-                    });
-                    applyAllDataAttributesFromAnchorElement(attributeKeyAndValue);
+                var _a;
+                if (!activeAnchor.current ||
+                    mutation.type !== 'attributes' ||
+                    !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
+                    return;
                 }
+                // make sure to get all set attributes, since all unset attributes are reset
+                const dataAttributes = getDataAttributesFromAnchorElement(activeAnchor.current);
+                applyAllDataAttributesFromAnchorElement(dataAttributes);
             });
         };
         // Create an observer instance linked to the callback function
         const observer = new MutationObserver(observerCallback);
-        // Start observing the target node for configured mutations
-        observer.observe(elementReference, observerConfig);
-        const dataAttributes = getDataAttributesFromAnchorElement(elementReference);
-        applyAllDataAttributesFromAnchorElement(dataAttributes);
+        // do not check for subtree and childrens, we only want to know attribute changes
+        // to stay watching `data-attributes-*` from anchor element
+        const observerConfig = { attributes: true, childList: false, subtree: false };
+        const element = (_a = activeAnchor.current) !== null && _a !== void 0 ? _a : anchorById;
+        if (element) {
+            const dataAttributes = getDataAttributesFromAnchorElement(element);
+            applyAllDataAttributesFromAnchorElement(dataAttributes);
+            // Start observing the target node for configured mutations
+            observer.observe(element, observerConfig);
+        }
         return () => {
             // Remove the observer when the tooltip is destroyed
             observer.disconnect();
         };
-    }, [anchorId]);
+    }, [anchorRefs, activeAnchor, anchorId]);
     const props = {
         id,
         anchorId,
@@ -2928,4 +3042,4 @@ const TooltipController = ({ id, anchorId, content, html, className, classNameAr
     return children ? jsxRuntime.exports.jsx(Tooltip, { ...props, children: children }) : jsxRuntime.exports.jsx(Tooltip, { ...props });
 };
 
-export { TooltipController as Tooltip };
+export { TooltipController as Tooltip, TooltipProvider, TooltipWrapper };