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

package/dist/index.esm.js

@@ -51458,6 +51458,8 @@ var fallbackValues$12 = {
 var Tooltip = function Tooltip(_ref) {
   var tooltipID = _ref.tooltipID,
     children = _ref.children,
+    _ref$hasCustomTrigger = _ref.hasCustomTrigger,
+    hasCustomTrigger = _ref$hasCustomTrigger === void 0 ? false : _ref$hasCustomTrigger,
     _ref$triggerText = _ref.triggerText,
     triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
     _ref$containerExtraSt = _ref.containerExtraStyles,
@@ -51466,7 +51468,6 @@ var Tooltip = function Tooltip(_ref) {
     triggerButtonVariant = _ref$triggerButtonVar === void 0 ? "smallGhost" : _ref$triggerButtonVar,
     _ref$content = _ref.content,
     content = _ref$content === void 0 ? "" : _ref$content,
-    _ref$contentBackgroun = _ref.contentBackgroundColor,
     _ref$contentExtraStyl = _ref.contentExtraStyles,
     contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
     _ref$minWidth = _ref.minWidth,
@@ -51490,7 +51491,8 @@ var Tooltip = function Tooltip(_ref) {
       arrowRight: "10px",
       arrowBottom: "-8px",
       arrowLeft: "auto"
-    } : _ref$arrowPosition;
+    } : _ref$arrowPosition,
+    arrowColor = _ref.arrowColor;
   var closeTimeoutRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -51536,7 +51538,7 @@ var Tooltip = function Tooltip(_ref) {
     };
   }, []);
   var renderTrigger = function renderTrigger() {
-    if (children) {
+    if (hasCustomTrigger && children) {
       return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
         "aria-describedby": tooltipID,
         onFocus: function onFocus() {
@@ -51564,7 +51566,7 @@ var Tooltip = function Tooltip(_ref) {
       },
       "data-qa": "tooltip-trigger-".concat(tooltipID),
       text: triggerText,
-      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        ")
+      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, {
@@ -51589,7 +51591,7 @@ var Tooltip = function Tooltip(_ref) {
     color: themeValues.linkColor
   }, content) : content, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(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          ")
+    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          ")
   })));
 };