@thecb/components 10.7.2 → 10.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -24990,6 +24990,15 @@ var Dropdown = function Dropdown(_ref13) {
24990
24990
  }
24991
24991
  }
24992
24992
  };
24993
+ var handleOnBlur = function handleOnBlur(inputVal) {
24994
+ var selectedRefExists = selectedRef !== undefined && selectedRef.current !== null;
24995
+ var inputRequired = options.required || isRequired;
24996
+ var hasSelectedValue = value || selectedRefExists;
24997
+ // Select the empty value to trigger a validation error if it's required.
24998
+ if (inputRequired && !hasSelectedValue && inputVal === "") {
24999
+ onSelect("");
25000
+ }
25001
+ };
24993
25002
  useEffect$1(function () {
24994
25003
  var selectedRefExists = selectedRef !== undefined && selectedRef.current !== null;
24995
25004
  if (isOpen && selectedRefExists && !focusedByClick) {
@@ -25088,6 +25097,9 @@ var Dropdown = function Dropdown(_ref13) {
25088
25097
  setInputChangedByAutofill(true);
25089
25098
  }
25090
25099
  },
25100
+ onBlur: function onBlur(e) {
25101
+ return handleOnBlur(e.target.value);
25102
+ },
25091
25103
  padding: "12px 25px 12px 12px",
25092
25104
  placeholder: getSelection(),
25093
25105
  required: options.required || isRequired,
@@ -27029,6 +27041,12 @@ var FormInput = function FormInput(_ref15) {
27029
27041
  }
27030
27042
  return fieldActions.set(value);
27031
27043
  };
27044
+ var handleOnBlur = function handleOnBlur(value) {
27045
+ // Sets the empty value to trigger a validation error if it's required.
27046
+ if (isRequired && value === "") {
27047
+ setValue("");
27048
+ }
27049
+ };
27032
27050
  return /*#__PURE__*/React.createElement(Stack, {
27033
27051
  childGap: "0.25rem"
27034
27052
  }, /*#__PURE__*/React.createElement(Box, {
@@ -27082,6 +27100,9 @@ var FormInput = function FormInput(_ref15) {
27082
27100
  onChange: function onChange(value) {
27083
27101
  return setValue(value);
27084
27102
  },
27103
+ onBlur: function onBlur(e) {
27104
+ return handleOnBlur(e.target.value);
27105
+ },
27085
27106
  type: type,
27086
27107
  value: field.rawValue,
27087
27108
  pattern: isNum ? "[0-9]*" : "",
@@ -27102,6 +27123,9 @@ var FormInput = function FormInput(_ref15) {
27102
27123
  onChange: function onChange(e) {
27103
27124
  return setValue(e.target.value);
27104
27125
  },
27126
+ onBlur: function onBlur(e) {
27127
+ return handleOnBlur(e.target.value);
27128
+ },
27105
27129
  type: type === "password" && showPassword ? "text" : type,
27106
27130
  value: field.rawValue,
27107
27131
  pattern: isNum ? "[0-9]*" : "",
@@ -48305,9 +48329,9 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
48305
48329
  var showTerms = !!termsContent;
48306
48330
  var nameErrors = _defineProperty({}, required.error, "Name is required");
48307
48331
  var routingNumberErrors = _defineProperty(_defineProperty(_defineProperty({}, required.error, "Routing number is required"), hasLength.error, "Routing number must be 9 digits"), isRoutingNumber.error, "Invalid routing number");
48308
- var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
48332
+ var confirmRoutingNumberErrors = _defineProperty(_defineProperty({}, required.error, "Confirm routing number is required"), matchesField.error, "Confirm routing number field must match routing number");
48309
48333
  var accountNumberErrors = _defineProperty(_defineProperty({}, required.error, "Account number is required"), hasLength.error, "Account number must be between 5 and 17 digits");
48310
- var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
48334
+ var confirmAccountNumberErrors = _defineProperty(_defineProperty({}, required.error, "Confirm account number is required"), matchesField.error, "Confirm account number field must match account number");
48311
48335
  var accountTypeErrors = _defineProperty({}, required.error, "Account type is required");
48312
48336
  return /*#__PURE__*/React.createElement(FormContainer$1, {
48313
48337
  variant: variant,
@@ -48449,7 +48473,7 @@ var formConfig$6 = {
48449
48473
  constraints: [onlyIntegers(), hasLength(0, 9)]
48450
48474
  },
48451
48475
  confirmRoutingNumber: {
48452
- validators: [matchesField("routingNumber")],
48476
+ validators: [required(), matchesField("routingNumber")],
48453
48477
  constraints: [onlyIntegers(), hasLength(0, 9)]
48454
48478
  },
48455
48479
  accountNumber: {
@@ -48457,7 +48481,7 @@ var formConfig$6 = {
48457
48481
  constraints: [onlyIntegers(), hasLength(0, 17)]
48458
48482
  },
48459
48483
  confirmAccountNumber: {
48460
- validators: [matchesField("accountNumber")],
48484
+ validators: [required(), matchesField("accountNumber")],
48461
48485
  constraints: [onlyIntegers(), hasLength(0, 17)]
48462
48486
  },
48463
48487
  accountType: {