react-tooltip 5.22.0-beta.1109.1 → 5.23.0-beta.1109.0

package/dist/react-tooltip-tokens.css

@@ -6,4 +6,6 @@
   --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,13 +327,13 @@ 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"};
+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 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
-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, 
+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;
@@ -356,7 +356,72 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
     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,
+            dblclick: false,
+            mouseup: 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,
+        };
+    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
@@ -368,23 +433,6 @@ 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;
@@ -432,10 +480,6 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         if (show) {
             afterShow === null || afterShow === void 0 ? void 0 : afterShow();
         }
-        else {
-            setImperativeOptions(null);
-            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-        }
     }, [show]);
     const handleShowTooltipDelayed = (delay = delayShow) => {
         if (tooltipShowDelayTimerRef.current) {
@@ -545,23 +589,18 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         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))) {
+        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);
@@ -648,13 +687,13 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         };
         const anchorScrollParent = getScrollParent(activeAnchor);
         const tooltipScrollParent = getScrollParent(tooltipRef.current);
-        if (closeOnScroll) {
+        if (actualGlobalCloseEvents.scroll) {
             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 (closeOnResize) {
+        if (actualGlobalCloseEvents.resize) {
             window.addEventListener('resize', handleScrollResize);
         }
         else if (activeAnchor && tooltipRef.current) {
@@ -670,22 +709,56 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             }
             handleShow(false);
         };
-        if (closeOnEsc) {
+        if (actualGlobalCloseEvents.escape) {
             window.addEventListener('keydown', handleEsc);
         }
-        const enabledEvents = [];
-        if (shouldOpenOnClick) {
+        if (actualGlobalCloseEvents.clickOutsideAnchor) {
             window.addEventListener('click', handleClickOutsideAnchors);
-            enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor });
         }
-        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,
-                });
+        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 ;
+        });
+        if (float) {
+            enabledEvents.push({
+                event: 'mousemove',
+                listener: handleMouseMove,
+            });
         }
         const handleMouseEnterTooltip = () => {
             hoveringTooltip.current = true;
@@ -694,7 +767,9 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             hoveringTooltip.current = false;
             handleHideTooltip();
         };
-        if (clickable && !shouldOpenOnClick) {
+        if (clickable && !hasClickEvent) {
+            // used to keep the tooltip open when hovering content.
+            // not needed if using click events.
             (_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);
         }
@@ -706,24 +781,24 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         });
         return () => {
             var _a, _b;
-            if (closeOnScroll) {
+            if (actualGlobalCloseEvents.scroll) {
                 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 (closeOnResize) {
+            if (actualGlobalCloseEvents.resize) {
                 window.removeEventListener('resize', handleScrollResize);
             }
             else {
                 updateTooltipCleanup === null || updateTooltipCleanup === void 0 ? void 0 : updateTooltipCleanup();
             }
-            if (shouldOpenOnClick) {
+            if (actualGlobalCloseEvents.clickOutsideAnchor) {
                 window.removeEventListener('click', handleClickOutsideAnchors);
             }
-            if (closeOnEsc) {
+            if (actualGlobalCloseEvents.escape) {
                 window.removeEventListener('keydown', handleEsc);
             }
-            if (clickable && !shouldOpenOnClick) {
+            if (clickable && !hasClickEvent) {
                 (_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);
             }
@@ -744,8 +819,11 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         rendered,
         anchorRefs,
         anchorsBySelect,
-        closeOnEsc,
-        events,
+        // the effect uses the `actual*Events` objects, but this should work
+        openEvents,
+        closeEvents,
+        globalCloseEvents,
+        shouldOpenOnClick,
     ]);
     React.useEffect(() => {
         var _a, _b;
@@ -822,7 +900,7 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
             });
             if (newAnchors.length || removedAnchors.length) {
                 setAnchorsBySelect((anchors) => [
-                    ...anchors.filter((anchor) => removedAnchors.includes(anchor)),
+                    ...anchors.filter((anchor) => !removedAnchors.includes(anchor)),
                     ...newAnchors,
                 ]);
             }
@@ -931,24 +1009,24 @@ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, bo
         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: {
+    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;
+            }
+            setRendered(false);
+            setImperativeOptions(null);
+            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
+        }, style: {
             ...externalStyles,
             ...inlineStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
         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: {
+        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                 ...inlineArrowStyles,
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
@@ -961,7 +1039,7 @@ const TooltipContent = ({ content }) => {
     return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-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 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);
@@ -1210,6 +1288,10 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
         closeOnEsc,
         closeOnScroll,
         closeOnResize,
+        openEvents,
+        closeEvents,
+        globalCloseEvents,
+        imperativeModeOnly,
         style,
         position,
         isOpen,
@@ -1234,17 +1316,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;
-  transition: opacity 0.3s ease-out;
-  will-change: opacity, visibility;
+  will-change: opacity;
 }
 
 .core-styles-module_fixed__pcSol {
@@ -1265,8 +1347,13 @@ 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;
 }
 
 `;