@thecb/components 6.1.2 → 6.1.4-beta.2

package/dist/index.esm.js

@@ -22542,7 +22542,7 @@ var fallbackValues$i = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "extraStyles"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -22624,6 +22624,7 @@ var FormInput = function FormInput(_ref15) {
       themeValues = _ref15.themeValues,
       background = _ref15.background,
       customHeight = _ref15.customHeight,
+      autocomplete = _ref15.autocomplete,
       extraStyles = _ref15.extraStyles,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
@@ -22701,7 +22702,8 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
     $customHeight: customHeight,
-    $extraStyles: extraStyles
+    $extraStyles: extraStyles,
+    autocomplete: autocomplete
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -22719,7 +22721,8 @@ var FormInput = function FormInput(_ref15) {
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
-    $extraStyles: extraStyles
+    $extraStyles: extraStyles,
+    autocomplete: autocomplete
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -34403,7 +34406,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      countryCode = _ref.countryCode;
+      countryCode = _ref.countryCode,
+      autocomplete = _ref.autocomplete;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.createElement(FormSelect$1, {
@@ -34413,7 +34417,7 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: "address-level1"
+    autocompleteValue: autocomplete
   });
 };
 
@@ -34718,6 +34722,24 @@ const ONLY_NATURALS_ERROR = "error/ONLY_NATURALS";
 const onlyNaturals = createValidator(ONLY_NATURALS, ONLY_NATURALS_ERROR);
 validatorFns[ONLY_NATURALS] = (value, args, form) => /^(\d+)?$/.test(value);
 
+/* 
+07/22: experimental expiration date constraint
+should allow entry of expiration date using "/" character
+to accommodate browser autofill
+
+not tested as validation function
+to validate exp date instead use combo of:
+required(), hasLength(), isValidMonth(), dateAfterToday()
+*/
+const ONLY_EXPIRATION_DATE = "validator/ONLY_EXPIRATION_DATE";
+const ONLY_EXPIRATION_DATE_ERROR = "error/ONLY_EXPIRATION_DATE";
+const onlyExpirationDate = createValidator(
+  ONLY_EXPIRATION_DATE,
+  ONLY_EXPIRATION_DATE_ERROR
+);
+validatorFns[ONLY_EXPIRATION_DATE] = (value, args, form) =>
+  /^(\d?\d?\/?\d?\d?)?$/.test(value);
+
 const NUMBER_LESS_THAN = "validator/NUMBER_LESS_THAN";
 const NUMBER_LESS_THAN_ERROR = "error/NUMBER_LESS_THAN";
 const numberLessThan = createValidator(
@@ -35110,6 +35132,13 @@ const runValidator = (validator, value, form) => {
 };
 
 const _computeErrors = (fieldName, form, validators) => {
+  console.log("field name is", fieldName);
+  console.log("form is", form);
+  console.log("validators are", validators);
+  const validatorsResult = validators.map(v =>
+    runValidator(v, form[fieldName].rawValue, form)
+  );
+  console.log("validators result is", validatorsResult);
   return validators
     .map(v => runValidator(v, form[fieldName].rawValue, form))
     .filter(x => x !== null);
@@ -36469,7 +36498,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-line1"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -36477,7 +36507,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-line2"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     errorMessages: cityErrorMessages,
@@ -36486,7 +36517,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-level2"
   }), /*#__PURE__*/React.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -36496,7 +36528,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "address-level1"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -36507,7 +36540,8 @@ var AddressForm = function AddressForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "postal-code"
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -36611,7 +36645,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "current-password"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "New password",
     errorMessages: newPasswordErrorMessages,
@@ -36621,7 +36656,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmNewPasswordErrorMessages,
@@ -36631,7 +36667,8 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   })), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "1rem 0 0" : "1.5rem 0 0"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -36845,7 +36882,8 @@ var EditNameForm = function EditNameForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "given-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     errorMessages: lastNameErrorMessages,
@@ -36854,7 +36892,8 @@ var EditNameForm = function EditNameForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "family-name"
   })));
 };
 
@@ -36921,7 +36960,8 @@ var EditableList = function EditableList(_ref) {
       autoPayMethods = _ref.autoPayMethods,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "p" : _ref$as,
-      qaPrefix = _ref.qaPrefix;
+      qaPrefix = _ref.qaPrefix,
+      ariaLabel = _ref.ariaLabel;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0rem 0rem 1.5rem 0rem",
@@ -36981,7 +37021,7 @@ var EditableList = function EditableList(_ref) {
         return removeItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Remove ".concat(itemName)
+      "aria-label": "Remove ".concat(ariaLabel || itemName)
     })), canEdit && /*#__PURE__*/React.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
@@ -36995,7 +37035,7 @@ var EditableList = function EditableList(_ref) {
         return editItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Edit ".concat(itemName)
+      "aria-label": "Edit ".concat(ariaLabel || itemName)
     }))));
   })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
@@ -37188,7 +37228,8 @@ var EmailForm = function EmailForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -37240,7 +37281,8 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   });
 };
 
@@ -38902,7 +38944,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: namesDisabled
+    disabled: namesDisabled,
+    autocomplete: "given-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
     errorMessages: lastNameErrorMessages,
@@ -38912,7 +38955,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: namesDisabled
+    disabled: namesDisabled,
+    autocomplete: "family-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Email",
     errorMessages: emailErrorMessages,
@@ -38922,7 +38966,8 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    disabled: emailDisabled
+    disabled: emailDisabled,
+    autocomplete: "email"
   }), formType === PROFILE && /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: {},
@@ -39066,7 +39111,8 @@ var LoginForm = function LoginForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -39076,7 +39122,8 @@ var LoginForm = function LoginForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "current-password"
   }));
 };
 
@@ -41991,7 +42038,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
     errorMessages: routingNumberErrors,
@@ -42188,7 +42236,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "cc-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
     errorMessages: creditCardNumberErrors,
@@ -42199,7 +42248,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "cc-number"
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
@@ -42213,7 +42263,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "cc-exp"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
     errorMessages: cvvErrors,
@@ -42224,7 +42275,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     background: checkCardBrand(fields.creditCardNumber.rawValue) == "AMEX" ? "/AmexCVVHint.svg" : "/CVVHint.svg",
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -42238,7 +42290,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "billing postal-code"
   })), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet",
@@ -42263,7 +42316,7 @@ var formConfig$8 = {
   },
   expirationDate: {
     validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
-    constraints: [onlyIntegers(), hasLength(0, 4)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],
@@ -42322,7 +42375,8 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true
+    isNum: true,
+    autocomplete: "tel"
   }), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -42612,7 +42666,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "given-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Last name",
     errorMessages: lastNameErrorMessages,
@@ -42621,7 +42676,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
-    }
+    },
+    autocomplete: "family-name"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
@@ -42632,7 +42688,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "email",
-    isEmail: true
+    isEmail: true,
+    autocomplete: "email"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -42642,7 +42699,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -42652,7 +42710,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React.createElement(Box, {
     padding: isMobile ? "0" : "0.5rem 0 0"
   }, /*#__PURE__*/React.createElement(PasswordRequirements, {
@@ -42772,7 +42831,8 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -42782,7 +42842,8 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    type: "password"
+    type: "password",
+    autocomplete: "new-password"
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(PasswordRequirements, {