@thecb/components 9.2.13-beta.0 → 9.2.13-beta.2

package/dist/index.cjs.js

@@ -6371,6 +6371,15 @@ var titleCaseString = function titleCaseString(string) {
 var kebabCaseString = function kebabCaseString(string) {
   return string === null || string === void 0 ? void 0 : string.replaceAll(" ", "-").toLowerCase();
 };
+var wrapIndex = function wrapIndex(index, length) {
+  if (index <= -1) {
+    return length - 1;
+  } else if (index >= length) {
+    return 0;
+  } else {
+    return index;
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6391,7 +6400,8 @@ var general = /*#__PURE__*/Object.freeze({
   throttle: throttle,
   titleCaseWord: titleCaseWord,
   titleCaseString: titleCaseString,
-  kebabCaseString: kebabCaseString
+  kebabCaseString: kebabCaseString,
+  wrapIndex: wrapIndex
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -12927,7 +12937,7 @@ var Spinner = function Spinner(_ref) {
 */
 
 
-var ButtonWithAction = function ButtonWithAction(_ref2) {
+var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
       action = _ref2$action === void 0 ? noop : _ref2$action,
       _ref2$variant = _ref2.variant,
@@ -12958,6 +12968,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
+    ref: ref,
     variant: variant,
     padding: themeValues.padding,
     minHeight: themeValues.height,
@@ -12986,7 +12997,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
-};
+});
 
 var primaryColor = {
   info: "".concat(WHITE),
@@ -15300,7 +15311,8 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
 };
 
 var TrashIcon = function TrashIcon(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20px",
     height: "20px",
@@ -15324,12 +15336,12 @@ var TrashIcon = function TrashIcon(_ref) {
     xlinkHref: "#trash-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "trash-Mask",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     xlinkHref: "#trash-path-1"
   }), /*#__PURE__*/React__default.createElement("polygon", {
     id: "trash-Path",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     mask: "url(#trash-mask-2)",
     points: "0 0 20 0 20 20 0 20"
@@ -18260,6 +18272,34 @@ var PlusCircleIcon = function PlusCircleIcon(_ref) {
   }));
 };
 
+var KebabMenuIcon = function KebabMenuIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "32",
+    viewBox: "0 0 21 32",
+    fill: "none"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 4C0 1.79086 1.79086 0 4 0L17 0C19.2091 0 21 1.79086 21 4V28C21 30.2091 19.2091 32 17 32H4C1.79086 32 0 30.2091 0 28L0 4Z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 6C9.39333 6 8.5 6.89333 8.5 8C8.5 9.10667 9.39333 10 10.5 10C11.6067 10 12.5 9.10667 12.5 8C12.5 6.89333 11.6067 6 10.5 6Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 14C9.39333 14 8.5 14.8933 8.5 16C8.5 17.1067 9.39333 18 10.5 18C11.6067 18 12.5 17.1067 12.5 16C12.5 14.8933 11.6067 14 10.5 14Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 22C9.39333 22 8.5 22.9067 8.5 24C8.5 25.0933 9.40667 26 10.5 26C11.5933 26 12.5 25.0933 12.5 24C12.5 22.9067 11.6067 22 10.5 22Z",
+    fill: "#3B5BDB"
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -22086,6 +22126,14 @@ var fallbackValues$d = {
   disabledCheckedStyles: disabledCheckedStyles
 };
 
+var ARROW_LEFT = 37;
+var ARROW_UP = 38;
+var ARROW_RIGHT = 39;
+var ARROW_DOWN = 40;
+var ENTER = 13;
+var ESCAPE = 27;
+var SPACEBAR = 32;
+
 var CheckboxContainer = styled__default.div.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22146,6 +22194,7 @@ var Checkbox = function Checkbox(_ref4) {
       checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
+      labelledById = _ref4.labelledById,
       _ref4$dataQa = _ref4.dataQa,
       dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
@@ -22155,11 +22204,14 @@ var Checkbox = function Checkbox(_ref4) {
       setFocused = _useState2[1];
 
   var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+    if (e.keyCode === ENTER) {
       func();
     }
   };
 
+  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
+  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
+  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22183,7 +22235,8 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledById,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22210,6 +22263,7 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React__default.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), title && /*#__PURE__*/React__default.createElement(Text$1, {
+    id: titleId,
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
@@ -24122,7 +24176,7 @@ var Dropdown = function Dropdown(_ref13) {
         return handleItemSelection(e, choice, i);
       },
       onKeyDown: function onKeyDown(e) {
-        if (e.keyCode === 13) {
+        if (e.keyCode === ENTER) {
           handleItemSelection(e, choice, i);
         }
       },
@@ -25488,7 +25542,7 @@ var Popover = function Popover(_ref) {
       handleTogglePopover(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 27) {
+      if (e.keyCode === ESCAPE) {
         handleTogglePopover(false);
       }
     },
@@ -38299,7 +38353,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   });
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       onToggle();
     }
   };
@@ -39828,7 +39882,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       toggleSection();
     }
   };
@@ -47859,6 +47913,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   })))));
 };
 
+var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
+
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
       showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -47921,7 +47977,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;"
+    extraStyles: "align-self: flex-start;",
+    labelledById: TermsAndConditionsTitleDivId
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47929,7 +47986,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
+    id: TermsAndConditionsTitleDivId
   }, description && /*#__PURE__*/React__default.createElement(Text$1, {
     color: CHARADE_GREY
   }, description), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
@@ -48696,21 +48754,21 @@ var RadioSection = function RadioSection(_ref) {
     } // Allow Enter and Space to select a section
 
 
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
       e.preventDefault();
       toggleOpenSection(id);
     } // Allow Up and Down arrow navigation between sections
 
 
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) >= 37 && (e === null || e === void 0 ? void 0 : e.keyCode) <= 40) {
-      var _sections$target, _sections$target2;
+    if (e.keyCode == ARROW_UP || e.keyCode == ARROW_DOWN || e.keyCode == ARROW_LEFT || e.keyCode == ARROW_RIGHT) {
+      var _sectionRefs$current$, _sectionRefs$current$2, _sections$nextIndex, _sections$nextIndex2;
 
       e.preventDefault();
-      var next = i + ((e === null || e === void 0 ? void 0 : e.keyCode) > 38 ? 1 : -1);
-      var target = next == -1 ? sections.length - 1 : next == sections.length ? 0 : next;
-      sectionRefs.current[target].current.focus();
-      setFocused((_sections$target = sections[target]) === null || _sections$target === void 0 ? void 0 : _sections$target.id);
-      toggleOpenSection((_sections$target2 = sections[target]) === null || _sections$target2 === void 0 ? void 0 : _sections$target2.id);
+      var indexIncrement = e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
+      var nextIndex = wrapIndex(i + indexIncrement, sections.length);
+      sectionRefs === null || sectionRefs === void 0 ? void 0 : (_sectionRefs$current$ = sectionRefs.current[nextIndex]) === null || _sectionRefs$current$ === void 0 ? void 0 : (_sectionRefs$current$2 = _sectionRefs$current$.current) === null || _sectionRefs$current$2 === void 0 ? void 0 : _sectionRefs$current$2.focus();
+      setFocused((_sections$nextIndex = sections[nextIndex]) === null || _sections$nextIndex === void 0 ? void 0 : _sections$nextIndex.id);
+      toggleOpenSection((_sections$nextIndex2 = sections[nextIndex]) === null || _sections$nextIndex2 === void 0 ? void 0 : _sections$nextIndex2.id);
     }
   };
 
@@ -49888,6 +49946,7 @@ exports.ImageBox = ImageBox;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;
+exports.KebabMenuIcon = KebabMenuIcon;
 exports.KioskImage = KioskImage;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;