@thecb/components 11.1.16 → 11.2.0-beta.1

package/dist/index.esm.js

@@ -28355,21 +28355,25 @@ var RadioButton$1 = function RadioButton(_ref2) {
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      outline: "3px solid ".concat(themeValues.activeColor),
+      outlineWidth: "3px",
+      outlineColor: themeValues.activeColor,
       outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      outline: "0"
+      outlineWidth: "0px",
+      outlineColor: "rgba(0, 0, 0, 0)"
     }
   };
   var buttonCenter = {
@@ -28422,7 +28426,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     width: "24px",
     variants: buttonBorder,
     display: "flex",
-    extraStyles: "justify-content: center; align-items: center;"
+    extraStyles: "outline: 0px solid rgba(0, 0, 0, 0); justify-content: center; align-items: center;"
   }, /*#__PURE__*/React.createElement(Motion, {
     variants: buttonCenter,
     borderRadius: "8px"
@@ -47225,7 +47229,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
     variant: "extraSmall",
     as: "p",
     color: BLACK
-  }, "This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.".concat(autoPayEnabled ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button." : ""))));
+  }, "This may mean the balance has been paid and was removed from the system, or that there was an error loading it. .".concat(autoPayEnabled ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button." : ""))));
 };
 
 var iconColor = ROYAL_BLUE_VIVID;
@@ -49577,7 +49581,8 @@ var RadioSection = function RadioSection(_ref) {
     ariaDescribedBy = _ref.ariaDescribedBy,
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
-    groupedSections = _ref.groupedSections,
+    _ref$groupedSections = _ref.groupedSections,
+    groupedSections = _ref$groupedSections === void 0 ? [] : _ref$groupedSections,
     borderOverride = _ref.borderOverride,
     rest = _objectWithoutProperties(_ref, _excluded$K);
   var _useState = useState(null),
@@ -49587,26 +49592,54 @@ var RadioSection = function RadioSection(_ref) {
   var sectionRefs = useRef(_toConsumableArray(Array(sections.length)).map(function () {
     return /*#__PURE__*/createRef();
   }));
-  var handleKeyDown = function handleKeyDown(id, e, i) {
-    if (e.currentTarget !== e.target) {
+
+  // Flatten the groupedSections while keeping track of indices
+  var flattenedGroupedSections = groupedSections.flatMap(function (group, groupIndex) {
+    return group.map(function (section, sectionIndex) {
+      return _objectSpread2(_objectSpread2({}, section), {}, {
+        groupIndex: groupIndex,
+        sectionIndex: sectionIndex
+      });
+    });
+  });
+  var groupedSectionsRefs = useRef(_toConsumableArray(Array(flattenedGroupedSections.length)).map(function () {
+    return /*#__PURE__*/createRef();
+  }));
+  var getFlatGroupIndex = function getFlatGroupIndex(groupIndex, sectionIndex) {
+    return flattenedGroupedSections.findIndex(function (item) {
+      return item.groupIndex === groupIndex && item.sectionIndex === sectionIndex;
+    });
+  };
+  var handleKeyDown = function handleKeyDown(e, sectionID, sectionIndex, isGroup) {
+    var currentTarget = e.currentTarget,
+      target = e.target,
+      keyCode = e.keyCode;
+    if (currentTarget !== target) {
       return;
     }
+    var refs = isGroup ? groupedSectionsRefs : sectionRefs;
+    var currSection = isGroup ? flattenedGroupedSections : sections;
 
     // Allow Enter and Space to select a section
-    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+    if (keyCode === ENTER || keyCode === SPACEBAR) {
       e.preventDefault();
-      toggleOpenSection(id);
+      toggleOpenSection(sectionID);
     }
 
     // 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$, _sections$nextIndex, _sections$nextIndex2;
+    if (keyCode == ARROW_UP || keyCode == ARROW_DOWN || keyCode == ARROW_LEFT || keyCode == ARROW_RIGHT) {
+      var _refs$current$nextInd;
       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 || (_sectionRefs$current$ = sectionRefs.current[nextIndex]) === null || _sectionRefs$current$ === void 0 || (_sectionRefs$current$ = _sectionRefs$current$.current) === null || _sectionRefs$current$ === void 0 || _sectionRefs$current$.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);
+      var indexIncrement = keyCode == ARROW_RIGHT || keyCode == ARROW_DOWN ? 1 : -1;
+      var nextIndex = wrapIndex(sectionIndex + indexIncrement, currSection.length);
+      var nextRef = refs === null || refs === void 0 || (_refs$current$nextInd = refs.current[nextIndex]) === null || _refs$current$nextInd === void 0 ? void 0 : _refs$current$nextInd.current;
+      if (nextRef) {
+        var _currSection$nextInde;
+        nextRef.focus();
+        var nextRadioID = (_currSection$nextInde = currSection[nextIndex]) === null || _currSection$nextInde === void 0 ? void 0 : _currSection$nextInde.id;
+        setFocused(nextRadioID);
+        toggleOpenSection(nextRadioID);
+      }
     }
   };
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -49634,7 +49667,7 @@ var RadioSection = function RadioSection(_ref) {
       openSection: openSection,
       toggleOpenSection: toggleOpenSection,
       onKeyDown: function onKeyDown(e) {
-        return !section.disabled && handleKeyDown(section.id, e, i);
+        return !section.disabled && handleKeyDown(e, section.id, i);
       },
       ariaLabelledBy: section.id,
       ariaDescribedBy: "right-icons-".concat(idString$1(section)),
@@ -49644,13 +49677,14 @@ var RadioSection = function RadioSection(_ref) {
     return sectionGroup.filter(function (unfilteredSection) {
       return !unfilteredSection.hidden;
     }).map(function (section, sectionIndex) {
+      var flatGroupSectionIndex = getFlatGroupIndex(sectionGroupIndex, sectionIndex);
       return /*#__PURE__*/React.createElement(Fragment$1, {
         key: "key-".concat(sectionGroupIndex, "-").concat(sectionIndex)
       }, /*#__PURE__*/React.createElement(InnerRadioSection, {
         themeValues: themeValues,
-        sectionIndex: "".concat(sectionGroupIndex, "-").concat(sectionIndex),
+        sectionIndex: flatGroupSectionIndex,
         section: section,
-        sectionRefs: sectionRefs,
+        sectionRefs: groupedSectionsRefs,
         focused: focused,
         setFocused: setFocused,
         openHeight: openHeight,
@@ -49658,6 +49692,9 @@ var RadioSection = function RadioSection(_ref) {
         ariaDescribedBy: "right-icons-".concat(idString$1(section)),
         openSection: openSection,
         toggleOpenSection: toggleOpenSection,
+        onKeyDown: function onKeyDown(e) {
+          return !section.disabled && handleKeyDown(e, section.id, flatGroupSectionIndex, true);
+        },
         isLastGroupedItemInSection: sectionIndex === sectionGroup.length - 1
       }), sectionIndex === sectionGroup.length - 1 && sectionGroupIndex !== groupedSections.length - 1 && /*#__PURE__*/React.createElement(SolidDivider$1, {
         borderSize: "1px",