@thecb/components 9.2.11 → 9.2.13-beta.0

package/dist/index.cjs.js

@@ -12511,7 +12511,7 @@ var _excluded$f = ["position", "padding", "children"];
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-var Motion = function Motion(_ref) {
+var Motion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? "relative" : _ref$position,
       _ref$padding = _ref.padding,
@@ -12521,9 +12521,10 @@ var Motion = function Motion(_ref) {
 
   return /*#__PURE__*/React__default.createElement(MotionWrapper, _extends({
     position: position,
-    padding: padding
+    padding: padding,
+    ref: ref
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
-};
+});
 
 var ReelStyled = styled__default.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
@@ -22145,7 +22146,6 @@ var Checkbox = function Checkbox(_ref4) {
       checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
       textExtraStyles = _ref4.textExtraStyles,
-      labelledById = _ref4.labelledById,
       _ref4$dataQa = _ref4.dataQa,
       dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
 
@@ -22160,9 +22160,6 @@ var Checkbox = function Checkbox(_ref4) {
     }
   };
 
-  var titleId = title ? "checkboxlabel-".concat(name) : undefined;
-  var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
-  var ariaLabel = ariaLabelledById ? undefined : name;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
@@ -22186,8 +22183,7 @@ var Checkbox = function Checkbox(_ref4) {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledById,
+    "aria-label": name,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22214,7 +22210,6 @@ var Checkbox = function Checkbox(_ref4) {
   }, /*#__PURE__*/React__default.createElement("polyline", {
     points: "20 6 9 17 4 12"
   })))), title && /*#__PURE__*/React__default.createElement(Text$1, {
-    id: titleId,
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
@@ -24061,10 +24056,9 @@ var Dropdown = function Dropdown(_ref13) {
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
-    "aria-multiline": "false",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
-    "aria-activedescendant": "focused_option",
+    "aria-activedescendant": isOpen ? "focused_option" : undefined,
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
@@ -27389,8 +27383,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       name = _ref2.name,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
-      ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
+      ariaDescribedBy = _ref2.ariaDescribedBy,
       themeValues = _ref2.themeValues,
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
@@ -47866,8 +47859,6 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   })))));
 };
 
-var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
-
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
       showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -47930,8 +47921,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;",
-    labelledById: TermsAndConditionsTitleDivId
+    extraStyles: "align-self: flex-start;"
   }), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
@@ -47939,8 +47929,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     justify: "flex-start",
     align: "center",
     nowrap: true,
-    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
-    id: TermsAndConditionsTitleDivId
+    extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
   }, description && /*#__PURE__*/React__default.createElement(Text$1, {
     color: CHARADE_GREY
   }, description), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
@@ -48642,6 +48631,7 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
+var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -48688,11 +48678,39 @@ 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;
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
+      rest = _objectWithoutProperties(_ref, _excluded$z);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var sectionRefs = React.useRef(_toConsumableArray(Array(sections.length)).map(function () {
+    return /*#__PURE__*/React.createRef();
+  }));
+
+  var handleKeyDown = function handleKeyDown(id, e, i) {
+    if (e.currentTarget !== e.target) {
+      return;
+    } // Allow Enter and Space to select a section
+
 
-  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) {
+      e.preventDefault();
       toggleOpenSection(id);
+    } // Allow Up and Down arrow navigation between sections
+
+
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) >= 37 && (e === null || e === void 0 ? void 0 : e.keyCode) <= 40) {
+      var _sections$target, _sections$target2;
+
+      e.preventDefault();
+      var next = i + ((e === null || e === void 0 ? void 0 : e.keyCode) > 38 ? 1 : -1);
+      var target = next == -1 ? sections.length - 1 : next == sections.length ? 0 : next;
+      sectionRefs.current[target].current.focus();
+      setFocused((_sections$target = sections[target]) === null || _sections$target === void 0 ? void 0 : _sections$target.id);
+      toggleOpenSection((_sections$target2 = sections[target]) === null || _sections$target2 === void 0 ? void 0 : _sections$target2.id);
     }
   };
 
@@ -48731,34 +48749,29 @@ var RadioSection = function RadioSection(_ref) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
   });
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: "0",
-    "aria-role": "radiogroup",
+    role: "radiogroup",
     "aria-required": isSectionRequired
-  }, sections.filter(function (section) {
+  }, rest), sections.filter(function (section) {
     return !section.hidden;
-  }).map(function (section) {
+  }).map(function (section, i) {
     return /*#__PURE__*/React__default.createElement(Motion, {
       tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-      onKeyDown: function onKeyDown(e) {
-        return !section.disabled && handleKeyDown(section.id, e);
+      ref: sectionRefs.current[i],
+      onBlur: function onBlur() {
+        return !section.disabled && setFocused(null);
       },
       onFocus: function onFocus() {
         return !section.disabled && setFocused(section.id);
       },
-      onBlur: function onBlur() {
-        return !section.disabled && setFocused(null);
+      onKeyDown: function onKeyDown(e) {
+        return !section.disabled && handleKeyDown(section.id, e, i);
       },
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
@@ -48768,7 +48781,9 @@ var RadioSection = function RadioSection(_ref) {
       role: "radio",
       "aria-checked": openSection === section.id,
       "aria-disabled": section.disabled,
-      "aria-required": section === null || section === void 0 ? void 0 : section.required
+      "aria-required": section.required,
+      "aria-labelledby": section.id,
+      "aria-describedby": "right-icons-".concat(idString(section))
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48807,7 +48822,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: section === null || section === void 0 ? void 0 : section.required
+      isRequired: section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48817,9 +48832,10 @@ var RadioSection = function RadioSection(_ref) {
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+      id: "right-icons-".concat(idString(section)),
       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
+      "aria-label": section.rightIconsLabel || null,
+      role: section.rightIconsRole || null
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,