@thecb/components 9.3.1-beta.8 → 9.3.1

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"];
@@ -12511,7 +12521,7 @@ var _excluded$f = ["position", "padding", "children"];
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-var Motion = function Motion(_ref) {
+var Motion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? "relative" : _ref$position,
       _ref$padding = _ref.padding,
@@ -12521,9 +12531,10 @@ var Motion = function Motion(_ref) {
 
   return /*#__PURE__*/React__default.createElement(MotionWrapper, _extends({
     position: position,
-    padding: padding
+    padding: padding,
+    ref: ref
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
-};
+});
 
 var ReelStyled = styled__default.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
@@ -12926,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,
@@ -12957,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,
@@ -12985,7 +12997,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
-};
+});
 
 var primaryColor = {
   info: "".concat(WHITE),
@@ -15299,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",
@@ -15323,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"
@@ -18259,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";
@@ -22085,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"
@@ -22155,7 +22204,7 @@ 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();
     }
   };
@@ -24061,10 +24110,9 @@ var Dropdown = function Dropdown(_ref13) {
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
-    "aria-multiline": "false",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
-    "aria-activedescendant": "focused_option",
+    "aria-activedescendant": isOpen ? "focused_option" : undefined,
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
@@ -24128,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);
         }
       },
@@ -25494,7 +25542,7 @@ var Popover = function Popover(_ref) {
       handleTogglePopover(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 27) {
+      if (e.keyCode === ESCAPE) {
         handleTogglePopover(false);
       }
     },
@@ -27389,8 +27437,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       name = _ref2.name,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
-      ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
+      ariaDescribedBy = _ref2.ariaDescribedBy,
       themeValues = _ref2.themeValues,
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
@@ -38306,7 +38353,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   });
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       onToggle();
     }
   };
@@ -39835,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();
     }
   };
@@ -48642,6 +48689,7 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
+var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -48670,8 +48718,6 @@ var idString = function idString(section) {
 };
 
 var RadioSection = function RadioSection(_ref) {
-  var _sections$;
-
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
       supportsTouch = _ref.supportsTouch,
@@ -48690,12 +48736,39 @@ var RadioSection = function RadioSection(_ref) {
       containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
       ariaDescribedBy = _ref.ariaDescribedBy,
       _ref$isSectionRequire = _ref.isSectionRequired,
-      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
-  var areSectionsGrouped = typeof (sections === null || sections === void 0 ? void 0 : (_sections$ = sections[0]) === null || _sections$ === void 0 ? void 0 : _sections$[0]) !== "undefined";
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
+      rest = _objectWithoutProperties(_ref, _excluded$z);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var sectionRefs = React.useRef(_toConsumableArray(Array(sections.length)).map(function () {
+    return /*#__PURE__*/React.createRef();
+  }));
 
-  var handleKeyDown = function handleKeyDown(id, e) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
+  var handleKeyDown = function handleKeyDown(id, e, i) {
+    if (e.currentTarget !== e.target) {
+      return;
+    } // Allow Enter and Space to select a section
+
+
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
       toggleOpenSection(id);
+    } // Allow Up and Down arrow navigation between sections
+
+
+    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 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);
     }
   };
 
@@ -48734,44 +48807,41 @@ var RadioSection = function RadioSection(_ref) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
   });
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: "0",
     role: "radiogroup",
     "aria-required": isSectionRequired
-  }, !areSectionsGrouped && sections.filter(function (section) {
+  }, rest), sections.filter(function (section) {
     return !section.hidden;
-  }).map(function (section) {
+  }).map(function (section, i) {
     return /*#__PURE__*/React__default.createElement(Motion, {
       tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-      onKeyDown: function onKeyDown(e) {
-        return !section.disabled && handleKeyDown(section.id, e);
+      ref: sectionRefs.current[i],
+      onBlur: function onBlur() {
+        return !section.disabled && setFocused(null);
       },
       onFocus: function onFocus() {
         return !section.disabled && setFocused(section.id);
       },
-      onBlur: function onBlur() {
-        return !section.disabled && setFocused(null);
+      onKeyDown: function onKeyDown(e) {
+        return !section.disabled && handleKeyDown(section.id, e, i);
       },
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
       initial: initiallyOpen ? "open" : "closed",
-      key: "item-".concat(sections.indexOf(section)),
+      key: "item-".concat(section.id),
       extraStyles: borderStyles,
       role: "radio",
       "aria-checked": openSection === section.id,
       "aria-disabled": section.disabled,
-      "aria-required": section === null || section === void 0 ? void 0 : section.required
+      "aria-required": section.required,
+      "aria-labelledby": section.id,
+      "aria-describedby": "right-icons-".concat(idString(section))
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48810,7 +48880,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: section === null || section === void 0 ? void 0 : section.required
+      isRequired: section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48820,9 +48890,10 @@ var RadioSection = function RadioSection(_ref) {
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+      id: "right-icons-".concat(idString(section)),
       childGap: "0.5rem",
-      "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
-      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
+      "aria-label": section.rightIconsLabel || null,
+      role: section.rightIconsRole || null
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,
@@ -48845,107 +48916,6 @@ var RadioSection = function RadioSection(_ref) {
       variants: wrapper,
       extraStyles: "transform-origin: 100% 0;"
     }, section.content))));
-  }), areSectionsGrouped && sections.map(function (sectionGroup) {
-    return sectionGroup.filter(function (section) {
-      return !section.hidden;
-    }).map(function (section) {
-      return /*#__PURE__*/React__default.createElement(Motion, {
-        tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-        onKeyDown: function onKeyDown(e) {
-          return !section.disabled && handleKeyDown(section.id, e);
-        },
-        onFocus: function onFocus() {
-          return !section.disabled && setFocused(section.id);
-        },
-        onBlur: function onBlur() {
-          return !section.disabled && setFocused(null);
-        },
-        hoverStyles: themeValues.focusStyles,
-        animate: openSection === section.id ? "open" : "closed",
-        initial: initiallyOpen ? "open" : "closed",
-        key: "item-".concat(sections.indexOf(sectionGroup), "-").concat(sectionGroup.indexOf(section)),
-        extraStyles: borderStyles,
-        role: "radio",
-        "aria-checked": openSection === section.id,
-        "aria-disabled": section.disabled,
-        "aria-required": section === null || section === void 0 ? void 0 : section.required
-      }, /*#__PURE__*/React__default.createElement(Stack, {
-        childGap: "0"
-      }, /*#__PURE__*/React__default.createElement(Box, {
-        padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
-        background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-        onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
-          return toggleOpenSection(section.id);
-        },
-        onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
-          return toggleOpenSection(section.id);
-        } : noop,
-        key: "header-".concat(section.id),
-        borderSize: "0px",
-        borderColor: themeValues.borderColor,
-        borderWidthOverride: openSection === section.id && !!section.content ? "0px 0px 1px 0px" : "",
-        extraStyles: !section.disabled ? "cursor: pointer;" : "",
-        dataQa: section.dataQa ? section.dataQa : section.id
-      }, /*#__PURE__*/React__default.createElement(Cluster, {
-        justify: "space-between",
-        align: "center",
-        childGap: "1px",
-        nowrap: true
-      }, /*#__PURE__*/React__default.createElement(Cluster, {
-        justify: "flex-start",
-        align: "center",
-        nowrap: true
-      }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
-        padding: "0"
-      }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
-        id: "radio-input-".concat(idString(section)),
-        name: idString(section),
-        ariaDescribedBy: ariaDescribedBy,
-        radioOn: openSection === section.id,
-        radioFocused: focused === section.id,
-        toggleRadio: section.disabled ? noop : function () {
-          return toggleOpenSection(section.id);
-        },
-        tabIndex: "-1",
-        isRequired: section === null || section === void 0 ? void 0 : section.required
-      })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
-        align: "center"
-      }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
-        padding: section.titleIcon ? "0 0 0 8px" : "0"
-      }, /*#__PURE__*/React__default.createElement(Text$1, {
-        as: "label",
-        htmlFor: "radio-input-".concat(idString(section)),
-        color: CHARADE_GREY
-      }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
-        childGap: "0.5rem",
-        "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
-        role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
-      }, section.rightIcons.map(function (icon) {
-        return /*#__PURE__*/React__default.createElement(RightIcon, {
-          src: icon.img,
-          key: icon.img,
-          fade: !icon.enabled,
-          isMobile: isMobile,
-          alt: icon.altText,
-          "aria-disabled": !icon.enabled
-        });
-      })), section.rightTitleContent && /*#__PURE__*/React__default.createElement(React.Fragment, null, section.rightTitleContent))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
-        initial: false
-      }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
-        key: "content-".concat(section.id),
-        padding: "0",
-        background: themeValues.bodyBackgroundColor,
-        layoutTransition: true,
-        initial: "closed",
-        animate: "open",
-        exit: "closed",
-        variants: wrapper,
-        extraStyles: "transform-origin: 100% 0;"
-      }, section.content))), sectionGroup.indexOf(section) === sectionGroup.length - 1 && /*#__PURE__*/React__default.createElement(SolidDivider$1, {
-        borderSize: "2px",
-        borderColor: themeValues.borderColor
-      }));
-    });
   })));
 };
 
@@ -49976,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;