react-tooltip 5.22.1-beta.1118.0 → 5.23.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, 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 = 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);
         /**
@@ -379,6 +381,8 @@
                 mouseleave: true,
                 blur: true,
                 click: false,
+                dblclick: false,
+                mouseup: false,
             };
         if (!closeEvents && shouldOpenOnClick) {
             Object.assign(actualCloseEvents, {
@@ -394,6 +398,28 @@
                 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
@@ -452,17 +478,14 @@
             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) {
@@ -518,6 +541,7 @@
             }
         };
         const handleTooltipPosition = ({ x, y }) => {
+            var _a;
             const virtualElement = {
                 getBoundingClientRect() {
                     return {
@@ -533,7 +557,7 @@
                 },
             };
             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,
@@ -565,12 +589,16 @@
         };
         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);
@@ -583,9 +611,11 @@
         const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
         const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
         const updateTooltipPosition = React.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) {
@@ -606,7 +636,7 @@
                 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,
@@ -633,9 +663,11 @@
             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,
         ]);
         React.useEffect(() => {
@@ -792,7 +824,8 @@
             shouldOpenOnClick,
         ]);
         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}']`;
             }
@@ -881,7 +914,7 @@
             return () => {
                 documentObserver.disconnect();
             };
-        }, [id, anchorSelect, activeAnchor]);
+        }, [id, anchorSelect, imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect, activeAnchor]);
         React.useEffect(() => {
             updateTooltipPosition();
         }, [updateTooltipPosition]);
@@ -921,7 +954,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}']`;
             }
@@ -932,13 +966,48 @@
                 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__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}`, coreStyles[canShow ? 'show' : 'closing'], canShow ? 'react-tooltip__show' : 'react-tooltip__closing', positionStrategy === 'fixed' && coreStyles['fixed'], clickable && coreStyles['clickable']), onTransitionEnd: (event) => {
+        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);
+                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__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}`, 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
@@ -947,12 +1016,14 @@
                     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__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                     ...inlineArrowStyles,
                     background: arrowColor
@@ -966,7 +1037,12 @@
         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 cssSupports = (property, value) => {
+        const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
+        return hasCssSupports ? window.CSS.supports(property, value) : true;
+    };
+
+    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, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = 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);
@@ -1160,7 +1236,7 @@
                 // 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\`.`);
             }
@@ -1168,7 +1244,7 @@
                 // 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\`.`);
             }
@@ -1190,6 +1266,7 @@
             renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
         }
         const props = {
+            forwardRef: ref,
             id,
             anchorId,
             anchorSelect,
@@ -1217,6 +1294,7 @@
             openEvents,
             closeEvents,
             globalCloseEvents,
+            imperativeModeOnly,
             style,
             position,
             isOpen,
@@ -1230,7 +1308,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 {