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

package/dist/react-tooltip.umd.js

@@ -331,9 +331,9 @@
 
     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);
@@ -352,7 +352,48 @@
         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
@@ -539,12 +580,6 @@
             handleTooltipPosition(mousePosition);
             lastFloatPosition.current = mousePosition;
         };
-        const handleClickTooltipAnchor = (event) => {
-            handleShowTooltip(event);
-            if (delayHide) {
-                handleHideTooltipDelayed();
-            }
-        };
         const handleClickOutsideAnchors = (event) => {
             var _a;
             const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -635,16 +670,16 @@
             };
             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,
@@ -657,22 +692,56 @@
                 }
                 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;
@@ -681,7 +750,9 @@
                 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);
             }
@@ -693,24 +764,24 @@
             });
             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);
                 }
@@ -731,8 +802,11 @@
             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 : '';
@@ -755,12 +829,20 @@
                     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;
@@ -791,14 +873,14 @@
                         // 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,
@@ -873,7 +955,7 @@
             }
         }, [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',
@@ -903,7 +985,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, 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);
@@ -1151,10 +1233,12 @@
             closeOnEsc,
             closeOnScroll,
             closeOnResize,
+            openEvents,
+            closeEvents,
+            globalCloseEvents,
             style,
             position,
             isOpen,
-            holdPositionOnRender,
             border,
             opacity,
             arrowColor,