react-tooltip 5.28.1 → 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);
@@ -660,6 +660,7 @@
                 strategy: positionStrategy,
                 middlewares,
                 border,
+                arrowSize,
             }).then((computedStylesData) => {
                 handleComputedPosition(computedStylesData);
             });
@@ -747,6 +748,7 @@
                 strategy: positionStrategy,
                 middlewares,
                 border,
+                arrowSize,
             }).then((computedStylesData) => {
                 if (!mounted.current) {
                     // invalidate computed positions after remount
@@ -766,6 +768,7 @@
             position,
             imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.position,
             float,
+            arrowSize,
         ]);
         React.useEffect(() => {
             var _a, _b;
@@ -1150,6 +1153,7 @@
                     background: arrowColor
                         ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
                         : undefined,
+                    '--rt-arrow-size': `${arrowSize}px`,
                 }, ref: tooltipArrowRef }))) : null;
     };
 
@@ -1158,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);
@@ -1428,6 +1432,7 @@
             border,
             opacity,
             arrowColor,
+            arrowSize,
             setIsOpen,
             afterShow,
             afterHide,
@@ -1450,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 {
@@ -1468,6 +1474,7 @@
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1499,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 {