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

package/dist/index.cjs.js

@@ -18762,7 +18762,13 @@ var Alert = function Alert(_ref) {
       _ref$iconPadding = _ref.iconPadding,
       iconPadding = _ref$iconPadding === void 0 ? "0 0 0 1rem" : _ref$iconPadding,
       _ref$contentFullHeigh = _ref.contentFullHeight,
-      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh;
+      contentFullHeight = _ref$contentFullHeigh === void 0 ? false : _ref$contentFullHeigh,
+      _ref$ariaRole = _ref.ariaRole,
+      ariaRole = _ref$ariaRole === void 0 ? null : _ref$ariaRole,
+      _ref$ariaAtomic = _ref.ariaAtomic,
+      ariaAtomic = _ref$ariaAtomic === void 0 ? true : _ref$ariaAtomic,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive;
   var Icon = AlertIcons[variant];
   var contentPadding = maxContentWidth ? "".concat(padding, " 1rem") : innerContentPadding;
   var content = /*#__PURE__*/React__default.createElement(Sidebar, {
@@ -18808,7 +18814,7 @@ var Alert = function Alert(_ref) {
     minHeight: "100%",
     onClick: onLinkClick
   }, /*#__PURE__*/React__default.createElement(IconQuit, null))))));
-  return /*#__PURE__*/React__default.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: padding,
     width: "100%",
     minHeight: height && parseInt(height) < 100 ? height : "100px",
@@ -18818,10 +18824,14 @@ var Alert = function Alert(_ref) {
     borderColor: themeValues.border,
     borderSize: noBorder ? "0px" : "1px",
     boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
-    extraStyles: extraStyles,
-    role: "alert",
-    "aria-atomic": true
-  }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
+    extraStyles: extraStyles
+  }, ariaAtomic !== null ? {
+    "aria-atomic": ariaAtomic
+  } : {}, ariaLive !== null ? {
+    "aria-live": ariaLive
+  } : {}, ariaRole !== null ? {
+    role: ariaRole
+  } : {}), maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
 };
@@ -26048,7 +26058,8 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
+    autoComplete: autocompleteValue,
+    "aria-busy": true
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -26067,23 +26078,25 @@ var FormInput = function FormInput(_ref15) {
     $customHeight: customHeight,
     $extraStyles: extraStyles,
     "data-qa": dataQa || labelTextWhenNoError,
-    autoComplete: autocompleteValue
-  }, props))), /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    justify: "space-between",
-    "aria-live": "polite",
+    autoComplete: autocompleteValue,
+    "aria-busy": true
+  }, props))), /*#__PURE__*/React__default.createElement("div", {
+    role: "status",
     "aria-atomic": true
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justify: "space-between"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
+    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }",
     id: createIdFromString(labelTextWhenNoError, "error message")
   }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
     extraStyles: "height: ".concat(themeValues.lineHeight, ";")
   }), !isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
-  }, decorator)));
+  }, decorator))));
 };
 
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
@@ -47859,13 +47872,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
 
-  React.useEffect(function () {
-    var firstFocusableField = document.getElementById("first-focusable-ach-input");
-
-    if (firstFocusableField) {
-      firstFocusableField.focus();
-    }
-  }, []);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -47880,8 +47886,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "name",
-    id: "first-focusable-ach-input"
+    autocompleteValue: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -48066,20 +48071,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
 
   var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 
-  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted.")), _creditCardNumberErro);
+  var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _defineProperty(_creditCardNumberErro, matchesRegex.error, "".concat(displayCardBrand(fields.creditCardNumber.rawValue), " is not accepted")), _creditCardNumberErro);
   var expirationDateErrors = (_expirationDateErrors = {}, _defineProperty(_expirationDateErrors, required.error, "Expiration date is required"), _defineProperty(_expirationDateErrors, hasLength.error, "Expiration date is invalid"), _defineProperty(_expirationDateErrors, isValidMonth.error, "Expiration month is invalid"), _defineProperty(_expirationDateErrors, dateAfterToday.error, "Expiration date is invalid"), _expirationDateErrors);
   var cvvErrors = (_cvvErrors = {}, _defineProperty(_cvvErrors, required.error, "CVV is required"), _defineProperty(_cvvErrors, hasLength.error, "CVV is invalid"), _cvvErrors);
   var zipCodeErrors = (_zipCodeErrors = {}, _defineProperty(_zipCodeErrors, required.error, "Zip code is required"), _defineProperty(_zipCodeErrors, hasLength.error, "Zip code is invalid"), _zipCodeErrors);
 
   var countryErrorMessages = _defineProperty({}, required.error, "Country is required");
 
-  React.useEffect(function () {
-    var firstFocusableField = document.getElementById("first-focusable-card-input");
-
-    if (firstFocusableField) {
-      firstFocusableField.focus();
-    }
-  }, []);
   var isUS = fields.country.rawValue === "US";
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -48109,8 +48107,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocompleteValue: "cc-name",
-    id: "first-focusable-card-input"
+    autocompleteValue: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48570,19 +48567,7 @@ var RadioSection = function RadioSection(_ref) {
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
-      setFocused = _useState2[1]; // useEffect(() => {
-  //   if (toggledContentRef && toggledContentRef?.current) {
-  //     const inputEl = toggledContentRef.current?.querySelector(
-  //       `[tabindex="0"]`
-  //     );
-  //     if (inputEl) {
-  //       inputEl?.focus();
-  //     } else {
-  //       toggledContentRef.current.focus();
-  //     }
-  //   }
-  // }, [toggledContentRef.current]);
-
+      setFocused = _useState2[1];
 
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
@@ -48656,13 +48641,11 @@ var RadioSection = function RadioSection(_ref) {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
       padding: section.titleIcon ? "0 0 0 8px" : "0"
-    }, /*#__PURE__*/React__default.createElement(Text$1, _extends({
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
       as: "label",
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
-    }, _objectSpread2({}, section !== null && section !== void 0 && section.titleLabel ? {
-      "aria-label": section.titleLabel
-    } : {})), section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+    }, 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