react-tooltip 5.30.0-beta.1263.rc.1 → 5.30.0-beta.1263.rc.3

package/dist/react-tooltip.cjs

@@ -136,10 +136,6 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
                 left: 'right',
             }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
             /* c8 ignore end */
-            const borderSide = border && {
-                borderBottom: border,
-                borderRight: border,
-            };
             let borderWidth = 0;
             if (border) {
                 const match = `${border}`.match(/(\d+)px/);
@@ -160,8 +156,10 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
                 top: arrowY != null ? `${arrowY}px` : '',
                 right: '',
                 bottom: '',
-                ...borderSide,
-                [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
+                // Keep the arrow tucked under the tooltip body. When the tooltip has a
+                // border, offset by that width, but do not draw a separate arrow border:
+                // the rotated/clipped element cannot render that seam cleanly.
+                [staticSide]: `-${arrowSize * 0.5 + borderWidth}px`,
             };
             /* c8 ignore end */
             return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -295,6 +293,36 @@ const clearTimeoutRef = (ref) => {
     }
 };
 
+/**
+ * Extract the width token from a CSS border shorthand so arrow styles can
+ * reuse the same thickness as the tooltip border.
+ */
+const getBorderWidth = (border) => {
+    var _a;
+    if (!border) {
+        return '0px';
+    }
+    const match = `${border}`.match(/(\d+px)/);
+    return (_a = match === null || match === void 0 ? void 0 : match[1]) !== null && _a !== void 0 ? _a : '1px';
+};
+/**
+ * Extract the color token from a CSS border shorthand so the arrow border/fill
+ * can stay visually aligned with the tooltip border.
+ */
+const getBorderColor = (border) => {
+    if (!border) {
+        return undefined;
+    }
+    const parts = `${border}`.trim().split(/\s+/);
+    if (parts.length >= 3) {
+        return parts.slice(2).join(' ');
+    }
+    if (parts.length === 2) {
+        return parts[1];
+    }
+    return parts[0];
+};
+
 const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
 const DEFAULT_CONTEXT_DATA = {
     anchorRefs: new Set(),
@@ -393,7 +421,7 @@ const TooltipWrapper = ({ tooltipId, children, className, place, content, html,
     return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
 };
 
-var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
+var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","arrowInner":"core-styles-module_arrowInner__HNPYi","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
 
 var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
 
@@ -425,6 +453,9 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
     const hoveringTooltip = React.useRef(false);
     const [anchorsBySelect, setAnchorsBySelect] = React.useState([]);
     const mounted = React.useRef(false);
+    const arrowBorderWidth = getBorderWidth(border);
+    const arrowBorderColor = getBorderColor(border);
+    const arrowBackground = border && arrowBorderColor ? arrowBorderColor : (arrowColor !== null && arrowColor !== void 0 ? arrowColor : 'var(--rt-tooltip-background)');
     /**
      * @todo Update when deprecated stuff gets removed.
      */
@@ -1187,11 +1218,12 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
         actualContent,
         React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, noArrow && coreStyles['noArrow']), style: {
                 ...computedPosition.tooltipArrowStyles,
-                background: arrowColor
-                    ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
-                    : undefined,
                 '--rt-arrow-size': `${arrowSize}px`,
-            }, ref: tooltipArrowRef }))) : null;
+                '--rt-arrow-background': arrowBackground,
+                '--rt-arrow-border-width': arrowBorderColor ? arrowBorderWidth : '0px',
+                '--rt-arrow-border-color': arrowBorderColor,
+            }, ref: tooltipArrowRef },
+            React__default["default"].createElement(WrapperElement, { className: coreStyles['arrowInner'] })))) : null;
 };
 
 /* eslint-disable react/no-danger */
@@ -1519,9 +1551,16 @@ const TooltipCoreStyles = `:root {
 
 .core-styles-module_arrow__cvMwQ {
   position: absolute;
-  background: inherit;
   z-index: -1;
   clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
+  background: var(--rt-arrow-border-color, var(--rt-arrow-background));
+  overflow: hidden;
+}
+
+.core-styles-module_arrowInner__HNPYi {
+  position: absolute;
+  inset: var(--rt-arrow-border-width, 0px);
+  background: var(--rt-arrow-background);
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1575,32 +1614,38 @@ const TooltipStyles = `
 
 /** Types variant **/
 .styles-module_dark__xNqje {
-  background: var(--rt-color-dark);
+  --rt-tooltip-background: var(--rt-color-dark);
+  background: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .styles-module_light__Z6W-X {
-  background-color: var(--rt-color-white);
+  --rt-tooltip-background: var(--rt-color-white);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-dark);
 }
 
 .styles-module_success__A2AKt {
-  background-color: var(--rt-color-success);
+  --rt-tooltip-background: var(--rt-color-success);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .styles-module_warning__SCK0X {
-  background-color: var(--rt-color-warning);
+  --rt-tooltip-background: var(--rt-color-warning);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .styles-module_error__JvumD {
-  background-color: var(--rt-color-error);
+  --rt-tooltip-background: var(--rt-color-error);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .styles-module_info__BWdHW {
-  background-color: var(--rt-color-info);
+  --rt-tooltip-background: var(--rt-color-info);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 `;