envoc-form 3.0.0 → 3.3.0

package/es/AddressInput/index.js

@@ -1,2 +1,3 @@
 import AddressInput from './AddressInput';
-export default AddressInput;
+import UsStates from './UsStates';
+export { AddressInput as default, UsStates };

package/es/DatePickerInput/DatePickerInput.js

@@ -14,7 +14,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import DatePicker from 'react-date-picker';
+import DatePicker from 'react-date-picker/dist/entry.nostyle';
 import parseISO from 'date-fns/parseISO';
 import classnames from 'classnames';
 var dateOnlyRegex = /^\d{4}-\d{2}-\d{2}$/;

package/es/FileInput/index.js

@@ -1,3 +1,4 @@
 import FileInput from './FileInput';
 import DropzoneFileInput from './DropzoneFileInput';
-export { FileInput, DropzoneFileInput };
+import DefaultFileList from './DefaultFileList';
+export { FileInput, DropzoneFileInput, DefaultFileList };

package/es/Form/index.js

@@ -1,3 +1,5 @@
+import FocusError from './FocusError';
 import Form from './Form';
+import FormBasedPreventNavigation from './FormBasedPreventNavigation';
 import ServerErrorContext from './ServerErrorContext';
-export { Form as default, ServerErrorContext };
+export { Form as default, ServerErrorContext, FocusError, FormBasedPreventNavigation };

package/es/FormInput/FormInput.js

@@ -19,6 +19,7 @@ import FormGroupWrapper from '../FormGroupWrapper';
 import DatePickerInput from '../DatePickerInput';
 import ReactSelectField from '../ReactSelectField';
 import useStandardFormInput from '../useStandardFormInput';
+import { MoneyFormattedInput } from '../MoneyFormattedInput';
 import { FileInput, DropzoneFileInput } from '../FileInput';
 export default function FormInput(props) {
   var _useStandardFormInput = useStandardFormInput(props),
@@ -81,6 +82,11 @@ function StandardFieldGroup(props) {
         Component: TextAreaInput
       }));
 
+    case 'moneyFormatted':
+      return /*#__PURE__*/React.createElement(FormGroupWrapper, _extends({}, props, {
+        Component: MoneyFormattedInput
+      }));
+
     default:
       return /*#__PURE__*/React.createElement(FormGroupWrapper, _extends({}, props, {
         Component: DefaultInput

package/es/MoneyFormattedInput/MoneyFormattedInput.js

@@ -0,0 +1,106 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useField } from 'formik';
+import debounce from 'lodash/debounce';
+import classNames from 'classnames'; // Money input that will format the value to always have commas, a single decimal, and
+// exactly two digits after the decimal. This happens after a delay (using debounce).
+
+export default function MoneyFormattedInput(_ref) {
+  var name = _ref.name,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      classname = _ref.classname,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$debounceTimer = _ref.debounceTimer,
+      debounceTimer = _ref$debounceTimer === void 0 ? 1500 : _ref$debounceTimer,
+      meta = _ref.meta;
+
+  // The displayed state and formik state are two seperate values that we handle
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useField = useField(name),
+      _useField2 = _slicedToArray(_useField, 1),
+      formikValue = _useField2[0].value;
+
+  var handleChangeDebounce = useMemo(function () {
+    return debounce(debouncedUpdateInput, debounceTimer);
+
+    function debouncedUpdateInput(value) {
+      var result = formatToCurrency(value);
+      setInputValue(result !== null && result !== void 0 ? result : ''); // sets value in formik
+
+      onChange(result !== null && result !== void 0 ? result : '');
+      onBlur();
+    }
+  }, [onBlur, onChange]); // Format first render
+
+  useEffect(function () {
+    var formattedFormikValue = formatToCurrency(formikValue);
+    setInputValue(formattedFormikValue !== null && formattedFormikValue !== void 0 ? formattedFormikValue : '');
+  }, [formikValue]);
+
+  function handleChange(e) {
+    var onlyNumbersDecimalComma = e.target.value.toString().replace(/[^.,0-9]/g, '');
+    setInputValue(onlyNumbersDecimalComma);
+    handleChangeDebounce(onlyNumbersDecimalComma);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "input-group"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "input-group-prepend"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "input-group-text"
+  }, "$")), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "text",
+    value: inputValue,
+    onChange: handleChange,
+    onBlur: onBlur,
+    disabled: disabled,
+    className: classNames(classname, meta.error === 'Required' ? 'is-invalid' : '', 'react-select-input money-input form-control')
+  })));
+}
+
+function formatToCurrency(value) {
+  if (value === null || value === undefined) {
+    return null;
+  } // 'value' is sometimes a number on first render
+
+
+  var onlyNumbersDecimal = value.toString().replace(/[^.0-9]/g, '');
+
+  if (!onlyNumbersDecimal) {
+    return null;
+  }
+
+  var result = new Intl.NumberFormat('en-US', {
+    style: 'decimal',
+    minimumSignificantDigits: 2,
+    minimumFractionDigits: 2
+  }).format(parseFloat(onlyNumbersDecimal));
+  result = formatTwoDecimalPlaces(result);
+  return result;
+}
+
+function formatTwoDecimalPlaces(value) {
+  var decimalIndex = value.indexOf('.'); // If the string doesn't contain a decimal OR
+  // the string contains a single '.' with nothing to the right of the decimal -> append '.00'
+  // Reason: parseFloat will remove '.00' from whole numbers (ex. 350.00 -> 350)
+
+  if (!value.includes('.')) {
+    return value.concat('.00');
+  } // If 2 or more characters to the right of the decimal
+  else if (!!value.charAt(decimalIndex + 2)) {
+      return value.substring(0, decimalIndex + 3);
+    } // If only 1 character to the right of the decimal
+    else if (!!value.charAt(decimalIndex + 1)) {
+        return value.substring(0, decimalIndex + 2).concat('0');
+      }
+
+  return value;
+}

package/es/MoneyFormattedInput/index.js

@@ -0,0 +1,2 @@
+import MoneyFormattedInput from './MoneyFormattedInput';
+export { MoneyFormattedInput };

package/es/ReactSelectField/ReactSelectField.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { default as ReactSelect } from 'react-select';
 export var overrideTheme = function overrideTheme(theme) {
@@ -22,6 +23,8 @@ var red = '#f86c6b';
 var inputBorderColor = '#c2cfd6';
 var inputBorderColorFocused = '#8ad4ee';
 var inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+var placeholderColor = '#9ca3af';
+var disabledSingleValueColor = '#4b5563';
 export var customStyles = {
   control: function control(provided, _ref) {
     var isFocused = _ref.isFocused,
@@ -39,6 +42,17 @@ export var customStyles = {
     return _objectSpread(_objectSpread({}, provided), {}, {
       zIndex: 3
     });
+  },
+  singleValue: function singleValue(provided, state) {
+    var color = state.isDisabled ? disabledSingleValueColor : '';
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      color: color
+    });
+  },
+  placeholder: function placeholder(defaultStyles) {
+    return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+      color: placeholderColor
+    });
   }
 }; // internal to forms use only
 
@@ -48,7 +62,7 @@ export default function ReactSelectInput(_ref2) {
       disabled = _ref2.disabled,
       onSelected = _ref2.onSelected,
       onChange = _ref2.onChange,
-      onBlur = _ref2.onBlur,
+      _onBlur = _ref2.onBlur,
       value = _ref2.value,
       options = _ref2.options,
       defaultValue = _ref2.defaultValue,
@@ -61,6 +75,23 @@ export default function ReactSelectInput(_ref2) {
   useEffect(function () {
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
+  var onBlurRef = useRef(_onBlur);
+  onBlurRef.current = _onBlur;
+  var touched = meta.touched;
+  useEffect(function () {
+    if (!touched) return; // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+
+    var timerRef = setTimeout(function () {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+    return function () {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+  var classes = classNames(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled
+  });
   return /*#__PURE__*/React.createElement(ReactSelect, _extends({}, props, {
     options: options,
     isDisabled: disabled,
@@ -71,7 +102,10 @@ export default function ReactSelectInput(_ref2) {
     getOptionValue: getOptionValue,
     value: selectedItems,
     onChange: handleChange,
-    className: "react-select-input",
+    onBlur: function onBlur() {
+      return _onBlur();
+    },
+    className: classes,
     theme: overrideTheme,
     styles: customStyles,
     menuPortalTarget: document.body,

package/es/index.js

@@ -1,15 +1,25 @@
-import Form from './Form';
+import * as normalizers from './normalizers';
+import { BoolInput, InlineBoolInput } from './BoolInput';
+import { InlineMoneyInput, MoneyInput } from './MoneyInput';
+import { MoneyFormattedInput } from './MoneyFormattedInput';
+import AddressInput, { UsStates } from './AddressInput';
+import ConfirmBaseForm from './ConfirmBaseForm';
+import ConfirmDeleteForm from './ConfirmDeleteForm';
+import DatePickerInput from './DatePickerInput';
+import ErrorScrollTarget from './ErrorScrollTarget';
+import { FileInput, DropzoneFileInput, DefaultFileList } from './FileInput';
+import Form, { ServerErrorContext, FocusError, FormBasedPreventNavigation } from './Form';
+import FormGroup from './FormGroup';
+import FormGroupWrapper from './FormGroupWrapper';
 import FormInput from './FormInput';
-import InlineFormInput from './InlineFormInput';
 import FormInputArray from './FormInputArray';
+import FormSection from './FormSection';
 import IconInput from './IconInput';
-import { BoolInput, InlineBoolInput } from './BoolInput';
+import InlineFormInput from './InlineFormInput';
 import StandardFormActions from './StandardFormActions';
-import validators from './validators';
-import * as normalizers from './normalizers';
-import ConfirmBaseForm from './ConfirmBaseForm';
-import ConfirmDeleteForm from './ConfirmDeleteForm';
 import SubmitFormButton from './SubmitFormButton';
-import AddressInput from './AddressInput';
-import { MoneyInput, InlineMoneyInput } from './MoneyInput';
-export { Form, FormInput, InlineFormInput, FormInputArray, IconInput, BoolInput, InlineBoolInput, validators, normalizers, StandardFormActions, ConfirmBaseForm, ConfirmDeleteForm, SubmitFormButton, AddressInput, MoneyInput, InlineMoneyInput };
+import useStandardFormInput from './useStandardFormInput';
+import validators from './validators';
+import ReactSelectField, { customStyles as customReactSelectFieldStyles, overrideTheme as overrideReactSelectFieldStyles } from './ReactSelectField';
+import NestedFormFieldContext from './NestedFormFieldContext';
+export { AddressInput, UsStates, BoolInput, ConfirmBaseForm, ConfirmDeleteForm, DatePickerInput, ErrorScrollTarget, FileInput, DropzoneFileInput, DefaultFileList, Form, FormGroup, FormGroupWrapper, FormInput, FormInputArray, FormSection, IconInput, InlineBoolInput, InlineFormInput, InlineMoneyInput, MoneyInput, MoneyFormattedInput, normalizers, StandardFormActions, SubmitFormButton, useStandardFormInput, validators, ServerErrorContext, FocusError, FormBasedPreventNavigation, ReactSelectField, customReactSelectFieldStyles, overrideReactSelectFieldStyles, NestedFormFieldContext };

package/es/validators/validators.js

@@ -57,7 +57,7 @@ export function minCount(count) {
 }
 export var maxValue = function maxValue(value) {
   return function (inputValue) {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue <= value ? undefined : "Maximum value ".concat(value, " exceeded");
     } else {
       return undefined;
@@ -66,7 +66,7 @@ export var maxValue = function maxValue(value) {
 };
 export var minValue = function minValue(value) {
   return function (inputValue) {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue >= value ? undefined : "Minimum value ".concat(value, " not met");
     } else {
       return undefined;

package/lib/AddressInput/index.js

@@ -5,9 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _AddressInput["default"];
+  }
+});
+Object.defineProperty(exports, "UsStates", {
+  enumerable: true,
+  get: function get() {
+    return _UsStates["default"];
+  }
+});
 
 var _AddressInput = _interopRequireDefault(require("./AddressInput"));
 
-var _default = _AddressInput["default"];
-exports["default"] = _default;
+var _UsStates = _interopRequireDefault(require("./UsStates"));

package/lib/DatePickerInput/DatePickerInput.js

@@ -27,7 +27,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactDatePicker = _interopRequireDefault(require("react-date-picker"));
+var _entry = _interopRequireDefault(require("react-date-picker/dist/entry.nostyle"));
 
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 
@@ -96,7 +96,7 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
       }
 
       var parsedValue = value ? (0, _parseISO["default"])(value) : null;
-      return /*#__PURE__*/_react["default"].createElement(_reactDatePicker["default"], (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(_entry["default"], (0, _extends2["default"])({
         className: (0, _classnames["default"])('form-control', className),
         onCalendarOpen: this.onCalendarOpen
       }, rest, {

package/lib/FileInput/index.js

@@ -17,7 +17,15 @@ Object.defineProperty(exports, "DropzoneFileInput", {
     return _DropzoneFileInput["default"];
   }
 });
+Object.defineProperty(exports, "DefaultFileList", {
+  enumerable: true,
+  get: function get() {
+    return _DefaultFileList["default"];
+  }
+});
 
 var _FileInput = _interopRequireDefault(require("./FileInput"));
 
-var _DropzoneFileInput = _interopRequireDefault(require("./DropzoneFileInput"));
+var _DropzoneFileInput = _interopRequireDefault(require("./DropzoneFileInput"));
+
+var _DefaultFileList = _interopRequireDefault(require("./DefaultFileList"));

package/lib/Form/index.js

@@ -5,12 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FocusError", {
+  enumerable: true,
+  get: function get() {
+    return _FocusError["default"];
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _Form["default"];
   }
 });
+Object.defineProperty(exports, "FormBasedPreventNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _FormBasedPreventNavigation["default"];
+  }
+});
 Object.defineProperty(exports, "ServerErrorContext", {
   enumerable: true,
   get: function get() {
@@ -18,6 +30,10 @@ Object.defineProperty(exports, "ServerErrorContext", {
   }
 });
 
+var _FocusError = _interopRequireDefault(require("./FocusError"));
+
 var _Form = _interopRequireDefault(require("./Form"));
 
+var _FormBasedPreventNavigation = _interopRequireDefault(require("./FormBasedPreventNavigation"));
+
 var _ServerErrorContext = _interopRequireDefault(require("./ServerErrorContext"));

package/lib/FormInput/FormInput.js

@@ -38,6 +38,8 @@ var _ReactSelectField = _interopRequireDefault(require("../ReactSelectField"));
 
 var _useStandardFormInput3 = _interopRequireDefault(require("../useStandardFormInput"));
 
+var _MoneyFormattedInput = require("../MoneyFormattedInput");
+
 var _FileInput = require("../FileInput");
 
 var _excluded = ["className", "meta", "helpText"],
@@ -109,6 +111,11 @@ function StandardFieldGroup(props) {
         Component: TextAreaInput
       }));
 
+    case 'moneyFormatted':
+      return /*#__PURE__*/_react["default"].createElement(_FormGroupWrapper["default"], (0, _extends2["default"])({}, props, {
+        Component: _MoneyFormattedInput.MoneyFormattedInput
+      }));
+
     default:
       return /*#__PURE__*/_react["default"].createElement(_FormGroupWrapper["default"], (0, _extends2["default"])({}, props, {
         Component: DefaultInput

package/lib/MoneyFormattedInput/MoneyFormattedInput.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MoneyFormattedInput;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _formik = require("formik");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// Money input that will format the value to always have commas, a single decimal, and
+// exactly two digits after the decimal. This happens after a delay (using debounce).
+function MoneyFormattedInput(_ref) {
+  var name = _ref.name,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      classname = _ref.classname,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$debounceTimer = _ref.debounceTimer,
+      debounceTimer = _ref$debounceTimer === void 0 ? 1500 : _ref$debounceTimer,
+      meta = _ref.meta;
+
+  // The displayed state and formik state are two seperate values that we handle
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useField = (0, _formik.useField)(name),
+      _useField2 = (0, _slicedToArray2["default"])(_useField, 1),
+      formikValue = _useField2[0].value;
+
+  var handleChangeDebounce = (0, _react.useMemo)(function () {
+    return (0, _debounce["default"])(debouncedUpdateInput, debounceTimer);
+
+    function debouncedUpdateInput(value) {
+      var result = formatToCurrency(value);
+      setInputValue(result !== null && result !== void 0 ? result : ''); // sets value in formik
+
+      onChange(result !== null && result !== void 0 ? result : '');
+      onBlur();
+    }
+  }, [onBlur, onChange]); // Format first render
+
+  (0, _react.useEffect)(function () {
+    var formattedFormikValue = formatToCurrency(formikValue);
+    setInputValue(formattedFormikValue !== null && formattedFormikValue !== void 0 ? formattedFormikValue : '');
+  }, [formikValue]);
+
+  function handleChange(e) {
+    var onlyNumbersDecimalComma = e.target.value.toString().replace(/[^.,0-9]/g, '');
+    setInputValue(onlyNumbersDecimalComma);
+    handleChangeDebounce(onlyNumbersDecimalComma);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-group"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-group-prepend"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "input-group-text"
+  }, "$")), /*#__PURE__*/_react["default"].createElement("input", {
+    name: name,
+    type: "text",
+    value: inputValue,
+    onChange: handleChange,
+    onBlur: onBlur,
+    disabled: disabled,
+    className: (0, _classnames["default"])(classname, meta.error === 'Required' ? 'is-invalid' : '', 'react-select-input money-input form-control')
+  })));
+}
+
+function formatToCurrency(value) {
+  if (value === null || value === undefined) {
+    return null;
+  } // 'value' is sometimes a number on first render
+
+
+  var onlyNumbersDecimal = value.toString().replace(/[^.0-9]/g, '');
+
+  if (!onlyNumbersDecimal) {
+    return null;
+  }
+
+  var result = new Intl.NumberFormat('en-US', {
+    style: 'decimal',
+    minimumSignificantDigits: 2,
+    minimumFractionDigits: 2
+  }).format(parseFloat(onlyNumbersDecimal));
+  result = formatTwoDecimalPlaces(result);
+  return result;
+}
+
+function formatTwoDecimalPlaces(value) {
+  var decimalIndex = value.indexOf('.'); // If the string doesn't contain a decimal OR
+  // the string contains a single '.' with nothing to the right of the decimal -> append '.00'
+  // Reason: parseFloat will remove '.00' from whole numbers (ex. 350.00 -> 350)
+
+  if (!value.includes('.')) {
+    return value.concat('.00');
+  } // If 2 or more characters to the right of the decimal
+  else if (!!value.charAt(decimalIndex + 2)) {
+      return value.substring(0, decimalIndex + 3);
+    } // If only 1 character to the right of the decimal
+    else if (!!value.charAt(decimalIndex + 1)) {
+        return value.substring(0, decimalIndex + 2).concat('0');
+      }
+
+  return value;
+}

package/lib/MoneyFormattedInput/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MoneyFormattedInput", {
+  enumerable: true,
+  get: function get() {
+    return _MoneyFormattedInput["default"];
+  }
+});
+
+var _MoneyFormattedInput = _interopRequireDefault(require("./MoneyFormattedInput"));

package/lib/ReactSelectField/ReactSelectField.js

@@ -16,6 +16,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
@@ -45,6 +47,8 @@ var red = '#f86c6b';
 var inputBorderColor = '#c2cfd6';
 var inputBorderColorFocused = '#8ad4ee';
 var inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+var placeholderColor = '#9ca3af';
+var disabledSingleValueColor = '#4b5563';
 var customStyles = {
   control: function control(provided, _ref) {
     var isFocused = _ref.isFocused,
@@ -62,6 +66,17 @@ var customStyles = {
     return _objectSpread(_objectSpread({}, provided), {}, {
       zIndex: 3
     });
+  },
+  singleValue: function singleValue(provided, state) {
+    var color = state.isDisabled ? disabledSingleValueColor : '';
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      color: color
+    });
+  },
+  placeholder: function placeholder(defaultStyles) {
+    return _objectSpread(_objectSpread({}, defaultStyles), {}, {
+      color: placeholderColor
+    });
   }
 }; // internal to forms use only
 
@@ -73,7 +88,7 @@ function ReactSelectInput(_ref2) {
       disabled = _ref2.disabled,
       onSelected = _ref2.onSelected,
       onChange = _ref2.onChange,
-      onBlur = _ref2.onBlur,
+      _onBlur = _ref2.onBlur,
       value = _ref2.value,
       options = _ref2.options,
       defaultValue = _ref2.defaultValue,
@@ -85,6 +100,23 @@ function ReactSelectInput(_ref2) {
   (0, _react.useEffect)(function () {
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
+  var onBlurRef = (0, _react.useRef)(_onBlur);
+  onBlurRef.current = _onBlur;
+  var touched = meta.touched;
+  (0, _react.useEffect)(function () {
+    if (!touched) return; // without the timer set to 0, if the empty option is selected the required message doesn't appear until clicked away from the select input
+
+    var timerRef = setTimeout(function () {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+    return function () {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+  var classes = (0, _classnames["default"])(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled
+  });
   return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], (0, _extends2["default"])({}, props, {
     options: options,
     isDisabled: disabled,
@@ -95,7 +127,10 @@ function ReactSelectInput(_ref2) {
     getOptionValue: getOptionValue,
     value: selectedItems,
     onChange: handleChange,
-    className: "react-select-input",
+    onBlur: function onBlur() {
+      return _onBlur();
+    },
+    className: classes,
     theme: overrideTheme,
     styles: customStyles,
     menuPortalTarget: document.body,