react-tooltip 5.22.0-beta.1108.0 → 5.22.0-beta.1109.0

package/dist/react-tooltip.mjs

@@ -5,7 +5,7 @@
 * @copyright ReactTooltip Team
 * @license MIT
 */
-import React, { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect, useLayoutEffect } from 'react';
+import React, { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import { arrow, computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 import classNames from 'classnames';
 
@@ -324,9 +324,10 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_ar
 
 const Tooltip = ({ 
 // props
-id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, style: externalStyles, position, afterShow, afterHide, 
+forwardRef, id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style: externalStyles, position, afterShow, afterHide, 
 // props handled by controller
 content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, }) => {
+    var _a;
     const tooltipRef = useRef(null);
     const tooltipArrowRef = useRef(null);
     const tooltipShowDelayTimerRef = useRef(null);
@@ -336,6 +337,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     const [inlineArrowStyles, setInlineArrowStyles] = useState({});
     const [show, setShow] = useState(false);
     const [rendered, setRendered] = useState(false);
+    const [imperativeOptions, setImperativeOptions] = useState(null);
     const wasShowing = useRef(false);
     const lastFloatPosition = useRef(null);
     /**
@@ -345,48 +347,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     const hoveringTooltip = useRef(false);
     const [anchorsBySelect, setAnchorsBySelect] = useState([]);
     const mounted = useRef(false);
-    /**
-     * @todo Update when deprecated stuff gets removed.
-     */
     const shouldOpenOnClick = openOnClick || events.includes('click');
-    const hasClickEvent = shouldOpenOnClick || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.click) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.dblclick) || (openEvents === null || openEvents === void 0 ? void 0 : openEvents.mousedown);
-    const actualOpenEvents = openEvents
-        ? { ...openEvents }
-        : {
-            mouseenter: true,
-            focus: true,
-            click: false,
-            dblclick: false,
-            mousedown: false,
-        };
-    if (!openEvents && shouldOpenOnClick) {
-        Object.assign(actualOpenEvents, {
-            mouseenter: false,
-            focus: false,
-            click: true,
-        });
-    }
-    const actualCloseEvents = closeEvents
-        ? { ...closeEvents }
-        : {
-            mouseleave: true,
-            blur: true,
-            click: false,
-        };
-    if (!closeEvents && shouldOpenOnClick) {
-        Object.assign(actualCloseEvents, {
-            mouseleave: false,
-            blur: false,
-        });
-    }
-    const actualGlobalCloseEvents = globalCloseEvents
-        ? { ...globalCloseEvents }
-        : {
-            escape: closeOnEsc || false,
-            scroll: closeOnScroll || false,
-            resize: closeOnResize || false,
-            clickOutsideAnchor: hasClickEvent || false,
-        };
     /**
      * useLayoutEffect runs before useEffect,
      * but should be used carefully because of caveats
@@ -463,6 +424,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             afterShow === null || afterShow === void 0 ? void 0 : afterShow();
         }
         else {
+            setImperativeOptions(null);
             afterHide === null || afterHide === void 0 ? void 0 : afterHide();
         }
     }, [show]);
@@ -573,8 +535,17 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         handleTooltipPosition(mousePosition);
         lastFloatPosition.current = mousePosition;
     };
+    const handleClickTooltipAnchor = (event) => {
+        handleShowTooltip(event);
+        if (delayHide) {
+            handleHideTooltipDelayed();
+        }
+    };
     const handleClickOutsideAnchors = (event) => {
         var _a;
+        if (!show) {
+            return;
+        }
         const anchorById = document.querySelector(`[id='${anchorId}']`);
         const anchors = [anchorById, ...anchorsBySelect];
         if (anchors.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(event.target))) {
@@ -593,9 +564,11 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
     const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
     const updateTooltipPosition = useCallback(() => {
-        if (position) {
+        var _a;
+        const actualPosition = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position) !== null && _a !== void 0 ? _a : position;
+        if (actualPosition) {
             // if `position` is set, override regular and `float` positioning
-            handleTooltipPosition(position);
+            handleTooltipPosition(actualPosition);
             return;
         }
         if (float) {
@@ -646,6 +619,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         offset,
         positionStrategy,
         position,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
         float,
     ]);
     useEffect(() => {
@@ -663,13 +637,13 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         };
         const anchorScrollParent = getScrollParent(activeAnchor);
         const tooltipScrollParent = getScrollParent(tooltipRef.current);
-        if (actualGlobalCloseEvents.scroll) {
+        if (closeOnScroll) {
             window.addEventListener('scroll', handleScrollResize);
             anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.addEventListener('scroll', handleScrollResize);
             tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.addEventListener('scroll', handleScrollResize);
         }
         let updateTooltipCleanup = null;
-        if (actualGlobalCloseEvents.resize) {
+        if (closeOnResize) {
             window.addEventListener('resize', handleScrollResize);
         }
         else if (activeAnchor && tooltipRef.current) {
@@ -685,56 +659,22 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             }
             handleShow(false);
         };
-        if (actualGlobalCloseEvents.escape) {
+        if (closeOnEsc) {
             window.addEventListener('keydown', handleEsc);
         }
-        if (actualGlobalCloseEvents.clickOutsideAnchor) {
+        const enabledEvents = [];
+        if (shouldOpenOnClick) {
             window.addEventListener('click', handleClickOutsideAnchors);
+            enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor });
         }
-        const enabledEvents = [];
-        const handleClickOpenTooltipAnchor = (event) => {
-            if (show) {
-                return;
-            }
-            handleShowTooltip(event);
-        };
-        const handleClickCloseTooltipAnchor = () => {
-            if (!show) {
-                return;
-            }
-            handleHideTooltip();
-        };
-        const regularEvents = ['mouseenter', 'mouseleave', 'focus', 'blur'];
-        const clickEvents = ['click', 'dblclick', 'mousedown', 'mouseup'];
-        Object.entries(actualOpenEvents).forEach(([event, enabled]) => {
-            if (!enabled) {
-                return;
-            }
-            if (regularEvents.includes(event)) {
-                enabledEvents.push({ event, listener: debouncedHandleShowTooltip });
-            }
-            else if (clickEvents.includes(event)) {
-                enabledEvents.push({ event, listener: handleClickOpenTooltipAnchor });
-            }
-            else ;
-        });
-        Object.entries(actualCloseEvents).forEach(([event, enabled]) => {
-            if (!enabled) {
-                return;
-            }
-            if (regularEvents.includes(event)) {
-                enabledEvents.push({ event, listener: debouncedHandleHideTooltip });
-            }
-            else if (clickEvents.includes(event)) {
-                enabledEvents.push({ event, listener: handleClickCloseTooltipAnchor });
+        else {
+            enabledEvents.push({ event: 'mouseenter', listener: debouncedHandleShowTooltip }, { event: 'mouseleave', listener: debouncedHandleHideTooltip }, { event: 'focus', listener: debouncedHandleShowTooltip }, { event: 'blur', listener: debouncedHandleHideTooltip });
+            if (float) {
+                enabledEvents.push({
+                    event: 'mousemove',
+                    listener: handleMouseMove,
+                });
             }
-            else ;
-        });
-        if (float) {
-            enabledEvents.push({
-                event: 'mousemove',
-                listener: handleMouseMove,
-            });
         }
         const handleMouseEnterTooltip = () => {
             hoveringTooltip.current = true;
@@ -743,9 +683,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             hoveringTooltip.current = false;
             handleHideTooltip();
         };
-        if (clickable && !hasClickEvent) {
-            // used to keep the tooltip open when hovering content.
-            // not needed if using click events.
+        if (clickable && !shouldOpenOnClick) {
             (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
             (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
         }
@@ -757,24 +695,24 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         });
         return () => {
             var _a, _b;
-            if (actualGlobalCloseEvents.scroll) {
+            if (closeOnScroll) {
                 window.removeEventListener('scroll', handleScrollResize);
                 anchorScrollParent === null || anchorScrollParent === void 0 ? void 0 : anchorScrollParent.removeEventListener('scroll', handleScrollResize);
                 tooltipScrollParent === null || tooltipScrollParent === void 0 ? void 0 : tooltipScrollParent.removeEventListener('scroll', handleScrollResize);
             }
-            if (actualGlobalCloseEvents.resize) {
+            if (closeOnResize) {
                 window.removeEventListener('resize', handleScrollResize);
             }
             else {
                 updateTooltipCleanup === null || updateTooltipCleanup === void 0 ? void 0 : updateTooltipCleanup();
             }
-            if (actualGlobalCloseEvents.clickOutsideAnchor) {
+            if (shouldOpenOnClick) {
                 window.removeEventListener('click', handleClickOutsideAnchors);
             }
-            if (actualGlobalCloseEvents.escape) {
+            if (closeOnEsc) {
                 window.removeEventListener('keydown', handleEsc);
             }
-            if (clickable && !hasClickEvent) {
+            if (clickable && !shouldOpenOnClick) {
                 (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', handleMouseEnterTooltip);
                 (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', handleMouseLeaveTooltip);
             }
@@ -795,14 +733,12 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         rendered,
         anchorRefs,
         anchorsBySelect,
-        // the effect uses the `actual*Events` objects, but this should work
-        openEvents,
-        closeEvents,
-        globalCloseEvents,
-        shouldOpenOnClick,
+        closeOnEsc,
+        events,
     ]);
     useEffect(() => {
-        let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
+        var _a, _b;
+        let selector = (_b = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect) !== null && _b !== void 0 ? _b : '';
         if (!selector && id) {
             selector = `[data-tooltip-id='${id}']`;
         }
@@ -891,7 +827,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         return () => {
             documentObserver.disconnect();
         };
-    }, [id, anchorSelect, activeAnchor]);
+    }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor]);
     useEffect(() => {
         updateTooltipPosition();
     }, [updateTooltipPosition]);
@@ -931,7 +867,8 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         };
     }, []);
     useEffect(() => {
-        let selector = anchorSelect;
+        var _a;
+        let selector = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect;
         if (!selector && id) {
             selector = `[data-tooltip-id='${id}']`;
         }
@@ -942,12 +879,37 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             const anchors = Array.from(document.querySelectorAll(selector));
             setAnchorsBySelect(anchors);
         }
-        catch (_a) {
+        catch (_b) {
             // warning was already issued in the controller
             setAnchorsBySelect([]);
         }
-    }, [id, anchorSelect]);
-    const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
+    }, [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 = Boolean(!hidden && actualContent && show && Object.keys(inlineStyles).length > 0);
+    useImperativeHandle(forwardRef, () => ({
+        open: (options) => {
+            if (options === null || options === void 0 ? void 0 : options.anchorSelect) {
+                try {
+                    document.querySelector(options.anchorSelect);
+                }
+                catch (_a) {
+                    {
+                        // eslint-disable-next-line no-console
+                        console.warn(`[react-tooltip] "${options.anchorSelect}" is not a valid CSS selector`);
+                    }
+                    return;
+                }
+            }
+            setImperativeOptions(options !== null && options !== void 0 ? options : null);
+            handleShow(true);
+        },
+        close: () => {
+            handleShow(false);
+        },
+        activeAnchor,
+        place: actualPlacement,
+        isOpen: rendered && canShow,
+    }));
     return rendered ? (React.createElement(WrapperElement, { id: id, role: "tooltip", className: classNames('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
             'react-tooltip__show': canShow,
             [coreStyles['show']]: canShow,
@@ -958,7 +920,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
-        content,
+        actualContent,
         React.createElement(WrapperElement, { className: classNames('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, {
                 /**
                  * changed from dash `no-arrow` to camelcase because of:
@@ -978,7 +940,7 @@ const TooltipContent = ({ content }) => {
     return React.createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-const TooltipController = ({ 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, style, position, isOpen, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }) => {
+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, style, position, isOpen, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }, ref) => {
     const [tooltipContent, setTooltipContent] = useState(content);
     const [tooltipHtml, setTooltipHtml] = useState(html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
@@ -1202,6 +1164,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         renderedContent = React.createElement(TooltipContent, { content: tooltipHtml });
     }
     const props = {
+        forwardRef: ref,
         id,
         anchorId,
         anchorSelect,
@@ -1226,9 +1189,6 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         closeOnEsc,
         closeOnScroll,
         closeOnResize,
-        openEvents,
-        closeEvents,
-        globalCloseEvents,
         style,
         position,
         isOpen,
@@ -1242,7 +1202,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         setActiveAnchor: (anchor) => setActiveAnchor(anchor),
     };
     return React.createElement(Tooltip, { ...props });
-};
+});
 
 // those content will be replaced in build time with the `react-tooltip.css` builded content
 const TooltipCoreStyles = `:root {