@thecb/components 9.3.1-beta.5 → 9.3.1-beta.7

package/dist/index.esm.js

@@ -27569,17 +27569,14 @@ var fallbackValues$x = {
 var SolidDivider = function SolidDivider(_ref) {
   var borderColor = _ref.borderColor,
       borderSize = _ref.borderSize,
-      themeValues = _ref.themeValues,
-      _ref$extraStyles = _ref.extraStyles,
-      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
     minHeight: "1px",
     borderColor: borderColor || themeValues.borderColor,
     borderSize: borderSize || themeValues.borderSize,
-    borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px"),
-    extraStyles: extraStyles
+    borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
 
@@ -48665,6 +48662,8 @@ var idString = function idString(section) {
 };
 
 var RadioSection = function RadioSection(_ref) {
+  var _sections$;
+
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
       supportsTouch = _ref.supportsTouch,
@@ -48683,10 +48682,10 @@ 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,
-      _ref$sectionGroups = _ref.sectionGroups,
-      sectionGroups = _ref$sectionGroups === void 0 ? null : _ref$sectionGroups;
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
+  console.log("sections", sections);
+  var areSectionsGrouped = typeof (sections === null || sections === void 0 ? void 0 : (_sections$ = sections[0]) === null || _sections$ === void 0 ? void 0 : _sections$[0]) !== "undefined";
+  console.log("areSectionsGrouped", areSectionsGrouped);
 
   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) {
@@ -48735,16 +48734,6 @@ var RadioSection = function RadioSection(_ref) {
       focused = _useState2[0],
       setFocused = _useState2[1];
 
-  var PrependedItem = function PrependedItem(_ref5) {
-    var themeValues = _ref5.themeValues;
-    return /*#__PURE__*/React.createElement(SolidDivider$1, {
-      borderSize: "2px",
-      borderRadius: "0 0 0 0",
-      color: themeValues.borderColor,
-      extraStyles: "margin-left: -1px; margin-right: -1px; width: cacl(100% + 2px);"
-    });
-  };
-
   return /*#__PURE__*/React.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
@@ -48752,111 +48741,9 @@ var RadioSection = function RadioSection(_ref) {
     extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0",
-    tabIndex: "0",
     role: "radiogroup",
     "aria-required": isSectionRequired
-  }, sectionGroups && sectionGroups.map(function (sectionGroup) {
-    return /*#__PURE__*/React.createElement(Fragment$1, {
-      key: "sectiongroup-".concat(sectionGroups.indexOf(sectionGroup))
-    }, sectionGroups.indexOf(sectionGroup) !== 0 ? /*#__PURE__*/React.createElement(PrependedItem, {
-      themeValues: themeValues
-    }) : "", sectionGroup.filter(function (unfilteredSection) {
-      return !unfilteredSection.hidden;
-    }).map(function (section) {
-      return /*#__PURE__*/React.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.createElement(Stack, {
-        childGap: "0"
-      }, /*#__PURE__*/React.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.createElement(Cluster, {
-        justify: "space-between",
-        align: "center",
-        childGap: "1px",
-        nowrap: true
-      }, /*#__PURE__*/React.createElement(Cluster, {
-        justify: "flex-start",
-        align: "center",
-        nowrap: true
-      }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
-        padding: "0"
-      }, /*#__PURE__*/React.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.createElement(Cluster, {
-        align: "center"
-      }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
-        padding: section.titleIcon ? "0 0 0 8px" : "0"
-      }, /*#__PURE__*/React.createElement(Text$1, {
-        as: "label",
-        htmlFor: "radio-input-".concat(idString(section)),
-        color: CHARADE_GREY
-      }, section.title))), section.rightIcons && /*#__PURE__*/React.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.createElement(RightIcon, {
-          src: icon.img,
-          key: icon.img,
-          fade: !icon.enabled,
-          isMobile: isMobile,
-          alt: icon.altText,
-          "aria-disabled": !icon.enabled
-        });
-      })), section.rightTitleContent && /*#__PURE__*/React.createElement(Fragment$1, null, section.rightTitleContent))), /*#__PURE__*/React.createElement(AnimatePresence, {
-        initial: false
-      }, openSection === section.id && /*#__PURE__*/React.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) {
+  }, !areSectionsGrouped && sections.filter(function (section) {
     return !section.hidden;
   }).map(function (section) {
     return /*#__PURE__*/React.createElement(Motion, {
@@ -48873,7 +48760,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,
@@ -48895,12 +48782,7 @@ 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,
-      role: "radio",
-      "aria-checked": openSection === section.id,
-      "aria-disabled": section.disabled,
-      "aria-required": section === null || section === void 0 ? void 0 : section.required,
-      tabIndex: "0"
+      dataQa: section.dataQa ? section.dataQa : section.id
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "space-between",
       align: "center",
@@ -48921,6 +48803,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.createElement(Cluster, {
       align: "center"
@@ -48956,6 +48839,104 @@ 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.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.createElement(Stack, {
+        childGap: "0"
+      }, /*#__PURE__*/React.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.createElement(Cluster, {
+        justify: "space-between",
+        align: "center",
+        childGap: "1px",
+        nowrap: true
+      }, /*#__PURE__*/React.createElement(Cluster, {
+        justify: "flex-start",
+        align: "center",
+        nowrap: true
+      }, !section.hideRadioButton && /*#__PURE__*/React.createElement(Box, {
+        padding: "0"
+      }, /*#__PURE__*/React.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.createElement(Cluster, {
+        align: "center"
+      }, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
+        padding: section.titleIcon ? "0 0 0 8px" : "0"
+      }, /*#__PURE__*/React.createElement(Text$1, {
+        as: "label",
+        htmlFor: "radio-input-".concat(idString(section)),
+        color: CHARADE_GREY
+      }, section.title))), section.rightIcons && /*#__PURE__*/React.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.createElement(RightIcon, {
+          src: icon.img,
+          key: icon.img,
+          fade: !icon.enabled,
+          isMobile: isMobile,
+          alt: icon.altText,
+          "aria-disabled": !icon.enabled
+        });
+      })), section.rightTitleContent && /*#__PURE__*/React.createElement(Fragment$1, null, section.rightTitleContent))), /*#__PURE__*/React.createElement(AnimatePresence, {
+        initial: false
+      }, openSection === section.id && /*#__PURE__*/React.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))));
+    });
   })));
 };