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

package/dist/index.esm.js

@@ -1871,6 +1871,20 @@ var adjustHexColor = function adjustHexColor(hex, percent, action) {
   // Convert back to hex
   return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).padStart(6, "0"));
 };
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
+  var angle = "".concat(width, " solid transparent");
+  var straight = "".concat(width, " solid ").concat(borderColor);
+  if (direction == "down") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
+  } else if (direction == "up") {
+    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
+  } else if (direction == "left") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
+  } else if (direction == "right") {
+    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1894,7 +1908,8 @@ var general = /*#__PURE__*/Object.freeze({
   titleCaseString: titleCaseString,
   kebabCaseString: kebabCaseString,
   wrapIndex: wrapIndex,
-  adjustHexColor: adjustHexColor
+  adjustHexColor: adjustHexColor,
+  arrowBorder: arrowBorder
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -40223,20 +40238,6 @@ var fallbackValues$I = {
   popoverTriggerColor: popoverTriggerColor
 };
 
-var arrowBorder = function arrowBorder(borderColor, direction) {
-  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
-  var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid ").concat(borderColor);
-  if (direction == "down") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
-  } else if (direction == "up") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
-  } else if (direction == "left") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
-  } else if (direction == "right") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
-  }
-};
 var Popover = function Popover(_ref) {
   var themeValues = _ref.themeValues,
     _ref$triggerText = _ref.triggerText,
@@ -51175,20 +51176,6 @@ var fallbackValues$12 = {
   tooltipTriggerColor: tooltipTriggerColor
 };
 
-var arrowBorder$1 = function arrowBorder(borderColor, direction) {
-  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
-  var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid ").concat(borderColor);
-  if (direction == "down") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
-  } else if (direction == "up") {
-    return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-bottom: ").concat(straight);
-  } else if (direction == "left") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-right: ").concat(straight);
-  } else if (direction == "right") {
-    return "border-top: ".concat(angle, "; border-bottom: ").concat(angle, "; border-left: ").concat(straight);
-  }
-};
 var Tooltip = function Tooltip(_ref) {
   var themeValues = _ref.themeValues,
     _ref$triggerText = _ref.triggerText,
@@ -51260,7 +51247,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   };
   var handleKeyboardEvent = function handleKeyboardEvent(e) {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
+    if (e.key === ESCAPE) {
       handleToggleTooltip(false);
     }
   };
@@ -51296,15 +51283,14 @@ var Tooltip = function Tooltip(_ref) {
     "aria-describedby": tooltipID,
     extraStyles: buttonExtraStyles
   }, hasIconTrigger && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    "aria-label": "Trigger Popover"
+    "aria-label": "Open tooltip"
   }, /*#__PURE__*/React__default.createElement(IconTrigger, {
     color: iconColor
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    srOnly: true,
-    "aria-hidden": "true"
+    srOnly: true
   }, /*#__PURE__*/React__default.createElement(Text$1, null, iconHelpText))), !hasIconTrigger && /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: textExtraStyles
+    extraStyles: "color: ".concat(tooltipTriggerColor, "; &:hover {\n          ").concat(hoverColor, "; &:active ").concat(activeColor, "; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React__default.createElement(Box, {
     background: backgroundColor,
     borderRadius: "4px",
@@ -51317,7 +51303,7 @@ var Tooltip = function Tooltip(_ref) {
     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, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder$1(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(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);
@@ -51557,8 +51543,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    key: "content-box",
-    role: "main"
+    key: "content-box"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React__default.createElement(Fragment$1, null), /*#__PURE__*/React__default.createElement(Box, {
     padding: sidebarWrapperPadding,
     key: "content-wrapper"