envoc-form 3.0.0-3 → 3.2.0

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

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,

package/lib/index.js

@@ -7,127 +7,167 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Form", {
+Object.defineProperty(exports, "BoolInput", {
   enumerable: true,
   get: function get() {
-    return _Form["default"];
+    return _BoolInput.BoolInput;
   }
 });
-Object.defineProperty(exports, "FormInput", {
+Object.defineProperty(exports, "InlineBoolInput", {
   enumerable: true,
   get: function get() {
-    return _FormInput["default"];
+    return _BoolInput.InlineBoolInput;
   }
 });
-Object.defineProperty(exports, "InlineFormInput", {
+Object.defineProperty(exports, "InlineMoneyInput", {
   enumerable: true,
   get: function get() {
-    return _InlineFormInput["default"];
+    return _MoneyInput.InlineMoneyInput;
   }
 });
-Object.defineProperty(exports, "FormInputArray", {
+Object.defineProperty(exports, "MoneyInput", {
   enumerable: true,
   get: function get() {
-    return _FormInputArray["default"];
+    return _MoneyInput.MoneyInput;
   }
 });
-Object.defineProperty(exports, "IconInput", {
+Object.defineProperty(exports, "AddressInput", {
   enumerable: true,
   get: function get() {
-    return _IconInput["default"];
+    return _AddressInput["default"];
   }
 });
-Object.defineProperty(exports, "BoolInput", {
+Object.defineProperty(exports, "ConfirmBaseForm", {
   enumerable: true,
   get: function get() {
-    return _BoolInput.BoolInput;
+    return _ConfirmBaseForm["default"];
   }
 });
-Object.defineProperty(exports, "InlineBoolInput", {
+Object.defineProperty(exports, "ConfirmDeleteForm", {
   enumerable: true,
   get: function get() {
-    return _BoolInput.InlineBoolInput;
+    return _ConfirmDeleteForm["default"];
   }
 });
-Object.defineProperty(exports, "StandardFormActions", {
+Object.defineProperty(exports, "ErrorScrollTarget", {
   enumerable: true,
   get: function get() {
-    return _StandardFormActions["default"];
+    return _ErrorScrollTarget["default"];
   }
 });
-Object.defineProperty(exports, "validators", {
+Object.defineProperty(exports, "Form", {
   enumerable: true,
   get: function get() {
-    return _validators["default"];
+    return _Form["default"];
   }
 });
-Object.defineProperty(exports, "ConfirmBaseForm", {
+Object.defineProperty(exports, "FormGroup", {
   enumerable: true,
   get: function get() {
-    return _ConfirmBaseForm["default"];
+    return _FormGroup["default"];
   }
 });
-Object.defineProperty(exports, "ConfirmDeleteForm", {
+Object.defineProperty(exports, "FormGroupWrapper", {
   enumerable: true,
   get: function get() {
-    return _ConfirmDeleteForm["default"];
+    return _FormGroupWrapper["default"];
   }
 });
-Object.defineProperty(exports, "SubmitFormButton", {
+Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function get() {
-    return _SubmitFormButton["default"];
+    return _FormInput["default"];
   }
 });
-Object.defineProperty(exports, "AddressInput", {
+Object.defineProperty(exports, "FormInputArray", {
   enumerable: true,
   get: function get() {
-    return _AddressInput["default"];
+    return _FormInputArray["default"];
   }
 });
-Object.defineProperty(exports, "MoneyInput", {
+Object.defineProperty(exports, "FormSection", {
   enumerable: true,
   get: function get() {
-    return _MoneyInput.MoneyInput;
+    return _FormSection["default"];
   }
 });
-Object.defineProperty(exports, "InlineMoneyInput", {
+Object.defineProperty(exports, "IconInput", {
   enumerable: true,
   get: function get() {
-    return _MoneyInput.InlineMoneyInput;
+    return _IconInput["default"];
+  }
+});
+Object.defineProperty(exports, "InlineFormInput", {
+  enumerable: true,
+  get: function get() {
+    return _InlineFormInput["default"];
+  }
+});
+Object.defineProperty(exports, "StandardFormActions", {
+  enumerable: true,
+  get: function get() {
+    return _StandardFormActions["default"];
+  }
+});
+Object.defineProperty(exports, "SubmitFormButton", {
+  enumerable: true,
+  get: function get() {
+    return _SubmitFormButton["default"];
+  }
+});
+Object.defineProperty(exports, "useStandardFormInput", {
+  enumerable: true,
+  get: function get() {
+    return _useStandardFormInput["default"];
+  }
+});
+Object.defineProperty(exports, "validators", {
+  enumerable: true,
+  get: function get() {
+    return _validators["default"];
   }
 });
 exports.normalizers = void 0;
 
-var _Form = _interopRequireDefault(require("./Form"));
+var normalizers = _interopRequireWildcard(require("./normalizers"));
 
-var _FormInput = _interopRequireDefault(require("./FormInput"));
+exports.normalizers = normalizers;
 
-var _InlineFormInput = _interopRequireDefault(require("./InlineFormInput"));
+var _BoolInput = require("./BoolInput");
 
-var _FormInputArray = _interopRequireDefault(require("./FormInputArray"));
+var _MoneyInput = require("./MoneyInput");
 
-var _IconInput = _interopRequireDefault(require("./IconInput"));
+var _AddressInput = _interopRequireDefault(require("./AddressInput"));
 
-var _BoolInput = require("./BoolInput");
+var _ConfirmBaseForm = _interopRequireDefault(require("./ConfirmBaseForm"));
 
-var _StandardFormActions = _interopRequireDefault(require("./StandardFormActions"));
+var _ConfirmDeleteForm = _interopRequireDefault(require("./ConfirmDeleteForm"));
 
-var _validators = _interopRequireDefault(require("./validators"));
+var _ErrorScrollTarget = _interopRequireDefault(require("./ErrorScrollTarget"));
 
-var normalizers = _interopRequireWildcard(require("./normalizers"));
+var _Form = _interopRequireDefault(require("./Form"));
 
-exports.normalizers = normalizers;
+var _FormGroup = _interopRequireDefault(require("./FormGroup"));
 
-var _ConfirmBaseForm = _interopRequireDefault(require("./ConfirmBaseForm"));
+var _FormGroupWrapper = _interopRequireDefault(require("./FormGroupWrapper"));
 
-var _ConfirmDeleteForm = _interopRequireDefault(require("./ConfirmDeleteForm"));
+var _FormInput = _interopRequireDefault(require("./FormInput"));
+
+var _FormInputArray = _interopRequireDefault(require("./FormInputArray"));
+
+var _FormSection = _interopRequireDefault(require("./FormSection"));
+
+var _IconInput = _interopRequireDefault(require("./IconInput"));
+
+var _InlineFormInput = _interopRequireDefault(require("./InlineFormInput"));
+
+var _StandardFormActions = _interopRequireDefault(require("./StandardFormActions"));
 
 var _SubmitFormButton = _interopRequireDefault(require("./SubmitFormButton"));
 
-var _AddressInput = _interopRequireDefault(require("./AddressInput"));
+var _useStandardFormInput = _interopRequireDefault(require("./useStandardFormInput"));
 
-var _MoneyInput = require("./MoneyInput");
+var _validators = _interopRequireDefault(require("./validators"));
 
 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); }
 

package/package.json

@@ -1,99 +1,100 @@
-{
-  "name": "envoc-form",
-  "version": "3.0.0-3",
-  "description": "Envoc form components",
-  "keywords": [
-    "react-component",
-    "react",
-    "forms",
-    "components",
-    "envoc"
-  ],
-  "homepage": "",
-  "repository": "",
-  "license": "MIT",
-  "author": "Envoc Developers",
-  "sideEffects": false,
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "files": [
-    "dist",
-    "src",
-    "lib",
-    "es"
-  ],
-  "scripts": {
-    "build": "yarn verify-imports && yarn build:esm && yarn build:cjs && yarn build:css",
-    "rebuild": "rimraf ./{dist,es,lib} && yarn build",
-    "build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
-    "build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
-    "build:cjs": "babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
-    "verify-imports": "node ../../scripts/check-for-scss-imports.js envoc-form",
-    "start": "webpack serve --config ./webpack.demo.config.js",
-    "test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false",
-    "coverage": "yarn test --reporters=jest-junit --coverage --coverageReporters=cobertura"
-  },
-  "dependencies": {
-    "axios": "^0.21.1",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.22.1",
-    "envoc-request": "^3.0.0-3",
-    "lru-cache": "^6.0.0",
-    "prop-types": "^15.7.2",
-    "react-date-picker": "^8.2.0",
-    "react-dropzone": "^11.3.4",
-    "react-router": "^6.2.1",
-    "react-select": "^3.1.1",
-    "react-textarea-autosize": "^8.3.3",
-    "react-toastify": "^7.0.4",
-    "reactstrap": "^8.9.0",
-    "smoothscroll-polyfill": "^0.4.4",
-    "uuid": "^8.3.2",
-    "@fortawesome/react-fontawesome": "~0.1.16",
-    "@fortawesome/free-solid-svg-icons": "~5.15.4",
-    "@fortawesome/fontawesome-svg-core": "~1.2.36"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.7.1",
-    "babel-loader": "^8.2.2",
-    "bootstrap": "^4.6.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "cross-env": "7.0.3",
-    "css-loader": "^5.0.2",
-    "html-webpack-plugin": "^5.3.2",
-    "identity-obj-proxy": "^3.0.0",
-    "jest-junit": "~12.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "^4.0.3",
-    "rimraf": "~3.0.2",
-    "sass": "^1.35.2",
-    "sass-loader": "^11.0.1",
-    "style-loader": "^2.0.0",
-    "webpack": "^5.45.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2",
-    "typedoc-plugin-markdown": "~3.10.3",
-    "typedoc": "~0.21.4"
-  },
-  "peerDependencies": {
-    "@babel/runtime": "^7.14.6",
-    "formik": "^2.2.9",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-router-dom": "^6.2.1"
-  },
-  "jest": {
-    "transformIgnorePatterns": [
-      "^.+\\.module\\.(css|sass|scss)$"
-    ]
-  }
-}
+{
+  "name": "envoc-form",
+  "version": "3.2.0",
+  "description": "Envoc form components",
+  "keywords": [
+    "react-component",
+    "react",
+    "forms",
+    "components",
+    "envoc"
+  ],
+  "homepage": "",
+  "repository": "",
+  "license": "MIT",
+  "author": "Envoc Developers",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "dist",
+    "src",
+    "lib",
+    "es"
+  ],
+  "dependencies": {
+    "axios": "^0.21.1",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.22.1",
+    "envoc-request": "^3.2.0",
+    "lru-cache": "^6.0.0",
+    "prop-types": "^15.7.2",
+    "react-date-picker": "^8.2.0",
+    "react-dropzone": "^11.3.4",
+    "react-router": "^6.2.1",
+    "react-select": "^3.1.1",
+    "react-textarea-autosize": "^8.3.3",
+    "react-toastify": "^7.0.4",
+    "reactstrap": "^8.9.0",
+    "smoothscroll-polyfill": "^0.4.4",
+    "uuid": "^8.3.2",
+    "@fortawesome/react-fontawesome": "~0.1.16",
+    "@fortawesome/free-solid-svg-icons": "~5.15.4",
+    "@fortawesome/fontawesome-svg-core": "~1.2.36"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.1",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^4.6.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "cross-env": "7.0.3",
+    "css-loader": "^5.0.2",
+    "html-webpack-plugin": "^5.3.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-junit": "~12.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "^4.0.3",
+    "rimraf": "~3.0.2",
+    "sass": "^1.35.2",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.45.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "typedoc-plugin-markdown": "~3.10.3",
+    "typedoc": "~0.21.4"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.14.6",
+    "formik": "^2.2.9",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-router-dom": "^6.2.1"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "^.+\\.module\\.(css|sass|scss)$"
+    ]
+  },
+  "scripts": {
+    "build": "yarn verify-imports && yarn build:esm && yarn build:cjs && yarn build:css",
+    "rebuild": "rimraf ./{dist,es,lib} && yarn build",
+    "build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
+    "build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
+    "build:cjs": "babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
+    "verify-imports": "node ../../scripts/check-for-scss-imports.js envoc-form",
+    "start": "webpack serve --config ./webpack.demo.config.js",
+    "test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false",
+    "coverage": "yarn test --reporters=jest-junit --coverage --coverageReporters=cobertura"
+  },
+  "readme": "# envoc-form\r\n\r\n[![npm package][npm-badge]][npm]\r\n\r\nBase form package for envoc projects.\r\n\r\n[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat\r\n[npm]: https://www.npmjs.com/package/envoc-form"
+}

package/src/AddressInput/__snapshots__/AddesssInput.test.js.snap

@@ -110,7 +110,7 @@ exports[`AddressInput has matching snapshot 1`] = `
                 class=" css-lbak6p-Component"
               >
                 <div
-                  class=" css-1osw1h9-placeholder"
+                  class=" css-1vk4ta-placeholder"
                 >
                   State
                 </div>

package/src/BoolInput/__snapshots__/BoolInput.test.js.snap

@@ -23,7 +23,7 @@ exports[`BoolInput has matching snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/FormInput/__snapshots__/FormInput.test.js.snap

@@ -234,7 +234,7 @@ exports[`FormInput has matching select snapshot 1`] = `
             class=" css-lbak6p-Component"
           >
             <div
-              class=" css-1osw1h9-placeholder"
+              class=" css-1vk4ta-placeholder"
             >
               Select...
             </div>

package/src/ReactSelectField/ReactSelectField.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { default as ReactSelect } from 'react-select';
 
@@ -17,6 +18,8 @@ const red = '#f86c6b';
 const inputBorderColor = '#c2cfd6';
 const inputBorderColorFocused = '#8ad4ee';
 const inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
+const placeholderColor = '#9ca3af';
+const disabledSingleValueColor = '#4b5563';
 
 export const customStyles = {
   control: (provided, { isFocused, selectProps }) => {
@@ -35,6 +38,13 @@ export const customStyles = {
     };
   },
   menu: (provided) => ({ ...provided, zIndex: 3 }),
+  singleValue: (provided, state) => {
+    const color = state.isDisabled ? disabledSingleValueColor : '';
+    return { ...provided, color };
+  },
+  placeholder: (defaultStyles) => {
+    return { ...defaultStyles, color: placeholderColor };
+  },
 };
 
 // internal to forms use only
@@ -59,6 +69,28 @@ export default function ReactSelectInput({
     onSelectedRef.current && onSelectedRef.current(selectedItems);
   }, [selectedItems]);
 
+  const onBlurRef = useRef(onBlur);
+  onBlurRef.current = onBlur;
+  const { touched } = meta;
+
+  useEffect(() => {
+    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
+    const timerRef = setTimeout(() => {
+      onBlurRef.current && onBlurRef.current();
+    }, 0);
+
+    return () => {
+      clearTimeout(timerRef);
+    };
+  }, [value, touched]);
+
+  const classes = classNames(className, 'react-select-input', {
+    'is-invalid': !!meta.error,
+    disabled: disabled,
+  });
+
   return (
     <ReactSelect
       {...props}
@@ -69,7 +101,8 @@ export default function ReactSelectInput({
       getOptionValue={getOptionValue}
       value={selectedItems}
       onChange={handleChange}
-      className="react-select-input"
+      onBlur={() => onBlur()}
+      className={classes}
       theme={overrideTheme}
       styles={customStyles}
       menuPortalTarget={document.body}

package/src/index.js

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