@thecb/components 11.11.0-beta.0 → 11.11.0-beta.2

package/dist/index.cjs.js

@@ -51456,6 +51456,7 @@ var hoverColor$6 = SAPPHIRE_BLUE;
 var activeColor$b = PEACOCK_BLUE;
 var linkColor$6 = MATISSE_BLUE;
 var borderColor$7 = "rgba(255, 255, 255, 0.85)";
+var TOOLTIP_THEME_SOURCE = "Button";
 var fallbackValues$12 = {
   borderColor: borderColor$7,
   linkColor: linkColor$6,
@@ -51484,24 +51485,21 @@ var Tooltip = function Tooltip(_ref) {
     maxWidth = _ref$maxWidth === void 0 ? "100%" : _ref$maxWidth,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? "auto" : _ref$height,
-    _ref$arrowDirection = _ref.arrowDirection,
-    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
     _ref$contentPosition = _ref.contentPosition,
     contentPosition = _ref$contentPosition === void 0 ? {
-      top: "auto",
+      top: "-110px",
       right: "auto",
-      bottom: "calc(100% + 8px)",
-      // always sits above the trigger + 8px gap for arrow
-      left: "50%",
-      // anchors to horizontal center of trigger
-      transform: "translateX(-50%)" // shifts left by half tooltip's own width → centered
+      bottom: "auto",
+      left: "-225px"
     } : _ref$contentPosition,
+    _ref$arrowDirection = _ref.arrowDirection,
+    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
     _ref$arrowPosition = _ref.arrowPosition,
     arrowPosition = _ref$arrowPosition === void 0 ? {
       arrowTop: "auto",
-      arrowRight: "auto",
+      arrowRight: "10px",
       arrowBottom: "-8px",
-      arrowLeft: "calc(50% - 8px)" // centers the 0-width arrow element (16px wide border)
+      arrowLeft: "auto"
     } : _ref$arrowPosition,
     arrowColor = _ref.arrowColor;
   var closeTimeoutRef = React.useRef(null);
@@ -51510,7 +51508,7 @@ var Tooltip = function Tooltip(_ref) {
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
   var themeContext = React.useContext(styled.ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$12, "Tooltip");
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
   var top = contentPosition.top,
     right = contentPosition.right,
     bottom = contentPosition.bottom,
@@ -51550,12 +51548,7 @@ var Tooltip = function Tooltip(_ref) {
   }, []);
   var renderTrigger = function renderTrigger() {
     if (hasCustomTrigger && children) {
-      return /*#__PURE__*/React__default.createElement(Box, {
-        padding: "0",
-        extraStyles: "cursor: pointer;",
-        tabIndex: "0",
-        role: "button",
-        "data-qa": "tooltip-trigger-".concat(tooltipID),
+      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
         "aria-describedby": tooltipID,
         onFocus: function onFocus() {
           return handleToggleTooltip(true);
@@ -51564,7 +51557,7 @@ var Tooltip = function Tooltip(_ref) {
           return handleToggleTooltip(false);
         },
         onKeyDown: handleKeyDown
-      }, children);
+      });
     }
     return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       action: noop$1,
@@ -51582,7 +51575,7 @@ var Tooltip = function Tooltip(_ref) {
       },
       "data-qa": "tooltip-trigger-".concat(tooltipID),
       text: triggerText,
-      extraStyles: "\n          color: ".concat(themeValues.linkColor, ";\n          cursor: pointer;\n          &:hover { color: ").concat(themeValues.hoverColor, "; text-decoration: none; }\n          &:active, &:focus { color: ").concat(themeValues.activeColor, "; text-decoration: none; }\n          button, span, &:hover span { text-decoration: none; } \n        ")
+      extraStyles: "\n          color: ".concat(themeValues.linkColor, ";\n          &:hover { color: ").concat(themeValues.hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(themeValues.activeColor, ";text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
     });
   };
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -51610,7 +51603,6 @@ var Tooltip = function Tooltip(_ref) {
     extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor || themeValues.borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };
-var Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$12);
 
 var pageBackground = "#FBFCFD";
 var fallbackValues$13 = {
@@ -52171,7 +52163,7 @@ exports.TimeoutImage = TimeoutImage;
 exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
-exports.Tooltip = Tooltip$1;
+exports.Tooltip = Tooltip;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;