@thecb/components 10.11.0 → 10.11.2-beta.0

package/dist/index.cjs.js

@@ -27092,79 +27092,83 @@ var createFormat = function createFormat(formats, formatChar) {
 var FormattedInput = function FormattedInput(_ref) {
   var value = _ref.value,
       formatter = _ref.formatter,
-      _onChange = _ref.onChange,
+      onChange = _ref.onChange,
       props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
-  var inputEl = React.useRef(null);
+  var _useState = React.useState(format$1(formatter)(value)),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      formattedValue = _useState2[0],
+      setFormattedValue = _useState2[1];
 
-  var _useState = React.useState({
+  var inputEl = React.useRef(null);
+  var stateRefs = React.useRef({
     selectionStart: 0,
     selectionEnd: 0,
-    rawValue: value,
-    "delete": false,
-    formattedValue: format$1(formatter)(value)
-  }),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+    isDelete: false,
+    rawValue: ''
+  });
   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 - 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
+
+    var rawInjectionPointStart = formattedToUnformattedIndex(stateRefs.current.selectionStart, stateRefs.current.rawValue, formatter);
+    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)(formattedValue, stateRefs.current.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
+
+    var injectIntoOldValue = inject(unformattedOldValue);
+    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;
+    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 React__default.createElement("input", _extends$2({}, props, {
     ref: inputEl,
     value: format$1(formatter)(value),
     onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange, including if user is hitting delete
-      setState({
-        rawValue: value,
+      // Keep track of the state of the input before onChange
+      stateRefs.current = {
+        isDelete: event.key === "Backspace" || event.key === "Delete",
         selectionStart: event.target.selectionStart,
         selectionEnd: event.target.selectionEnd,
-        "delete": event.key === "Backspace" || event.key === "Delete",
-        formattedValue: event.target.value
-      });
+        rawValue: value
+      };
     },
-    onChange: function onChange(event) {
-      /* 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 end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
-      var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
-      // Need to find where to put it
-
-      var rawInjectionPointStart = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter);
-      var rawInjectionPointEnd = formattedToUnformattedIndex(state.selectionEnd, state.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, state.rawValue.length); // Edit the previous unformatted value (either add, update or delete)
-
-      var injectIntoOldValue = inject(unformattedOldValue);
-      var unformattedNewValue = state["delete"] ? rawInjectionPointStart === rawInjectionPointEnd ? injectIntoOldValue(rawInjectionPointStart - 1, rawInjectionPointStart, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, "") : injectIntoOldValue(rawInjectionPointStart, rawInjectionPointEnd, injection);
-      var lengthDifference = unformattedNewValue.length - state.rawValue.length;
-      var rawIndex = formattedToUnformattedIndex(state.selectionStart, state.rawValue, formatter) + lengthDifference; // Find the new cursor position for the potential formatted value
-      // Applied by useLayoutEffect
-
-      var newFormattedCursorPosition = state.selectionStart == state.selectionEnd ? unformattedToFormattedIndex(rawIndex, unformattedNewValue, formatter, state["delete"]) : state["delete"] ? state.selectionStart : state.selectionEnd;
-      setState({
-        selectionStart: newFormattedCursorPosition,
-        selectionEnd: newFormattedCursorPosition,
-        rawValue: state.rawValue,
-        "delete": false,
-        formattedValue: state.formattedValue
-      }); // Apply the external onChange function to the raw underlying string
-      // This is where the user generally updates the input value
-
-      if (_onChange) {
-        _onChange(unformattedNewValue);
-      }
-    }
+    onChange: handleChange
   }));
 };
 
@@ -27233,7 +27237,7 @@ var fallbackValues$n = {
 };
 
 var _excluded$v = ["showErrors", "themeValues"],
-  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow"];
+  _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -27324,6 +27328,10 @@ var FormInput = function FormInput(_ref15) {
     errorFieldExtraStyles = _ref15.errorFieldExtraStyles,
     _ref15$showFieldError = _ref15.showFieldErrorRow,
     showFieldErrorRow = _ref15$showFieldError === void 0 ? true : _ref15$showFieldError,
+    _ref15$labelTextVaria = _ref15.labelTextVariant,
+    labelTextVariant = _ref15$labelTextVaria === void 0 ? "pS" : _ref15$labelTextVaria,
+    _ref15$errorTextVaria = _ref15.errorTextVariant,
+    errorTextVariant = _ref15$errorTextVaria === void 0 ? "pXS" : _ref15$errorTextVaria,
     props = _objectWithoutProperties(_ref15, _excluded2);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -27358,7 +27366,7 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: "pS",
+    variant: labelTextVariant,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
     id: createIdFromString(labelTextWhenNoError)
@@ -27371,12 +27379,12 @@ var FormInput = function FormInput(_ref15) {
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
-    variant: "pS",
+    variant: labelTextVariant,
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "pS",
+    variant: labelTextVariant,
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
@@ -27456,7 +27464,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-atomic": true
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
-    variant: "pXS",
+    variant: errorTextVariant,
     weight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }\n              ".concat(errorFieldExtraStyles, ";"),
     id: createIdFromString(labelTextWhenNoError, "error message")
@@ -39053,6 +39061,15 @@ var allOptions = {
   }, {
     text: "Wyoming",
     value: "WY"
+  }, {
+    text: "Armed Forces Americas",
+    value: "AA"
+  }, {
+    text: "Armed Forces Europe",
+    value: "AE"
+  }, {
+    text: "Armed Forces Pacific",
+    value: "AP"
   }],
   UM: [{
     text: "Palmyra Atoll",
@@ -49189,27 +49206,33 @@ PhoneForm.mapDispatchToProps = mapDispatchToProps$8;
 var DefaultHeading = styled__default.div.withConfig({
   displayName: "RadioGroup__DefaultHeading",
   componentId: "sc-7lqrl8-0"
-})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+})(["", " color:", ";margin:0;padding:8px 0px;"], function (_ref) {
+  var fontSize = _ref.fontSize;
+  return "font-size: ".concat(fontSize, ";");
+}, CHARADE_GREY);
 var StyledFieldset = styled__default.fieldset.withConfig({
   displayName: "RadioGroup__StyledFieldset",
   componentId: "sc-7lqrl8-1"
 })(["", ""], function (props) {
   return props.$extraStyles;
 });
-var RadioGroup = function RadioGroup(_ref) {
-  var headingText = _ref.headingText,
-    groupName = _ref.groupName,
-    _ref$heading = _ref.heading,
-    Heading = _ref$heading === void 0 ? /*#__PURE__*/React__default.createElement(DefaultHeading, {
+var RadioGroup = function RadioGroup(_ref2) {
+  var headingText = _ref2.headingText,
+    groupName = _ref2.groupName,
+    _ref2$headingFontSize = _ref2.headingFontSize,
+    headingFontSize = _ref2$headingFontSize === void 0 ? "0.875rem" : _ref2$headingFontSize,
+    _ref2$heading = _ref2.heading,
+    Heading = _ref2$heading === void 0 ? /*#__PURE__*/React__default.createElement(DefaultHeading, {
       role: "heading",
-      id: "radio-group-".concat(groupName, "-heading")
-    }, headingText) : _ref$heading,
-    config = _ref.config,
-    extraStyles = _ref.extraStyles,
-    _ref$handleChange = _ref.handleChange,
-    handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
-    field = _ref.field,
-    fieldActions = _ref.fieldActions;
+      id: "radio-group-".concat(groupName, "-heading"),
+      fontSize: headingFontSize
+    }, headingText) : _ref2$heading,
+    config = _ref2.config,
+    extraStyles = _ref2.extraStyles,
+    _ref2$handleChange = _ref2.handleChange,
+    handleChange = _ref2$handleChange === void 0 ? noop : _ref2$handleChange,
+    field = _ref2.field,
+    fieldActions = _ref2.fieldActions;
   var setValue = function setValue(value) {
     return fieldActions.set(value);
   };