envoc-form 3.2.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/index.js

@@ -1,11 +1,14 @@
 import * as normalizers from './normalizers';
 import { BoolInput, InlineBoolInput } from './BoolInput';
 import { InlineMoneyInput, MoneyInput } from './MoneyInput';
-import AddressInput from './AddressInput';
+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 Form from './Form';
+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';
@@ -17,4 +20,6 @@ import StandardFormActions from './StandardFormActions';
 import SubmitFormButton from './SubmitFormButton';
 import useStandardFormInput from './useStandardFormInput';
 import validators from './validators';
-export { AddressInput, BoolInput, ConfirmBaseForm, ConfirmDeleteForm, ErrorScrollTarget, Form, FormGroup, FormGroupWrapper, FormInput, FormInputArray, FormSection, IconInput, InlineBoolInput, InlineFormInput, InlineMoneyInput, MoneyInput, normalizers, StandardFormActions, SubmitFormButton, useStandardFormInput, 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/index.js

@@ -31,12 +31,24 @@ Object.defineProperty(exports, "MoneyInput", {
     return _MoneyInput.MoneyInput;
   }
 });
+Object.defineProperty(exports, "MoneyFormattedInput", {
+  enumerable: true,
+  get: function get() {
+    return _MoneyFormattedInput.MoneyFormattedInput;
+  }
+});
 Object.defineProperty(exports, "AddressInput", {
   enumerable: true,
   get: function get() {
     return _AddressInput["default"];
   }
 });
+Object.defineProperty(exports, "UsStates", {
+  enumerable: true,
+  get: function get() {
+    return _AddressInput.UsStates;
+  }
+});
 Object.defineProperty(exports, "ConfirmBaseForm", {
   enumerable: true,
   get: function get() {
@@ -49,18 +61,60 @@ Object.defineProperty(exports, "ConfirmDeleteForm", {
     return _ConfirmDeleteForm["default"];
   }
 });
+Object.defineProperty(exports, "DatePickerInput", {
+  enumerable: true,
+  get: function get() {
+    return _DatePickerInput["default"];
+  }
+});
 Object.defineProperty(exports, "ErrorScrollTarget", {
   enumerable: true,
   get: function get() {
     return _ErrorScrollTarget["default"];
   }
 });
+Object.defineProperty(exports, "FileInput", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.FileInput;
+  }
+});
+Object.defineProperty(exports, "DropzoneFileInput", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.DropzoneFileInput;
+  }
+});
+Object.defineProperty(exports, "DefaultFileList", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.DefaultFileList;
+  }
+});
 Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function get() {
     return _Form["default"];
   }
 });
+Object.defineProperty(exports, "ServerErrorContext", {
+  enumerable: true,
+  get: function get() {
+    return _Form.ServerErrorContext;
+  }
+});
+Object.defineProperty(exports, "FocusError", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FocusError;
+  }
+});
+Object.defineProperty(exports, "FormBasedPreventNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormBasedPreventNavigation;
+  }
+});
 Object.defineProperty(exports, "FormGroup", {
   enumerable: true,
   get: function get() {
@@ -127,6 +181,30 @@ Object.defineProperty(exports, "validators", {
     return _validators["default"];
   }
 });
+Object.defineProperty(exports, "ReactSelectField", {
+  enumerable: true,
+  get: function get() {
+    return _ReactSelectField["default"];
+  }
+});
+Object.defineProperty(exports, "customReactSelectFieldStyles", {
+  enumerable: true,
+  get: function get() {
+    return _ReactSelectField.customStyles;
+  }
+});
+Object.defineProperty(exports, "overrideReactSelectFieldStyles", {
+  enumerable: true,
+  get: function get() {
+    return _ReactSelectField.overrideTheme;
+  }
+});
+Object.defineProperty(exports, "NestedFormFieldContext", {
+  enumerable: true,
+  get: function get() {
+    return _NestedFormFieldContext["default"];
+  }
+});
 exports.normalizers = void 0;
 
 var normalizers = _interopRequireWildcard(require("./normalizers"));
@@ -137,15 +215,21 @@ var _BoolInput = require("./BoolInput");
 
 var _MoneyInput = require("./MoneyInput");
 
-var _AddressInput = _interopRequireDefault(require("./AddressInput"));
+var _MoneyFormattedInput = require("./MoneyFormattedInput");
+
+var _AddressInput = _interopRequireWildcard(require("./AddressInput"));
 
 var _ConfirmBaseForm = _interopRequireDefault(require("./ConfirmBaseForm"));
 
 var _ConfirmDeleteForm = _interopRequireDefault(require("./ConfirmDeleteForm"));
 
+var _DatePickerInput = _interopRequireDefault(require("./DatePickerInput"));
+
 var _ErrorScrollTarget = _interopRequireDefault(require("./ErrorScrollTarget"));
 
-var _Form = _interopRequireDefault(require("./Form"));
+var _FileInput = require("./FileInput");
+
+var _Form = _interopRequireWildcard(require("./Form"));
 
 var _FormGroup = _interopRequireDefault(require("./FormGroup"));
 
@@ -169,6 +253,10 @@ var _useStandardFormInput = _interopRequireDefault(require("./useStandardFormInp
 
 var _validators = _interopRequireDefault(require("./validators"));
 
+var _ReactSelectField = _interopRequireWildcard(require("./ReactSelectField"));
+
+var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldContext"));
+
 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; }

package/lib/validators/validators.js

@@ -82,7 +82,7 @@ function minCount(count) {
 
 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;
@@ -94,7 +94,7 @@ exports.maxValue = maxValue;
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -26,7 +26,8 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^3.2.0",
+    "envoc-request": "^3.3.0",
+    "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

package/src/AddressInput/index.js

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

package/src/DatePickerInput/DatePickerInput.js

@@ -1,5 +1,5 @@
 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';
 

package/src/FileInput/index.js

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

package/src/Form/index.js

@@ -1,3 +1,11 @@
+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/src/FormInput/FormInput.js

@@ -15,6 +15,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) {
@@ -57,6 +58,8 @@ function StandardFieldGroup(props) {
       return <FormGroupWrapper {...props} Component={FileInput} />;
     case 'textarea':
       return <FormGroupWrapper {...props} Component={TextAreaInput} />;
+    case 'moneyFormatted':
+      return <FormGroupWrapper {...props} Component={MoneyFormattedInput} />;
     default:
       return <FormGroupWrapper {...props} Component={DefaultInput} />;
   }

package/src/MoneyFormattedInput/MoneyFormattedInput.js

@@ -0,0 +1,115 @@
+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({
+  name,
+  onBlur,
+  onChange,
+  classname,
+  disabled = false,
+  debounceTimer = 1500,
+  meta,
+}) {
+  // The displayed state and formik state are two seperate values that we handle
+  const [inputValue, setInputValue] = useState('');
+  const [{ value: formikValue }] = useField(name);
+
+  const handleChangeDebounce = useMemo(() => {
+    return debounce(debouncedUpdateInput, debounceTimer);
+
+    function debouncedUpdateInput(value) {
+      var result = formatToCurrency(value);
+
+      setInputValue(result ?? '');
+
+      // sets value in formik
+      onChange(result ?? '');
+      onBlur();
+    }
+  }, [onBlur, onChange]);
+
+  // Format first render
+  useEffect(() => {
+    var formattedFormikValue = formatToCurrency(formikValue);
+    setInputValue(formattedFormikValue ?? '');
+  }, [formikValue]);
+
+  function handleChange(e) {
+    const onlyNumbersDecimalComma = e.target.value
+      .toString()
+      .replace(/[^.,0-9]/g, '');
+
+    setInputValue(onlyNumbersDecimalComma);
+    handleChangeDebounce(onlyNumbersDecimalComma);
+  }
+
+  return (
+    <>
+      <div className="input-group">
+        <div className="input-group-prepend">
+          <span className="input-group-text">$</span>
+        </div>
+        <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'
+          )}
+        />
+      </div>
+    </>
+  );
+}
+
+function formatToCurrency(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // 'value' is sometimes a number on first render
+  const 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) {
+  const 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/src/MoneyFormattedInput/index.js

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

package/src/index.js

@@ -2,12 +2,19 @@ import * as normalizers from './normalizers';
 
 import { BoolInput, InlineBoolInput } from './BoolInput';
 import { InlineMoneyInput, MoneyInput } from './MoneyInput';
+import { MoneyFormattedInput } from './MoneyFormattedInput';
 
-import AddressInput from './AddressInput';
+import AddressInput, { UsStates } from './AddressInput';
 import ConfirmBaseForm from './ConfirmBaseForm';
 import ConfirmDeleteForm from './ConfirmDeleteForm';
+import DatePickerInput from './DatePickerInput';
 import ErrorScrollTarget from './ErrorScrollTarget';
-import Form from './Form';
+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';
@@ -19,13 +26,23 @@ import StandardFormActions from './StandardFormActions';
 import SubmitFormButton from './SubmitFormButton';
 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,
@@ -37,9 +54,17 @@ export {
   InlineFormInput,
   InlineMoneyInput,
   MoneyInput,
+  MoneyFormattedInput,
   normalizers,
   StandardFormActions,
   SubmitFormButton,
   useStandardFormInput,
   validators,
+  ServerErrorContext,
+  FocusError,
+  FormBasedPreventNavigation,
+  ReactSelectField,
+  customReactSelectFieldStyles,
+  overrideReactSelectFieldStyles,
+  NestedFormFieldContext,
 };

package/src/validators/validators.js

@@ -55,7 +55,7 @@ export function minCount(count) {
 
 export const maxValue = function maxValue(value) {
   return (inputValue) => {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue <= value
         ? undefined
         : `Maximum value ${value} exceeded`;
@@ -67,7 +67,7 @@ export const maxValue = function maxValue(value) {
 
 export const minValue = function minValue(value) {
   return (inputValue) => {
-    if (inputValue && value) {
+    if (inputValue != null && value != null) {
       return inputValue >= value ? undefined : `Minimum value ${value} not met`;
     } else {
       return undefined;