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

package/dist/react-tooltip.umd.js

@@ -331,9 +331,10 @@
 
     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 = React.useRef(null);
         const tooltipArrowRef = React.useRef(null);
         const tooltipShowDelayTimerRef = React.useRef(null);
@@ -343,6 +344,7 @@
         const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
         const [show, setShow] = React.useState(false);
         const [rendered, setRendered] = React.useState(false);
+        const [imperativeOptions, setImperativeOptions] = React.useState(null);
         const wasShowing = React.useRef(false);
         const lastFloatPosition = React.useRef(null);
         /**
@@ -352,48 +354,7 @@
         const hoveringTooltip = React.useRef(false);
         const [anchorsBySelect, setAnchorsBySelect] = React.useState([]);
         const mounted = React.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
@@ -470,6 +431,7 @@
                 afterShow === null || afterShow === void 0 ? void 0 : afterShow();
             }
             else {
+                setImperativeOptions(null);
                 afterHide === null || afterHide === void 0 ? void 0 : afterHide();
             }
         }, [show]);
@@ -580,8 +542,17 @@
             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))) {
@@ -600,9 +571,11 @@
         const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
         const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
         const updateTooltipPosition = React.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) {
@@ -653,6 +626,7 @@
             offset,
             positionStrategy,
             position,
+            imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
             float,
         ]);
         React.useEffect(() => {
@@ -670,13 +644,13 @@
             };
             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) {
@@ -692,56 +666,22 @@
                 }
                 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;
@@ -750,9 +690,7 @@
                 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);
             }
@@ -764,24 +702,24 @@
             });
             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);
                 }
@@ -802,14 +740,12 @@
             rendered,
             anchorRefs,
             anchorsBySelect,
-            // the effect uses the `actual*Events` objects, but this should work
-            openEvents,
-            closeEvents,
-            globalCloseEvents,
-            shouldOpenOnClick,
+            closeOnEsc,
+            events,
         ]);
         React.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}']`;
             }
@@ -898,7 +834,7 @@
             return () => {
                 documentObserver.disconnect();
             };
-        }, [id, anchorSelect, activeAnchor]);
+        }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor]);
         React.useEffect(() => {
             updateTooltipPosition();
         }, [updateTooltipPosition]);
@@ -938,7 +874,8 @@
             };
         }, []);
         React.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}']`;
             }
@@ -949,12 +886,37 @@
                 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);
+        React.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__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
                 'react-tooltip__show': canShow,
                 [coreStyles['show']]: canShow,
@@ -965,7 +927,7 @@
                 ...inlineStyles,
                 opacity: opacity !== undefined && canShow ? opacity : undefined,
             }, ref: tooltipRef },
-            content,
+            actualContent,
             React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, {
                     /**
                      * changed from dash `no-arrow` to camelcase because of:
@@ -985,7 +947,7 @@
         return React__default["default"].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__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, style, position, isOpen, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }, ref) => {
         const [tooltipContent, setTooltipContent] = React.useState(content);
         const [tooltipHtml, setTooltipHtml] = React.useState(html);
         const [tooltipPlace, setTooltipPlace] = React.useState(place);
@@ -1209,6 +1171,7 @@
             renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
         }
         const props = {
+            forwardRef: ref,
             id,
             anchorId,
             anchorSelect,
@@ -1233,9 +1196,6 @@
             closeOnEsc,
             closeOnScroll,
             closeOnResize,
-            openEvents,
-            closeEvents,
-            globalCloseEvents,
             style,
             position,
             isOpen,
@@ -1249,7 +1209,7 @@
             setActiveAnchor: (anchor) => setActiveAnchor(anchor),
         };
         return React__default["default"].createElement(Tooltip, { ...props });
-    };
+    });
 
     // those content will be replaced in build time with the `react-tooltip.css` builded content
     const TooltipCoreStyles = `:root {