@thecb/components 11.8.0-beta.0 → 11.8.0-beta.1

package/dist/index.esm.js

@@ -14855,7 +14855,9 @@ var GenericErrorIcon = function GenericErrorIcon() {
 };
 
 var IconAdd = function IconAdd(_ref) {
-  var _ref$strokeWidth = _ref.strokeWidth,
+  var _ref$stroke = _ref.stroke,
+    stroke = _ref$stroke === void 0 ? "none" : _ref$stroke,
+    _ref$strokeWidth = _ref.strokeWidth,
     strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14870,7 +14872,7 @@ var IconAdd = function IconAdd(_ref) {
   })), /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
-    stroke: "none",
+    stroke: stroke,
     strokeWidth: strokeWidth
   }, /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(-407 -563)"
@@ -25550,15 +25552,17 @@ var Tooltip = function Tooltip(_ref) {
     triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
     _ref$content = _ref.content,
     content = _ref$content === void 0 ? "" : _ref$content,
-    _ref$hasIcon = _ref.hasIcon,
-    hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-    Icon = _ref.icon,
+    _ref$hasIconTrigger = _ref.hasIconTrigger,
+    hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
+    _ref$IconTrigger = _ref.IconTrigger,
+    IconTrigger = _ref$IconTrigger === void 0 ? IconAdd : _ref$IconTrigger,
     _ref$iconHelpText = _ref.iconHelpText,
     iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
     _ref$tooltipID = _ref.tooltipID,
     tooltipID = _ref$tooltipID === void 0 ? 0 : _ref$tooltipID,
     extraStyles = _ref.extraStyles,
-    textExtraStyles = _ref.textExtraStyles,
+    _ref$textExtraStyles = _ref.textExtraStyles,
+    textExtraStyles = _ref$textExtraStyles === void 0 ? "" : _ref$textExtraStyles,
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
     _ref$maxWidth = _ref.maxWidth,
@@ -25607,9 +25611,11 @@ var Tooltip = function Tooltip(_ref) {
       setTooltipOpen(tooltipState);
     }
   };
-  var triggerRef = useOutsideClickHook(function () {
-    return handleToggleTooltip(false);
-  });
+  var handleKeyboardEvent = function handleKeyboardEvent(e) {
+    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+      handleToggleTooltip(false);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -25618,16 +25624,12 @@ var Tooltip = function Tooltip(_ref) {
       return noop$1;
     },
     onFocus: function onFocus() {
-      handleToggleTooltip(true);
+      return handleToggleTooltip(true);
     },
     onBlur: function onBlur() {
-      handleToggleTooltip(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === ESCAPE) {
-        handleToggleTooltip(false);
-      }
+      return handleToggleTooltip(false);
     },
+    onKeyDown: handleKeyboardEvent,
     onTouchStart: function onTouchStart() {
       return handleToggleTooltip(true);
     },
@@ -25643,20 +25645,20 @@ var Tooltip = function Tooltip(_ref) {
     contentOverride: true,
     variant: "smallGhost",
     tabIndex: "0",
-    "aria-describedby": tooltipOpen ? "tooltip".concat(tooltipID) : undefined,
-    ref: triggerRef,
+    "aria-describedby": tooltipID,
     extraStyles: buttonExtraStyles
-  }, hasIcon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Box, {
+  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconTrigger, {
+    stroke: BLACK
+  }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     srOnly: true
-  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIcon && /*#__PURE__*/React__default.createElement(Text$1, {
-    color: tooltipTriggerColor,
-    extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
+    extraStyles: textExtraStyles
   }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     background: backgroundColor,
     borderRadius: "4px",
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-    id: "tooltip".concat(tooltipID),
+    id: tooltipID,
     role: "tooltip",
     minWidth: minWidth,
     maxWidth: maxWidth,