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

package/dist/index.cjs.js

@@ -51175,35 +51175,25 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
-var hoverColor$6 = "#116285";
-var activeColor$b = "#0E506D";
-var tooltipTriggerColor = "#15749D";
+var TOOLTIP_THEME_SOURCE = "Popover";
 var fallbackValues$12 = {
-  hoverColor: hoverColor$6,
-  activeColor: activeColor$b,
-  tooltipTriggerColor: tooltipTriggerColor
+  hoverColor: SAPPHIRE_BLUE,
+  activeColor: PEACOCK_BLUE,
+  popoverTriggerColor: MATISSE_BLUE,
+  borderColor: "rgba(255, 255, 255, 0.85)"
 };
-
 var Tooltip = function Tooltip(_ref) {
-  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,
+  var tooltipID = _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 ? "Open the tooltip" : _ref$iconHelpText,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "Open the tooltip" : _ref$triggerText,
     _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,
+    tooltipContent = _ref$tooltipContent === void 0 ? "The contents of the tooltip go here." : _ref$tooltipContent,
     _ref$contentPosition = _ref.contentPosition,
     contentPosition = _ref$contentPosition === void 0 ? {
       top: "-110px",
@@ -51226,31 +51216,34 @@ var Tooltip = function Tooltip(_ref) {
     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;
-  var hoverColor = themeValues.hoverColor,
-    activeColor = themeValues.activeColor,
-    tooltipTriggerColor = themeValues.tooltipTriggerColor;
-  var _ref2 = contentPosition !== null && contentPosition !== void 0 ? contentPosition : {},
-    top = _ref2.top,
-    right = _ref2.right,
-    bottom = _ref2.bottom,
-    left = _ref2.left;
-  var _ref3 = arrowPosition !== null && arrowPosition !== void 0 ? arrowPosition : {},
-    arrowTop = _ref3.arrowTop,
-    arrowRight = _ref3.arrowRight,
-    arrowBottom = _ref3.arrowBottom,
-    arrowLeft = _ref3.arrowLeft;
+    _ref$containerExtraSt = _ref.containerExtraStyles,
+    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
+    _ref$triggerExtraStyl = _ref.triggerExtraStyles,
+    triggerExtraStyles = _ref$triggerExtraStyl === void 0 ? "" : _ref$triggerExtraStyl,
+    _ref$triggerButtonVar = _ref.triggerButtonVariant,
+    triggerButtonVariant = _ref$triggerButtonVar === void 0 ? "smallGhost" : _ref$triggerButtonVar;
+  var closeTimeoutRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
-  var handleToggleTooltip = function handleToggleTooltip(tooltipState) {
-    if (tooltipOpen !== tooltipState) {
-      setTooltipOpen(tooltipState);
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
+  var borderColor = themeValues.borderColor,
+    tooltipTriggerColor = themeValues.popoverTriggerColor,
+    hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor;
+  var top = contentPosition.top,
+    right = contentPosition.right,
+    bottom = contentPosition.bottom,
+    left = contentPosition.left;
+  var arrowTop = arrowPosition.arrowTop,
+    arrowRight = arrowPosition.arrowRight,
+    arrowBottom = arrowPosition.arrowBottom,
+    arrowLeft = arrowPosition.arrowLeft;
+  var handleToggleTooltip = function handleToggleTooltip(desiredTooltipState) {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
     }
   };
   var handleKeyboardEvent = function handleKeyboardEvent(e) {
@@ -51258,62 +51251,77 @@ var Tooltip = function Tooltip(_ref) {
       handleToggleTooltip(false);
     }
   };
+  var handleMouseEnter = function handleMouseEnter() {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    closeTimeoutRef.current = setTimeout(function () {
+      handleToggleTooltip(false);
+    }, 300);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
   return /*#__PURE__*/React__default.createElement(Box, {
+    ref: closeTimeoutRef,
     padding: "0",
-    extraStyles: "position: relative; ".concat(tooltipContainerExtraStyles)
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    action: function action() {
-      return noop$1;
+    extraStyles: "position: relative; ".concat(containerExtraStyles),
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEnter();
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseLeave();
     },
+    "data-qa": "tooltip-container"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    "aria-describedby": tooltipID,
+    onKeyDown: handleKeyboardEvent,
+    variant: triggerButtonVariant,
     onFocus: function onFocus() {
       return handleToggleTooltip(true);
     },
     onBlur: function onBlur() {
       return handleToggleTooltip(false);
     },
-    onKeyDown: handleKeyboardEvent,
     onTouchStart: function onTouchStart() {
       return handleToggleTooltip(true);
     },
-    onTouchEnd: function onTouchEnd() {
-      return handleToggleTooltip(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return handleToggleTooltip(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return handleToggleTooltip(false);
-    },
-    contentOverride: true,
-    variant: "smallGhost",
-    tabIndex: "0",
-    "aria-describedby": tooltipID,
-    extraStyles: buttonExtraStyles
-  }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
+    "data-qa": "tooltip-trigger",
+    contentOverride: true
+  }, hasIconTrigger === true && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     "aria-label": "Open tooltip"
   }, /*#__PURE__*/React__default.createElement(IconTrigger, {
     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(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)",
-    id: tooltipID,
+  }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), hasIconTrigger === false && /*#__PURE__*/React__default.createElement(Text$1, {
+    color: tooltipTriggerColor,
+    extraStyles: "\n              color: ".concat(tooltipTriggerColor, ";\n              &:visited {\n                color: ").concat(tooltipTriggerColor, ";\n              }\n              &:hover {\n                color: ").concat(hoverColor, "; \n              }\n              &:active,\n              &:focus {\n                color: ").concat(activeColor, "; \n              }\n              ").concat(triggerExtraStyles, ";\n            ")
+  }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     role: "tooltip",
-    minWidth: minWidth,
-    maxWidth: maxWidth,
+    id: tooltipID,
     "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(contentExtraStyles, ";\n          ")
+    "data-qa": "tooltip-contents",
+    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, "; \n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          "),
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    border: "1px solid transparent",
+    borderRadius: "4px",
+    minWidth: minWidth,
+    maxWidth: maxWidth
   }, /*#__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          ")
   })));
 };
-var Tooltip$1 = themeComponent(Tooltip, "Tooltip", fallbackValues$12);
 
 var pageBackground = "#FBFCFD";
 var fallbackValues$13 = {
@@ -51870,7 +51878,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;