envoc-form 4.0.1-9 → 5.0.1

package/lib/Form/LegacyFormBasedPreventNavigation.js

@@ -0,0 +1,72 @@
+"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");
+/** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
+ *
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
+ */
+function LegacyFormBasedPreventNavigation(_a) {
+    var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
+    (0, react_1.useEffect)(function () {
+        if (!preventNavigate) {
+            return;
+        }
+        var unblock = function () { };
+        var push = navigator.push;
+        // 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
+        if (navigator.block) {
+            var blocker_1 = function (tx) {
+                if (window.confirm(promptMessage)) {
+                    tx.retry();
+                }
+            };
+            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_1(autoUnblockingTx);
+            });
+        }
+        else {
+            //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
+            navigator.push = function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                if (window.confirm(promptMessage)) {
+                    push.apply(void 0, args);
+                }
+            };
+        }
+        window.addEventListener('beforeunload', beforeUnload);
+        return function () {
+            unblock();
+            navigator.push = push;
+            window.removeEventListener('beforeunload', beforeUnload);
+        };
+        function beforeUnload(e) {
+            e.preventDefault();
+            e.returnValue = promptMessage;
+        }
+    }, [preventNavigate, promptMessage, navigator]);
+    return null;
+}
+exports.default = LegacyFormBasedPreventNavigation;

package/lib/Form/NewFormBasedPreventNavigation.d.ts

@@ -0,0 +1,14 @@
+import type { History } from 'history';
+import { Navigator as BaseNavigator } from 'react-router-dom';
+interface Navigator extends BaseNavigator {
+    block?: History['block'];
+    location: Location;
+}
+interface FormBasedPreventNavigationProps {
+    promptMessage?: string;
+    preventNavigate: boolean;
+    navigator: Navigator;
+}
+/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
+export default function NewFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
+export {};

package/lib/Form/NewFormBasedPreventNavigation.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
+function NewFormBasedPreventNavigation(_a) {
+    var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
+    (0, react_router_dom_1.unstable_usePrompt)({
+        when: preventNavigate,
+        message: promptMessage,
+    });
+    // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
+    // that do not support the react-router Data API we can remove this.
+    (0, react_1.useEffect)(function () {
+        if (!preventNavigate) {
+            return;
+        }
+        var unblock = function () { };
+        var push = navigator.push;
+        navigator.push = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            if (window.confirm(promptMessage)) {
+                push.apply(void 0, args);
+            }
+        };
+        window.addEventListener('beforeunload', beforeUnload);
+        return function () {
+            unblock();
+            navigator.push = push;
+            window.removeEventListener('beforeunload', beforeUnload);
+        };
+        function beforeUnload(e) {
+            e.preventDefault();
+            e.returnValue = promptMessage;
+        }
+    }, [preventNavigate, promptMessage, navigator]);
+    return null;
+}
+exports.default = NewFormBasedPreventNavigation;

package/lib/Form/ServerErrorContext.d.ts

@@ -1,10 +1,11 @@
-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>;
+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;
+}
+/** Context to store the API errors from the server for the form. */
+export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;

package/lib/Form/ServerErrorContext.js

@@ -1,14 +1,15 @@
-"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) { },
-});
+"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"));
+/** Context to store the API errors from the server for the form. */
+exports.ServerErrorContext = react_1.default.createContext({
+    errors: {},
+    getError: function (path) {
+        return undefined;
+    },
+    setError: function (path, errorMessage) { },
+});

package/lib/FormActions.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-export interface FormActionsProps {
-    allowPristineSubmit?: boolean;
-    handleCancel?: () => void;
-    disabled?: boolean;
-}
-export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): JSX.Element;
+export interface FormActionsProps {
+    /** Allow the form to be submitted without any changes. By default this is not allowed. */
+    allowPristineSubmit?: boolean;
+    /** The cancel button's `onClick`.
+     * @defaultValue `window.history.back()`
+     */
+    handleCancel?: () => void;
+    /** Whether both buttons should be disabled. */
+    disabled?: boolean;
+}
+/** Standard cancel and submit buttons. */
+export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;

package/lib/FormActions.js

@@ -1,32 +1,22 @@
-"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 FormDefaults_1 = require("./FormDefaults");
-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: FormDefaults_1.FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: FormDefaults_1.FormDefaults.cssClassPrefix +
-                    'form-actions ' +
-                    FormDefaults_1.FormDefaults.cssClassPrefix +
-                    'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
-    function goBack() {
-        window.history.back();
-    }
-}
-exports.default = FormActions;
+"use strict";
+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 FormDefaults_1 = require("./FormDefaults");
+var formik_1 = require("formik");
+var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
+/** Standard cancel and submit buttons. */
+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: FormDefaults_1.FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: FormDefaults_1.FormDefaults.cssClassPrefix +
+                    'form-actions ' +
+                    FormDefaults_1.FormDefaults.cssClassPrefix +
+                    'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack, children: "Cancel" })] }));
+    function goBack() {
+        window.history.back();
+    }
+}
+exports.default = FormActions;

package/lib/FormDefaults.d.ts

@@ -1,3 +1,4 @@
-export declare const FormDefaults: {
-    cssClassPrefix: string;
-};
+/** `envoc-form-` CSS class prefix */
+export declare const FormDefaults: {
+    cssClassPrefix: string;
+};

package/lib/FormDefaults.js

@@ -1,4 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormDefaults = void 0;
-exports.FormDefaults = { cssClassPrefix: 'envoc-form-' };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormDefaults = void 0;
+/** `envoc-form-` CSS class prefix */
+exports.FormDefaults = { cssClassPrefix: 'envoc-form-' };

package/lib/Group.d.ts

@@ -1,13 +1,16 @@
-/// <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;
+/// <reference types="react" />
+import { InjectedFieldProps } from './Field/InjectedFieldProps';
+export interface GroupProps extends InjectedFieldProps<any> {
+    /** Extra class names to apply. */
+    className?: string;
+    children: React.ReactNode;
+    /** Simple text label before the input. */
+    label?: string;
+    /** Simple helper text after the input. */
+    helpText?: string | React.ReactNode;
+    /** Whether the field should be disabled. */
+    disabled?: boolean;
+    required?: 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, required, }: GroupProps): import("react/jsx-runtime").JSX.Element;

package/lib/Group.js

@@ -1,30 +1,20 @@
-"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 FormDefaults_1 = require("./FormDefaults");
-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 _b;
-    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, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
-            _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
-            _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
-            _b)) }, { children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + '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: FormDefaults_1.FormDefaults.cssClassPrefix + 'error' }, { children: meta.error }))), helpText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help' }, { children: helpText })))] })));
-}
-exports.default = Group;
+"use strict";
+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 FormDefaults_1 = require("./FormDefaults");
+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 _b;
+    var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
+            _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
+            _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
+            _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
+            _b)), children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), (0, jsx_runtime_1.jsx)("label", { htmlFor: input.id, children: label }), children, meta.error && ((0, jsx_runtime_1.jsx)("div", { id: "".concat(input.id, "-error"), className: FormDefaults_1.FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
+}
+exports.default = Group;

package/lib/Input/IconInputGroup.d.ts

@@ -1,9 +1,12 @@
-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;
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface IconInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | 'value'> {
+    type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+    /** Icon to display on the input group. */
+    icon: React.ReactNode;
+    /** Text to display after the input group to give more information to the user. */
+    helpText?: string;
+}
+/** Input group with an icon. */
+declare const IconInputGroupWithRef: React.ComponentType<IconInputGroupProps>;
+export default IconInputGroupWithRef;

package/lib/Input/IconInputGroup.js

@@ -1,46 +1,48 @@
-"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"));
-var FormDefaults_1 = require("../FormDefaults");
-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, FormDefaults_1.FormDefaults.cssClassPrefix + '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;
+"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"));
+var FormDefaults_1 = require("../FormDefaults");
+function IconInputGroup(_a, ref) {
+    var _b;
+    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, FormDefaults_1.FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+                if (!e.target.value) {
+                    input.onChange(undefined);
+                }
+                else {
+                    input.onChange(e.target.value);
+                }
+            } }, rest)) }));
+}
+/** Input group with an icon. */
+var IconInputGroupWithRef = react_1.default.forwardRef(IconInputGroup);
+exports.default = IconInputGroupWithRef;

package/lib/Input/InputGroup.d.ts

@@ -1,12 +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;
+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' | 'value'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    value: string | number | null | undefined;
+    icon?: React.ReactNode;
+}
+declare function InputGroup<TValue>({ input, meta, label, helpText, className, required, disabled, onChange, value, icon, ...rest }: InputGroupProps<TValue>, ref: LegacyRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+/** Generic controlled `<input/>` wrapped by a `<Group/>` */
+declare const InputGroupWithRef: typeof InputGroup;
+export default InputGroupWithRef;

package/lib/Input/InputGroup.js

@@ -1,39 +1,39 @@
-"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"));
-var FormDefaults_1 = require("../FormDefaults");
-/** 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, FormDefaults_1.FormDefaults.cssClassPrefix + '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, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] })));
-}
-var InputGroupWithRef = react_1.default.forwardRef(InputGroup);
-exports.default = InputGroupWithRef;
+"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 FormDefaults_1 = require("../FormDefaults");
+var Group_1 = __importDefault(require("../Group"));
+function InputGroup(_a, ref) {
+    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "onChange", "value", "icon"]);
+    return ((0, jsx_runtime_1.jsxs)(Group_1.default, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group'), children: [icon, (0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'input-group') }))] }));
+}
+/** Generic controlled `<input/>` wrapped by a `<Group/>` */
+var InputGroupWithRef = react_1.default.forwardRef(InputGroup);
+exports.default = InputGroupWithRef;

package/lib/Input/MoneyInputGroup.d.ts

@@ -1,7 +1,9 @@
-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;
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface MoneyInputGroupProps extends Omit<InputGroupProps<number | undefined | null>, 'onChange' | 'type' | 'value'> {
+    /** Custom parsing function when the value changes. */
+    parseFunc?: typeof parseInt | typeof parseFloat;
+}
+/** Input group for inputting money. */
+declare const MoneyInputGroupWithRef: React.FunctionComponent<MoneyInputGroupProps>;
+export default MoneyInputGroupWithRef;