@thecb/components 10.7.2-beta.1 → 10.7.3-beta.0

package/dist/index.cjs.js

@@ -24998,6 +24998,15 @@ var Dropdown = function Dropdown(_ref13) {
       }
     }
   };
+  var handleOnBlur = function handleOnBlur(inputVal) {
+    var selectedRefExists = selectedRef !== undefined && selectedRef.current !== null;
+    var inputRequired = options.required || isRequired;
+    var hasSelectedValue = value || selectedRefExists;
+    // Select the empty value to trigger a validation error if it's required.
+    if (inputRequired && !hasSelectedValue && inputVal === "") {
+      onSelect("");
+    }
+  };
   React.useEffect(function () {
     var selectedRefExists = selectedRef !== undefined && selectedRef.current !== null;
     if (isOpen && selectedRefExists && !focusedByClick) {
@@ -25096,6 +25105,9 @@ var Dropdown = function Dropdown(_ref13) {
         setInputChangedByAutofill(true);
       }
     },
+    onBlur: function onBlur(e) {
+      return handleOnBlur(e.target.value);
+    },
     padding: "12px 25px 12px 12px",
     placeholder: getSelection(),
     required: options.required || isRequired,
@@ -27037,6 +27049,12 @@ var FormInput = function FormInput(_ref15) {
     }
     return fieldActions.set(value);
   };
+  var handleOnBlur = function handleOnBlur(value) {
+    // Sets the empty value to trigger a validation error if it's required.
+    if (isRequired && value === "") {
+      setValue("");
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -27090,6 +27108,9 @@ var FormInput = function FormInput(_ref15) {
     onChange: function onChange(value) {
       return setValue(value);
     },
+    onBlur: function onBlur(e) {
+      return handleOnBlur(e.target.value);
+    },
     type: type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
@@ -27110,6 +27131,9 @@ var FormInput = function FormInput(_ref15) {
     onChange: function onChange(e) {
       return setValue(e.target.value);
     },
+    onBlur: function onBlur(e) {
+      return handleOnBlur(e.target.value);
+    },
     type: type === "password" && showPassword ? "text" : type,
     value: field.rawValue,
     pattern: isNum ? "[0-9]*" : "",
@@ -39734,7 +39758,11 @@ var WalletName = function WalletName(_ref) {
     _ref$linkButtonExtraS = _ref.linkButtonExtraStyles,
     linkButtonExtraStyles = _ref$linkButtonExtraS === void 0 ? "" : _ref$linkButtonExtraS,
     _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$dataQa = _ref.dataQa,
+    dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+    _ref$actionTextPositi = _ref.actionTextPositionMobile,
+    actionTextPositionMobile = _ref$actionTextPositi === void 0 ? "outside" : _ref$actionTextPositi;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Module$1, {
@@ -39757,17 +39785,18 @@ var WalletName = function WalletName(_ref) {
     radius: "10",
     cx: "12",
     cy: "12"
-  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
+  })) : mainText && /*#__PURE__*/React__default.createElement(Text$1, null, mainText)), (actionTextPositionMobile === "inside" || !isMobile) && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, text && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS"
   }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     disabled: disableAction,
     text: actionText,
+    dataQa: dataQa,
     action: action,
     variant: "smallGhost",
     extraStyles: "\n                    margin: 0;\n                    min-width: 0;\n                    span {font-size: 0.75rem;}\n                    ".concat(linkButtonExtraStyles, "\n                ")
-  })))), isMobile && /*#__PURE__*/React__default.createElement(Cluster, {
+  })))), !!isMobile && actionTextPositionMobile === "outside" && /*#__PURE__*/React__default.createElement(Cluster, {
     align: "center",
     justify: text || actionText ? "flex-end" : "flex-start",
     extraStyles: "margin-top: 0.5rem;"
@@ -47503,7 +47532,11 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     buttonGroupStyles = _ref.buttonGroupStyles,
     _ref$hideAdditionalBu = _ref.hideAdditionalButton,
     hideAdditionalButton = _ref$hideAdditionalBu === void 0 ? false : _ref$hideAdditionalBu,
-    additionalButton = _ref.additionalButton;
+    additionalButton = _ref.additionalButton,
+    _ref$nextButtonTestId = _ref.nextButtonTestId,
+    nextButtonTestId = _ref$nextButtonTestId === void 0 ? null : _ref$nextButtonTestId,
+    _ref$backButtonTestId = _ref.backButtonTestId,
+    backButtonTestId = _ref$backButtonTestId === void 0 ? null : _ref$backButtonTestId;
   var _useContext = React.useContext(styled.ThemeContext),
     isMobile = _useContext.isMobile;
   var backButton = !!cancelURL && !!cancelText ? /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -47511,7 +47544,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText,
+    dataQa: backButtonTestId || cancelText,
     "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -47528,7 +47561,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     text: redirectText,
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: redirectText,
+    dataQa: nextButtonTestId || redirectText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
     role: forwardButtonAriaRole
@@ -47538,7 +47571,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: forwardButtonAction,
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: forwardButtonText,
+    dataQa: nextButtonTestId || forwardButtonText,
     disabled: isForwardButtonDisabled,
     "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
     role: forwardButtonAriaRole
@@ -48304,9 +48337,9 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
   var showTerms = !!termsContent;
   var nameErrors = _defineProperty({}, required.error, "Name is required");
   var routingNumberErrors = _defineProperty(_defineProperty(_defineProperty({}, required.error, "Routing number is required"), hasLength.error, "Routing number must be 9 digits"), isRoutingNumber.error, "Invalid routing number");
-  var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
+  var confirmRoutingNumberErrors = _defineProperty(_defineProperty({}, required.error, "Confirm routing number is required"), matchesField.error, "Confirm routing number field must match routing number");
   var accountNumberErrors = _defineProperty(_defineProperty({}, required.error, "Account number is required"), hasLength.error, "Account number must be between 5 and 17 digits");
-  var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
+  var confirmAccountNumberErrors = _defineProperty(_defineProperty({}, required.error, "Confirm account number is required"), matchesField.error, "Confirm account number field must match account number");
   var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -48448,7 +48481,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
-    validators: [matchesField("routingNumber")],
+    validators: [required(), matchesField("routingNumber")],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -48456,7 +48489,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber")],
+    validators: [required(), matchesField("accountNumber")],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {
@@ -49062,7 +49095,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$E = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49110,6 +49143,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
+    borderOverride = _ref.borderOverride,
     rest = _objectWithoutProperties(_ref, _excluded$E);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -49142,7 +49176,7 @@ var RadioSection = function RadioSection(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "1px",
-    border: "1px solid ".concat(themeValues.borderColor),
+    border: borderOverride || "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles,
     role: "radiogroup",