react-tooltip 5.28.0 → 5.29.0

package/dist/react-tooltip.mjs

@@ -98,7 +98,7 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
         fallbackAxisSideDirection: 'start',
     }),
     shift({ padding: 5 }),
-], border, }) => {
+], border, arrowSize = 8, }) => {
     if (!elementReference) {
         // elementReference can be null or undefined and we will not compute the position
         // eslint-disable-next-line no-console
@@ -152,7 +152,7 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
                 right: '',
                 bottom: '',
                 ...borderSide,
-                [staticSide]: `-${4 + borderWidth}px`,
+                [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
             };
             /* c8 ignore end */
             return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -392,7 +392,7 @@ 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, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly, style: externalStyles, position, afterShow, afterHide, disableTooltip, 
 // props handled by controller
-content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, role = 'tooltip', }) => {
+content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnchor, setActiveAnchor, border, opacity, arrowColor, arrowSize = 8, role = 'tooltip', }) => {
     var _a;
     const tooltipRef = useRef(null);
     const tooltipArrowRef = useRef(null);
@@ -466,15 +466,17 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         };
     if (imperativeModeOnly) {
         Object.assign(actualOpenEvents, {
-            mouseenter: false,
+            mouseover: false,
             focus: false,
+            mouseenter: false,
             click: false,
             dblclick: false,
             mousedown: false,
         });
         Object.assign(actualCloseEvents, {
-            mouseleave: false,
+            mouseout: false,
             blur: false,
+            mouseleave: false,
             click: false,
             dblclick: false,
             mouseup: false,
@@ -651,6 +653,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             strategy: positionStrategy,
             middlewares,
             border,
+            arrowSize,
         }).then((computedStylesData) => {
             handleComputedPosition(computedStylesData);
         });
@@ -738,6 +741,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             strategy: positionStrategy,
             middlewares,
             border,
+            arrowSize,
         }).then((computedStylesData) => {
             if (!mounted.current) {
                 // invalidate computed positions after remount
@@ -757,6 +761,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         position,
         imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
         float,
+        arrowSize,
     ]);
     useEffect(() => {
         var _a, _b;
@@ -805,8 +810,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             window.addEventListener('click', handleClickOutsideAnchors);
         }
         const enabledEvents = [];
+        const activeAnchorContainsTarget = (event) => Boolean((event === null || event === void 0 ? void 0 : event.target) && (activeAnchor === null || activeAnchor === void 0 ? void 0 : activeAnchor.contains(event.target)));
         const handleClickOpenTooltipAnchor = (event) => {
-            if (show && (event === null || event === void 0 ? void 0 : event.target) === activeAnchor) {
+            if (show && activeAnchorContainsTarget(event)) {
                 /**
                  * ignore clicking the anchor that was used to open the tooltip.
                  * this avoids conflict with the click close event.
@@ -816,7 +822,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             handleShowTooltip(event);
         };
         const handleClickCloseTooltipAnchor = (event) => {
-            if (!show || (event === null || event === void 0 ? void 0 : event.target) !== activeAnchor) {
+            if (!show || !activeAnchorContainsTarget(event)) {
                 /**
                  * ignore clicking the anchor that was NOT used to open the tooltip.
                  * this avoids closing the tooltip when clicking on a
@@ -858,18 +864,19 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 listener: handlePointerMove,
             });
         }
-        const handleMouseEnterTooltip = () => {
+        const handleMouseOverTooltip = () => {
             hoveringTooltip.current = true;
         };
-        const handleMouseLeaveTooltip = () => {
+        const handleMouseOutTooltip = () => {
             hoveringTooltip.current = false;
             handleHideTooltip();
         };
-        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);
+        const addHoveringTooltipListeners = clickable && (actualCloseEvents.mouseout || actualCloseEvents.mouseleave);
+        if (addHoveringTooltipListeners) {
+            // used to keep the tooltip open when hovering from anchor to tooltip.
+            // only relevant if either `mouseout`/`mouseleave` is in use
+            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', handleMouseOverTooltip);
+            (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', handleMouseOutTooltip);
         }
         enabledEvents.forEach(({ event, listener }) => {
             elementRefs.forEach((ref) => {
@@ -896,9 +903,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             if (actualGlobalCloseEvents.escape) {
                 window.removeEventListener('keydown', handleEsc);
             }
-            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);
+            if (addHoveringTooltipListeners) {
+                (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', handleMouseOverTooltip);
+                (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', handleMouseOutTooltip);
             }
             enabledEvents.forEach(({ event, listener }) => {
                 elementRefs.forEach((ref) => {
@@ -1139,6 +1146,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
                 background: arrowColor
                     ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                     : undefined,
+                '--rt-arrow-size': `${arrowSize}px`,
             }, ref: tooltipArrowRef }))) : null;
 };
 
@@ -1147,7 +1155,7 @@ const TooltipContent = ({ content }) => {
     return React.createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-const TooltipController = React.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, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, disableTooltip, role = 'tooltip', }, ref) => {
+const TooltipController = React.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, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, arrowSize, setIsOpen, afterShow, afterHide, disableTooltip, role = 'tooltip', }, ref) => {
     const [tooltipContent, setTooltipContent] = useState(content);
     const [tooltipHtml, setTooltipHtml] = useState(html);
     const [tooltipPlace, setTooltipPlace] = useState(place);
@@ -1417,6 +1425,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         border,
         opacity,
         arrowColor,
+        arrowSize,
         setIsOpen,
         afterShow,
         afterHide,
@@ -1439,6 +1448,7 @@ const TooltipCoreStyles = `:root {
   --rt-opacity: 0.9;
   --rt-transition-show-delay: 0.15s;
   --rt-transition-closing-delay: 0.15s;
+  --rt-arrow-size: 8px;
 }
 
 .core-styles-module_tooltip__3vRRp {
@@ -1457,6 +1467,7 @@ const TooltipCoreStyles = `:root {
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1488,8 +1499,8 @@ const TooltipStyles = `
 }
 
 .styles-module_arrow__K0L3T {
-  width: 8px;
-  height: 8px;
+  width: var(--rt-arrow-size);
+  height: var(--rt-arrow-size);
 }
 
 [class*='react-tooltip__place-top'] > .styles-module_arrow__K0L3T {