react-tooltip 5.28.1 → 5.29.1-beta.1258.rc.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);
@@ -653,6 +653,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
             strategy: positionStrategy,
             middlewares,
             border,
+            arrowSize,
         }).then((computedStylesData) => {
             handleComputedPosition(computedStylesData);
         });
@@ -740,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
@@ -759,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;
@@ -1143,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;
 };
 
@@ -1151,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);
@@ -1421,6 +1425,7 @@ const TooltipController = React.forwardRef(({ id, anchorId, anchorSelect, conten
         border,
         opacity,
         arrowColor,
+        arrowSize,
         setIsOpen,
         afterShow,
         afterHide,
@@ -1443,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 {
@@ -1461,6 +1467,7 @@ const TooltipCoreStyles = `:root {
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1492,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 {