envoc-form 3.2.0 → 4.0.1-1

package/es/ConfirmDeleteForm/ConfirmDeleteForm.js

@@ -1,40 +1,54 @@
-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 { useNavigate, useParams } from 'react-router-dom';
-import ConfirmBaseForm from '../ConfirmBaseForm';
-import { toast } from 'react-toastify';
-export default function ConfirmDeleteForm(_ref) {
-  var successUrl = _ref.successUrl,
-      form = _ref.form,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var navigate = useNavigate();
-
-  var _useParams = useParams(),
-      entityId = _useParams.entityId;
-
-  var request = {
-    method: 'delete',
-    url: "/api/".concat(form, "/").concat(entityId),
-    onComplete: function onComplete() {
-      toast.success('Deleted!');
-      goBack();
-    }
-  };
-  return /*#__PURE__*/React.createElement(ConfirmBaseForm, _extends({
-    request: request,
-    handleCancel: goBack,
-    title: "Are you sure you want to delete this?"
-  }, props), children);
-
-  function goBack() {
-    if (successUrl) {
-      navigate(successUrl);
-    } else {
-      navigate(-1);
-    }
-  }
-}
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import ConfirmBaseForm from '../ConfirmBaseForm/ConfirmBaseForm';
+export default function ConfirmDeleteForm(_a) {
+    var successUrl = _a.successUrl, form = _a.form, title = _a.title, handleComplete = _a.handleComplete, handleError = _a.handleError, children = _a.children, props = __rest(_a, ["successUrl", "form", "title", "handleComplete", "handleError", "children"]);
+    var navigate = useNavigate();
+    var entityId = useParams().entityId;
+    var onComplete = handleComplete !== null && handleComplete !== void 0 ? handleComplete : function () {
+        toast.success('Deleted!');
+        goBack();
+    };
+    var onError = handleError !== null && handleError !== void 0 ? handleError : function (error) {
+        var _a, _b, _c, _d;
+        toast.error((_d = (_c = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.validationFailures[0]) === null || _c === void 0 ? void 0 : _c.errorMessage) !== null && _d !== void 0 ? _d : 'Something went wrong talking to the portal. Contact support if this continues.');
+    };
+    var request = {
+        method: 'delete',
+        url: "/api/".concat(form, "/").concat(entityId),
+        onComplete: onComplete,
+        onError: onError,
+    };
+    return (_jsx(ConfirmBaseForm, __assign({ request: request, handleCancel: goBack, title: title !== null && title !== void 0 ? title : 'Are you sure you want to delete this?' }, props, { children: children })));
+    function goBack() {
+        if (successUrl) {
+            navigate(successUrl);
+        }
+        else {
+            navigate(-1);
+        }
+    }
+}

package/es/DatePicker/DateOnlyDatePickerGroup.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DatePickerHelper } from './DatePickerHelper';
+export interface DateOnly {
+    year?: number;
+    month?: number;
+    day?: number;
+}
+export interface DateOnlyDatePickerGroupProps extends DatePickerHelper<DateOnly | undefined> {
+}
+export default function DateOnlyDatePickerGroup(props: DateOnlyDatePickerGroupProps): JSX.Element;

package/es/DatePicker/DateOnlyDatePickerGroup.js

@@ -0,0 +1,23 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import DatePickerGroup from './DatePickerGroup';
+export default function DateOnlyDatePickerGroup(props) {
+    return _jsx(DatePickerGroup, __assign({}, props, { convert: convertToDateOnly }));
+}
+function convertToDateOnly(arg) {
+    return {
+        year: arg.getFullYear(),
+        month: arg.getMonth() + 1,
+        day: arg.getDate(),
+    };
+}

package/es/DatePicker/DatePickerGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DatePickerProps } from 'react-date-picker/dist/entry.nostyle';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { GroupProps } from '../Group';
+export interface DatePickerGroupProps<T> extends InjectedFieldProps<T | undefined>, Omit<DatePickerProps, keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'>, Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+    convert: (arg: Date) => T;
+}
+export default function DatePickerGroup<T>({ input, meta, label, helpText, className, disabled, convert, ...rest }: DatePickerGroupProps<T>): JSX.Element;

package/es/DatePicker/DatePickerGroup.js

@@ -0,0 +1,60 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import DatePicker from 'react-date-picker/dist/entry.nostyle';
+import classnames from 'classnames';
+import parseISO from 'date-fns/parseISO';
+import Group from '../Group';
+export default function DatePickerGroup(_a) {
+    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, convert = _a.convert, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "convert"]);
+    var _b = useState(null), displayDate = _b[0], setDisplayDate = _b[1];
+    return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, 'date-picker'), disabled: disabled }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames('date-picker', className), value: displayDate, onChange: handleChange })) })));
+    function handleChange(e) {
+        var onChange = input.onChange;
+        if (onChange === null) {
+            return;
+        }
+        if (!e) {
+            onChange(undefined);
+            setDisplayDate(null);
+            return;
+        }
+        else if (typeof e === 'string') {
+            var parsedValue = parseISO(e.toString().split('T')[0]);
+            setDisplayDate(parsedValue);
+            onChange(convert(parsedValue));
+        }
+        else if (e instanceof Date) {
+            var parsedValue = parseISO(e.toISOString().split('T')[0]);
+            setDisplayDate(parsedValue);
+            onChange(convert(parsedValue));
+        }
+        else {
+            // e is instanceof Date[]
+            var parsedValue = parseISO(e[0].toISOString().split('T')[0]);
+            setDisplayDate(parsedValue);
+            onChange(convert(parsedValue));
+        }
+    }
+}

package/es/DatePicker/DatePickerHelper.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerGroupProps } from './DatePickerGroup';
+export interface DatePickerHelper<T> extends Omit<DatePickerGroupProps<T>, 'convert'> {
+}

package/es/DatePicker/DatePickerHelper.js

@@ -0,0 +1 @@
+export {};

package/es/DatePicker/StringDatePickerGroup.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DatePickerHelper } from './DatePickerHelper';
+export interface StringDatePickerGroupProps extends DatePickerHelper<string | undefined> {
+}
+export default function StringDatePickerGroup(props: StringDatePickerGroupProps): JSX.Element;

package/es/DatePicker/StringDatePickerGroup.js

@@ -0,0 +1,19 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import DatePickerGroup from './DatePickerGroup';
+export default function StringDatePickerGroup(props) {
+    return _jsx(DatePickerGroup, __assign({}, props, { convert: convertToDateOnly }));
+}
+function convertToDateOnly(arg) {
+    return arg.toISOString();
+}

package/es/Field/CustomFieldInputProps.d.ts

@@ -0,0 +1,7 @@
+export interface CustomFieldInputProps<TValue> {
+    id: string;
+    name: string;
+    value: TValue;
+    onChange: (newValue: TValue) => void;
+    onBlur: () => void;
+}

package/es/Field/CustomFieldInputProps.js

@@ -0,0 +1 @@
+export {};

package/es/Field/CustomFieldMetaProps.d.ts

@@ -0,0 +1,4 @@
+import { FieldMetaProps } from 'formik';
+export interface CustomFieldMetaProps<TValue> extends FieldMetaProps<TValue> {
+    warning: string | undefined;
+}

package/es/Field/CustomFieldMetaProps.js

@@ -0,0 +1 @@
+export {};

package/es/Field/Field.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ElementType, LegacyRef } from 'react';
+import { InjectedFieldProps } from './InjectedFieldProps';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+export declare type RenderComponent<TValue, TRenderComponent extends ElementType> = Partial<ComponentProps<TRenderComponent>> extends Partial<InjectedFieldProps<TValue>> ? TRenderComponent : never;
+export declare type RenderComponentProps<TValue, TRenderComponent extends ElementType> = Partial<ComponentProps<TRenderComponent>> extends Partial<InjectedFieldProps<TValue>> ? ComponentProps<TRenderComponent> : never;
+/** A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable */
+export declare type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType> = {
+    name: TProp;
+    Component: RenderComponent<TForm[TProp], TRenderComponent>;
+    id?: string;
+    disabled?: boolean;
+    validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
+    normalize?: NormalizationFunction<TForm[TProp]>;
+} & Omit<RenderComponentProps<TForm[TProp], TRenderComponent>, keyof InjectedFieldProps<TForm[TProp]>>;
+/**
+ * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
+ * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
+ */
+declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, normalize, validate, disabled, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): JSX.Element;
+declare const _default: typeof Field;
+export default _default;

package/es/Field/Field.js

@@ -0,0 +1,46 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { FieldNameContext } from './FieldNameContext';
+import useStandardFormInput from './useStandardField';
+/**
+ * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
+ * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
+ */
+function Field(_a, ref) {
+    var name = _a.name, Component = _a.Component, id = _a.id, normalize = _a.normalize, validate = _a.validate, disabled = _a.disabled, rest = __rest(_a, ["name", "Component", "id", "normalize", "validate", "disabled"]);
+    var _b = useStandardFormInput({
+        name: String(name),
+        id: id,
+        normalize: normalize,
+        validate: validate,
+        disabled: disabled,
+    }), input = _b[0], meta = _b[1];
+    // a bit of a hack so JSX is happy with us
+    var Wrapped = Component;
+    return (_jsx(FieldNameContext.Provider, __assign({ value: input.name }, { children: _jsx(Wrapped, __assign({}, rest, { ref: ref, id: id, input: input, meta: meta })) })));
+}
+// hack to get forwarded refs to work
+var FieldWithRef = React.forwardRef(Field);
+export default FieldWithRef;

package/es/Field/FieldErrorScrollTarget.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function FieldErrorScrollTarget(): JSX.Element | null;

package/es/Field/FieldErrorScrollTarget.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+export default function FieldErrorScrollTarget() {
+    var name = useContext(FieldNameContext);
+    if (!name) {
+        return null;
+    }
+    var divId = "".concat(name.toLowerCase(), "-error-scroll-target");
+    return _jsx("div", { id: divId, style: { display: 'none' } });
+}

package/es/Field/FieldNameContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+/** provides the full, qualified name of the current field name - including nested fields, path/dot delimited */
+export declare const FieldNameContext: React.Context<string | undefined>;

package/es/Field/FieldNameContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+/** provides the full, qualified name of the current field name - including nested fields, path/dot delimited */
+export var FieldNameContext = React.createContext(undefined);

package/es/Field/FieldSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FieldSectionProps {
+    children: React.ReactNode;
+    name: string;
+}
+export default function FieldSection({ children, name }: FieldSectionProps): JSX.Element;
+export {};

package/es/Field/FieldSection.js

@@ -0,0 +1,20 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+export default function FieldSection(_a) {
+    var children = _a.children, name = _a.name;
+    var parentContext = useContext(FieldNameContext);
+    var effectiveValue = parentContext ? "".concat(parentContext, ".").concat(name) : name;
+    return (_jsx(FieldNameContext.Provider, __assign({ value: effectiveValue }, { children: children })));
+}

package/es/Field/InjectedFieldProps.d.ts

@@ -0,0 +1,7 @@
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+/** Defines what is injected by a Field wrapper of some TRenderComponent */
+export interface InjectedFieldProps<TValue> {
+    input: CustomFieldInputProps<TValue>;
+    meta: CustomFieldMetaProps<TValue>;
+}

package/es/Field/InjectedFieldProps.js

@@ -0,0 +1 @@
+export {};

package/es/Field/StandAloneInput.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+import { RenderComponent, RenderComponentProps } from './Field';
+import { InjectedFieldProps } from './InjectedFieldProps';
+export declare type StandAloneInputProps<TValue, TRenderComponent extends ElementType> = {
+    Component: RenderComponent<TValue, TRenderComponent>;
+    value: TValue;
+    onChange: (arg: TValue) => void;
+} & Omit<RenderComponentProps<TValue, TRenderComponent>, keyof InjectedFieldProps<TValue> | 'value' | 'onChange' | 'normalize' | 'validate'>;
+export default function StandAloneInput<TValue, TComponent extends ElementType>(props: StandAloneInputProps<TValue, TComponent>): JSX.Element;

package/es/Field/StandAloneInput.js

@@ -0,0 +1,49 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import * as uuid from 'uuid';
+export default function StandAloneInput(props) {
+    var Component = props.Component, value = props.value, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["Component", "value", "onChange", "disabled"]);
+    var handleChange = function (arg) {
+        if (!disabled) {
+            onChange(arg);
+        }
+    };
+    var Wrapped = Component;
+    var idRef = useRef(uuid.v4());
+    var input = {
+        id: idRef.current,
+        name: idRef.current,
+        value: value,
+        onChange: handleChange,
+        onBlur: function () { },
+    };
+    var meta = {
+        warning: undefined,
+        value: value,
+        touched: false,
+        initialTouched: false,
+    };
+    return _jsx(Wrapped, __assign({}, rest, { disabled: disabled, input: input, meta: meta }));
+}

package/es/Field/useStandardField.d.ts

@@ -0,0 +1,15 @@
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+export interface useStandardFieldProps<TValue> {
+    id?: string;
+    name: string;
+    disabled?: boolean;
+    validate?: ValidationFunction<TValue> | ValidationFunction<TValue>[];
+    normalize?: NormalizationFunction<TValue>;
+}
+export default function useStandardField<TValue>({ id: providedId, name: providedName, disabled, validate, normalize, }: useStandardFieldProps<TValue>): [
+    CustomFieldInputProps<TValue>,
+    CustomFieldMetaProps<TValue>
+];

package/es/Field/useStandardField.js

@@ -0,0 +1,93 @@
+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);
+};
+import { useContext, useEffect } from 'react';
+import { useField, useFormikContext } from 'formik';
+import { FieldNameContext } from './FieldNameContext';
+import { ServerErrorContext } from '../Form/ServerErrorContext';
+// provides a consistent way to deal with all form fields (non array)
+export default function useStandardField(_a) {
+    var providedId = _a.id, providedName = _a.name, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize;
+    // because the formik errors are evaluated all at the same time we need to keep server errors separate
+    var _b = useContext(ServerErrorContext), getServerError = _b.getError, setServerError = _b.setError;
+    // ensure that form section values are obeyed, e.g. homeAddress.zipCode
+    var fieldNameContextValue = useContext(FieldNameContext);
+    var name = fieldNameContextValue
+        ? "".concat(fieldNameContextValue, ".").concat(providedName)
+        : providedName;
+    // ensure that nested contexts don't have duplicate id issues when an id is specified
+    var id = providedId
+        ? fieldNameContextValue
+            ? "".concat(fieldNameContextValue, ".").concat(providedId)
+            : providedId
+        : name;
+    // ensure that our custom validation rules are handled
+    // e.g. we allow arrays of validators
+    var _c = useField({
+        name: name,
+        id: id ? id : name,
+        disabled: disabled,
+        validate: callAllValidators,
+    }), formikInput = _c[0], formikMeta = _c[1];
+    var _d = useFormikContext(), setFieldValue = _d.setFieldValue, isSubmitting = _d.isSubmitting;
+    var touched = formikMeta.touched !== false && formikMeta.touched !== undefined;
+    useEffect(function () {
+        if (!touched && isSubmitting) {
+            // because we do not always register all fields up front.
+            // e.g. formik expects even a 'create' form to have all fields given, at least, blank values
+            // that seems to be how it touches on submit:
+            // see: https://codesandbox.io/s/formik-example-4n7n8 vs https://codesandbox.io/s/formik-example-kttk5
+            // note in particular the change in line 24
+            // thus, we manually touch all fields here by calling onBlur
+            // there is a "setFieldTouched" from useFormikContext but it doesn't appear to work on field arrays
+            handleBlur();
+        }
+    });
+    // these are the props we expect consumers of this hook to pass directly to the input (or other control)
+    var resultInput = {
+        name: formikInput.name,
+        // pass any direct from server props through normalize without making the form dirty (e.g. phone number)
+        value: normalize ? normalize(formikInput.value) : formikInput.value,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        // extensions to formik
+        id: id,
+    };
+    var resultMeta = __assign(__assign({}, formikMeta), { error: getServerError(name) || (touched ? formikMeta.error : undefined), 
+        // extensions to formik
+        warning: undefined, touched: touched });
+    return [resultInput, resultMeta];
+    function handleBlur() {
+        formikInput.onBlur({ target: { name: name } });
+    }
+    function handleChange(value) {
+        if (disabled) {
+            return;
+        }
+        var normalized = normalize ? normalize(value) : value;
+        setFieldValue(name, normalized);
+        setServerError(name, undefined);
+    }
+    function callAllValidators(value) {
+        if (disabled || !validate) {
+            return;
+        }
+        if (!Array.isArray(validate)) {
+            return validate(value);
+        }
+        for (var i = 0; i < validate.length; i++) {
+            var result = validate[i](value);
+            if (result) {
+                return result;
+            }
+        }
+    }
+}

package/es/FieldArray/FieldArray.d.ts

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+import { FieldProps } from '../Field/Field';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+export declare type FieldArrayProps<TForm extends object, TProp extends keyof TForm> = TForm[TProp] extends Array<any> | undefined ? {
+    name: TProp;
+    label?: string;
+    disabled?: boolean;
+    validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
+    children: (formBuilder: ArrayFormBuilderProp<TForm[TProp]>) => JSX.Element;
+} : never;
+export declare type ArrayFormBuilderProp<TValue extends Array<any> | undefined> = TValue extends Array<infer TForm> | undefined ? TForm extends object ? {
+    Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(props: FieldProps<TForm, TProp, TRenderComponent>) => JSX.Element;
+    FieldArray: <TProp extends keyof TForm>(props: FieldArrayProps<TForm, TProp>) => JSX.Element;
+} : never : never;
+export default function FieldArray<TForm extends object, TProp extends keyof TForm>({ name, label, validate, disabled, children, ...rest }: FieldArrayProps<TForm, TProp>): JSX.Element;