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

package/dist/react-tooltip.umd.js

@@ -325,15 +325,16 @@
         });
     };
 
-    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);
@@ -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);
         /**
@@ -364,6 +366,23 @@
                 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;
@@ -412,6 +431,7 @@
                 afterShow === null || afterShow === void 0 ? void 0 : afterShow();
             }
             else {
+                setImperativeOptions(null);
                 afterHide === null || afterHide === void 0 ? void 0 : afterHide();
             }
         }, [show]);
@@ -530,6 +550,9 @@
         };
         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))) {
@@ -548,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) {
@@ -601,6 +626,7 @@
             offset,
             positionStrategy,
             position,
+            imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
             float,
         ]);
         React.useEffect(() => {
@@ -718,7 +744,8 @@
             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}']`;
             }
@@ -807,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]);
@@ -847,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}']`;
             }
@@ -858,28 +886,55 @@
                 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%)`
@@ -892,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, 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);
@@ -1116,6 +1171,7 @@
             renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
         }
         const props = {
+            forwardRef: ref,
             id,
             anchorId,
             anchorSelect,
@@ -1153,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 {
@@ -1164,17 +1220,17 @@
   --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 {
@@ -1195,13 +1251,8 @@
 }
 
 .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;
 }
 
 `;