envoc-form 5.0.5 → 5.0.7

package/README.md

@@ -3981,7 +3981,7 @@ ___
 
 ### FieldProps
 
-Ƭ **FieldProps**<`TForm`, `TProp`, `TRenderComponent`\>: { `Component`: [`RenderComponent`](#rendercomponent)<`TForm`[`TProp`], `TRenderComponent`\> ; `disabled?`: `boolean` ; `id?`: `string` ; `name`: `TProp` ; `normalize?`: [`NormalizationFunction`](#interfacesnormalizationfunctionmd)<`TForm`[`TProp`]\> ; `validate?`: [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\> \| [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\>[]  } & `Omit`<[`RenderComponentProps`](#rendercomponentprops)<`TForm`[`TProp`], `TRenderComponent`\>, keyof [`InjectedFieldProps`](#interfacesinjectedfieldpropsmd)<`TForm`[`TProp`]\>\>
+Ƭ **FieldProps**<`TForm`, `TProp`, `TRenderComponent`\>: { `Component`: [`RenderComponent`](#rendercomponent)<`TForm`[`TProp`], `TRenderComponent`\> ; `disabled?`: `boolean` ; `id?`: `string` ; `name`: `TProp` ; `normalize?`: [`NormalizationFunction`](#interfacesnormalizationfunctionmd)<`TForm`[`TProp`]\> ; `required?`: `boolean` ; `validate?`: [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\> \| [`ValidationFunction`](#interfacesvalidationfunctionmd)<`TForm`[`TProp`]\>[]  } & `Omit`<[`RenderComponentProps`](#rendercomponentprops)<`TForm`[`TProp`], `TRenderComponent`\>, keyof [`InjectedFieldProps`](#interfacesinjectedfieldpropsmd)<`TForm`[`TProp`]\>\>
 
 A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable
 
@@ -4125,7 +4125,7 @@ File upload input group.
 
 #### Defined in
 
-packages/envoc-form/src/File/FileGroup.tsx:81
+packages/envoc-form/src/File/FileGroup.tsx:78
 
 ___
 
@@ -4167,7 +4167,7 @@ Standard number input group. By default allows for float values.
 
 #### Defined in
 
-packages/envoc-form/src/Input/NumberInputGroup.tsx:44
+packages/envoc-form/src/Input/NumberInputGroup.tsx:41
 
 ___
 
@@ -4210,7 +4210,7 @@ Standard string input group.
 
 #### Defined in
 
-packages/envoc-form/src/Input/StringInputGroup.tsx:49
+packages/envoc-form/src/Input/StringInputGroup.tsx:46
 
 ___
 
@@ -4384,7 +4384,7 @@ Should no Component be used then the default will be provided by the default loo
 
 #### Defined in
 
-packages/envoc-form/src/Field/Field.tsx:60
+packages/envoc-form/src/Field/Field.tsx:61
 
 ___
 
@@ -4813,7 +4813,7 @@ ___
 
 #### Defined in
 
-packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:106
+packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:100
 
 ___
 
@@ -5077,7 +5077,7 @@ packages/envoc-form/src/Field/useStandardField.ts:24
 
 ##### Defined in
 
-packages/envoc-form/src/Form/Form.tsx:214
+packages/envoc-form/src/Form/Form.tsx:211
 
 
 <a name="modulesnormalizersmd"></a>

package/es/ConfirmBaseForm/ConfirmBaseForm.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useAxiosRequest } from 'envoc-request';
 import { FormDefaults } from '../FormDefaults';
 // TODO: ask about how we should use 'children'
@@ -35,7 +35,7 @@ export default function ConfirmBaseForm(_a) {
     var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, confirmButtonText = _a.confirmButtonText, confirmButtonClass = _a.confirmButtonClass, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "confirmButtonText", "confirmButtonClass", "children"]);
     var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
     var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
-    return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className: classNames(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
+    return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", { className: clsx(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
     function goBack() {
         window.history.back();
     }

package/es/DatePicker/DatePickerGroup.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import DatePicker from 'react-date-picker/dist/entry.nostyle';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import parseISO from 'date-fns/parseISO';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
@@ -48,7 +48,7 @@ export default function DatePickerGroup(_a) {
             }
         }
     }, [setDisplayDate, input.value]);
-    return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
+    return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: _jsx(DatePicker, __assign({}, rest, { className: clsx(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
     function handleChange(e) {
         var onChange = input.onChange;
         if (onChange === null) {

package/es/Field/Field.d.ts

@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
     validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
     /** Function to modify the field value without making the form dirty. (e.g. phone number) */
     normalize?: NormalizationFunction<TForm[TProp]>;
+    required?: boolean;
 } & 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, disabled, validate, normalize, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
+declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, required, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof Field;
 export default _default;

package/es/Field/Field.js

@@ -30,18 +30,26 @@ import { required as requiredValidator } from '../Validation/validators';
  * 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, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize"]);
+    var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, required = _a.required, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize", "required"]);
+    // enforces that validate is an array and adds the required validator if required prop is true
+    var validateArray = Array.isArray(validate)
+        ? validate
+        : validate !== undefined
+            ? [validate]
+            : [];
+    var validateWithRequired = required
+        ? validateArray
+            .filter(function (x) { return x !== requiredValidator; })
+            .concat([requiredValidator])
+        : validateArray;
+    var isRequired = required || validateWithRequired.includes(requiredValidator);
     var _b = useStandardFormInput({
         name: String(name),
         id: id,
         disabled: disabled,
-        validate: validate,
+        validate: validateWithRequired,
         normalize: normalize,
     }), input = _b[0], meta = _b[1];
-    var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
-        ? rest.required
-        : validate === requiredValidator ||
-            (Array.isArray(validate) && validate.includes(requiredValidator));
     // a bit of a hack so JSX is happy with us
     var Wrapped = Component;
     return (_jsx(FieldNameContext.Provider, { value: input.name, children: _jsx(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, required: isRequired, disabled: disabled })) }));

package/es/FieldArray/FieldArray.js

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Field from '../Field/Field';
 import { FieldNameContext } from '../Field/FieldNameContext';
 import useStandardFormInput from '../Field/useStandardField';
@@ -42,15 +42,15 @@ export default function FieldArray(_a) {
         : Array.isArray(input.value)
             ? input.value
             : [];
-    return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), _jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
+    return (_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array', children: [_jsxs("div", { className: FormDefaults.cssClassPrefix + 'field-array-header', children: [_jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-title', children: label }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem, children: "+" })] }), _jsx("div", { className: FormDefaults.cssClassPrefix + 'field-array-body', children: values.map(function (value, index) {
                     var _a, _b;
                     var itemName = "".concat(input.name, "[").concat(index, "]");
-                    return (_jsxs("div", { className: classNames(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
+                    return (_jsxs("div", { className: clsx(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
                             _a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
                             _a)), role: "listitem", children: [_jsx(FieldNameContext.Provider, { value: itemName, children: children({
                                     Field: Field,
                                     FieldArray: FieldArray,
-                                }) }), _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
+                                }) }), _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); }, children: "-" })] }, (value && value['form-input-array-key']) ||
                         (value && value['id']) ||
                         itemName));
                 }) })] }));

package/es/File/FileGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import FileList from './FileList';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
 function FileGroup(_a, ref) {
     var _b;
     var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "multiple"]);
-    return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className: classNames(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
+    return (_jsxs(Group, { input: input, meta: meta, label: label, helpText: helpText, className: clsx(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group'), required: required, disabled: disabled, children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
                     var _a, _b;
                     if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
                         input.onChange(undefined);
@@ -46,7 +46,7 @@ function FileGroup(_a, ref) {
                             input.onChange(files);
                         }
                     }
-                }, value: undefined, ref: ref, type: "file", className: classNames(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
+                }, value: undefined, ref: ref, type: "file", className: clsx(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
 }
 /** File upload input group.  */
 var FileGroupWithRef = React.forwardRef(FileGroup);

package/es/Form/Form.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useState, } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
 import FocusError from './FocusError';
 import FormBasedPreventNavigation from './FormBasedPreventNavigation';
@@ -54,7 +54,7 @@ export default function Form(_a) {
                 _a)));
         },
     }); }, [serverErrors]);
-    return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: classNames(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
+    return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: clsx(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
                         // hack for ref forwarding
                         Field: Field,
                         FieldArray: FieldArray,

package/es/Group.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { FormDefaults } from './FormDefaults';
+import { clsx } from 'clsx';
 import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
+import { FormDefaults } from './FormDefaults';
 /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
 export default 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 (_jsxs("div", { className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
+    return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
             _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
             _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
             _b[FormDefaults.cssClassPrefix + 'required'] = required,

package/es/Input/CheckboxGroup.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { FormDefaults } from '../FormDefaults';
+import { clsx } from 'clsx';
 import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
+import { FormDefaults } from '../FormDefaults';
 /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
 export default function CheckboxGroup(_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, labelOnLeft = _a.labelOnLeft;
-    return (_jsxs("div", { className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
+    return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
             _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
             _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
             _b[FormDefaults.cssClassPrefix + 'required'] = required,

package/es/Input/CheckboxInputGroup.js

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CheckboxGroup from './CheckboxGroup';
 import { FormDefaults } from '../FormDefaults';
 function CheckboxInputGroup(_a, ref) {
     var input = _a.input, meta = _a.meta, disabled = _a.disabled, label = _a.label, required = _a.required, helpText = _a.helpText, className = _a.className, labelOnLeft = _a.labelOnLeft, rest = __rest(_a, ["input", "meta", "disabled", "label", "required", "helpText", "className", "labelOnLeft"]);
-    return (_jsx(CheckboxGroup, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: classNames(className, FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: _jsx("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: classNames(className, FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
+    return (_jsx(CheckboxGroup, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: _jsx("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: clsx(className, FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
                 input.onChange(e.target.checked);
             }, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
 }

package/es/Input/IconInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroupWithRef from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function IconInputGroup(_a, ref) {
     var _b;
     var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
     var input = rest.input;
-    return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: clsx(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
                 if (!e.target.value) {
                     input.onChange(undefined);
                 }

package/es/Input/InputGroup.js

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../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 (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _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: classNames(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
+    return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _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: clsx(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
 }
 /** Generic controlled `<input/>` wrapped by a `<Group/>` */
 var InputGroupWithRef = React.forwardRef(InputGroup);

package/es/Input/MoneyInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function MoneyInputGroup(_a, ref) {
     var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
     var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Input/NumberInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function NumberInputGroup(_a, ref) {
     var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
     var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Input/PhoneNumberInputGroup.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 import { phoneNumber } from '../Normalization/normalizers';
@@ -30,7 +30,7 @@ function PhoneNumberInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: classNames(className, FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: clsx(className, FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Input/StringInputGroup.js

@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import InputGroup from './InputGroup';
 import { FormDefaults } from '../FormDefaults';
 function StringInputGroup(_a, ref) {
     var _b;
     var className = _a.className, rest = __rest(_a, ["className"]);
     var input = rest.input;
-    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: classNames(className, FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+    return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: clsx(className, FormDefaults.cssClassPrefix + 'string-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
             if (!e.target.value) {
                 input.onChange(undefined);
             }

package/es/Select/SelectGroup.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { default as ReactSelect } from 'react-select';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
 // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
@@ -43,7 +43,7 @@ export default function SelectGroup(_a) {
                     ? options.resp
                     : [];
     var isLoading = (options && 'loading' in options && options.loading) || false;
-    return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: classNames(className, (_b = {},
+    return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
             _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
             _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
             _b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
@@ -53,7 +53,7 @@ export default function SelectGroup(_a) {
                 else {
                     input.onChange(e === null || e === void 0 ? void 0 : e.value);
                 }
-            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: classNames(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
+            }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: clsx(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
     function getValue() {
         if (multiple) {
             return effectiveOptions.filter(function (o) {

package/es/StandardFormActions.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useFormikContext } from 'formik';
-import SubmitFormButton from './SubmitFormButton';
 import { FormDefaults } from './FormDefaults';
+import SubmitFormButton from './SubmitFormButton';
 /** Standard submit and cancel buttons. */
 export default function StandardFormActions(_a) {
     var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel;
     var isSubmitting = useFormikContext().isSubmitting;
-    return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", _jsx("button", { className: classNames(FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", _jsx("button", { className: clsx(FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack, children: "Cancel" })] }));
     function goBack() {
         window.history.back();
     }

package/es/SubmitFormButton.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useFormikContext } from 'formik';
 import { FormDefaults } from './FormDefaults';
 function SubmitFormButton(_a, ref) {
@@ -34,7 +34,7 @@ function SubmitFormButton(_a, ref) {
             ? 'Loading, please wait...'
             : preventSubmit
                 ? "You haven't made any changes"
-                : '', className: classNames(FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
+                : '', className: clsx(FormDefaults.cssClassPrefix + 'submit-form-button', className), children: children || 'Submit' })));
 }
 /** Generic submit button for forms. */
 export default React.forwardRef(SubmitFormButton);

package/es/TextArea/TextAreaGroup.js

@@ -22,13 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { FormDefaults } from '../FormDefaults';
 import Group from '../Group';
 function TextAreaGroup(_a, ref) {
     var _b;
     var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "icon"]);
-    return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'text-area-group'), children: [icon, _jsx("textarea", __assign({}, input, rest, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
+    return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: clsx(className, FormDefaults.cssClassPrefix + 'text-area-group'), children: [icon, _jsx("textarea", __assign({}, input, rest, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: clsx(className, FormDefaults.cssClassPrefix + 'text-area-group') }))] }));
 }
 /** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
 var TextAreaGroupWithRef = React.forwardRef(TextAreaGroup);

package/lib/ConfirmBaseForm/ConfirmBaseForm.js

@@ -21,12 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var envoc_request_1 = require("envoc-request");
 var FormDefaults_1 = require("../FormDefaults");
 // TODO: ask about how we should use 'children'
@@ -40,7 +37,7 @@ function ConfirmBaseForm(_a) {
     var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, confirmButtonText = _a.confirmButtonText, confirmButtonClass = _a.confirmButtonClass, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "confirmButtonText", "confirmButtonClass", "children"]);
     var webRequest = (0, envoc_request_1.useAxiosRequest)(Object.assign({}, request, { autoExecute: false }));
     var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), children, (0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), (0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), children, (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(confirmButtonClass !== null && confirmButtonClass !== void 0 ? confirmButtonClass : FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'), type: "button", onClick: webRequest.submitRequest, children: confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : 'Confirm' }), (0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel, children: "Cancel" })] })));
     function goBack() {
         window.history.back();
     }

package/lib/DatePicker/DatePickerGroup.js

@@ -29,7 +29,7 @@ exports.convertToTimeZoneInsensitiveISOString = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var entry_nostyle_1 = __importDefault(require("react-date-picker/dist/entry.nostyle"));
-var classnames_1 = __importDefault(require("classnames"));
+var clsx_1 = require("clsx");
 var parseISO_1 = __importDefault(require("date-fns/parseISO"));
 var FormDefaults_1 = require("../FormDefaults");
 var Group_1 = __importDefault(require("../Group"));
@@ -54,7 +54,7 @@ function DatePickerGroup(_a) {
             }
         }
     }, [setDisplayDate, input.value]);
-    return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
+    return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), required: required, disabled: disabled, children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, clsx_1.clsx)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) }));
     function handleChange(e) {
         var onChange = input.onChange;
         if (onChange === null) {

package/lib/Field/Field.d.ts

@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
     validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
     /** Function to modify the field value without making the form dirty. (e.g. phone number) */
     normalize?: NormalizationFunction<TForm[TProp]>;
+    required?: boolean;
 } & 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, disabled, validate, normalize, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
+declare function Field<TForm extends object, TProp extends keyof TForm, TRenderComponent extends ElementType>({ name, Component, id, disabled, validate, normalize, required, ...rest }: FieldProps<TForm, TProp, TRenderComponent>, ref: LegacyRef<any>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof Field;
 export default _default;

package/lib/Field/Field.js

@@ -35,18 +35,26 @@ var validators_1 = require("../Validation/validators");
  * 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, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize"]);
+    var name = _a.name, Component = _a.Component, id = _a.id, disabled = _a.disabled, validate = _a.validate, normalize = _a.normalize, required = _a.required, rest = __rest(_a, ["name", "Component", "id", "disabled", "validate", "normalize", "required"]);
+    // enforces that validate is an array and adds the required validator if required prop is true
+    var validateArray = Array.isArray(validate)
+        ? validate
+        : validate !== undefined
+            ? [validate]
+            : [];
+    var validateWithRequired = required
+        ? validateArray
+            .filter(function (x) { return x !== validators_1.required; })
+            .concat([validators_1.required])
+        : validateArray;
+    var isRequired = required || validateWithRequired.includes(validators_1.required);
     var _b = (0, useStandardField_1.default)({
         name: String(name),
         id: id,
         disabled: disabled,
-        validate: validate,
+        validate: validateWithRequired,
         normalize: normalize,
     }), input = _b[0], meta = _b[1];
-    var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
-        ? rest.required
-        : validate === validators_1.required ||
-            (Array.isArray(validate) && validate.includes(validators_1.required));
     // a bit of a hack so JSX is happy with us
     var Wrapped = Component;
     return ((0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, { value: input.name, children: (0, jsx_runtime_1.jsx)(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, required: isRequired, disabled: disabled })) }));