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

package/dist/index.cjs.js

@@ -48689,7 +48689,10 @@ var RadioSection = function RadioSection(_ref) {
       ariaDescribedBy = _ref.ariaDescribedBy,
       _ref$isSectionRequire = _ref.isSectionRequired,
       isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
-      _ref$legendText = _ref.legendText;
+      _ref$legendText = _ref.legendText,
+      legendText = _ref$legendText === void 0 ? "" : _ref$legendText,
+      _ref$sectionGroups = _ref.sectionGroups,
+      sectionGroups = _ref$sectionGroups === void 0 ? null : _ref$sectionGroups;
 
   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) {
@@ -48748,14 +48751,124 @@ var RadioSection = function RadioSection(_ref) {
   }, /*#__PURE__*/React__default.createElement("fieldset", {
     role: "radiogroup",
     tabIndex: "0",
-    required: isSectionRequired
-  }, /*#__PURE__*/React__default.createElement("legend", null, /*#__PURE__*/React__default.createElement(Box, {
-    width: "0",
+    "aria-required": isSectionRequired,
+    style: {
+      padding: 0,
+      margin: 0,
+      border: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    as: "legend",
     srOnly: true,
-    border: "0",
     padding: "0",
     margin: "0"
-  })), sections.filter(function (section) {
+  }, legendText), sectionGroups && sectionGroups.map(function (sectionGroup) {
+    var prependedItem = "";
+
+    if (sectionGroups.indexOf(sectionGroup) !== 0) {
+      prependedItem = /*#__PURE__*/React__default.createElement(SolidDivider$1, {
+        borderSize: "2px",
+        color: themeValues.borderColor
+      });
+    }
+
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, prependedItem, sectionGroup.filter(function (unfilteredSection) {
+      return !unfilteredSection.hidden;
+    }).map(function (section) {
+      return /*#__PURE__*/React__default.createElement(Motion, {
+        tabIndex: section.hidden || 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(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
+      }, /*#__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);
+        },
+        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 && sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
     return /*#__PURE__*/React__default.createElement(Motion, {
@@ -48773,11 +48886,7 @@ var RadioSection = function RadioSection(_ref) {
       animate: openSection === section.id ? "open" : "closed",
       initial: initiallyOpen ? "open" : "closed",
       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
+      extraStyles: borderStyles
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48794,7 +48903,12 @@ var RadioSection = function RadioSection(_ref) {
       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
+      dataQa: section.dataQa ? section.dataQa : section.id,
+      role: "radio",
+      "aria-checked": openSection === section.id,
+      "aria-disabled": section.disabled,
+      "aria-required": section === null || section === void 0 ? void 0 : section.required,
+      tabIndex: "0"
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "space-between",
       align: "center",