@thecb/components 10.9.0-beta.10 → 10.9.0-beta.12

package/dist/index.cjs.js

@@ -26638,34 +26638,45 @@ function _extends$2() {
   _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
+
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
+
     return target;
   };
+
   return _extends$2.apply(this, arguments);
 }
+
 function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
+
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
+
   return target;
 }
+
 function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
+
   var target = _objectWithoutPropertiesLoose$1(source, excluded);
+
   var key, i;
+
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
     for (i = 0; i < sourceSymbolKeys.length; i++) {
       key = sourceSymbolKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
@@ -26673,37 +26684,48 @@ function _objectWithoutProperties$1(source, excluded) {
       target[key] = source[key];
     }
   }
+
   return target;
 }
+
 function _slicedToArray$1(arr, i) {
   return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
 }
+
 function _toConsumableArray$1(arr) {
   return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _nonIterableSpread$1();
 }
+
 function _arrayWithoutHoles$1(arr) {
   if (Array.isArray(arr)) {
     for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
     return arr2;
   }
 }
+
 function _arrayWithHoles$1(arr) {
   if (Array.isArray(arr)) return arr;
 }
+
 function _iterableToArray$1(iter) {
   if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
 }
+
 function _iterableToArrayLimit$1(arr, i) {
   if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
     return;
   }
+
   var _arr = [];
   var _n = true;
   var _d = false;
   var _e = undefined;
+
   try {
     for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
+
       if (i && _arr.length === i) break;
     }
   } catch (err) {
@@ -26716,23 +26738,29 @@ function _iterableToArrayLimit$1(arr, i) {
       if (_d) throw _e;
     }
   }
+
   return _arr;
 }
+
 function _nonIterableSpread$1() {
   throw new TypeError("Invalid attempt to spread non-iterable instance");
 }
+
 function _nonIterableRest$1() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance");
 }
+
 var getUniqueFormatDelimiters = function getUniqueFormatDelimiters(formats, formatChar) {
   return _toConsumableArray$1(new Set(formats.join("").split(formatChar).join("").split("")));
 };
 var format$1 = function format(formatter) {
   return function (value) {
     var usedFormat = formatter.formats[value.length];
+
     if (!usedFormat) {
       return value;
     }
+
     var formatPieces = usedFormat.split(formatter.formatChar);
     var valuePieces = value.split("");
     var zipped = formatPieces.map(function (v, i) {
@@ -26741,6 +26769,7 @@ var format$1 = function format(formatter) {
     return zipped.join("");
   };
 };
+
 var countDelims = function countDelims(formatter, index) {
   var count = 0;
   var format = formatter.formats[index];
@@ -26750,11 +26779,13 @@ var countDelims = function countDelims(formatter, index) {
   });
   return count;
 };
+
 var unformat = function unformat(formatter) {
   return function (formattedValue, formatIndex) {
     if (formatIndex >= formatter.formats.length) {
       return formattedValue;
     }
+
     var format = formatter.formats[formatIndex];
     return formattedValue.split("").filter(function (_, i) {
       return !(format[i] != formatter.formatChar);
@@ -26768,6 +26799,7 @@ var inject = function inject(baseString) {
 };
 var formattedToUnformattedIndex = function formattedToUnformattedIndex(formattedIndex, rawValue, formatter) {
   var maxFormatExceeded = rawValue.length >= formatter.formats.length;
+
   if (maxFormatExceeded) {
     return formattedIndex;
   } else {
@@ -26792,6 +26824,7 @@ var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex,
     }, 0) + rawIndex;
   }
 };
+
 var createFormat = function createFormat(formats, formatChar) {
   return {
     uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
@@ -26799,15 +26832,18 @@ var createFormat = function createFormat(formats, formatChar) {
     formatChar: formatChar
   };
 };
+
 var FormattedInput = function FormattedInput(_ref) {
   var value = _ref.value,
-    formatter = _ref.formatter,
-    onChange = _ref.onChange,
-    props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
+      formatter = _ref.formatter,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
+
   var _useState = React.useState(format$1(formatter)(value)),
-    _useState2 = _slicedToArray$1(_useState, 2),
-    formattedValue = _useState2[0],
-    setFormattedValue = _useState2[1];
+      _useState2 = _slicedToArray$1(_useState, 2),
+      formattedValue = _useState2[0],
+      setFormattedValue = _useState2[1];
+
   var inputEl = React.useRef(null);
   var stateRefs = React.useRef({
     selectionStart: 0,
@@ -26821,9 +26857,11 @@ var FormattedInput = function FormattedInput(_ref) {
       inputEl.current.setSelectionRange(stateRefs.current.selectionStart, stateRefs.current.selectionEnd);
     }
   }, [stateRefs]);
+
   var handleChange = function handleChange(event) {
     var deleteKeyPressed = stateRefs.current.isDelete;
     var maxFormatExceeded = stateRefs.current.rawValue.length >= formatter.formats.length - 1;
+
     if (maxFormatExceeded && !deleteKeyPressed) {
       return;
     }
@@ -26834,6 +26872,7 @@ var FormattedInput = function FormattedInput(_ref) {
     * old unformatted value.
     */
 
+
     var injectionLength = event.target.value.length - formattedValue.length;
     var end = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? stateRefs.current.selectionStart + injectionLength : stateRefs.current.selectionEnd - 1;
     var injection = event.target.value.substring(stateRefs.current.selectionStart, end); // Injection is the new unformatted piece of the input
@@ -26860,7 +26899,8 @@ var FormattedInput = function FormattedInput(_ref) {
       onChange(unformattedNewValue);
     }
   };
-  return /*#__PURE__*/React__default.createElement("input", _extends$2({}, props, {
+
+  return React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
@@ -41742,6 +41782,13 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
   var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  React.useEffect(function () {
+    if (isRequired) {
+      actions.fields.email.addValidator(required());
+    } else {
+      actions.fields.email.removeValidator(required());
+    }
+  }, [isRequired]);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -41772,7 +41819,7 @@ var EmailForm = function EmailForm(_ref) {
 
 var formConfig$3 = {
   email: {
-    validators: [required(), isProbablyEmail()]
+    validators: [isProbablyEmail()] // 'required' validator is conditionally added based on `isRequired` prop
   }
 };
 var _createFormState$3 = createFormState(formConfig$3),
@@ -48969,6 +49016,7 @@ var PhoneForm = function PhoneForm(_ref) {
     walletCheckboxMarked = _ref.walletCheckboxMarked,
     _ref$isRequired = _ref.isRequired,
     isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
+  console.log("🚀 ~ isRequired:", isRequired);
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -48977,6 +49025,19 @@ var PhoneForm = function PhoneForm(_ref) {
     }, []);
   }
   var phoneErrorMessage = _defineProperty(_defineProperty({}, required.error, "Phone number is required"), hasLength.error, "Phone number must be 10 digits");
+  React.useEffect(function () {
+    if (isRequired) {
+      console.log('adding validator');
+      actions.fields.phone.addValidator(required());
+    } else {
+      console.log('removing validator');
+      actions.fields.phone.removeValidator(required());
+    }
+    return function () {
+      console.log('removing validator');
+      actions.fields.phone.removeValidator(required());
+    };
+  }, [isRequired]);
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -49005,7 +49066,8 @@ var PhoneForm = function PhoneForm(_ref) {
 
 var formConfig$8 = {
   phone: {
-    validators: [required(), hasLength(10, 10)],
+    validators: [hasLength(10, 10)],
+    // 'required' validator is conditionally added based on `isRequired` prop
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };