envoc-form 5.0.6 → 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
 
@@ -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
 
 ___
 

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/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 })) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -37,7 +37,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^5.0.6",
+    "envoc-request": "^5.0.7",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

package/src/Field/Field.tsx

@@ -48,6 +48,7 @@ export type FieldProps<
     | 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]>
@@ -69,24 +70,37 @@ function Field<
     disabled,
     validate,
     normalize,
+    required,
     ...rest
   }: FieldProps<TForm, TProp, TRenderComponent>,
   ref: LegacyRef<any>
 ) {
+  // enforces that validate is an array and adds the required validator if required prop is true
+  const validateArray: ValidationFunction<TForm[TProp]>[] = Array.isArray(
+    validate
+  )
+    ? validate
+    : validate !== undefined
+    ? [validate]
+    : [];
+
+  const validateWithRequired = required
+    ? validateArray
+        .filter((x) => x !== requiredValidator)
+        .concat([requiredValidator])
+    : validateArray;
+
+  const isRequired =
+    required || validateWithRequired.includes(requiredValidator);
+
   const [input, meta] = useStandardFormInput<TForm[TProp]>({
     name: String(name),
     id: id,
     disabled: disabled,
-    validate: validate,
+    validate: validateWithRequired,
     normalize: normalize,
   });
 
-  const isRequired =
-    rest?.required !== undefined
-      ? rest.required
-      : validate === requiredValidator ||
-        (Array.isArray(validate) && validate.includes(requiredValidator));
-
   // a bit of a hack so JSX is happy with us
   const Wrapped = Component as React.ComponentType<
     InjectedFieldProps<TForm[TProp]>