@thecb/components 11.8.0-beta.5 → 11.8.0-beta.6

package/dist/index.esm.js

@@ -51177,29 +51177,32 @@ var fallbackValues$12 = {
 };
 
 var Tooltip = function Tooltip(_ref) {
-  var themeValues = _ref.themeValues,
-    _ref$triggerText = _ref.triggerText,
-    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
-    _ref$content = _ref.content,
-    content = _ref$content === void 0 ? "" : _ref$content,
+  var _ref$tooltipContainer = _ref.tooltipContainerExtraStyles,
+    tooltipContainerExtraStyles = _ref$tooltipContainer === void 0 ? "" : _ref$tooltipContainer,
+    themeValues = _ref.themeValues,
+    _ref$tooltipID = _ref.tooltipID,
+    tooltipID = _ref$tooltipID === void 0 ? "tooltip-content" : _ref$tooltipID,
     _ref$hasIconTrigger = _ref.hasIconTrigger,
     hasIconTrigger = _ref$hasIconTrigger === void 0 ? false : _ref$hasIconTrigger,
     _ref$IconTrigger = _ref.IconTrigger,
     IconTrigger = _ref$IconTrigger === void 0 ? WarningIconXS : _ref$IconTrigger,
     _ref$iconHelpText = _ref.iconHelpText,
-    iconHelpText = _ref$iconHelpText === void 0 ? "" : _ref$iconHelpText,
-    _ref$tooltipID = _ref.tooltipID,
-    tooltipID = _ref$tooltipID === void 0 ? "tooltip-content" : _ref$tooltipID,
-    _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    _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,
-    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "auto" : _ref$height,
+    iconHelpText = _ref$iconHelpText === void 0 ? "Open the tooltip" : _ref$iconHelpText,
+    _ref$tooltipContent = _ref.tooltipContent,
+    tooltipContent = _ref$tooltipContent === void 0 ? "" : _ref$tooltipContent,
+    _ref$tooltipTriggerTe = _ref.tooltipTriggerText,
+    tooltipTriggerText = _ref$tooltipTriggerTe === void 0 ? "" : _ref$tooltipTriggerTe,
+    _ref$triggerTextExtra = _ref.triggerTextExtraStyles,
+    triggerTextExtraStyles = _ref$triggerTextExtra === void 0 ? "" : _ref$triggerTextExtra,
+    _ref$contentExtraStyl = _ref.contentExtraStyles,
+    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
+    _ref$contentPosition = _ref.contentPosition,
+    contentPosition = _ref$contentPosition === void 0 ? {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    } : _ref$contentPosition,
     _ref$arrowDirection = _ref.arrowDirection,
     arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
     _ref$arrowPosition = _ref.arrowPosition,
@@ -51209,25 +51212,21 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? {
-      top: "-110px",
-      right: "auto",
-      bottom: "auto",
-      left: "-225px"
-    } : _ref$position,
-    _ref$iconColor = _ref.iconColor,
-    iconColor = _ref$iconColor === void 0 ? SELECTIVE_YELLOW : _ref$iconColor,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "300px" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
     buttonExtraStyles = _ref.buttonExtraStyles,
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
     _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
-    tooltipContentExtraStyles = _ref.tooltipContentExtraStyles;
+    borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor;
   var hoverColor = themeValues.hoverColor,
     activeColor = themeValues.activeColor,
     tooltipTriggerColor = themeValues.tooltipTriggerColor;
-  var _ref2 = position !== null && position !== void 0 ? position : {},
+  var _ref2 = contentPosition !== null && contentPosition !== void 0 ? contentPosition : {},
     top = _ref2.top,
     right = _ref2.right,
     bottom = _ref2.bottom,
@@ -51247,13 +51246,13 @@ var Tooltip = function Tooltip(_ref) {
     }
   };
   var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    if (e.key === ESCAPE) {
+    if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
   };
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "position: relative; ".concat(extraStyles)
+    extraStyles: "position: relative; ".concat(tooltipContainerExtraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
       return noop$1;
@@ -51285,13 +51284,13 @@ var Tooltip = function Tooltip(_ref) {
   }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     "aria-label": "Open tooltip"
   }, /*#__PURE__*/React__default.createElement(IconTrigger, {
-    color: iconColor
+    color: tooltipTriggerColor
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     srOnly: true
   }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "color: ".concat(tooltipTriggerColor, "; &:hover {\n          ").concat(hoverColor, "; &:active ").concat(activeColor, "; ").concat(textExtraStyles)
-  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "color: ".concat(tooltipTriggerColor, "; &:hover {\n          ").concat(hoverColor, "; &:active ").concat(activeColor, "; ").concat(triggerTextExtraStyles)
+  }, tooltipTriggerText)), /*#__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)",
@@ -51300,8 +51299,8 @@ var Tooltip = function Tooltip(_ref) {
     minWidth: minWidth,
     maxWidth: maxWidth,
     "aria-hidden": !tooltipOpen,
-    extraStyles: "\n          display: ".concat(tooltipOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(tooltipContentExtraStyles, ";\n          ")
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, content), /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "\n          display: ".concat(tooltipOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, ";\n          ")
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, null, tooltipContent), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(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          ")
   })));