react-tooltip 5.22.1-beta.1118.0 → 5.23.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, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, 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);
     /**
@@ -372,6 +374,8 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             mouseleave: true,
             blur: true,
             click: false,
+            dblclick: false,
+            mouseup: false,
         };
     if (!closeEvents && shouldOpenOnClick) {
         Object.assign(actualCloseEvents, {
@@ -387,6 +391,28 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             resize: closeOnResize || false,
             clickOutsideAnchor: hasClickEvent || false,
         };
+    if (imperativeModeOnly) {
+        Object.assign(actualOpenEvents, {
+            mouseenter: false,
+            focus: false,
+            click: false,
+            dblclick: false,
+            mousedown: false,
+        });
+        Object.assign(actualCloseEvents, {
+            mouseleave: false,
+            blur: false,
+            click: false,
+            dblclick: false,
+            mouseup: false,
+        });
+        Object.assign(actualGlobalCloseEvents, {
+            escape: false,
+            scroll: false,
+            resize: false,
+            clickOutsideAnchor: false,
+        });
+    }
     /**
      * useLayoutEffect runs before useEffect,
      * but should be used carefully because of caveats
@@ -445,17 +471,14 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         if (show) {
             afterShow === null || afterShow === void 0 ? void 0 : afterShow();
         }
-        else {
-            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-        }
     }, [show]);
-    const handleShowTooltipDelayed = () => {
+    const handleShowTooltipDelayed = (delay = delayShow) => {
         if (tooltipShowDelayTimerRef.current) {
             clearTimeout(tooltipShowDelayTimerRef.current);
         }
         tooltipShowDelayTimerRef.current = setTimeout(() => {
             handleShow(true);
-        }, delayShow);
+        }, delay);
     };
     const handleHideTooltipDelayed = (delay = delayHide) => {
         if (tooltipHideDelayTimerRef.current) {
@@ -511,6 +534,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         }
     };
     const handleTooltipPosition = ({ x, y }) => {
+        var _a;
         const virtualElement = {
             getBoundingClientRect() {
                 return {
@@ -526,7 +550,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             },
         };
         computeTooltipPosition({
-            place,
+            place: (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _a !== void 0 ? _a : place,
             offset,
             elementReference: virtualElement,
             tooltipReference: tooltipRef.current,
@@ -558,12 +582,16 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     };
     const handleClickOutsideAnchors = (event) => {
         var _a;
-        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))) {
+        if (!show) {
+            return;
+        }
+        const target = event.target;
+        if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
             return;
         }
-        if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        const anchorById = document.querySelector(`[id='${anchorId}']`);
+        const anchors = [anchorById, ...anchorsBySelect];
+        if (anchors.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(target))) {
             return;
         }
         handleShow(false);
@@ -576,9 +604,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, _b;
+        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) {
@@ -599,7 +629,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             return;
         }
         computeTooltipPosition({
-            place,
+            place: (_b = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place) !== null && _b !== void 0 ? _b : place,
             offset,
             elementReference: activeAnchor,
             tooltipReference: tooltipRef.current,
@@ -626,9 +656,11 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         content,
         externalStyles,
         place,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.place,
         offset,
         positionStrategy,
         position,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
         float,
     ]);
     useEffect(() => {
@@ -785,7 +817,8 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         shouldOpenOnClick,
     ]);
     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}']`;
         }
@@ -874,7 +907,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]);
@@ -914,7 +947,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}']`;
         }
@@ -925,13 +959,48 @@ 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]);
+    }, [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 = show && Object.keys(inlineStyles).length > 0;
-    return rendered && !hidden && content ? (React.createElement(WrapperElement, { id: id, role: "tooltip", 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) => {
+    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);
+            if (options === null || options === void 0 ? void 0 : options.delay) {
+                handleShowTooltipDelayed(options.delay);
+            }
+            else {
+                handleShow(true);
+            }
+        },
+        close: (options) => {
+            if (options === null || options === void 0 ? void 0 : options.delay) {
+                handleHideTooltipDelayed(options.delay);
+            }
+            else {
+                handleShow(false);
+            }
+        },
+        activeAnchor,
+        place: actualPlacement,
+        isOpen: Boolean(rendered && !hidden && actualContent && canShow),
+    }));
+    return rendered && !hidden && actualContent ? (React.createElement(WrapperElement, { id: id, role: "tooltip", 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) => {
             /**
              * @warning if `--rt-transition-closing-delay` is set to 0,
              * the tooltip will be stuck (but not visible) on the DOM
@@ -940,12 +1009,14 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
                 return;
             }
             setRendered(false);
+            setImperativeOptions(null);
+            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
         }, style: {
             ...externalStyles,
             ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
-        content,
+        actualContent,
         React.createElement(WrapperElement, { className: classNames('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                 ...inlineArrowStyles,
                 background: arrowColor
@@ -959,7 +1030,12 @@ 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 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, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }, ref) => {
     const [tooltipContent, setTooltipContent] = useState(content);
     const [tooltipHtml, setTooltipHtml] = useState(html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
@@ -1153,7 +1229,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.');
         }
-        if (border && !CSS.supports('border', `${border}`)) {
+        if (border && !cssSupports('border', `${border}`)) {
             // eslint-disable-next-line no-console
             console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`);
         }
@@ -1161,7 +1237,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.');
         }
-        if (opacity && !CSS.supports('opacity', `${opacity}`)) {
+        if (opacity && !cssSupports('opacity', `${opacity}`)) {
             // eslint-disable-next-line no-console
             console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`);
         }
@@ -1183,6 +1259,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         renderedContent = React.createElement(TooltipContent, { content: tooltipHtml });
     }
     const props = {
+        forwardRef: ref,
         id,
         anchorId,
         anchorSelect,
@@ -1210,6 +1287,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         openEvents,
         closeEvents,
         globalCloseEvents,
+        imperativeModeOnly,
         style,
         position,
         isOpen,
@@ -1223,7 +1301,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 {