envoc-form 2.0.1-9 → 2.0.1

package/README.md

@@ -1,8 +1,8 @@
-# envoc-form
-
-[![npm package][npm-badge]][npm]
-
-Base form package for envoc projects.
-
-[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat
+# envoc-form
+
+[![npm package][npm-badge]][npm]
+
+Base form package for envoc projects.
+
+[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat
 [npm]: https://www.npmjs.com/package/envoc-form

package/dist/css/envoc-form-styles.css

@@ -99,13 +99,14 @@ section.react-dropzone > aside > .list-group:not(:empty) {
   margin-top: 1rem;
 }
 
-.remove-array-item {
-  width: 35px;
+.field-array-card {
+  margin-bottom: 1rem;
+}
+.field-array-card .field-array-item.removed {
+  display: none;
+}
+.field-array-card .field-array-item > .remove-array-item {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: auto;
-  margin-top: 0;
 }
 
 div.react-select-input.has-error {

package/dist/css/envoc-form-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/DatePickerInput/date-picker-input.scss","../../src/InlineFormInput/inline-form-input.scss","../../src/MoneyInput/money-input.scss","../../src/FormInput/form-input.scss","../../src/FileInput/file-input.scss","../../src/_variables.scss","../../src/FormInputArray/form-input-array.scss","../../src/ReactSelectField/react-select-field.scss"],"names":[],"mappings":"AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;ACvCJ;EACE;;;ACDF;EACE;;;ACDF;EACE;;;AAIA;EACE;;;ACFA;EACE;;;AAKN;EACE,kBCFgC;EDGhC,cCF4B;;ADG5B;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGJ;EAEE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBCzC8B;ED0C9B,cCzC0B;ED0C1B;;AAEF;EACE;;;AEvDJ;EACE;EACA;EACA;EACA;EACA;EACA;;;ACJF;EACE,cFDI","file":"envoc-form-styles.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/DatePickerInput/date-picker-input.scss","../../src/InlineFormInput/inline-form-input.scss","../../src/MoneyInput/money-input.scss","../../src/FormInput/form-input.scss","../../src/FileInput/file-input.scss","../../src/_variables.scss","../../src/FormInputArray/form-input-array.scss","../../src/ReactSelectField/react-select-field.scss"],"names":[],"mappings":"AAEA;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;;;ACvCJ;EACE;;;ACDF;EACE;;;ACDF;EACE;;;AAIA;EACE;;;ACFA;EACE;;;AAKN;EACE,kBCFgC;EDGhC,cCF4B;;ADG5B;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGJ;EAEE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE,kBCzC8B;ED0C9B,cCzC0B;ED0C1B;;AAEF;EACE;;;AEvDJ;EACE;;AAGE;EACE;;AAGF;EACE;;;ACPN;EACE,cFDI","file":"envoc-form-styles.css"}

package/es/AddressInput/AddressInput.js

@@ -5,10 +5,11 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+var _excluded = ["name"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 { Col, Row } from 'reactstrap';
@@ -35,7 +36,7 @@ var AddressInput = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           name = _this$props.name,
-          props = _objectWithoutProperties(_this$props, ["name"]);
+          props = _objectWithoutProperties(_this$props, _excluded);
 
       return /*#__PURE__*/React.createElement(FormSection, _extends({
         name: name
@@ -84,10 +85,10 @@ var AddressInput = /*#__PURE__*/function (_React$Component) {
 
 export { AddressInput as default };
 AddressInput.propTypes = {
-  /**
-   * The key that the resulting values should be nested under within the form values.
-   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
-   * this allows us to have two address inputs inside the same form (shipping and billing address)
+  /**
+   * The key that the resulting values should be nested under within the form values.
+   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
+   * this allows us to have two address inputs inside the same form (shipping and billing address)
    */
   name: PropTypes.string
 };

package/es/ConfirmBaseForm/ConfirmBaseForm.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["handleCancel", "request", "yesColor", "style", "title"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 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; }
 
@@ -16,7 +17,7 @@ export default function ConfirmBaseForm(_ref) {
       yesColor = _ref$yesColor === void 0 ? 'danger' : _ref$yesColor,
       style = _ref.style,
       title = _ref.title,
-      props = _objectWithoutProperties(_ref, ["handleCancel", "request", "yesColor", "style", "title"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var webRequest = useAxiosRequest(Object.assign({}, request, {
     autoExecute: false

package/es/ConfirmDeleteForm/ConfirmDeleteForm.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["successUrl", "form", "children"];
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import ConfirmBaseForm from '../ConfirmBaseForm';
@@ -8,7 +9,7 @@ export default function ConfirmDeleteForm(_ref) {
   var successUrl = _ref.successUrl,
       form = _ref.form,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["successUrl", "form", "children"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var history = useHistory();
 

package/es/DatePickerInput/DatePickerInput.js

@@ -7,16 +7,18 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["value", "className", "maxDate"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 parseISO from 'date-fns/parseISO';
 import classnames from 'classnames';
 var dateOnlyRegex = /^\d{4}-\d{2}-\d{2}$/;
+var defaultMaxDate = new Date('9999-12-31');
 
 var DatePickerInput = /*#__PURE__*/function (_React$Component) {
   _inherits(DatePickerInput, _React$Component);
@@ -46,7 +48,7 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
         onChange(null);
       } else {
         // ensure ONLY the date is persisted - so UTC offset info / time is not persisted or sent
-        onChange(e.toISOString().split('T')[0]);
+        onChange(convertToTimeZoneInsensitiveISOString(e).split('T')[0]);
       }
     });
 
@@ -59,7 +61,9 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           value = _this$props.value,
           className = _this$props.className,
-          rest = _objectWithoutProperties(_this$props, ["value", "className"]);
+          _this$props$maxDate = _this$props.maxDate,
+          maxDate = _this$props$maxDate === void 0 ? defaultMaxDate : _this$props$maxDate,
+          rest = _objectWithoutProperties(_this$props, _excluded);
 
       if (value && !dateOnlyRegex.test(value)) {
         var errorMessage = "Invalid date only value of ".concat(value, " passed to DatePicker input. This input is only configured to handle dates in the format yyyy-mm-dd. Ensure that the server is configured to return date only values.");
@@ -79,7 +83,8 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
       }, rest, {
         value: parsedValue,
         onChange: this.handleChange,
-        onBlur: this.handleBlur
+        onBlur: this.handleBlur,
+        maxDate: maxDate
       }));
     }
   }]);
@@ -87,4 +92,16 @@ var DatePickerInput = /*#__PURE__*/function (_React$Component) {
   return DatePickerInput;
 }(React.Component);
 
-export { DatePickerInput as default };
+export { DatePickerInput as default };
+export function convertToTimeZoneInsensitiveISOString(date) {
+  var year = new Intl.DateTimeFormat('en', {
+    year: 'numeric'
+  }).format(date);
+  var month = new Intl.DateTimeFormat('en', {
+    month: '2-digit'
+  }).format(date);
+  var day = new Intl.DateTimeFormat('en', {
+    day: '2-digit'
+  }).format(date);
+  return "".concat(year, "-").concat(month, "-").concat(day, "T00:00:00.000Z");
+}

package/es/FileInput/DefaultFileList.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { ListGroupItem, ListGroup } from 'reactstrap';
 export default function DefaultFileList(_ref) {
   var files = _ref.files,
-      rejectedFiles = _ref.rejectedFiles;
+      _ref$rejectedFiles = _ref.rejectedFiles,
+      rejectedFiles = _ref$rejectedFiles === void 0 ? [] : _ref$rejectedFiles;
   return /*#__PURE__*/React.createElement(ListGroup, null, files.map(function (file) {
     return /*#__PURE__*/React.createElement(Group, {
       key: file.path,
@@ -26,7 +27,7 @@ function Group(_ref3) {
     color: "d-flex ".concat(warning ? 'warning' : 'success', "  justify-content-between list-group-item ").concat(warning ? 'list-group-item-warning' : 'list-group-item-success', " px-3 py-1 rounded-1")
   }, /*#__PURE__*/React.createElement("span", {
     className: "d-flex justify-content-between w-100"
-  }, /*#__PURE__*/React.createElement("span", null, item.path), " ", /*#__PURE__*/React.createElement("span", null, humanFileSize(item.size))));
+  }, /*#__PURE__*/React.createElement("span", null, item.name), " ", /*#__PURE__*/React.createElement("span", null, humanFileSize(item.size))));
 }
 
 function humanFileSize(size) {

package/es/FileInput/DropzoneFileInput.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+var _excluded = ["className", "onChange", "value", "accept", "disabled", "multiple", "FileList", "placeholder", "dropzone"];
 import React from 'react';
 import { useDropzone } from 'react-dropzone';
 import classNames from 'classnames';
@@ -10,34 +12,35 @@ export default function DropzoneFileInput(_ref) {
       value = _ref.value,
       accept = _ref.accept,
       disabled = _ref.disabled,
-      multiple = _ref.multiple,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$FileList = _ref.FileList,
       FileList = _ref$FileList === void 0 ? DefaultFileList : _ref$FileList,
       _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Drag and drop some files here, or click to select files' : _ref$placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'Drag and drop some file(s) here, or click to select file(s)' : _ref$placeholder,
       dropzone = _ref.dropzone,
-      props = _objectWithoutProperties(_ref, ["className", "onChange", "value", "accept", "disabled", "multiple", "FileList", "placeholder", "dropzone"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useDropzone = useDropzone({
     accept: accept,
     onDrop: onDrop,
-    disabled: disabled
+    disabled: disabled,
+    multiple: multiple
   }),
-      acceptedFiles = _useDropzone.acceptedFiles,
-      fileRejections = _useDropzone.fileRejections,
+      _useDropzone$accepted = _useDropzone.acceptedFiles,
+      acceptedFiles = _useDropzone$accepted === void 0 ? (acceptedFiles[0], _readOnlyError("acceptedFiles")) : _useDropzone$accepted,
+      _useDropzone$fileReje = _useDropzone.fileRejections,
+      fileRejections = _useDropzone$fileReje === void 0 ? fileRejections.push(acceptedFiles.slice(1, acceptedFiles.length)) : _useDropzone$fileReje,
       getRootProps = _useDropzone.getRootProps,
       getInputProps = _useDropzone.getInputProps,
       isDragAccept = _useDropzone.isDragAccept,
       isDragReject = _useDropzone.isDragReject;
 
   function onDrop(acceptedFiles) {
-    if (!(acceptedFiles !== null && acceptedFiles !== void 0 && acceptedFiles.length)) {
+    if (!(acceptedFiles !== null && acceptedFiles !== void 0 && acceptedFiles.length) > 1 && !multiple) {
       onChange(null);
-    } else if (multiple) {
-      onChange(acceptedFiles);
     } else {
-      var target = acceptedFiles[0];
-      onChange(target);
+      onChange(acceptedFiles);
     }
   }
 
@@ -48,7 +51,7 @@ export default function DropzoneFileInput(_ref) {
   });
   return /*#__PURE__*/React.createElement("section", {
     className: className
-  }, /*#__PURE__*/React.createElement("div", getRootProps(), /*#__PURE__*/React.createElement("input", _extends({}, props, getInputProps())), /*#__PURE__*/React.createElement(React.Fragment, null, placeholder)), /*#__PURE__*/React.createElement("aside", null, /*#__PURE__*/React.createElement(FileList, {
+  }, /*#__PURE__*/React.createElement("div", getRootProps(), /*#__PURE__*/React.createElement("input", _extends({}, props, getInputProps())), /*#__PURE__*/React.createElement(React.Fragment, null, placeholder), !multiple && /*#__PURE__*/React.createElement("b", null, "Only one file accepted."), accept && /*#__PURE__*/React.createElement("b", null, "Files of type \"".concat(accept, "\" accepted"))), /*#__PURE__*/React.createElement("aside", null, /*#__PURE__*/React.createElement(FileList, {
     files: acceptedFiles,
     rejectedFiles: fileRejections
   })));

package/es/FileInput/FileInput.js

@@ -1,35 +1,57 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React, { useEffect, useRef } from 'react';
+var _excluded = ["className", "onChange", "value", "multiple"];
+import React, { useEffect, useRef, useState } from 'react';
+import DefaultFileList from './DefaultFileList';
 export default function FileInput(_ref) {
   var className = _ref.className,
       onChange = _ref.onChange,
       value = _ref.value,
-      props = _objectWithoutProperties(_ref, ["className", "onChange", "value"]);
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var inputRef = useRef();
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      acceptedFiles = _useState2[0],
+      setAcceptedFiles = _useState2[1];
+
   useEffect(function () {
     if (!value && inputRef.current) {
       inputRef.current.value = null;
     }
   }, [value]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "custom-file file-input ".concat(className || '', " ").concat(props.disabled ? 'disabled' : '')
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", _extends({
     ref: inputRef,
     type: "file",
     className: "custom-file-input",
-    onChange: handleChange
-  }, props)), /*#__PURE__*/React.createElement("label", {
+    onChange: handleChange,
+    multiple: multiple
+  }, props))), /*#__PURE__*/React.createElement("label", {
     className: "custom-file-label"
-  }, !value && /*#__PURE__*/React.createElement("span", null, "Choose A File..."), value && /*#__PURE__*/React.createElement("span", null, value.name, " - size: ", humanFileSize(value.size))));
+  }, /*#__PURE__*/React.createElement("div", null, !value && /*#__PURE__*/React.createElement("span", null, "Choose A File..."), value && (!multiple ? /*#__PURE__*/React.createElement("span", null, value.name, " - size: ", humanFileSize(value.size)) : value.length === 1 ? /*#__PURE__*/React.createElement("span", null, value[0].name, " - size: ", humanFileSize(value[0].size)) : /*#__PURE__*/React.createElement("span", null, "Multiple files selected."))))), /*#__PURE__*/React.createElement(DefaultFileList, {
+    files: acceptedFiles
+  }));
 
   function handleChange(e) {
     if (e == null || !e.target || !e.target.files.length) {
       onChange(null);
     } else {
-      var target = e.target.files[0];
-      onChange(target);
+      var files = _toConsumableArray(e.target.files);
+
+      setAcceptedFiles(files);
+
+      if (!multiple) {
+        onChange(files[0]);
+      } else {
+        onChange(files);
+      }
     }
   }
 }

package/es/Form/Form.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"];
 import React, { useState, useMemo, useContext } from 'react';
 import PropTypes from 'prop-types';
 import FocusError from './FocusError';
@@ -16,7 +17,7 @@ export default function Form(_ref) {
       ignoreLostChanges = _ref.ignoreLostChanges,
       onSubmit = _ref.onSubmit,
       initialValues = _ref.initialValues,
-      props = _objectWithoutProperties(_ref, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   // formik resets all error on each blur (with our settings)
   // this means that ALL errors from the server disappear when any one field is blurred

package/es/FormGroupWrapper.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["prepend", "append", "Component", "helpText"];
 import React from 'react';
 import { InputGroup } from 'reactstrap';
 import FormGroup from './FormGroup';
@@ -9,7 +10,7 @@ export default function FormGroupWrapper(_ref) {
       append = _ref.append,
       Component = _ref.Component,
       helpText = _ref.helpText,
-      props = _objectWithoutProperties(_ref, ["prepend", "append", "Component", "helpText"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var meta = props.meta;
   return /*#__PURE__*/React.createElement(FormGroup, _extends({

package/es/FormInput/FormInput.js

@@ -2,6 +2,12 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["className", "meta", "helpText"],
+    _excluded2 = ["meta"],
+    _excluded3 = ["includeEmptyOption", "options"],
+    _excluded4 = ["optionsUrl", "includeEmptyOption", "includeOtherOption", "cache", "maxAge"],
+    _excluded5 = ["meta"],
+    _excluded6 = ["helpText", "meta"];
 import React from 'react';
 import classnames from 'classnames';
 import { Input as BootstrapInput, FormFeedback, CustomInput, FormText, Alert } from 'reactstrap';
@@ -86,7 +92,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
   var className = _ref.className,
       meta = _ref.meta,
       helpText = _ref.helpText,
-      props = _objectWithoutProperties(_ref, ["className", "meta", "helpText"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(TextareaAutosize, _extends({
     cacheMeasurements: true,
@@ -96,7 +102,7 @@ var TextAreaInput = function TextAreaInput(_ref) {
 
 var DefaultInput = function DefaultInput(_ref2) {
   var meta = _ref2.meta,
-      props = _objectWithoutProperties(_ref2, ["meta"]);
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/React.createElement(BootstrapInput, _extends({
     invalid: !!meta.error
@@ -107,7 +113,7 @@ var Select = function Select(_ref3) {
   var _ref3$includeEmptyOpt = _ref3.includeEmptyOption,
       includeEmptyOption = _ref3$includeEmptyOpt === void 0 ? true : _ref3$includeEmptyOpt,
       options = _ref3.options,
-      props = _objectWithoutProperties(_ref3, ["includeEmptyOption", "options"]);
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   var allOptions = includeEmptyOption ? [{
     label: ' ',
@@ -135,7 +141,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
       cache = _ref4$cache === void 0 ? optionCache : _ref4$cache,
       _ref4$maxAge = _ref4.maxAge,
       maxAge = _ref4$maxAge === void 0 ? 1000 * 10 : _ref4$maxAge,
-      props = _objectWithoutProperties(_ref4, ["optionsUrl", "includeEmptyOption", "includeOtherOption", "cache", "maxAge"]);
+      props = _objectWithoutProperties(_ref4, _excluded4);
 
   var request = {
     method: 'get',
@@ -184,7 +190,7 @@ var RemoteSelect = function RemoteSelect(_ref4) {
 
 var DatePicker = function DatePicker(_ref5) {
   var meta = _ref5.meta,
-      props = _objectWithoutProperties(_ref5, ["meta"]);
+      props = _objectWithoutProperties(_ref5, _excluded5);
 
   return /*#__PURE__*/React.createElement(DatePickerInput, _extends({}, props, {
     className: meta.error ? 'is-invalid' : ''
@@ -194,7 +200,7 @@ var DatePicker = function DatePicker(_ref5) {
 var Checkbox = function Checkbox(_ref6) {
   var helpText = _ref6.helpText,
       meta = _ref6.meta,
-      props = _objectWithoutProperties(_ref6, ["helpText", "meta"]);
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomInput, props), meta.error && /*#__PURE__*/React.createElement(FormFeedback, null, meta.error), helpText && /*#__PURE__*/React.createElement(FormText, null, helpText));
 };

package/es/FormInputArray/FormInputArray.js

@@ -3,8 +3,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "name", "label", "newItem", "component", "prepend", "disabled", "validate"],
+    _excluded2 = ["className"],
+    _excluded3 = ["className", "children"],
+    _excluded4 = ["children", "className"],
+    _excluded5 = ["children", "className"],
+    _excluded6 = ["children", "className"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 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; }
 
@@ -12,9 +18,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import classnames from 'classnames';
 import { Col, Card, Button, CardBody, Row, Alert } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
 import useStandardFormInput from '../useStandardFormInput';
 import NestedFormFieldContext from '../NestedFormFieldContext';
+import classNames from 'classnames';
 export default function FormInputArray(_ref) {
   var id = _ref.id,
       name = _ref.name,
@@ -24,7 +33,7 @@ export default function FormInputArray(_ref) {
       Prepend = _ref.prepend,
       disabled = _ref.disabled,
       validate = _ref.validate,
-      props = _objectWithoutProperties(_ref, ["id", "name", "label", "newItem", "component", "prepend", "disabled", "validate"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useStandardFormInput = useStandardFormInput(_objectSpread({
     id: id,
@@ -65,8 +74,8 @@ export default function FormInputArray(_ref) {
     onClick: addItem,
     title: "Add an additional item",
     className: "add-array-item"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "fas fa-plus"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
   }), " Add New"))), /*#__PURE__*/React.createElement(CardBody, null, meta.error && typeof meta.error === 'string' && /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Alert, {
     className: "field-array-alert",
     color: "danger"
@@ -79,14 +88,20 @@ export default function FormInputArray(_ref) {
   })), values.map(function (value, index) {
     var itemName = "".concat(inputProps.name, "[").concat(index, "]");
     return /*#__PURE__*/React.createElement(Row, {
-      key: value && value['form-input-array-key'] || value && value['id'] || itemName
+      key: value && value['form-input-array-key'] || value && value['id'] || itemName,
+      className: classnames('field-array-item', {
+        removed: value.isDeleted
+      }),
+      role: "listitem"
     }, /*#__PURE__*/React.createElement(NestedFormFieldContext.Provider, {
       value: itemName
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "component"
     }, /*#__PURE__*/React.createElement(Component, _extends({
       value: value,
       name: itemName,
       disabled: disabled
-    }, props))), !disabled && /*#__PURE__*/React.createElement("div", {
+    }, props)))), !disabled && /*#__PURE__*/React.createElement("div", {
       className: "remove-array-item"
     }, /*#__PURE__*/React.createElement(Button, {
       color: "link",
@@ -94,8 +109,8 @@ export default function FormInputArray(_ref) {
         return removeItem(index);
       },
       title: "Remove Item"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "fa fa-trash-alt"
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faTrash
     }))));
   })));
 
@@ -136,7 +151,7 @@ export default function FormInputArray(_ref) {
 
 FormInputArray.Header = function (_ref2) {
   var className = _ref2.className,
-      props = _objectWithoutProperties(_ref2, ["className"]);
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/React.createElement(FormInputArray.Column, _extends({
     className: classnames('mb-2', className)
@@ -146,7 +161,7 @@ FormInputArray.Header = function (_ref2) {
 FormInputArray.Column = function (_ref3) {
   var className = _ref3.className,
       children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, ["className", "children"]);
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   return /*#__PURE__*/React.createElement(Col, _extends({
     className: classnames('d-flex', className)
@@ -157,24 +172,24 @@ FormInputArray.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
 
-  /**
-   * The component to use for each element of the array
+  /**
+   * The component to use for each element of the array
    **/
   component: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
 
-  /**
-   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
+  /**
+   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
    **/
   newItem: PropTypes.object,
 
-  /**
-   * Affixes a 'header' above all rows so you can have a grid-like display
+  /**
+   * Affixes a 'header' above all rows so you can have a grid-like display
    **/
   prepend: PropTypes.func,
 
-  /**
-   * standard validator, BUT, will be passed the whole array to validate
+  /**
+   * standard validator, BUT, will be passed the whole array to validate
    **/
   validate: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func])
 };
@@ -182,29 +197,29 @@ FormInputArray.propTypes = {
 function CardActionHeader(_ref4) {
   var children = _ref4.children,
       className = _ref4.className,
-      props = _objectWithoutProperties(_ref4, ["children", "className"]);
+      props = _objectWithoutProperties(_ref4, _excluded4);
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: "card-header card-action-header d-flex align-items-baseline ".concat(className)
+    className: classnames('card-header card-action-header d-flex align-items-baseline', className)
   }, props), children);
 }
 
 CardActionHeader.Title = function Title(_ref5) {
   var children = _ref5.children,
       className = _ref5.className,
-      props = _objectWithoutProperties(_ref5, ["children", "className"]);
+      props = _objectWithoutProperties(_ref5, _excluded5);
 
   return /*#__PURE__*/React.createElement("strong", _extends({
-    className: "mr-auto ".concat(className)
+    className: classnames('mr-auto', className)
   }, props), children);
 };
 
 CardActionHeader.Actions = function Actions(_ref6) {
   var children = _ref6.children,
       className = _ref6.className,
-      props = _objectWithoutProperties(_ref6, ["children", "className"]);
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: "card-action-header-actions ".concat(className)
+    className: classnames('card-action-header-actions', className)
   }, props), children);
 };

package/es/IconInput.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "icon", "helpText"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputGroup, InputGroupAddon, InputGroupText, Input as BootstrapInput, FormFeedback } from 'reactstrap';
@@ -9,7 +10,7 @@ export default function IconInput(_ref) {
   var className = _ref.className,
       icon = _ref.icon,
       helpText = _ref.helpText,
-      props = _objectWithoutProperties(_ref, ["className", "icon", "helpText"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useStandardFormInput = useStandardFormInput(props),
       _useStandardFormInput2 = _slicedToArray(_useStandardFormInput, 2),