@thecb/components 10.9.0-beta.9 → 10.9.0

package/dist/index.cjs.js

@@ -26403,13 +26403,26 @@ var useToastNotification = function useToastNotification() {
   };
 };
 
+function useConditionallyAddValidator(condition, validatorFn, addValidator, removeValidator) {
+  React.useEffect(function () {
+    if (condition) {
+      addValidator(validatorFn());
+    }
+    return function () {
+      // Remove validator when component unmounts
+      removeValidator(validatorFn());
+    };
+  }, [condition, addValidator, removeValidator]);
+}
+
 
 
 var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
-  useToastNotification: useToastNotification
+  useToastNotification: useToastNotification,
+  useConditionallyAddValidator: useConditionallyAddValidator
 });
 
 var hoverColor$4 = "#116285";
@@ -26638,34 +26651,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 +26697,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 +26751,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 +26782,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 +26792,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 +26812,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 +26837,7 @@ var unformattedToFormattedIndex = function unformattedToFormattedIndex(rawIndex,
     }, 0) + rawIndex;
   }
 };
+
 var createFormat = function createFormat(formats, formatChar) {
   return {
     uniqueDelimiters: getUniqueFormatDelimiters(formats, formatChar),
@@ -26799,18 +26845,19 @@ 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];
+
   var inputEl = React.useRef(null);
-  var _useState = React.useState({
-      formattedValue: format$1(formatter)(value)
-    }),
-    _useState2 = _slicedToArray$1(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
   var stateRefs = React.useRef({
     selectionStart: 0,
     selectionEnd: 0,
@@ -26820,17 +26867,26 @@ var FormattedInput = function FormattedInput(_ref) {
   React.useLayoutEffect(function () {
     // A lot of the work here is cursor manipulation
     if (inputEl.current && inputEl.current === document.activeElement) {
-      inputEl.current.setSelectionRange(state.selectionStart, state.selectionEnd);
+      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;
+    }
     /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
     * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
     * the unformatted value for the user's onChange, the formatted string and unformatted injection need
     * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
     * old unformatted value.
     */
-    var injectionLength = event.target.value.length - state.formattedValue.length;
+
+
+    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
     // Need to find where to put it
@@ -26839,29 +26895,25 @@ var FormattedInput = function FormattedInput(_ref) {
     var rawInjectionPointEnd = formattedToUnformattedIndex(stateRefs.current.selectionEnd, stateRefs.current.rawValue, formatter); // Unformat the previous formatted value for injection
     // Using the relevant format string, strips away chars not marked with the formatChar
 
-    var unformattedOldValue = unformat(formatter)(state.formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+    var unformattedOldValue = unformat(formatter)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
 
     var injectIntoOldValue = inject(unformattedOldValue);
-    var deleteKeyPressed = stateRefs.current.isDelete;
     var unformattedNewValue = deleteKeyPressed ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
     var lengthDifference = unformattedNewValue.length - stateRefs.current.rawValue.length;
     var rawIndex = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
     // Applied by useLayoutEffect
 
     var newFormattedCursorPosition = stateRefs.current.selectionStart === stateRefs.current.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, deleteKeyPressed) : deleteKeyPressed ? stateRefs.current.selectionStart : stateRefs.current.selectionEnd;
-    setState({
-      selectionStart: newFormattedCursorPosition,
-      selectionEnd: newFormattedCursorPosition,
-      rawValue: unformattedNewValue,
-      formattedValue: format$1(formatter)(unformattedNewValue)
-    }); // Apply the external onChange function to the raw underlying string
+    var formattedNewValue = format$1(formatter)(unformattedNewValue);
+    setFormattedValue(formattedNewValue); // Apply the external onChange function to the raw underlying string
     // This is where the user generally updates the input value
 
     if (onChange) {
       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 +41794,7 @@ var EmailForm = function EmailForm(_ref) {
       };
     }, []);
   }
+  useConditionallyAddValidator(isRequired, required, actions.fields.email.addValidator, actions.fields.email.removeValidator);
   var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -41773,7 +41826,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),
@@ -48977,6 +49030,7 @@ var PhoneForm = function PhoneForm(_ref) {
       };
     }, []);
   }
+  useConditionallyAddValidator(isRequired, required, actions.fields.phone.addValidator, actions.fields.phone.removeValidator);
   var phoneErrorMessage = _defineProperty(_defineProperty({}, required.error, "Phone number is required"), hasLength.error, "Phone number must be 10 digits");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -49006,7 +49060,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)]
   }
 };