@thecb/components 9.3.1-beta.1 → 9.3.1-beta.10

package/dist/index.cjs.js

@@ -48670,6 +48670,8 @@ var idString = function idString(section) {
 };
 
 var RadioSection = function RadioSection(_ref) {
+  var _sections$;
+
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
       supportsTouch = _ref.supportsTouch,
@@ -48688,8 +48690,8 @@ 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,
-      _ref$legendText = _ref.legendText;
+      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";
 
   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) {
@@ -48744,18 +48746,10 @@ var RadioSection = function RadioSection(_ref) {
     borderRadius: "4px",
     extraStyles: containerStyles
   }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0"
-  }, /*#__PURE__*/React__default.createElement("fieldset", {
+    childGap: "0",
     role: "radiogroup",
-    tabIndex: "0",
-    required: isSectionRequired
-  }, /*#__PURE__*/React__default.createElement("legend", null, /*#__PURE__*/React__default.createElement(Box, {
-    width: "0",
-    srOnly: true,
-    border: "0",
-    padding: "0",
-    margin: "0"
-  })), sections.filter(function (section) {
+    "aria-required": isSectionRequired
+  }, !areSectionsGrouped && sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
     return /*#__PURE__*/React__default.createElement(Motion, {
@@ -48772,7 +48766,7 @@ var RadioSection = function RadioSection(_ref) {
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
       initial: initiallyOpen ? "open" : "closed",
-      key: "item-".concat(section.id),
+      key: "item-".concat(sections.indexOf(section)),
       extraStyles: borderStyles,
       role: "radio",
       "aria-checked": openSection === section.id,
@@ -48815,6 +48809,7 @@ var RadioSection = function RadioSection(_ref) {
       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"
@@ -48850,7 +48845,108 @@ 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))), sections.indexOf(sectionGroup) !== sections.length - 1 && sectionGroup.indexOf(section) === sectionGroup.length - 1 && /*#__PURE__*/React__default.createElement(SolidDivider$1, {
+        borderSize: "2px",
+        borderColor: themeValues.borderColor
+      }));
+    });
+  })));
 };
 
 var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$Q);