react-tooltip 5.28.0 → 5.29.0

package/dist/react-tooltip.umd.js

@@ -105,7 +105,7 @@
             fallbackAxisSideDirection: 'start',
         }),
         dom.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
@@ -159,7 +159,7 @@
                     right: '',
                     bottom: '',
                     ...borderSide,
-                    [staticSide]: `-${4 + borderWidth}px`,
+                    [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
                 };
                 /* c8 ignore end */
                 return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -399,7 +399,7 @@
     // 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 = React.useRef(null);
         const tooltipArrowRef = React.useRef(null);
@@ -473,15 +473,17 @@
             };
         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,
@@ -658,6 +660,7 @@
                 strategy: positionStrategy,
                 middlewares,
                 border,
+                arrowSize,
             }).then((computedStylesData) => {
                 handleComputedPosition(computedStylesData);
             });
@@ -745,6 +748,7 @@
                 strategy: positionStrategy,
                 middlewares,
                 border,
+                arrowSize,
             }).then((computedStylesData) => {
                 if (!mounted.current) {
                     // invalidate computed positions after remount
@@ -764,6 +768,7 @@
             position,
             imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
             float,
+            arrowSize,
         ]);
         React.useEffect(() => {
             var _a, _b;
@@ -812,8 +817,9 @@
                 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.
@@ -823,7 +829,7 @@
                 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
@@ -865,18 +871,19 @@
                     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) => {
@@ -903,9 +910,9 @@
                 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) => {
@@ -1146,6 +1153,7 @@
                     background: arrowColor
                         ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                         : undefined,
+                    '--rt-arrow-size': `${arrowSize}px`,
                 }, ref: tooltipArrowRef }))) : null;
     };
 
@@ -1154,7 +1162,7 @@
         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, 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__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, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, arrowSize, setIsOpen, afterShow, afterHide, disableTooltip, role = 'tooltip', }, ref) => {
         const [tooltipContent, setTooltipContent] = React.useState(content);
         const [tooltipHtml, setTooltipHtml] = React.useState(html);
         const [tooltipPlace, setTooltipPlace] = React.useState(place);
@@ -1424,6 +1432,7 @@
             border,
             opacity,
             arrowColor,
+            arrowSize,
             setIsOpen,
             afterShow,
             afterHide,
@@ -1446,6 +1455,7 @@
   --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 {
@@ -1464,6 +1474,7 @@
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1495,8 +1506,8 @@
 }
 
 .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 {