envoc-form 5.0.2 → 5.0.5

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 (113) hide show
  1. package/README.md +158 -15
  2. package/es/Input/CheckboxGroup.d.ts +6 -0
  3. package/es/Input/CheckboxGroup.js +14 -0
  4. package/es/Input/CheckboxInputGroup.d.ts +13 -0
  5. package/es/Input/CheckboxInputGroup.js +41 -0
  6. package/es/index.d.ts +2 -0
  7. package/es/index.js +1 -0
  8. package/lib/Input/CheckboxGroup.d.ts +6 -0
  9. package/lib/Input/CheckboxGroup.js +20 -0
  10. package/lib/Input/CheckboxInputGroup.d.ts +13 -0
  11. package/lib/Input/CheckboxInputGroup.js +46 -0
  12. package/lib/index.d.ts +2 -0
  13. package/lib/index.js +3 -1
  14. package/package.json +111 -111
  15. package/src/AddressInput/AddressInput.test.tsx +27 -27
  16. package/src/AddressInput/AddressInput.tsx +82 -82
  17. package/src/AddressInput/UsStates.ts +55 -55
  18. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +182 -182
  19. package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx +24 -24
  20. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +74 -74
  21. package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +23 -23
  22. package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx +24 -24
  23. package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +87 -87
  24. package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +25 -25
  25. package/src/DatePicker/DatePicker.test.tsx +48 -48
  26. package/src/DatePicker/DatePickerGroup.tsx +115 -115
  27. package/src/DatePicker/DatePickerHelper.ts +4 -4
  28. package/src/DatePicker/StringDateOnlyPickerGroup.tsx +28 -28
  29. package/src/DatePicker/StringDatePickerGroup.tsx +20 -20
  30. package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +152 -152
  31. package/src/Field/CustomFieldInputProps.ts +10 -10
  32. package/src/Field/CustomFieldMetaProps.ts +5 -5
  33. package/src/Field/Field.tsx +113 -113
  34. package/src/Field/FieldErrorScrollTarget.tsx +12 -12
  35. package/src/Field/FieldNameContext.ts +6 -6
  36. package/src/Field/FieldSection.tsx +18 -18
  37. package/src/Field/InjectedFieldProps.ts +8 -8
  38. package/src/Field/StandAloneInput.tsx +55 -55
  39. package/src/Field/useStandardField.ts +125 -125
  40. package/src/FieldArray/FieldArray.tsx +154 -154
  41. package/src/File/FileGroup.test.tsx +35 -35
  42. package/src/File/FileGroup.tsx +85 -85
  43. package/src/File/FileList.tsx +21 -21
  44. package/src/File/__snapshots__/FileGroup.test.tsx.snap +34 -34
  45. package/src/File/humanFileSize.ts +8 -8
  46. package/src/Form/FocusError.tsx +55 -55
  47. package/src/Form/Form.test.tsx +14 -14
  48. package/src/Form/Form.tsx +237 -237
  49. package/src/Form/FormBasedPreventNavigation.tsx +56 -56
  50. package/src/Form/LegacyFormBasedPreventNavigation.tsx +77 -77
  51. package/src/Form/NewFormBasedPreventNavigation.tsx +59 -59
  52. package/src/Form/ServerErrorContext.ts +18 -18
  53. package/src/Form/__snapshots__/Form.test.tsx.snap +10 -10
  54. package/src/FormActions.tsx +47 -47
  55. package/src/FormDefaults.ts +2 -2
  56. package/src/Group.tsx +62 -62
  57. package/src/Input/CheckboxGroup.tsx +60 -0
  58. package/src/Input/CheckboxInputGroup.tsx +78 -0
  59. package/src/Input/IconInputGroup.tsx +54 -54
  60. package/src/Input/InputGroup.tsx +72 -72
  61. package/src/Input/MoneyInputGroup.tsx +50 -50
  62. package/src/Input/NumberInputGroup.tsx +48 -48
  63. package/src/Input/PhoneNumberInputGroup.tsx +45 -45
  64. package/src/Input/StringInputGroup.tsx +53 -53
  65. package/src/Input/__Tests__/CheckboxInputGroup.test.tsx +26 -0
  66. package/src/Input/__Tests__/IconInputGroup.test.tsx +35 -35
  67. package/src/Input/__Tests__/MoneyInputGroup.test.tsx +37 -37
  68. package/src/Input/__Tests__/NumberInputGroup.test.tsx +35 -35
  69. package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx +36 -36
  70. package/src/Input/__Tests__/StringInputGroup.test.tsx +27 -27
  71. package/src/Input/__Tests__/__snapshots__/CheckboxInputGroup.test.tsx.snap +33 -0
  72. package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +32 -32
  73. package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +34 -34
  74. package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +32 -32
  75. package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap +33 -33
  76. package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +31 -31
  77. package/src/Normalization/NormalizationFunction.ts +4 -4
  78. package/src/Normalization/normalizers.ts +44 -44
  79. package/src/Select/BooleanSelectGroup.tsx +28 -28
  80. package/src/Select/NumberSelectGroup.tsx +16 -16
  81. package/src/Select/SelectGroup.tsx +124 -124
  82. package/src/Select/SelectGroupPropsHelper.ts +4 -4
  83. package/src/Select/StringSelectGroup.tsx +16 -16
  84. package/src/Select/__tests__/BooleanSelectGroup.test.tsx +35 -35
  85. package/src/Select/__tests__/NumberSelectGroup.test.tsx +87 -87
  86. package/src/Select/__tests__/StringSelectGroup.test.tsx +89 -89
  87. package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +98 -98
  88. package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +195 -195
  89. package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +195 -195
  90. package/src/StandardFormActions.tsx +41 -41
  91. package/src/SubmitFormButton.tsx +54 -54
  92. package/src/TextArea/TextAreaGroup.tsx +64 -64
  93. package/src/Validation/ValidatedApiResult.ts +8 -8
  94. package/src/Validation/ValidationError.ts +6 -6
  95. package/src/Validation/ValidationFunction.ts +4 -4
  96. package/src/Validation/validators.test.tsx +81 -81
  97. package/src/Validation/validators.ts +97 -97
  98. package/src/__Tests__/FormTestBase.tsx +65 -64
  99. package/src/__Tests__/RealisticForm.test.tsx +82 -82
  100. package/src/__Tests__/StandardFormActions.test.tsx +17 -17
  101. package/src/__Tests__/SubmitFormButton.test.tsx +17 -17
  102. package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +27 -27
  103. package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +20 -20
  104. package/src/__Tests__/index.ts +3 -3
  105. package/src/_variables.scss +11 -11
  106. package/src/index.ts +156 -153
  107. package/src/react-app-env.d.ts +1 -1
  108. package/src/setupTests.ts +1 -1
  109. package/src/utils/objectContainsNonSerializableProperty.test.tsx +49 -49
  110. package/src/utils/objectContainsNonSerializableProperty.ts +17 -17
  111. package/src/utils/objectToFormData.test.tsx +76 -76
  112. package/src/utils/objectToFormData.ts +105 -105
  113. 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`\>
@@ -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`**
@@ -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
@@ -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 classNames from 'classnames';
3
+ import { FormDefaults } from '../FormDefaults';
4
+ import FieldErrorScrollTarget from '../Field/FieldErrorScrollTarget';
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: classNames(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 classNames from 'classnames';
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: 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) {
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;
package/es/index.d.ts CHANGED
@@ -58,6 +58,8 @@ export { default as SelectGroup } from './Select/SelectGroup';
58
58
  export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
59
59
  export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
60
60
  export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
61
+ export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
62
+ export type { CheckboxInputGroupProps } from './Input/CheckboxInputGroup';
61
63
  export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
62
64
  export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps, } from './Select/NumberSelectGroup';
63
65
  export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
package/es/index.js CHANGED
@@ -40,6 +40,7 @@ export * as normalizers from './Normalization/normalizers';
40
40
  // Select
41
41
  export { default as SelectGroup } from './Select/SelectGroup';
42
42
  export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
43
+ export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
43
44
  export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
44
45
  export { MultiStringSelectGroup, SingleStringSelectGroup, } from './Select/StringSelectGroup';
45
46
  // Text Area
@@ -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,20 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var jsx_runtime_1 = require("react/jsx-runtime");
7
+ var classnames_1 = __importDefault(require("classnames"));
8
+ var FormDefaults_1 = require("../FormDefaults");
9
+ var FieldErrorScrollTarget_1 = __importDefault(require("../Field/FieldErrorScrollTarget"));
10
+ /** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
11
+ function CheckboxGroup(_a) {
12
+ var _b;
13
+ 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;
14
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'group', (_b = {},
15
+ _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
16
+ _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled,
17
+ _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'required'] = required,
18
+ _b)), children: [(0, jsx_runtime_1.jsx)(FieldErrorScrollTarget_1.default, {}), meta.warning && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), (0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group-input', children: labelOnLeft ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: input.id, children: label }), children] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)("label", { htmlFor: input.id, children: label })] })) }), meta.error && ((0, jsx_runtime_1.jsx)("div", { id: "".concat(input.id, "-error"), className: FormDefaults_1.FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && ((0, jsx_runtime_1.jsx)("div", { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
19
+ }
20
+ exports.default = CheckboxGroup;
@@ -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,46 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var jsx_runtime_1 = require("react/jsx-runtime");
29
+ var react_1 = __importDefault(require("react"));
30
+ var classnames_1 = __importDefault(require("classnames"));
31
+ var CheckboxGroup_1 = __importDefault(require("./CheckboxGroup"));
32
+ var FormDefaults_1 = require("../FormDefaults");
33
+ function CheckboxInputGroup(_a, ref) {
34
+ 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"]);
35
+ return ((0, jsx_runtime_1.jsx)(CheckboxGroup_1.default, { input: input, meta: meta, disabled: disabled, required: required, label: label, helpText: helpText, labelOnLeft: labelOnLeft, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group', { 'label-on-left': labelOnLeft }, { 'label-on-right': !labelOnLeft }), children: (0, jsx_runtime_1.jsx)("input", __assign({}, rest, { type: "checkbox", "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'checkbox-group'), checked: input.value === true, onChange: function (e) {
36
+ input.onChange(e.target.checked);
37
+ }, disabled: disabled, required: required, onBlur: input.onBlur, id: input.id, name: input.name, ref: ref })) }));
38
+ }
39
+ /** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
40
+ *
41
+ * If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
42
+ *
43
+ * If the user should be required to check the box before submission, use the `required` prop.
44
+ */
45
+ var CheckboxInputGroupWithRef = react_1.default.forwardRef(CheckboxInputGroup);
46
+ exports.default = CheckboxInputGroupWithRef;
package/lib/index.d.ts CHANGED
@@ -58,6 +58,8 @@ export { default as SelectGroup } from './Select/SelectGroup';
58
58
  export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
59
59
  export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
60
60
  export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
61
+ export { default as CheckboxInputGroup } from './Input/CheckboxInputGroup';
62
+ export type { CheckboxInputGroupProps } from './Input/CheckboxInputGroup';
61
63
  export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
62
64
  export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps, } from './Select/NumberSelectGroup';
63
65
  export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
package/lib/index.js CHANGED
@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
29
29
  return (mod && mod.__esModule) ? mod : { "default": mod };
30
30
  };
31
31
  Object.defineProperty(exports, "__esModule", { value: true });
32
- exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.PhoneNumberInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
32
+ exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.CheckboxInputGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.PhoneNumberInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
33
33
  // Address
34
34
  var AddressInput_1 = require("./AddressInput/AddressInput");
35
35
  Object.defineProperty(exports, "AddressInput", { enumerable: true, get: function () { return __importDefault(AddressInput_1).default; } });
@@ -101,6 +101,8 @@ var SelectGroup_1 = require("./Select/SelectGroup");
101
101
  Object.defineProperty(exports, "SelectGroup", { enumerable: true, get: function () { return __importDefault(SelectGroup_1).default; } });
102
102
  var BooleanSelectGroup_1 = require("./Select/BooleanSelectGroup");
103
103
  Object.defineProperty(exports, "BooleanSelectGroup", { enumerable: true, get: function () { return BooleanSelectGroup_1.BooleanSelectGroup; } });
104
+ var CheckboxInputGroup_1 = require("./Input/CheckboxInputGroup");
105
+ Object.defineProperty(exports, "CheckboxInputGroup", { enumerable: true, get: function () { return __importDefault(CheckboxInputGroup_1).default; } });
104
106
  var NumberSelectGroup_1 = require("./Select/NumberSelectGroup");
105
107
  Object.defineProperty(exports, "MultiNumberSelectGroup", { enumerable: true, get: function () { return NumberSelectGroup_1.MultiNumberSelectGroup; } });
106
108
  Object.defineProperty(exports, "SingleNumberSelectGroup", { enumerable: true, get: function () { return NumberSelectGroup_1.SingleNumberSelectGroup; } });