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

package/dist/react-tooltip.cjs

@@ -136,6 +136,10 @@ 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/);
@@ -156,10 +160,8 @@ const computeTooltipPosition = async ({ elementReference = null, tooltipReferenc
                 top: arrowY != null ? `${arrowY}px` : '',
                 right: '',
                 bottom: '',
-                // 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`,
+                ...borderSide,
+                [staticSide]: `-${arrowSize / 2 + borderWidth - 1}px`,
             };
             /* c8 ignore end */
             return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
@@ -293,36 +295,6 @@ 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(),
@@ -421,9 +393,9 @@ 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","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 coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","content":"core-styles-module_content__BRKdB","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"};
+var styles = {"tooltip":"styles-module_tooltip__mnnfp","content":"styles-module_content__ydYdI","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"};
 
 const Tooltip = ({ 
 // props
@@ -453,9 +425,6 @@ 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.
      */
@@ -1215,15 +1184,14 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, previousAc
             ...computedPosition.tooltipStyles,
             opacity: opacity !== undefined && canShow ? opacity : undefined,
         }, ref: tooltipRef },
-        actualContent,
+        React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-content-wrapper', coreStyles['content'], styles['content']) }, 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`,
-                '--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;
+            }, ref: tooltipArrowRef }))) : null;
 };
 
 /* eslint-disable react/no-danger */
@@ -1551,16 +1519,15 @@ 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;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
-.core-styles-module_arrowInner__HNPYi {
-  position: absolute;
-  inset: var(--rt-arrow-border-width, 0px);
-  background: var(--rt-arrow-background);
+.core-styles-module_content__BRKdB {
+  position: relative;
+  z-index: 1;
 }
 
 .core-styles-module_noArrow__xock6 {
@@ -1585,12 +1552,17 @@ const TooltipCoreStyles = `:root {
 const TooltipStyles = `
 
 .styles-module_tooltip__mnnfp {
-  padding: 8px 16px;
   border-radius: 3px;
   font-size: 90%;
   width: max-content;
 }
 
+.styles-module_content__ydYdI {
+  background: inherit;
+  border-radius: inherit;
+  padding: 8px 16px;
+}
+
 .styles-module_arrow__K0L3T {
   width: var(--rt-arrow-size);
   height: var(--rt-arrow-size);
@@ -1614,38 +1586,32 @@ const TooltipStyles = `
 
 /** Types variant **/
 .styles-module_dark__xNqje {
-  --rt-tooltip-background: var(--rt-color-dark);
-  background: var(--rt-tooltip-background);
+  background: var(--rt-color-dark);
   color: var(--rt-color-white);
 }
 
 .styles-module_light__Z6W-X {
-  --rt-tooltip-background: var(--rt-color-white);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-white);
   color: var(--rt-color-dark);
 }
 
 .styles-module_success__A2AKt {
-  --rt-tooltip-background: var(--rt-color-success);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-success);
   color: var(--rt-color-white);
 }
 
 .styles-module_warning__SCK0X {
-  --rt-tooltip-background: var(--rt-color-warning);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-warning);
   color: var(--rt-color-white);
 }
 
 .styles-module_error__JvumD {
-  --rt-tooltip-background: var(--rt-color-error);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-error);
   color: var(--rt-color-white);
 }
 
 .styles-module_info__BWdHW {
-  --rt-tooltip-background: var(--rt-color-info);
-  background-color: var(--rt-tooltip-background);
+  background-color: var(--rt-color-info);
   color: var(--rt-color-white);
 }
 `;