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

package/dist/react-tooltip-tokens.css

@@ -6,6 +6,4 @@
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
-  --rt-transition-show-delay: 0.15s;
-  --rt-transition-closing-delay: 0.15s;
 }

package/dist/react-tooltip.cjs

@@ -327,15 +327,16 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
     });
 };
 
-var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
+var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE"};
 
 var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
 
 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, 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);
@@ -345,6 +346,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     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);
     /**
@@ -366,6 +368,23 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             mounted.current = false;
         };
     }, []);
+    React.useEffect(() => {
+        if (!show) {
+            /**
+             * this fixes weird behavior when switching between two anchor elements very quickly
+             * remove the timeout and switch quickly between two adjancent anchor elements to see it
+             *
+             * in practice, this means the tooltip is not immediately removed from the DOM on hide
+             */
+            const timeout = setTimeout(() => {
+                setRendered(false);
+            }, 150);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        return () => null;
+    }, [show]);
     const handleShow = (value) => {
         if (!mounted.current) {
             return;
@@ -414,6 +433,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]);
@@ -532,6 +552,9 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     };
     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))) {
@@ -550,9 +573,11 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     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) {
@@ -603,6 +628,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         offset,
         positionStrategy,
         position,
+        imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
         float,
     ]);
     React.useEffect(() => {
@@ -720,7 +746,8 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         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}']`;
         }
@@ -809,7 +836,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]);
     React.useEffect(() => {
         updateTooltipPosition();
     }, [updateTooltipPosition]);
@@ -849,7 +876,8 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         };
     }, []);
     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}']`;
         }
@@ -860,28 +888,55 @@ 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;
-    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}`, 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
-             */
-            if (show || event.propertyName !== 'opacity') {
-                return;
+    }, [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;
+                }
             }
-            setRendered(false);
-        }, style: {
+            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,
+            [coreStyles['fixed']]: positionStrategy === 'fixed',
+            [coreStyles['clickable']]: clickable,
+        }), style: {
             ...externalStyles,
             ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
-        content,
-        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
+        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:
+                 * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
+                 */
+                [coreStyles['noArrow']]: noArrow,
+            }), style: {
                 ...inlineArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
@@ -894,7 +949,7 @@ const TooltipContent = ({ content }) => {
     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, 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);
@@ -1118,6 +1173,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
     }
     const props = {
+        forwardRef: ref,
         id,
         anchorId,
         anchorSelect,
@@ -1155,7 +1211,7 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         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 {
@@ -1166,17 +1222,17 @@ const TooltipCoreStyles = `:root {
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
-  --rt-transition-show-delay: 0.15s;
-  --rt-transition-closing-delay: 0.15s;
 }
 
 .core-styles-module_tooltip__3vRRp {
+  visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   opacity: 0;
-  will-change: opacity;
+  transition: opacity 0.3s ease-out;
+  will-change: opacity, visibility;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1197,13 +1253,8 @@ const TooltipCoreStyles = `:root {
 }
 
 .core-styles-module_show__Nt9eE {
+  visibility: visible;
   opacity: var(--rt-opacity);
-  transition: opacity var(--rt-transition-show-delay) ease-out;
-}
-
-.core-styles-module_closing__sGnxF {
-  opacity: 0;
-  transition: opacity var(--rt-transition-closing-delay) ease-in;
 }
 
 `;