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

package/README.md

@@ -58,17 +58,26 @@ yarn add react-tooltip
 
 ## Sponsors
 
+### Gold Sponsors 🌟
+
 <a href="https://frigade.com/?source=react-tooltip">
-  <img alt="Frigade" style="height: 250px" src="docs/static/img/sponsors/frigade.png" />
+  <img alt="Frigade" style="height: 250px;" src="docs/static/img/sponsors/frigade.png" />
 </a>
 
 React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=react-tooltip), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.
 
+#### Silver Sponsors ✪
+
+<a href="https://dopt.com/?source=react-tooltip">
+  <img alt="Dopt" style="height: 200px; width: 200px;" src="docs/static/img/sponsors/dopt.png" />
+</a>
+
 ## Usage
 
 1 . Import the CSS file to set default styling.
 
-> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
+> [!WARNING]\
+> If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
 
 ```js
 import 'react-tooltip/dist/react-tooltip.css'
@@ -100,6 +109,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 
 4 . Include the `<Tooltip />` element.
 
+> [!NOTE]\
 > Don't forget to set the id, it won't work without it!
 
 ```jsx

package/dist/react-tooltip.cjs

@@ -333,9 +333,9 @@ var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_ar
 
 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, 
+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, 
 // props handled by controller
-content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, }) => {
+content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, }) => {
     const tooltipRef = React.useRef(null);
     const tooltipArrowRef = React.useRef(null);
     const tooltipShowDelayTimerRef = React.useRef(null);
@@ -354,7 +354,48 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
     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
@@ -541,12 +582,6 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         handleTooltipPosition(mousePosition);
         lastFloatPosition.current = mousePosition;
     };
-    const handleClickTooltipAnchor = (event) => {
-        handleShowTooltip(event);
-        if (delayHide) {
-            handleHideTooltipDelayed();
-        }
-    };
     const handleClickOutsideAnchors = (event) => {
         var _a;
         const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -637,16 +672,16 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         };
         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 && !holdPositionOnRender) {
+        else if (activeAnchor && tooltipRef.current) {
             updateTooltipCleanup = dom.autoUpdate(activeAnchor, tooltipRef.current, updateTooltipPosition, {
                 ancestorResize: true,
                 elementResize: true,
@@ -659,22 +694,56 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
             }
             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;
@@ -683,7 +752,9 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
             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);
         }
@@ -695,24 +766,24 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         });
         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);
             }
@@ -733,8 +804,11 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         rendered,
         anchorRefs,
         anchorsBySelect,
-        closeOnEsc,
-        events,
+        // the effect uses the `actual*Events` objects, but this should work
+        openEvents,
+        closeEvents,
+        globalCloseEvents,
+        shouldOpenOnClick,
     ]);
     React.useEffect(() => {
         let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
@@ -757,12 +831,20 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
                 if (activeAnchor) {
                     const elements = [...mutation.removedNodes].filter((node) => node.nodeType === 1);
                     if (selector) {
-                        removedAnchors.push(
-                        // the element itself is an anchor
-                        ...elements.filter((element) => element.matches(selector)));
-                        removedAnchors.push(
-                        // the element has children which are anchors
-                        ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
+                        try {
+                            removedAnchors.push(
+                            // the element itself is an anchor
+                            ...elements.filter((element) => element.matches(selector)));
+                            removedAnchors.push(
+                            // the element has children which are anchors
+                            ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
+                        }
+                        catch (_a) {
+                            /**
+                             * invalid CSS selector.
+                             * already warned on tooltip controller
+                             */
+                        }
                     }
                     elements.some((node) => {
                         var _a;
@@ -793,14 +875,14 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
                     // the element has children which are anchors
                     ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
                 }
-                catch (_a) {
+                catch (_b) {
                     /**
                      * invalid CSS selector.
                      * already warned on tooltip controller
                      */
                 }
             });
-            if (newAnchors.length) {
+            if (newAnchors.length || removedAnchors.length) {
                 setAnchorsBySelect((anchors) => [
                     ...anchors.filter((anchor) => removedAnchors.includes(anchor)),
                     ...newAnchors,
@@ -875,7 +957,7 @@ content, contentWrapperRef, isOpen, holdPositionOnRender, setIsOpen, activeAncho
         }
     }, [id, anchorSelect]);
     const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
-    return rendered || (wasShowing.current && holdPositionOnRender) ? (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}`, {
+    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',
@@ -905,7 +987,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, holdPositionOnRender, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, }) => {
+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 [tooltipContent, setTooltipContent] = React.useState(content);
     const [tooltipHtml, setTooltipHtml] = React.useState(html);
     const [tooltipPlace, setTooltipPlace] = React.useState(place);
@@ -1153,10 +1235,12 @@ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render,
         closeOnEsc,
         closeOnScroll,
         closeOnResize,
+        openEvents,
+        closeEvents,
+        globalCloseEvents,
         style,
         position,
         isOpen,
-        holdPositionOnRender,
         border,
         opacity,
         arrowColor,