@thecb/components 11.9.0 → 11.10.0-beta.0

package/dist/index.cjs.js

@@ -51604,8 +51604,163 @@ var Tooltip = function Tooltip(_ref) {
   })));
 };
 
-var pageBackground = "#FBFCFD";
+var TOOLTIP_V2_THEME_SOURCE = "Popover";
+var hoverColor$6 = SAPPHIRE_BLUE;
+var activeColor$b = PEACOCK_BLUE;
+var tooltipTriggerColor = MATISSE_BLUE;
+var borderColor$7 = "rgba(255, 255, 255, 0.85)";
 var fallbackValues$13 = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$b,
+  tooltipTriggerColor: tooltipTriggerColor,
+  borderColor: borderColor$7
+};
+
+var TooltipV2 = function TooltipV2(_ref) {
+  var children = _ref.children,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    tooltipID = _ref.tooltipID,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
+    _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,
+    arrowPosition = _ref$arrowPosition === void 0 ? {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    } : _ref$arrowPosition,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "100%" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    _ref$containerExtraSt = _ref.containerExtraStyles,
+    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
+    _ref$contentExtraStyl = _ref.contentExtraStyles,
+    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
+    _ref$contentBackgroun = _ref.contentBackgroundColor,
+    contentBackgroundColor = _ref$contentBackgroun === void 0 ? WHITE : _ref$contentBackgroun,
+    _ref$triggerVariant = _ref.triggerVariant,
+    triggerVariant = _ref$triggerVariant === void 0 ? "smallGhost" : _ref$triggerVariant;
+  var closeTimeoutRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipOpen = _useState2[0],
+    setTooltipOpen = _useState2[1];
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$13, TOOLTIP_V2_THEME_SOURCE);
+  var arrowColor = themeValues.borderColor,
+    tooltipTriggerColor = themeValues.tooltipTriggerColor,
+    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(desiredState) {
+    if (tooltipOpen !== desiredState) {
+      setTooltipOpen(desiredState);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      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);
+      }
+    };
+  }, []);
+  var renderTrigger = function renderTrigger() {
+    if (children) {
+      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+        "aria-describedby": tooltipID,
+        onFocus: function onFocus() {
+          return handleToggleTooltip(true);
+        },
+        onBlur: function onBlur() {
+          return handleToggleTooltip(false);
+        },
+        onKeyDown: handleKeyDown
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      action: function action() {
+        return noop$1;
+      },
+      "aria-describedby": tooltipID,
+      onKeyDown: handleKeyDown,
+      variant: triggerVariant,
+      onFocus: function onFocus() {
+        return handleToggleTooltip(true);
+      },
+      onBlur: function onBlur() {
+        return handleToggleTooltip(false);
+      },
+      onTouchStart: function onTouchStart() {
+        return handleToggleTooltip(true);
+      },
+      "data-qa": "tooltip-v2-trigger",
+      text: triggerText,
+      extraStyles: "\n          color: ".concat(tooltipTriggerColor, ";\n          &:hover { color: ").concat(hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(activeColor, "; text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(containerExtraStyles),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    "data-qa": "tooltip-v2-container"
+  }, renderTrigger(), /*#__PURE__*/React__default.createElement(Box, {
+    role: "tooltip",
+    id: tooltipID,
+    "aria-hidden": !tooltipOpen,
+    background: contentBackgroundColor,
+    "data-qa": "tooltip-v2-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          ").concat(contentExtraStyles, "\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
+  }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, null, content) : content, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor, 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 pageBackground = "#FBFCFD";
+var fallbackValues$14 = {
   pageBackground: pageBackground
 };
 
@@ -51653,7 +51808,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$13));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$14));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51696,7 +51851,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$13));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$14));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51742,7 +51897,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$13));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$14));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51795,7 +51950,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$13));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$14));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51864,7 +52019,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$13));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$14));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -52164,6 +52319,7 @@ exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.Tooltip = Tooltip;
+exports.TooltipV2 = TooltipV2;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;