@thecb/components 9.1.4-beta.5 → 9.1.4-beta.6

package/dist/index.esm.js

@@ -23760,7 +23760,9 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$smoothScroll = _ref8.smoothScroll,
       smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
       _ref8$ariaInvalid = _ref8.ariaInvalid,
-      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid;
+      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid,
+      _ref8$isRequired = _ref8.isRequired,
+      isRequired = _ref8$isRequired === void 0 ? false : _ref8$isRequired;
 
   var _useState = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24031,7 +24033,7 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
-    required: options.required,
+    required: options.required || isRequired,
     role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
@@ -27266,7 +27268,9 @@ var RadioButton$1 = function RadioButton(_ref2) {
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
       _ref2$ariaLabel = _ref2.ariaLabel,
-      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel;
+      ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
+      _ref2$required = _ref2.required,
+      required = _ref2$required === void 0 ? false : _ref2$required;
   var buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
@@ -27326,7 +27330,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
     disabled: disabled,
     onClick: toggleRadio,
     "aria-describedby": ariaDescribedBy,
-    tabIndex: "-1"
+    tabIndex: "-1",
+    required: required
   }, extraProps)), /*#__PURE__*/React.createElement(Motion, {
     borderWidth: "1px",
     borderStyle: "solid",
@@ -38016,7 +38021,9 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode;
+      countryCode = _ref.countryCode,
+      _ref$isRequired = _ref.isRequired,
+      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -38026,7 +38033,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: "address-level1"
+    autocompleteValue: "address-level1",
+    isRequired: isRequired
   });
 };
 
@@ -39307,6 +39315,14 @@ const createFormState = (formConfig) => ({
   mapStateToProps: mapStateToProps,
 });
 
+var getIsRequiredFromValidators = function getIsRequiredFromValidators(callbackFn) {
+  return callbackFn(function (field) {
+    return !!field.validators.find(function (validator) {
+      return validator.type === "validator/REQUIRED";
+    });
+  }, []);
+};
+
 var AddressForm = function AddressForm(_ref) {
   var _zipErrorMessages;
 
@@ -39365,7 +39381,8 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    dataQa: "Country"
+    dataQa: "Country",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.city)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -39376,7 +39393,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line1",
-    dataQa: "Address"
+    dataQa: "Address",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.street1)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -39386,7 +39404,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-line2",
-    dataQa: "Address Line 2"
+    dataQa: "Address Line 2",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.street2)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -39397,7 +39416,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "address-level2",
-    dataQa: "City"
+    dataQa: "City",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.city)
   }), /*#__PURE__*/React.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -39408,7 +39428,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    dataQa: "State or Province"
+    dataQa: "State or Province",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.stateProvince)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -39421,7 +39442,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "postal-code",
-    dataQa: "Zip code"
+    dataQa: "Zip code",
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.zip)
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -47908,13 +47930,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
 
-  var getIsRequiredFromValidators = useCallback(function (field) {
-    var _field$validators;
-
-    return !!(field !== null && field !== void 0 && (_field$validators = field.validators) !== null && _field$validators !== void 0 && _field$validators.find(function (validator) {
-      return validator.type === "validator/REQUIRED";
-    }));
-  }, []);
   return /*#__PURE__*/React.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -47930,7 +47945,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "name",
-    isRequired: getIsRequiredFromValidators(fields.name)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.name)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     dataQa: "Routing number",
@@ -47938,7 +47953,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
-    isRequired: getIsRequiredFromValidators(fields.routingNumber),
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.routingNumber),
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -47964,7 +47979,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isRequired: getIsRequiredFromValidators(fields.confirmRoutingNumber),
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.confirmRoutingNumber),
     isNum: true
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
@@ -47973,7 +47988,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
-    isRequired: getIsRequiredFromValidators(fields.accountNumber),
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.accountNumber),
     isNum: true,
     helperModal: function helperModal() {
       return /*#__PURE__*/React.createElement(AccountAndRoutingModal$1, {
@@ -47999,7 +48014,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isRequired: getIsRequiredFromValidators(fields.confirmAccountNumber),
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.confirmAccountNumber),
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
@@ -48018,7 +48033,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     errorMessages: accountTypeErrors,
     field: fields.accountType,
-    isRequired: getIsRequiredFromValidators(fields.accountType)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.accountType)
   }), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
     dataQa: "default-payment-ach",
@@ -48103,13 +48118,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       isMobile = _useContext.isMobile;
 
   var showTerms = !!termsContent;
-  var getIsRequiredFromValidators = useCallback(function (field) {
-    var _field$validators;
-
-    return !!(field !== null && field !== void 0 && (_field$validators = field.validators) !== null && _field$validators !== void 0 && _field$validators.find(function (validator) {
-      return validator.type === "validator/REQUIRED";
-    }));
-  }, []);
   useEffect$1(function () {
     if (deniedCards) {
       deniedCards.map(function (card) {
@@ -48153,7 +48161,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     showErrors: showErrors,
     dataQa: "Country",
-    isRequired: getIsRequiredFromValidators(fields.country)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.country)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
     dataQa: "Name on card",
@@ -48165,7 +48173,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "cc-name",
-    isRequired: getIsRequiredFromValidators(fields.nameOnCard)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.nameOnCard)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     dataQa: "Credit card number",
@@ -48179,7 +48187,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true,
     autocompleteValue: "cc-number",
-    isRequired: getIsRequiredFromValidators(fields.creditCardNumber)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.creditCardNumber)
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -48198,7 +48206,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     removeFromValue: /\// // removes "/" from browser autofill
     ,
     autocompleteValue: "cc-exp",
-    isRequired: getIsRequiredFromValidators(fields.expirationDate)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.expirationDate)
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     dataQa: "CVV",
@@ -48212,7 +48220,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "cc-csc",
-    isRequired: getIsRequiredFromValidators(fields.cvv)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.cvv)
   })), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -48229,7 +48237,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocompleteValue: "billing postal-code",
-    isRequired: getIsRequiredFromValidators(fields.zipCode)
+    isRequired: getIsRequiredFromValidators(useCallback)(fields.zipCode)
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
     childGap: "4px",
     align: "center"