envoc-form 5.0.6 → 5.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -77,6 +77,7 @@ packages/envoc-form/src/AddressInput/AddressInput.tsx:15
77
77
  - [disabled](#disabled)
78
78
  - [helpText](#helptext)
79
79
  - [input](#input)
80
+ - [isClearable](#isclearable)
80
81
  - [label](#label)
81
82
  - [meta](#meta)
82
83
  - [options](#options)
@@ -147,6 +148,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
147
148
 
148
149
  ___
149
150
 
151
+ #### isClearable
152
+
153
+ • `Optional` **isClearable**: `boolean`
154
+
155
+ allows the select value to be cleared
156
+
157
+ ##### Inherited from
158
+
159
+ Omit.isClearable
160
+
161
+ ##### Defined in
162
+
163
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
164
+
165
+ ___
166
+
150
167
  #### label
151
168
 
152
169
  • `Optional` **label**: `string`
@@ -1627,6 +1644,7 @@ packages/envoc-form/src/Input/MoneyInputGroup.tsx:12
1627
1644
  - [disabled](#disabled)
1628
1645
  - [helpText](#helptext)
1629
1646
  - [input](#input)
1647
+ - [isClearable](#isclearable)
1630
1648
  - [label](#label)
1631
1649
  - [meta](#meta)
1632
1650
  - [options](#options)
@@ -1697,6 +1715,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
1697
1715
 
1698
1716
  ___
1699
1717
 
1718
+ #### isClearable
1719
+
1720
+ • `Optional` **isClearable**: `boolean`
1721
+
1722
+ allows the select value to be cleared
1723
+
1724
+ ##### Inherited from
1725
+
1726
+ [SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
1727
+
1728
+ ##### Defined in
1729
+
1730
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
1731
+
1732
+ ___
1733
+
1700
1734
  #### label
1701
1735
 
1702
1736
  • `Optional` **label**: `string`
@@ -1792,6 +1826,7 @@ packages/envoc-form/src/Group.tsx:21
1792
1826
  - [disabled](#disabled)
1793
1827
  - [helpText](#helptext)
1794
1828
  - [input](#input)
1829
+ - [isClearable](#isclearable)
1795
1830
  - [label](#label)
1796
1831
  - [meta](#meta)
1797
1832
  - [options](#options)
@@ -1862,6 +1897,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
1862
1897
 
1863
1898
  ___
1864
1899
 
1900
+ #### isClearable
1901
+
1902
+ • `Optional` **isClearable**: `boolean`
1903
+
1904
+ allows the select value to be cleared
1905
+
1906
+ ##### Inherited from
1907
+
1908
+ [SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
1909
+
1910
+ ##### Defined in
1911
+
1912
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
1913
+
1914
+ ___
1915
+
1865
1916
  #### label
1866
1917
 
1867
1918
  • `Optional` **label**: `string`
@@ -2321,6 +2372,7 @@ Defines what is injected by a Field wrapper of some TRenderComponent
2321
2372
  - [disabled](#disabled)
2322
2373
  - [helpText](#helptext)
2323
2374
  - [input](#input)
2375
+ - [isClearable](#isclearable)
2324
2376
  - [label](#label)
2325
2377
  - [meta](#meta)
2326
2378
  - [multiple](#multiple)
@@ -2392,6 +2444,18 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
2392
2444
 
2393
2445
  ___
2394
2446
 
2447
+ #### isClearable
2448
+
2449
+ • `Optional` **isClearable**: `boolean`
2450
+
2451
+ allows the select value to be cleared
2452
+
2453
+ ##### Defined in
2454
+
2455
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
2456
+
2457
+ ___
2458
+
2395
2459
  #### label
2396
2460
 
2397
2461
  • `Optional` **label**: `string`
@@ -2505,6 +2569,7 @@ packages/envoc-form/src/Group.tsx:21
2505
2569
  - [disabled](#disabled)
2506
2570
  - [helpText](#helptext)
2507
2571
  - [input](#input)
2572
+ - [isClearable](#isclearable)
2508
2573
  - [label](#label)
2509
2574
  - [meta](#meta)
2510
2575
  - [options](#options)
@@ -2575,6 +2640,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
2575
2640
 
2576
2641
  ___
2577
2642
 
2643
+ #### isClearable
2644
+
2645
+ • `Optional` **isClearable**: `boolean`
2646
+
2647
+ allows the select value to be cleared
2648
+
2649
+ ##### Inherited from
2650
+
2651
+ Omit.isClearable
2652
+
2653
+ ##### Defined in
2654
+
2655
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
2656
+
2657
+ ___
2658
+
2578
2659
  #### label
2579
2660
 
2580
2661
  • `Optional` **label**: `string`
@@ -2799,6 +2880,7 @@ packages/envoc-form/src/Form/ServerErrorContext.ts:9
2799
2880
  - [disabled](#disabled)
2800
2881
  - [helpText](#helptext)
2801
2882
  - [input](#input)
2883
+ - [isClearable](#isclearable)
2802
2884
  - [label](#label)
2803
2885
  - [meta](#meta)
2804
2886
  - [options](#options)
@@ -2869,6 +2951,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
2869
2951
 
2870
2952
  ___
2871
2953
 
2954
+ #### isClearable
2955
+
2956
+ • `Optional` **isClearable**: `boolean`
2957
+
2958
+ allows the select value to be cleared
2959
+
2960
+ ##### Inherited from
2961
+
2962
+ [SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
2963
+
2964
+ ##### Defined in
2965
+
2966
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
2967
+
2968
+ ___
2969
+
2872
2970
  #### label
2873
2971
 
2874
2972
  • `Optional` **label**: `string`
@@ -2964,6 +3062,7 @@ packages/envoc-form/src/Group.tsx:21
2964
3062
  - [disabled](#disabled)
2965
3063
  - [helpText](#helptext)
2966
3064
  - [input](#input)
3065
+ - [isClearable](#isclearable)
2967
3066
  - [label](#label)
2968
3067
  - [meta](#meta)
2969
3068
  - [options](#options)
@@ -3034,6 +3133,22 @@ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
3034
3133
 
3035
3134
  ___
3036
3135
 
3136
+ #### isClearable
3137
+
3138
+ • `Optional` **isClearable**: `boolean`
3139
+
3140
+ allows the select value to be cleared
3141
+
3142
+ ##### Inherited from
3143
+
3144
+ [SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd).[isClearable](#isclearable)
3145
+
3146
+ ##### Defined in
3147
+
3148
+ packages/envoc-form/src/Select/SelectGroup.tsx:40
3149
+
3150
+ ___
3151
+
3037
3152
  #### label
3038
3153
 
3039
3154
  • `Optional` **label**: `string`
@@ -3981,7 +4096,7 @@ ___
3981
4096
 
3982
4097
  ### FieldProps
3983
4098
 
3984
- Ƭ **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`]\>\>
4099
+ Ƭ **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`]\>\>
3985
4100
 
3986
4101
  A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable
3987
4102
 
@@ -4384,7 +4499,7 @@ Should no Component be used then the default will be provided by the default loo
4384
4499
 
4385
4500
  #### Defined in
4386
4501
 
4387
- packages/envoc-form/src/Field/Field.tsx:60
4502
+ packages/envoc-form/src/Field/Field.tsx:61
4388
4503
 
4389
4504
  ___
4390
4505
 
@@ -4627,7 +4742,7 @@ Generic select dropdown. Uses [react-select](https://react-select.com/home).
4627
4742
 
4628
4743
  #### Defined in
4629
4744
 
4630
- packages/envoc-form/src/Select/SelectGroup.tsx:43
4745
+ packages/envoc-form/src/Select/SelectGroup.tsx:45
4631
4746
 
4632
4747
  ___
4633
4748
 
@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
18
18
  validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
19
19
  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
20
20
  normalize?: NormalizationFunction<TForm[TProp]>;
21
+ required?: boolean;
21
22
  } & Omit<RenderComponentProps<TForm[TProp], TRenderComponent>, keyof InjectedFieldProps<TForm[TProp]>>;
22
23
  /**
23
24
  * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
24
25
  * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
25
26
  */
26
- 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;
27
+ 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;
27
28
  declare const _default: typeof Field;
28
29
  export default _default;
package/es/Field/Field.js CHANGED
@@ -30,18 +30,26 @@ import { required as requiredValidator } from '../Validation/validators';
30
30
  * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
31
31
  */
32
32
  function Field(_a, ref) {
33
- 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"]);
33
+ 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"]);
34
+ // enforces that validate is an array and adds the required validator if required prop is true
35
+ var validateArray = Array.isArray(validate)
36
+ ? validate
37
+ : validate !== undefined
38
+ ? [validate]
39
+ : [];
40
+ var validateWithRequired = required
41
+ ? validateArray
42
+ .filter(function (x) { return x !== requiredValidator; })
43
+ .concat([requiredValidator])
44
+ : validateArray;
45
+ var isRequired = required || validateWithRequired.includes(requiredValidator);
34
46
  var _b = useStandardFormInput({
35
47
  name: String(name),
36
48
  id: id,
37
49
  disabled: disabled,
38
- validate: validate,
50
+ validate: validateWithRequired,
39
51
  normalize: normalize,
40
52
  }), input = _b[0], meta = _b[1];
41
- var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
42
- ? rest.required
43
- : validate === requiredValidator ||
44
- (Array.isArray(validate) && validate.includes(requiredValidator));
45
53
  // a bit of a hack so JSX is happy with us
46
54
  var Wrapped = Component;
47
55
  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 })) }));
@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
21
21
  multiple: TValue extends Array<any> ? true : false;
22
22
  /** Text diplayed when no value is selected. */
23
23
  placeholder?: string;
24
+ /** allows the select value to be cleared */
25
+ isClearable?: boolean;
24
26
  }
25
27
  /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
26
- export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
28
+ export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
27
29
  export {};
@@ -29,7 +29,7 @@ import Group from '../Group';
29
29
  /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
30
30
  export default function SelectGroup(_a) {
31
31
  var _b;
32
- var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
32
+ var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
33
33
  var effectiveOptions = !options
34
34
  ? []
35
35
  : Array.isArray(options)
@@ -43,17 +43,17 @@ export default function SelectGroup(_a) {
43
43
  ? options.resp
44
44
  : [];
45
45
  var isLoading = (options && 'loading' in options && options.loading) || false;
46
- return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
46
+ return (_jsx(Group, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: clsx(className, (_b = {},
47
47
  _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
48
48
  _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
49
- _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) {
49
+ _b), FormDefaults.cssClassPrefix + 'select-group'), children: _jsx(ReactSelect, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
50
50
  if (multiple === true) {
51
51
  input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
52
52
  }
53
53
  else {
54
54
  input.onChange(e === null || e === void 0 ? void 0 : e.value);
55
55
  }
56
- }, 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 }) })));
56
+ }, 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, isClearable: isClearable })) }));
57
57
  function getValue() {
58
58
  if (multiple) {
59
59
  return effectiveOptions.filter(function (o) {
@@ -18,11 +18,12 @@ export type FieldProps<TForm extends object, TProp extends keyof TForm, TRenderC
18
18
  validate?: ValidationFunction<TForm[TProp]> | ValidationFunction<TForm[TProp]>[];
19
19
  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
20
20
  normalize?: NormalizationFunction<TForm[TProp]>;
21
+ required?: boolean;
21
22
  } & Omit<RenderComponentProps<TForm[TProp], TRenderComponent>, keyof InjectedFieldProps<TForm[TProp]>>;
22
23
  /**
23
24
  * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
24
25
  * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
25
26
  */
26
- 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;
27
+ 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;
27
28
  declare const _default: typeof Field;
28
29
  export default _default;
@@ -35,18 +35,26 @@ var validators_1 = require("../Validation/validators");
35
35
  * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
36
36
  */
37
37
  function Field(_a, ref) {
38
- 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"]);
38
+ 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"]);
39
+ // enforces that validate is an array and adds the required validator if required prop is true
40
+ var validateArray = Array.isArray(validate)
41
+ ? validate
42
+ : validate !== undefined
43
+ ? [validate]
44
+ : [];
45
+ var validateWithRequired = required
46
+ ? validateArray
47
+ .filter(function (x) { return x !== validators_1.required; })
48
+ .concat([validators_1.required])
49
+ : validateArray;
50
+ var isRequired = required || validateWithRequired.includes(validators_1.required);
39
51
  var _b = (0, useStandardField_1.default)({
40
52
  name: String(name),
41
53
  id: id,
42
54
  disabled: disabled,
43
- validate: validate,
55
+ validate: validateWithRequired,
44
56
  normalize: normalize,
45
57
  }), input = _b[0], meta = _b[1];
46
- var isRequired = (rest === null || rest === void 0 ? void 0 : rest.required) !== undefined
47
- ? rest.required
48
- : validate === validators_1.required ||
49
- (Array.isArray(validate) && validate.includes(validators_1.required));
50
58
  // a bit of a hack so JSX is happy with us
51
59
  var Wrapped = Component;
52
60
  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 })) }));
@@ -21,7 +21,9 @@ export interface SelectGroupProps<TValue> extends InjectedFieldProps<TValue | un
21
21
  multiple: TValue extends Array<any> ? true : false;
22
22
  /** Text diplayed when no value is selected. */
23
23
  placeholder?: string;
24
+ /** allows the select value to be cleared */
25
+ isClearable?: boolean;
24
26
  }
25
27
  /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
26
- export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
28
+ export default function SelectGroup<TValue>({ input, meta, className, required, disabled, options, multiple, placeholder, isClearable, label, helpText, ...rest }: SelectGroupProps<TValue>): import("react/jsx-runtime").JSX.Element;
27
29
  export {};
@@ -34,7 +34,7 @@ var Group_1 = __importDefault(require("../Group"));
34
34
  /** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
35
35
  function SelectGroup(_a) {
36
36
  var _b;
37
- var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder"]);
37
+ var input = _a.input, meta = _a.meta, className = _a.className, required = _a.required, disabled = _a.disabled, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, isClearable = _a.isClearable, label = _a.label, helpText = _a.helpText, rest = __rest(_a, ["input", "meta", "className", "required", "disabled", "options", "multiple", "placeholder", "isClearable", "label", "helpText"]);
38
38
  var effectiveOptions = !options
39
39
  ? []
40
40
  : Array.isArray(options)
@@ -48,17 +48,17 @@ function SelectGroup(_a) {
48
48
  ? options.resp
49
49
  : [];
50
50
  var isLoading = (options && 'loading' in options && options.loading) || false;
51
- return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
51
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, { input: input, meta: meta, label: label, helpText: helpText, required: required, disabled: disabled, className: (0, clsx_1.clsx)(className, (_b = {},
52
52
  _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple,
53
53
  _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'loading'] = isLoading,
54
- _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
54
+ _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), children: (0, jsx_runtime_1.jsx)(react_select_1.default, __assign({}, rest, { inputId: input.id, isMulti: multiple, isDisabled: disabled, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
55
55
  if (multiple === true) {
56
56
  input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
57
57
  }
58
58
  else {
59
59
  input.onChange(e === null || e === void 0 ? void 0 : e.value);
60
60
  }
61
- }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
61
+ }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: (0, clsx_1.clsx)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder, isClearable: isClearable })) }));
62
62
  function getValue() {
63
63
  if (multiple) {
64
64
  return effectiveOptions.filter(function (o) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "envoc-form",
3
- "version": "5.0.6",
3
+ "version": "5.0.8",
4
4
  "description": "Envoc form components",
5
5
  "keywords": [
6
6
  "react-component",
@@ -37,7 +37,7 @@
37
37
  "dependencies": {
38
38
  "axios": "^0.21.1",
39
39
  "date-fns": "^2.22.1",
40
- "envoc-request": "^5.0.6",
40
+ "envoc-request": "^5.0.8",
41
41
  "lru-cache": "^6.0.0",
42
42
  "prop-types": "^15.7.2",
43
43
  "react-date-picker": "^8.2.0",
@@ -83,6 +83,7 @@ exports[`AddressInput has matching snapshot 1`] = `
83
83
  </label>
84
84
  <div
85
85
  class="envoc-form-select-group css-b62m3t-container"
86
+ id="normalAddressInput.state"
86
87
  >
87
88
  <span
88
89
  class="css-1f43avz-a11yText-A11yText"
@@ -48,6 +48,7 @@ export type FieldProps<
48
48
  | ValidationFunction<TForm[TProp]>[];
49
49
  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
50
50
  normalize?: NormalizationFunction<TForm[TProp]>;
51
+ required?: boolean;
51
52
  } & Omit<
52
53
  RenderComponentProps<TForm[TProp], TRenderComponent>,
53
54
  keyof InjectedFieldProps<TForm[TProp]>
@@ -69,24 +70,37 @@ function Field<
69
70
  disabled,
70
71
  validate,
71
72
  normalize,
73
+ required,
72
74
  ...rest
73
75
  }: FieldProps<TForm, TProp, TRenderComponent>,
74
76
  ref: LegacyRef<any>
75
77
  ) {
78
+ // enforces that validate is an array and adds the required validator if required prop is true
79
+ const validateArray: ValidationFunction<TForm[TProp]>[] = Array.isArray(
80
+ validate
81
+ )
82
+ ? validate
83
+ : validate !== undefined
84
+ ? [validate]
85
+ : [];
86
+
87
+ const validateWithRequired = required
88
+ ? validateArray
89
+ .filter((x) => x !== requiredValidator)
90
+ .concat([requiredValidator])
91
+ : validateArray;
92
+
93
+ const isRequired =
94
+ required || validateWithRequired.includes(requiredValidator);
95
+
76
96
  const [input, meta] = useStandardFormInput<TForm[TProp]>({
77
97
  name: String(name),
78
98
  id: id,
79
99
  disabled: disabled,
80
- validate: validate,
100
+ validate: validateWithRequired,
81
101
  normalize: normalize,
82
102
  });
83
103
 
84
- const isRequired =
85
- rest?.required !== undefined
86
- ? rest.required
87
- : validate === requiredValidator ||
88
- (Array.isArray(validate) && validate.includes(requiredValidator));
89
-
90
104
  // a bit of a hack so JSX is happy with us
91
105
  const Wrapped = Component as React.ComponentType<
92
106
  InjectedFieldProps<TForm[TProp]>
@@ -36,6 +36,8 @@ export interface SelectGroupProps<TValue>
36
36
  multiple: TValue extends Array<any> ? true : false;
37
37
  /** Text diplayed when no value is selected. */
38
38
  placeholder?: string;
39
+ /** allows the select value to be cleared */
40
+ isClearable?: boolean;
39
41
  }
40
42
 
41
43
  // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
@@ -49,6 +51,9 @@ export default function SelectGroup<TValue>({
49
51
  options,
50
52
  multiple,
51
53
  placeholder,
54
+ isClearable,
55
+ label,
56
+ helpText,
52
57
  ...rest
53
58
  }: SelectGroupProps<TValue>) {
54
59
  const effectiveOptions: Partial<SelectOption<TValue>>[] = !options
@@ -69,9 +74,10 @@ export default function SelectGroup<TValue>({
69
74
 
70
75
  return (
71
76
  <Group
72
- {...rest}
73
77
  input={input}
74
78
  meta={meta}
79
+ label={label}
80
+ helpText={helpText}
75
81
  required={required}
76
82
  disabled={disabled}
77
83
  className={clsx(
@@ -86,6 +92,7 @@ export default function SelectGroup<TValue>({
86
92
  Partial<SelectOption<TValue>>,
87
93
  TValue extends Array<any> ? true : false
88
94
  >
95
+ {...rest}
89
96
  inputId={input.id}
90
97
  isMulti={multiple}
91
98
  isDisabled={disabled}
@@ -108,6 +115,7 @@ export default function SelectGroup<TValue>({
108
115
  menuPortalTarget={document.body}
109
116
  menuPlacement="auto"
110
117
  placeholder={placeholder}
118
+ isClearable={isClearable}
111
119
  />
112
120
  </Group>
113
121
  );
@@ -20,6 +20,7 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
20
20
  </label>
21
21
  <div
22
22
  class="envoc-form-select-group css-b62m3t-container"
23
+ id="allowLogin"
23
24
  >
24
25
  <span
25
26
  class="css-1f43avz-a11yText-A11yText"
@@ -20,6 +20,7 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
20
20
  </label>
21
21
  <div
22
22
  class="envoc-form-select-group css-b62m3t-container"
23
+ id="userRoles"
23
24
  >
24
25
  <span
25
26
  class="css-1f43avz-a11yText-A11yText"
@@ -117,6 +118,7 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
117
118
  </label>
118
119
  <div
119
120
  class="envoc-form-select-group css-b62m3t-container"
121
+ id="favoriteNumber"
120
122
  >
121
123
  <span
122
124
  class="css-1f43avz-a11yText-A11yText"
@@ -20,6 +20,7 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
20
20
  </label>
21
21
  <div
22
22
  class="envoc-form-select-group css-b62m3t-container"
23
+ id="favoriteColors"
23
24
  >
24
25
  <span
25
26
  class="css-1f43avz-a11yText-A11yText"
@@ -117,6 +118,7 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
117
118
  </label>
118
119
  <div
119
120
  class="envoc-form-select-group css-b62m3t-container"
121
+ id="favoriteColor"
120
122
  >
121
123
  <span
122
124
  class="css-1f43avz-a11yText-A11yText"