@thecb/components 9.5.0-beta.2 → 9.5.0-beta.4

package/dist/index.esm.js

@@ -47089,7 +47089,8 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     fields = _ref.fields,
     actions = _ref.actions,
     _ref$showErrors = _ref.showErrors,
-    showErrors = _ref$showErrors === void 0 ? false : _ref$showErrors;
+    showErrors = _ref$showErrors === void 0 ? false : _ref$showErrors,
+    dataQa = _ref.dataQa;
   if (clearOnDismount) {
     useEffect(function () {
       return function () {
@@ -47110,7 +47111,8 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
-    "aria-label": "Other amount"
+    "aria-label": "Other amount",
+    "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: "p"
   }, "Pay a different amount. The total balance will still be due on the same due date."), /*#__PURE__*/React.createElement("div", {
@@ -48860,14 +48862,14 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     "aria-required": section.required,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
-    onClick:
-    // This needs to be associated with the same component that has the aria-checked property
-    isMobile && supportsTouch || section.disabled ? noop : function () {
+    onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
       return toggleOpenSection(section.id);
     },
     onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
       return toggleOpenSection(section.id);
-    } : noop
+    } : noop,
+    id: "inner-radio-section-".concat(sectionIndex),
+    "data-qa": section.dataQa ? section.dataQa : section.id || "inner-radio-section-".concat(sectionIndex)
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -48877,8 +48879,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     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
+    extraStyles: !section.disabled ? "cursor: pointer;" : ""
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center",
@@ -49045,14 +49046,14 @@ var RadioSection = function RadioSection(_ref) {
       ariaLabelledBy: section.id,
       ariaDescribedBy: "right-icons-".concat(idString$1(section))
     }));
-  }), !!groupedSections && groupedSections.map(function (sectionGroup) {
+  }), !!groupedSections && groupedSections.map(function (sectionGroup, sectionGroupindex) {
     return sectionGroup.filter(function (unfilteredSection) {
       return !unfilteredSection.hidden;
-    }).map(function (section, i) {
+    }).map(function (section, sectionIndex) {
       return /*#__PURE__*/React.createElement(Fragment$1, {
-        key: "radio-section-".concat(groupedSections.indexOf(sectionGroup), "-").concat(sectionGroup.indexOf(section), "}")
+        key: "key-".concat(sectionGroupindex, "-").concat(sectionIndex, "}")
       }, /*#__PURE__*/React.createElement(InnerRadioSection$1, {
-        sectionIndex: i,
+        sectionIndex: "radio-section-inner-".concat(sectionGroupindex, "-").concat(sectionIndex, "}"),
         section: section,
         sectionRefs: sectionRefs,
         focused: focused,