envoc-form 3.3.0 → 4.0.1-2

package/lib/Form/Form.js

@@ -1,153 +1,117 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = Form;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _FocusError = _interopRequireDefault(require("./FocusError"));
-
-var _formik = require("formik");
-
-var _FormBasedPreventNavigation = _interopRequireDefault(require("./FormBasedPreventNavigation"));
-
-var _ServerErrorContext = _interopRequireDefault(require("./ServerErrorContext"));
-
-var _utils = require("../utils");
-
-var _excluded = ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"];
-
-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; }
-
-function Form(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      ignoreLostChanges = _ref.ignoreLostChanges,
-      onSubmit = _ref.onSubmit,
-      initialValues = _ref.initialValues,
-      props = (0, _objectWithoutProperties2["default"])(_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
-  // So, we have to store server errors ourselves
-  // Since we only use useStandardFormInput, that means there is only one consumer
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      serverErrors = _useState2[0],
-      setServerErrors = _useState2[1];
-
-  var serverErrorContextValue = (0, _react.useMemo)(function () {
-    return {
-      errors: serverErrors,
-      getError: function getError(path) {
-        var lowered = path.toLowerCase();
-        return serverErrors && serverErrors[lowered];
-      },
-      setError: function setError(path, errorMessage) {
-        var lowered = path.toLowerCase();
-        setServerErrors(Object.assign({}, serverErrors, (0, _defineProperty2["default"])({}, lowered, !errorMessage ? undefined : errorMessage)));
-      }
-    };
-  }, [serverErrors]);
-  return /*#__PURE__*/_react["default"].createElement(_formik.Formik, (0, _extends2["default"])({
-    validateOnChange: false,
-    validateOnBlur: true,
-    validateOnMount: false,
-    initialValues: initialValues || {},
-    onSubmit: handleSubmit
-  }, props), /*#__PURE__*/_react["default"].createElement(_ServerErrorContext["default"].Provider, {
-    value: serverErrorContextValue
-  }, /*#__PURE__*/_react["default"].createElement(_formik.Form, {
-    className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_FocusError["default"], {
-    serverErrors: serverErrorContextValue
-  }), /*#__PURE__*/_react["default"].createElement(_FormBasedPreventNavigation["default"], {
-    ignoreLostChanges: ignoreLostChanges
-  }), typeof children === 'function' ? children(props) : children)));
-
-  function handleSubmit(values, formikBag) {
-    var formData = null;
-
-    if ((0, _utils.objectContainsNonSerializableProperty)(values)) {
-      formData = (0, _utils.objectToFormData)(values, {
-        indices: true,
-        dotNotation: true,
-        allowEmptyArrays: true,
-        noFileListBrackets: true
-      });
-    }
-
-    return Promise.resolve(onSubmit(formData || values)).then(function (response) {
-      return response;
-    })["catch"](function (err) {
-      //this is an http error
-      if (err && err.response && err.response.data && err.response.data.validationFailures) {
-        try {
-          var _serverErrors = err.response.data.validationFailures.map(function (error) {
-            return {
-              // case insensitive path
-              path: error.propertyName.toLowerCase(),
-              errorMessage: error.errorMessage
-            };
-          }).reduce(function (acc, value) {
-            // for simplicity, just keep it to one server error at a time per path
-            acc[value.path] = value.errorMessage;
-            return acc;
-          }, {});
-
-          setServerErrors(_serverErrors);
-        } catch (err) {
-          console.error('Failure to getErrorObject');
-          console.error(err);
-          throw err;
-        }
-      }
-
-      throw err;
-    });
-  }
-}
-
-Form.DisplayFormState = DisplayFormState;
-
-function DisplayFormState() {
-  var formState = (0, _formik.useFormikContext)();
-  var serverErrorContext = (0, _react.useContext)(_ServerErrorContext["default"]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      margin: '1rem 0'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("pre", {
-    style: {
-      background: '#f6f8fa',
-      fontSize: '.65rem',
-      padding: '.5rem'
-    }
-  }, serverErrorContext && serverErrorContext.errors && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "serverErrors = "), JSON.stringify(serverErrorContext.errors, null, 2)), /*#__PURE__*/_react["default"].createElement("strong", null, "formState = "), JSON.stringify(formState, null, 2)));
-}
-
-Form.propTypes = {
-  ignoreLostChanges: _propTypes["default"].bool,
-  onSubmit: _propTypes["default"].func.isRequired,
-  initialValues: _propTypes["default"].object
-};
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var formik_1 = require("formik");
+var FocusError_1 = __importDefault(require("./FocusError"));
+var FormBasedPreventNavigation_1 = __importDefault(require("./FormBasedPreventNavigation"));
+var ServerErrorContext_1 = require("./ServerErrorContext");
+var Field_1 = __importDefault(require("../Field/Field"));
+var FieldArray_1 = __importDefault(require("../FieldArray/FieldArray"));
+var objectContainsNonSerializableProperty_1 = __importDefault(require("../utils/objectContainsNonSerializableProperty"));
+var objectToFormData_1 = __importDefault(require("../utils/objectToFormData"));
+function Form(_a) {
+    var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
+    // 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
+    // So, we have to store server errors ourselves
+    // Since we only use useStandardFormInput, that means there is only one consumer
+    var _b = (0, react_1.useState)({}), serverErrors = _b[0], setServerErrors = _b[1];
+    var serverErrorContextValue = (0, react_1.useMemo)(function () { return ({
+        errors: serverErrors,
+        getError: function (path) {
+            var lowered = path.toLowerCase();
+            return serverErrors && serverErrors[lowered];
+        },
+        setError: function (path, errorMessage) {
+            var _a;
+            var lowered = path.toLowerCase();
+            setServerErrors(Object.assign({}, serverErrors, (_a = {},
+                _a[lowered] = !errorMessage ? undefined : errorMessage,
+                _a)));
+        },
+    }); }, [serverErrors]);
+    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: (0, jsx_runtime_1.jsx)(ServerErrorContext_1.ServerErrorContext.Provider, __assign({ value: serverErrorContextValue }, { children: (0, jsx_runtime_1.jsxs)(formik_1.Form, __assign({ className: className, style: style }, { children: [(0, jsx_runtime_1.jsx)(FocusError_1.default, { serverErrors: serverErrorContextValue }), (0, jsx_runtime_1.jsx)(FormBasedPreventNavigation_1.default, { ignoreLostChanges: ignoreLostChanges }), children({
+                        // hack for ref forwarding
+                        Field: Field_1.default,
+                        FieldArray: FieldArray_1.default,
+                    })] })) })) })));
+    function handleSubmit(values, formikBag) {
+        var formData = undefined;
+        if ((0, objectContainsNonSerializableProperty_1.default)(values)) {
+            formData = (0, objectToFormData_1.default)(values, {
+                indices: true,
+                dotNotation: true,
+                allowEmptyArrays: true,
+                noFileListBrackets: true,
+            });
+        }
+        return onSubmit(formData !== null && formData !== void 0 ? formData : values, formikBag)
+            .then(function (response) {
+            return response;
+        })
+            .catch(function (err) {
+            //this is an http error
+            if (err &&
+                err.response &&
+                err.response.data &&
+                err.response.data.validationFailures) {
+                try {
+                    var serverErrors_1 = err.response.data.validationFailures.reduce(function (acc, value) {
+                        var _a;
+                        // for simplicity, just keep it to one server error at a time per path
+                        // don't care of the property name case changes
+                        var path = (_a = value.propertyName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                        if (!!path && !!value.errorMessage) {
+                            acc[path] = value.errorMessage;
+                        }
+                        return acc;
+                    }, {});
+                    setServerErrors(serverErrors_1);
+                }
+                catch (err) {
+                    console.error('Failure to getErrorObject');
+                    console.error(err);
+                    throw err;
+                }
+            }
+            throw err;
+        });
+    }
+}
+exports.default = Form;
+Form.DisplayFormState = DisplayFormState;
+function DisplayFormState() {
+    var formState = (0, formik_1.useFormikContext)();
+    var serverErrorContext = (0, react_1.useContext)(ServerErrorContext_1.ServerErrorContext);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { margin: '1rem 0' } }, { children: (0, jsx_runtime_1.jsxs)("pre", __assign({ style: {
+                background: '#f6f8fa',
+                fontSize: '.65rem',
+                padding: '.5rem',
+            } }, { children: [serverErrorContext && serverErrorContext.errors && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "serverErrors = " }), JSON.stringify(serverErrorContext.errors, null, 2)] })), (0, jsx_runtime_1.jsx)("strong", { children: "formState = " }), JSON.stringify(formState, null, 2)] })) })));
+}

package/lib/Form/FormBasedPreventNavigation.d.ts

@@ -0,0 +1,5 @@
+export interface FormBasedPreventNavigationProps {
+    ignoreLostChanges?: boolean;
+    promptMessage?: string;
+}
+export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): null;

package/lib/Form/FormBasedPreventNavigation.js

@@ -1,39 +1,56 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = FormBasedPreventNavigation;
-
-var _react = require("react");
-
-var _formik = require("formik");
-
-function FormBasedPreventNavigation(_ref) {
-  var ignoreLostChanges = _ref.ignoreLostChanges,
-      _ref$promptMessage = _ref.promptMessage,
-      promptMessage = _ref$promptMessage === void 0 ? 'Changes you made may not be saved.' : _ref$promptMessage;
-
-  var _useFormikContext = (0, _formik.useFormikContext)(),
-      dirty = _useFormikContext.dirty,
-      isSubmitting = _useFormikContext.isSubmitting;
-
-  var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
-  (0, _react.useEffect)(function () {
-    if (!preventNavigate) {
-      return;
-    }
-
-    window.addEventListener('beforeunload', beforeUnload);
-    return function () {
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-
-    function beforeUnload(e) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage]); // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
-
-  return null;
-}
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+// see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
+var react_router_dom_1 = require("react-router-dom");
+var formik_1 = require("formik");
+function FormBasedPreventNavigation(_a) {
+    var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
+    var _c = (0, formik_1.useFormikContext)(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
+    var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
+    var navigator = (0, react_1.useContext)(react_router_dom_1.UNSAFE_NavigationContext).navigator;
+    (0, react_1.useEffect)(function () {
+        if (!preventNavigate) {
+            return;
+        }
+        // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
+        // this is a workaround until we get native support for prompt on navigate
+        var blocker = function (tx) {
+            if (window.confirm(promptMessage)) {
+                tx.retry();
+            }
+        };
+        var unblock = navigator.block(function (tx) {
+            var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
+                    // Automatically unblock the transition so it can play all the way
+                    // through before retrying it. TODO: Figure out how to re-enable
+                    // this block if the transition is cancelled for some reason.
+                    unblock();
+                    tx.retry();
+                } });
+            blocker(autoUnblockingTx);
+        });
+        window.addEventListener('beforeunload', beforeUnload);
+        return function () {
+            unblock();
+            window.removeEventListener('beforeunload', beforeUnload);
+        };
+        function beforeUnload(e) {
+            e.preventDefault();
+            e.returnValue = promptMessage;
+        }
+    }, [preventNavigate, promptMessage, navigator]);
+    return null;
+}
+exports.default = FormBasedPreventNavigation;

package/lib/Form/ServerErrorContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ServerErrors {
+    [path: string]: string;
+}
+export interface ServerErrorContextProps {
+    errors: ServerErrors;
+    getError: (path: string) => string | undefined;
+    setError: (path: string, errorMessage: string | undefined) => void;
+}
+export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;

package/lib/Form/ServerErrorContext.js

@@ -1,18 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var ServerErrorContext = /*#__PURE__*/_react["default"].createContext({
-  getError: function getError(path) {},
-  setError: function setError(path, errorMessage) {}
-});
-
-var _default = ServerErrorContext;
-exports["default"] = _default;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerErrorContext = void 0;
+var react_1 = __importDefault(require("react"));
+exports.ServerErrorContext = react_1.default.createContext({
+    errors: {},
+    getError: function (path) {
+        return undefined;
+    },
+    setError: function (path, errorMessage) { },
+});

package/lib/FormActions.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface FormActionsProps {
+    allowPristineSubmit?: boolean;
+    handleCancel?: () => void;
+    disabled?: boolean;
+}
+export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): JSX.Element;

package/lib/FormActions.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var formik_1 = require("formik");
+var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
+function FormActions(_a) {
+    var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
+    var isSubmitting = (0, formik_1.useFormikContext)().isSubmitting;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { className: "form-actions", allowPristineSubmit: allowPristineSubmit, disabled: disabled }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "form-actions cancel-form-button", disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
+    function goBack() {
+        window.history.back();
+    }
+}
+exports.default = FormActions;

package/lib/Group.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { InjectedFieldProps } from './Field/InjectedFieldProps';
+export interface GroupProps extends InjectedFieldProps<any> {
+    className?: string;
+    children: React.ReactNode;
+    /** simple text label before the input */
+    label?: string;
+    /** simple helper text after the input*/
+    helpText?: string | React.ReactNode;
+    disabled?: boolean;
+}
+/** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
+export default function Group({ className, children, label, helpText, meta, input, disabled, }: GroupProps): JSX.Element;

package/lib/Group.js

@@ -0,0 +1,28 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var classnames_1 = __importDefault(require("classnames"));
+var FieldErrorScrollTarget_1 = __importDefault(require("./Field/FieldErrorScrollTarget"));
+/** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
+function Group(_a) {
+    var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled;
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(className, 'group', {
+            'is-invalid': meta.error,
+            disabled: disabled,
+        }) }, { children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && (0, jsx_runtime_1.jsx)("div", __assign({ className: "warning" }, { children: meta.warning })), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: input.id }, { children: label })), children, meta.error && (0, jsx_runtime_1.jsx)("div", __assign({ className: "error" }, { children: meta.error })), helpText && (0, jsx_runtime_1.jsx)("div", __assign({ className: "help" }, { children: helpText }))] })));
+}
+exports.default = Group;

package/lib/Input/IconInputGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface IconInputGroupProps extends Omit<InputGroupProps<string | undefined>, 'onChange' | 'type' | 'value'> {
+    type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+    icon: React.ReactNode;
+    helpText?: string;
+}
+declare const IconInputGroupWithRef: React.ComponentType<IconInputGroupProps>;
+export default IconInputGroupWithRef;

package/lib/Input/IconInputGroup.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var InputGroup_1 = __importDefault(require("./InputGroup"));
+function IconInputGroup(_a, ref) {
+    var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
+    var input = rest.input;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ icon: icon, ref: ref, className: (0, classnames_1.default)(className, 'icon-input-group'), value: input.value || '', onChange: function (e) {
+                if (!e.target.value) {
+                    input.onChange(undefined);
+                }
+                else {
+                    input.onChange(e.target.value);
+                }
+            } }, rest)) }));
+}
+var IconInputGroupWithRef = react_1.default.forwardRef(IconInputGroup);
+exports.default = IconInputGroupWithRef;

package/lib/Input/InputGroup.d.ts

@@ -0,0 +1,12 @@
+import React, { ChangeEventHandler, LegacyRef } from 'react';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { GroupProps } from '../Group';
+export interface InputGroupProps<TValue> extends InjectedFieldProps<TValue>, Omit<React.HTMLProps<HTMLInputElement>, keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    value: string | number;
+    icon?: React.ReactNode;
+}
+/** generic controlled <input/> wrapped by a Group */
+declare function InputGroup<TValue>({ input, meta, label, helpText, className, disabled, onChange, value, icon, ...rest }: InputGroupProps<TValue>, ref: LegacyRef<HTMLInputElement>): JSX.Element;
+declare const InputGroupWithRef: typeof InputGroup;
+export default InputGroupWithRef;

package/lib/Input/InputGroup.js

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Group_1 = __importDefault(require("../Group"));
+/** generic controlled <input/> wrapped by a Group */
+function InputGroup(_a, ref) {
+    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "onChange", "value", "icon"]);
+    return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: (0, classnames_1.default)(className, 'input-group') }, { children: [icon, (0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { value: value, onChange: onChange, ref: ref, className: (0, classnames_1.default)(className, 'input-group') }))] })));
+}
+var InputGroupWithRef = react_1.default.forwardRef(InputGroup);
+exports.default = InputGroupWithRef;

package/lib/Input/MoneyInputGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface MoneyInputGroupProps extends Omit<InputGroupProps<number | undefined>, 'onChange' | 'type' | 'value'> {
+    parseFunc?: typeof parseInt | typeof parseFloat;
+}
+declare const MoneyInputGroupWithRef: React.FunctionComponent<MoneyInputGroupProps>;
+export default MoneyInputGroupWithRef;