envoc-form 5.0.3 → 5.0.6

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.
Files changed (145) hide show
  1. package/README.md +163 -20
  2. package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -2
  3. package/es/DatePicker/DatePickerGroup.js +2 -2
  4. package/es/FieldArray/FieldArray.js +4 -4
  5. package/es/File/FileGroup.js +3 -3
  6. package/es/Form/Form.js +2 -2
  7. package/es/Group.js +3 -3
  8. package/es/Input/CheckboxGroup.d.ts +6 -0
  9. package/es/Input/CheckboxGroup.js +14 -0
  10. package/es/Input/CheckboxInputGroup.d.ts +13 -0
  11. package/es/Input/CheckboxInputGroup.js +41 -0
  12. package/es/Input/IconInputGroup.js +2 -2
  13. package/es/Input/InputGroup.js +2 -2
  14. package/es/Input/MoneyInputGroup.js +2 -2
  15. package/es/Input/NumberInputGroup.js +2 -2
  16. package/es/Input/PhoneNumberInputGroup.js +2 -2
  17. package/es/Input/StringInputGroup.js +2 -2
  18. package/es/Select/SelectGroup.js +3 -3
  19. package/es/StandardFormActions.js +3 -3
  20. package/es/SubmitFormButton.js +2 -2
  21. package/es/TextArea/TextAreaGroup.js +2 -2
  22. package/es/index.d.ts +2 -0
  23. package/es/index.js +1 -0
  24. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -5
  25. package/lib/DatePicker/DatePickerGroup.js +2 -2
  26. package/lib/FieldArray/FieldArray.js +4 -4
  27. package/lib/File/FileGroup.js +3 -3
  28. package/lib/Form/Form.js +2 -2
  29. package/lib/Group.js +3 -3
  30. package/lib/Input/CheckboxGroup.d.ts +6 -0
  31. package/lib/Input/CheckboxGroup.js +20 -0
  32. package/lib/Input/CheckboxInputGroup.d.ts +13 -0
  33. package/lib/Input/CheckboxInputGroup.js +46 -0
  34. package/lib/Input/IconInputGroup.js +2 -2
  35. package/lib/Input/InputGroup.js +2 -2
  36. package/lib/Input/MoneyInputGroup.js +2 -2
  37. package/lib/Input/NumberInputGroup.js +2 -2
  38. package/lib/Input/PhoneNumberInputGroup.js +2 -2
  39. package/lib/Input/StringInputGroup.js +2 -2
  40. package/lib/Select/SelectGroup.js +3 -3
  41. package/lib/StandardFormActions.js +3 -3
  42. package/lib/SubmitFormButton.js +2 -2
  43. package/lib/TextArea/TextAreaGroup.js +2 -2
  44. package/lib/index.d.ts +2 -0
  45. package/lib/index.js +3 -1
  46. package/package.json +111 -111
  47. package/src/AddressInput/AddressInput.test.tsx +27 -27
  48. package/src/AddressInput/AddressInput.tsx +82 -82
  49. package/src/AddressInput/UsStates.ts +55 -55
  50. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +182 -182
  51. package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx +24 -24
  52. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +74 -74
  53. package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +23 -23
  54. package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx +24 -24
  55. package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +87 -87
  56. package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +25 -25
  57. package/src/DatePicker/DatePicker.test.tsx +48 -48
  58. package/src/DatePicker/DatePickerGroup.tsx +109 -115
  59. package/src/DatePicker/DatePickerHelper.ts +4 -4
  60. package/src/DatePicker/StringDateOnlyPickerGroup.tsx +28 -28
  61. package/src/DatePicker/StringDatePickerGroup.tsx +20 -20
  62. package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +152 -152
  63. package/src/Field/CustomFieldInputProps.ts +10 -10
  64. package/src/Field/CustomFieldMetaProps.ts +5 -5
  65. package/src/Field/Field.tsx +113 -113
  66. package/src/Field/FieldErrorScrollTarget.tsx +12 -12
  67. package/src/Field/FieldNameContext.ts +6 -6
  68. package/src/Field/FieldSection.tsx +18 -18
  69. package/src/Field/InjectedFieldProps.ts +8 -8
  70. package/src/Field/StandAloneInput.tsx +55 -55
  71. package/src/Field/useStandardField.ts +125 -125
  72. package/src/FieldArray/FieldArray.tsx +154 -154
  73. package/src/File/FileGroup.test.tsx +35 -35
  74. package/src/File/FileGroup.tsx +82 -85
  75. package/src/File/FileList.tsx +21 -21
  76. package/src/File/__snapshots__/FileGroup.test.tsx.snap +34 -34
  77. package/src/File/humanFileSize.ts +8 -8
  78. package/src/Form/FocusError.tsx +55 -55
  79. package/src/Form/Form.test.tsx +14 -14
  80. package/src/Form/Form.tsx +234 -237
  81. package/src/Form/FormBasedPreventNavigation.tsx +56 -56
  82. package/src/Form/LegacyFormBasedPreventNavigation.tsx +77 -77
  83. package/src/Form/NewFormBasedPreventNavigation.tsx +59 -59
  84. package/src/Form/ServerErrorContext.ts +18 -18
  85. package/src/Form/__snapshots__/Form.test.tsx.snap +10 -10
  86. package/src/FormActions.tsx +47 -47
  87. package/src/FormDefaults.ts +2 -2
  88. package/src/Group.tsx +62 -62
  89. package/src/Input/CheckboxGroup.tsx +60 -0
  90. package/src/Input/CheckboxInputGroup.tsx +78 -0
  91. package/src/Input/IconInputGroup.tsx +54 -54
  92. package/src/Input/InputGroup.tsx +66 -72
  93. package/src/Input/MoneyInputGroup.tsx +47 -50
  94. package/src/Input/NumberInputGroup.tsx +45 -48
  95. package/src/Input/PhoneNumberInputGroup.tsx +45 -45
  96. package/src/Input/StringInputGroup.tsx +50 -53
  97. package/src/Input/__Tests__/CheckboxInputGroup.test.tsx +26 -0
  98. package/src/Input/__Tests__/IconInputGroup.test.tsx +35 -35
  99. package/src/Input/__Tests__/MoneyInputGroup.test.tsx +37 -37
  100. package/src/Input/__Tests__/NumberInputGroup.test.tsx +35 -35
  101. package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx +36 -36
  102. package/src/Input/__Tests__/StringInputGroup.test.tsx +27 -27
  103. package/src/Input/__Tests__/__snapshots__/CheckboxInputGroup.test.tsx.snap +33 -0
  104. package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +32 -32
  105. package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +34 -34
  106. package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +32 -32
  107. package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap +33 -33
  108. package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +31 -31
  109. package/src/Normalization/NormalizationFunction.ts +4 -4
  110. package/src/Normalization/normalizers.ts +44 -44
  111. package/src/Select/BooleanSelectGroup.tsx +28 -28
  112. package/src/Select/NumberSelectGroup.tsx +16 -16
  113. package/src/Select/SelectGroup.tsx +124 -124
  114. package/src/Select/SelectGroupPropsHelper.ts +4 -4
  115. package/src/Select/StringSelectGroup.tsx +16 -16
  116. package/src/Select/__tests__/BooleanSelectGroup.test.tsx +35 -35
  117. package/src/Select/__tests__/NumberSelectGroup.test.tsx +87 -87
  118. package/src/Select/__tests__/StringSelectGroup.test.tsx +89 -89
  119. package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +98 -98
  120. package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +195 -195
  121. package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +195 -195
  122. package/src/StandardFormActions.tsx +41 -41
  123. package/src/SubmitFormButton.tsx +54 -54
  124. package/src/TextArea/TextAreaGroup.tsx +64 -64
  125. package/src/Validation/ValidatedApiResult.ts +8 -8
  126. package/src/Validation/ValidationError.ts +6 -6
  127. package/src/Validation/ValidationFunction.ts +4 -4
  128. package/src/Validation/validators.test.tsx +81 -81
  129. package/src/Validation/validators.ts +97 -97
  130. package/src/__Tests__/FormTestBase.tsx +65 -64
  131. package/src/__Tests__/RealisticForm.test.tsx +82 -82
  132. package/src/__Tests__/StandardFormActions.test.tsx +17 -17
  133. package/src/__Tests__/SubmitFormButton.test.tsx +17 -17
  134. package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +27 -27
  135. package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +20 -20
  136. package/src/__Tests__/index.ts +3 -3
  137. package/src/_variables.scss +11 -11
  138. package/src/index.ts +156 -153
  139. package/src/react-app-env.d.ts +1 -1
  140. package/src/setupTests.ts +1 -1
  141. package/src/utils/objectContainsNonSerializableProperty.test.tsx +49 -49
  142. package/src/utils/objectContainsNonSerializableProperty.ts +17 -17
  143. package/src/utils/objectToFormData.test.tsx +76 -76
  144. package/src/utils/objectToFormData.ts +105 -105
  145. package/src/utils/typeChecks.ts +18 -18
package/README.md CHANGED
@@ -13,11 +13,11 @@ Base form package for envoc projects.
13
13
  [npm]: https://www.npmjs.com/package/envoc-form
14
14
  Important naming conventions for our sanity while creating envoc-form types:
15
15
 
16
- - TForm = The type of the some form. e.g. LoginDto
17
- - TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
18
- - TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
19
- - Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
20
- - TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
16
+ - TForm = The type of the some form. e.g. LoginDto
17
+ - TProp = The key / symbol of a individual property of some form. e.g. TProp would be literally "Username" for the prop of the same name for a LoginDto
18
+ - TValue = The value of an individual property of some form. e.g. a "Username" property would probably have a TValue of string
19
+ - Field = the abstract thing that deals with some specific TProp. Might represent several composed elements (e.g. label, input, helperText, etc) or may just be a direct component
20
+ - TRenderComponent = The type of any 'Component' passed to a Field, e.g. 'StandardTextInputGroup' passed to Component means TRenderComponent is typeof(StandardTextInputGroup)
21
21
  - TComponentProps = For any 'Component' passed to a Field as a prop, this represents that Component's props
22
22
 
23
23
  # Interfaces
@@ -216,6 +216,131 @@ Omit.required
216
216
  packages/envoc-form/src/Group.tsx:21
217
217
 
218
218
 
219
+ <a name="interfacescheckboxinputgrouppropsmd"></a>
220
+
221
+ [envoc-form](#readmemd) / [Exports](#modulesmd) / CheckboxInputGroupProps
222
+
223
+ ## Interface: CheckboxInputGroupProps
224
+
225
+ ### Hierarchy
226
+
227
+ - `Omit`<[`InputGroupProps`](#interfacesinputgrouppropsmd)<`boolean` \| `undefined` \| ``null``\>, ``"onChange"`` \| ``"type"`` \| ``"value"``\>
228
+
229
+ ↳ **`CheckboxInputGroupProps`**
230
+
231
+ ### Table of contents
232
+
233
+ #### Properties
234
+
235
+ - [className](#classname)
236
+ - [helpText](#helptext)
237
+ - [icon](#icon)
238
+ - [input](#input)
239
+ - [label](#label)
240
+ - [labelOnLeft](#labelonleft)
241
+ - [meta](#meta)
242
+
243
+ ### Properties
244
+
245
+ #### className
246
+
247
+ • `Optional` **className**: `string`
248
+
249
+ Extra class names to apply.
250
+
251
+ ##### Inherited from
252
+
253
+ Omit.className
254
+
255
+ ##### Defined in
256
+
257
+ packages/envoc-form/src/Group.tsx:8
258
+
259
+ ___
260
+
261
+ #### helpText
262
+
263
+ • `Optional` **helpText**: `ReactNode`
264
+
265
+ Simple helper text after the input.
266
+
267
+ ##### Inherited from
268
+
269
+ Omit.helpText
270
+
271
+ ##### Defined in
272
+
273
+ packages/envoc-form/src/Group.tsx:16
274
+
275
+ ___
276
+
277
+ #### icon
278
+
279
+ • `Optional` **icon**: `ReactNode`
280
+
281
+ ##### Inherited from
282
+
283
+ Omit.icon
284
+
285
+ ##### Defined in
286
+
287
+ packages/envoc-form/src/Input/InputGroup.tsx:20
288
+
289
+ ___
290
+
291
+ #### input
292
+
293
+ • **input**: `CustomFieldInputProps`<`undefined` \| ``null`` \| `boolean`\>
294
+
295
+ ##### Inherited from
296
+
297
+ Omit.input
298
+
299
+ ##### Defined in
300
+
301
+ packages/envoc-form/src/Field/InjectedFieldProps.ts:6
302
+
303
+ ___
304
+
305
+ #### label
306
+
307
+ • `Optional` **label**: `string`
308
+
309
+ Simple text label before the input.
310
+
311
+ ##### Inherited from
312
+
313
+ Omit.label
314
+
315
+ ##### Defined in
316
+
317
+ packages/envoc-form/src/Group.tsx:13
318
+
319
+ ___
320
+
321
+ #### labelOnLeft
322
+
323
+ • `Optional` **labelOnLeft**: `boolean`
324
+
325
+ ##### Defined in
326
+
327
+ packages/envoc-form/src/Input/CheckboxInputGroup.tsx:12
328
+
329
+ ___
330
+
331
+ #### meta
332
+
333
+ • **meta**: `CustomFieldMetaProps`<`undefined` \| ``null`` \| `boolean`\>
334
+
335
+ ##### Inherited from
336
+
337
+ Omit.meta
338
+
339
+ ##### Defined in
340
+
341
+ packages/envoc-form/src/Field/InjectedFieldProps.ts:7
342
+
343
+
219
344
  <a name="interfacesconfirmbaseformpropsmd"></a>
220
345
 
221
346
  [envoc-form](#readmemd) / [Exports](#modulesmd) / ConfirmBaseFormProps
@@ -3721,6 +3846,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
3721
3846
 
3722
3847
  - [AddressInputProps](#interfacesaddressinputpropsmd)
3723
3848
  - [BooleanSelectGroupProps](#interfacesbooleanselectgrouppropsmd)
3849
+ - [CheckboxInputGroupProps](#interfacescheckboxinputgrouppropsmd)
3724
3850
  - [ConfirmBaseFormProps](#interfacesconfirmbaseformpropsmd)
3725
3851
  - [ConfirmDeleteFormProps](#interfacesconfirmdeleteformpropsmd)
3726
3852
  - [DatePickerGroupProps](#interfacesdatepickergrouppropsmd)
@@ -3769,6 +3895,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
3769
3895
 
3770
3896
  ### Variables
3771
3897
 
3898
+ - [CheckboxInputGroup](#checkboxinputgroup)
3772
3899
  - [FieldNameContext](#fieldnamecontext)
3773
3900
  - [FileGroup](#filegroup)
3774
3901
  - [FormDefaults](#formdefaults)
@@ -3962,6 +4089,22 @@ packages/envoc-form/src/Field/StandAloneInput.tsx:8
3962
4089
 
3963
4090
  ## Variables
3964
4091
 
4092
+ ### CheckboxInputGroup
4093
+
4094
+ • `Const` **CheckboxInputGroup**: `ComponentType`<[`CheckboxInputGroupProps`](#interfacescheckboxinputgrouppropsmd)\>
4095
+
4096
+ Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
4097
+
4098
+ If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
4099
+
4100
+ If the user should be required to check the box before submission, use the `required` prop.
4101
+
4102
+ #### Defined in
4103
+
4104
+ packages/envoc-form/src/Input/CheckboxInputGroup.tsx:74
4105
+
4106
+ ___
4107
+
3965
4108
  ### FieldNameContext
3966
4109
 
3967
4110
  • `Const` **FieldNameContext**: `Context`<`undefined` \| `string`\>
@@ -3982,7 +4125,7 @@ File upload input group.
3982
4125
 
3983
4126
  #### Defined in
3984
4127
 
3985
- packages/envoc-form/src/File/FileGroup.tsx:81
4128
+ packages/envoc-form/src/File/FileGroup.tsx:78
3986
4129
 
3987
4130
  ___
3988
4131
 
@@ -4024,7 +4167,7 @@ Standard number input group. By default allows for float values.
4024
4167
 
4025
4168
  #### Defined in
4026
4169
 
4027
- packages/envoc-form/src/Input/NumberInputGroup.tsx:44
4170
+ packages/envoc-form/src/Input/NumberInputGroup.tsx:41
4028
4171
 
4029
4172
  ___
4030
4173
 
@@ -4032,7 +4175,7 @@ ___
4032
4175
 
4033
4176
  • `Const` **PhoneNumberInputGroup**: `ComponentType`<[`PhoneNumberInputGroupProps`](#interfacesphonenumberinputgrouppropsmd)\>
4034
4177
 
4035
- A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
4178
+ A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
4036
4179
  The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
4037
4180
 
4038
4181
  **`Default`**
@@ -4067,7 +4210,7 @@ Standard string input group.
4067
4210
 
4068
4211
  #### Defined in
4069
4212
 
4070
- packages/envoc-form/src/Input/StringInputGroup.tsx:49
4213
+ packages/envoc-form/src/Input/StringInputGroup.tsx:46
4071
4214
 
4072
4215
  ___
4073
4216
 
@@ -4087,13 +4230,13 @@ packages/envoc-form/src/TextArea/TextAreaGroup.tsx:60
4087
4230
 
4088
4231
  ▸ **AddressInput**(`«destructured»`): `Element`
4089
4232
 
4090
- Collection of `<Field/>`s for inputting an address. Includes:
4091
- ```txt
4092
- Address 1
4093
- Address 2
4094
- City
4095
- State
4096
- Zip
4233
+ Collection of `<Field/>`s for inputting an address. Includes:
4234
+ ```txt
4235
+ Address 1
4236
+ Address 2
4237
+ City
4238
+ State
4239
+ Zip
4097
4240
  ```
4098
4241
 
4099
4242
  #### Parameters
@@ -4138,7 +4281,7 @@ ___
4138
4281
 
4139
4282
  ▸ **ConfirmBaseForm**(`«destructured»`): `Element`
4140
4283
 
4141
- Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
4284
+ Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
4142
4285
  Commonly used for confirming delete and archive.
4143
4286
 
4144
4287
  See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
@@ -4217,7 +4360,7 @@ ___
4217
4360
 
4218
4361
  ▸ **Field**<`TForm`, `TProp`, `TRenderComponent`\>(`«destructured»`, `ref`): `Element`
4219
4362
 
4220
- Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
4363
+ Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
4221
4364
  Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
4222
4365
 
4223
4366
  #### Type parameters
@@ -4670,7 +4813,7 @@ ___
4670
4813
 
4671
4814
  #### Defined in
4672
4815
 
4673
- packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:106
4816
+ packages/envoc-form/src/DatePicker/DatePickerGroup.tsx:100
4674
4817
 
4675
4818
  ___
4676
4819
 
@@ -4934,7 +5077,7 @@ packages/envoc-form/src/Field/useStandardField.ts:24
4934
5077
 
4935
5078
  ##### Defined in
4936
5079
 
4937
- packages/envoc-form/src/Form/Form.tsx:214
5080
+ packages/envoc-form/src/Form/Form.tsx:211
4938
5081
 
4939
5082
 
4940
5083
  <a name="modulesnormalizersmd"></a>
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import classNames from 'classnames';
24
+ import { clsx } from 'clsx';
25
25
  import { useAxiosRequest } from 'envoc-request';
26
26
  import { FormDefaults } from '../FormDefaults';
27
27
  // TODO: ask about how we should use 'children'
@@ -35,7 +35,7 @@ export default function ConfirmBaseForm(_a) {
35
35
  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"]);
36
36
  var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
37
37
  var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
38
- 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" })] })));
38
+ 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" })] })));
39
39
  function goBack() {
40
40
  window.history.back();
41
41
  }
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { useEffect, useState } from 'react';
25
25
  import DatePicker from 'react-date-picker/dist/entry.nostyle';
26
- import classnames from 'classnames';
26
+ import { clsx } from 'clsx';
27
27
  import parseISO from 'date-fns/parseISO';
28
28
  import { FormDefaults } from '../FormDefaults';
29
29
  import Group from '../Group';
@@ -48,7 +48,7 @@ export default function DatePickerGroup(_a) {
48
48
  }
49
49
  }
50
50
  }, [setDisplayDate, input.value]);
51
- 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 })) }));
51
+ 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 })) }));
52
52
  function handleChange(e) {
53
53
  var onChange = input.onChange;
54
54
  if (onChange === null) {
@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
19
19
  return to.concat(ar || Array.prototype.slice.call(from));
20
20
  };
21
21
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
- import classNames from 'classnames';
22
+ import { clsx } from 'clsx';
23
23
  import Field from '../Field/Field';
24
24
  import { FieldNameContext } from '../Field/FieldNameContext';
25
25
  import useStandardFormInput from '../Field/useStandardField';
@@ -42,15 +42,15 @@ export default function FieldArray(_a) {
42
42
  : Array.isArray(input.value)
43
43
  ? input.value
44
44
  : [];
45
- 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) {
45
+ 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) {
46
46
  var _a, _b;
47
47
  var itemName = "".concat(input.name, "[").concat(index, "]");
48
- return (_jsxs("div", { className: classNames(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
48
+ return (_jsxs("div", { className: clsx(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
49
49
  _a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
50
50
  _a)), role: "listitem", children: [_jsx(FieldNameContext.Provider, { value: itemName, children: children({
51
51
  Field: Field,
52
52
  FieldArray: FieldArray,
53
- }) }), _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']) ||
53
+ }) }), _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']) ||
54
54
  (value && value['id']) ||
55
55
  itemName));
56
56
  }) })] }));
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import FileList from './FileList';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  import Group from '../Group';
29
29
  function FileGroup(_a, ref) {
30
30
  var _b;
31
31
  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"]);
32
- 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) {
32
+ 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) {
33
33
  var _a, _b;
34
34
  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)) {
35
35
  input.onChange(undefined);
@@ -46,7 +46,7 @@ function FileGroup(_a, ref) {
46
46
  input.onChange(files);
47
47
  }
48
48
  }
49
- }, value: undefined, ref: ref, type: "file", className: classNames(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
49
+ }, value: undefined, ref: ref, type: "file", className: clsx(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] }));
50
50
  }
51
51
  /** File upload input group. */
52
52
  var FileGroupWithRef = React.forwardRef(FileGroup);
package/es/Form/Form.js CHANGED
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { useContext, useMemo, useState, } from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
27
27
  import FocusError from './FocusError';
28
28
  import FormBasedPreventNavigation from './FormBasedPreventNavigation';
@@ -54,7 +54,7 @@ export default function Form(_a) {
54
54
  _a)));
55
55
  },
56
56
  }); }, [serverErrors]);
57
- 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({
57
+ 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({
58
58
  // hack for ref forwarding
59
59
  Field: Field,
60
60
  FieldArray: FieldArray,
package/es/Group.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import classNames from 'classnames';
3
- import { FormDefaults } from './FormDefaults';
2
+ import { clsx } from 'clsx';
4
3
  import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
4
+ import { FormDefaults } from './FormDefaults';
5
5
  /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
6
6
  export default function Group(_a) {
7
7
  var _b;
8
8
  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;
9
- return (_jsxs("div", { className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
9
+ return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
10
10
  _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
11
11
  _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
12
12
  _b[FormDefaults.cssClassPrefix + 'required'] = required,
@@ -0,0 +1,6 @@
1
+ import { GroupProps } from '../Group';
2
+ export interface CheckboxGroupProps extends GroupProps {
3
+ labelOnLeft?: boolean;
4
+ }
5
+ /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
6
+ export default function CheckboxGroup({ className, children, label, helpText, meta, input, disabled, required, labelOnLeft, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { clsx } from 'clsx';
3
+ import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
4
+ import { FormDefaults } from '../FormDefaults';
5
+ /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
6
+ export default function CheckboxGroup(_a) {
7
+ var _b;
8
+ 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;
9
+ return (_jsxs("div", { className: clsx(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
10
+ _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
11
+ _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
12
+ _b[FormDefaults.cssClassPrefix + 'required'] = required,
13
+ _b)), children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), _jsx("div", { className: FormDefaults.cssClassPrefix + 'checkbox-group-input', children: labelOnLeft ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: input.id, children: label }), children] })) : (_jsxs(_Fragment, { children: [children, _jsx("label", { htmlFor: input.id, children: label })] })) }), meta.error && (_jsx("div", { id: "".concat(input.id, "-error"), className: FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
14
+ }
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { InputGroupProps } from './InputGroup';
3
+ export interface CheckboxInputGroupProps extends Omit<InputGroupProps<boolean | undefined | null>, 'onChange' | 'type' | 'value'> {
4
+ labelOnLeft?: boolean;
5
+ }
6
+ /** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
7
+ *
8
+ * If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
9
+ *
10
+ * If the user should be required to check the box before submission, use the `required` prop.
11
+ */
12
+ declare const CheckboxInputGroupWithRef: React.ComponentType<CheckboxInputGroupProps>;
13
+ export default CheckboxInputGroupWithRef;
@@ -0,0 +1,41 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import React from 'react';
25
+ import { clsx } from 'clsx';
26
+ import CheckboxGroup from './CheckboxGroup';
27
+ import { FormDefaults } from '../FormDefaults';
28
+ function CheckboxInputGroup(_a, ref) {
29
+ 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"]);
30
+ 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) {
31
+ input.onChange(e.target.checked);
32
+ }, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
33
+ }
34
+ /** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
35
+ *
36
+ * If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
37
+ *
38
+ * If the user should be required to check the box before submission, use the `required` prop.
39
+ */
40
+ var CheckboxInputGroupWithRef = React.forwardRef(CheckboxInputGroup);
41
+ export default CheckboxInputGroupWithRef;
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import InputGroupWithRef from './InputGroup';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  function IconInputGroup(_a, ref) {
29
29
  var _b;
30
30
  var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
31
31
  var input = rest.input;
32
- 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) {
32
+ 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) {
33
33
  if (!e.target.value) {
34
34
  input.onChange(undefined);
35
35
  }
@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import { FormDefaults } from '../FormDefaults';
27
27
  import Group from '../Group';
28
28
  function InputGroup(_a, ref) {
29
29
  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"]);
30
- 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') }))] }));
30
+ 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') }))] }));
31
31
  }
32
32
  /** Generic controlled `<input/>` wrapped by a `<Group/>` */
33
33
  var InputGroupWithRef = React.forwardRef(InputGroup);
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import InputGroup from './InputGroup';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  function MoneyInputGroup(_a, ref) {
29
29
  var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
30
30
  var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
31
31
  var input = rest.input;
32
- 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) {
32
+ 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) {
33
33
  if (!e.target.value) {
34
34
  input.onChange(undefined);
35
35
  }
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import InputGroup from './InputGroup';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  function NumberInputGroup(_a, ref) {
29
29
  var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
30
30
  var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
31
31
  var input = rest.input;
32
- return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
32
+ return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: clsx(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
33
33
  if (!e.target.value) {
34
34
  input.onChange(undefined);
35
35
  }
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import InputGroup from './InputGroup';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  import { phoneNumber } from '../Normalization/normalizers';
@@ -30,7 +30,7 @@ function PhoneNumberInputGroup(_a, ref) {
30
30
  var _b;
31
31
  var className = _a.className, rest = __rest(_a, ["className"]);
32
32
  var input = rest.input;
33
- 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) {
33
+ 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) {
34
34
  if (!e.target.value) {
35
35
  input.onChange(undefined);
36
36
  }
@@ -22,14 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import InputGroup from './InputGroup';
27
27
  import { FormDefaults } from '../FormDefaults';
28
28
  function StringInputGroup(_a, ref) {
29
29
  var _b;
30
30
  var className = _a.className, rest = __rest(_a, ["className"]);
31
31
  var input = rest.input;
32
- 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) {
32
+ 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) {
33
33
  if (!e.target.value) {
34
34
  input.onChange(undefined);
35
35
  }
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { default as ReactSelect } from 'react-select';
25
- import classNames from 'classnames';
25
+ import { clsx } from 'clsx';
26
26
  import { FormDefaults } from '../FormDefaults';
27
27
  import Group from '../Group';
28
28
  // 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) {
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: classNames(className, (_b = {},
46
+ return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, required: required, disabled: disabled, className: clsx(className, (_b = {},
47
47
  _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
48
48
  _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
49
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) {
@@ -53,7 +53,7 @@ export default function SelectGroup(_a) {
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: classNames(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 }) })));
57
57
  function getValue() {
58
58
  if (multiple) {
59
59
  return effectiveOptions.filter(function (o) {