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/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap CHANGED
@@ -1,195 +1,195 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
4
- <DocumentFragment>
5
- <form
6
- action="#"
7
- class="envoc-form-form"
8
- >
9
- <div
10
- class="envoc-form-multiple envoc-form-select-group envoc-form-group"
11
- >
12
- <div
13
- id="userroles-error-scroll-target"
14
- style="display: none;"
15
- />
16
- <label
17
- for="userRoles"
18
- >
19
- Favorite Number
20
- </label>
21
- <div
22
- class="envoc-form-select-group css-b62m3t-container"
23
- >
24
- <span
25
- class="css-1f43avz-a11yText-A11yText"
26
- id="react-select-5-live-region"
27
- />
28
- <span
29
- aria-atomic="false"
30
- aria-live="polite"
31
- aria-relevant="additions text"
32
- class="css-1f43avz-a11yText-A11yText"
33
- />
34
- <div
35
- class="react-select__control css-13cymwt-control"
36
- >
37
- <div
38
- class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
39
- >
40
- <div
41
- class="react-select__placeholder css-1jqq78o-placeholder"
42
- id="react-select-5-placeholder"
43
- >
44
- Select...
45
- </div>
46
- <div
47
- class="react-select__input-container css-d9r47t-Component"
48
- data-value=""
49
- >
50
- <input
51
- aria-autocomplete="list"
52
- aria-describedby="react-select-5-placeholder"
53
- aria-expanded="false"
54
- aria-haspopup="true"
55
- autocapitalize="none"
56
- autocomplete="off"
57
- autocorrect="off"
58
- class="react-select__input"
59
- id="userRoles"
60
- role="combobox"
61
- spellcheck="false"
62
- style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
63
- tabindex="0"
64
- type="text"
65
- value=""
66
- />
67
- </div>
68
- </div>
69
- <div
70
- class="react-select__indicators css-ny0e4k-Component"
71
- >
72
- <span
73
- class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
74
- />
75
- <div
76
- aria-hidden="true"
77
- class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
78
- >
79
- <svg
80
- aria-hidden="true"
81
- class="css-tj5bde-Svg"
82
- focusable="false"
83
- height="20"
84
- viewBox="0 0 20 20"
85
- width="20"
86
- >
87
- <path
88
- d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
89
- />
90
- </svg>
91
- </div>
92
- </div>
93
- </div>
94
- </div>
95
- </div>
96
- </form>
97
- </DocumentFragment>
98
- `;
99
-
100
- exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
101
- <DocumentFragment>
102
- <form
103
- action="#"
104
- class="envoc-form-form"
105
- >
106
- <div
107
- class="envoc-form-select-group envoc-form-group"
108
- >
109
- <div
110
- id="favoritenumber-error-scroll-target"
111
- style="display: none;"
112
- />
113
- <label
114
- for="favoriteNumber"
115
- >
116
- Favorite Number
117
- </label>
118
- <div
119
- class="envoc-form-select-group css-b62m3t-container"
120
- >
121
- <span
122
- class="css-1f43avz-a11yText-A11yText"
123
- id="react-select-3-live-region"
124
- />
125
- <span
126
- aria-atomic="false"
127
- aria-live="polite"
128
- aria-relevant="additions text"
129
- class="css-1f43avz-a11yText-A11yText"
130
- />
131
- <div
132
- class="react-select__control css-13cymwt-control"
133
- >
134
- <div
135
- class="react-select__value-container css-16674sh-Component"
136
- >
137
- <div
138
- class="react-select__placeholder css-1jqq78o-placeholder"
139
- id="react-select-3-placeholder"
140
- >
141
- Select...
142
- </div>
143
- <div
144
- class="react-select__input-container css-d9r47t-Component"
145
- data-value=""
146
- >
147
- <input
148
- aria-autocomplete="list"
149
- aria-describedby="react-select-3-placeholder"
150
- aria-expanded="false"
151
- aria-haspopup="true"
152
- autocapitalize="none"
153
- autocomplete="off"
154
- autocorrect="off"
155
- class="react-select__input"
156
- id="favoriteNumber"
157
- role="combobox"
158
- spellcheck="false"
159
- style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
160
- tabindex="0"
161
- type="text"
162
- value=""
163
- />
164
- </div>
165
- </div>
166
- <div
167
- class="react-select__indicators css-ny0e4k-Component"
168
- >
169
- <span
170
- class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
171
- />
172
- <div
173
- aria-hidden="true"
174
- class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
175
- >
176
- <svg
177
- aria-hidden="true"
178
- class="css-tj5bde-Svg"
179
- focusable="false"
180
- height="20"
181
- viewBox="0 0 20 20"
182
- width="20"
183
- >
184
- <path
185
- d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
186
- />
187
- </svg>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
192
- </div>
193
- </form>
194
- </DocumentFragment>
195
- `;
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
4
+ <DocumentFragment>
5
+ <form
6
+ action="#"
7
+ class="envoc-form-form"
8
+ >
9
+ <div
10
+ class="envoc-form-multiple envoc-form-select-group envoc-form-group"
11
+ >
12
+ <div
13
+ id="userroles-error-scroll-target"
14
+ style="display: none;"
15
+ />
16
+ <label
17
+ for="userRoles"
18
+ >
19
+ Favorite Number
20
+ </label>
21
+ <div
22
+ class="envoc-form-select-group css-b62m3t-container"
23
+ >
24
+ <span
25
+ class="css-1f43avz-a11yText-A11yText"
26
+ id="react-select-5-live-region"
27
+ />
28
+ <span
29
+ aria-atomic="false"
30
+ aria-live="polite"
31
+ aria-relevant="additions text"
32
+ class="css-1f43avz-a11yText-A11yText"
33
+ />
34
+ <div
35
+ class="react-select__control css-13cymwt-control"
36
+ >
37
+ <div
38
+ class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
39
+ >
40
+ <div
41
+ class="react-select__placeholder css-1jqq78o-placeholder"
42
+ id="react-select-5-placeholder"
43
+ >
44
+ Select...
45
+ </div>
46
+ <div
47
+ class="react-select__input-container css-d9r47t-Component"
48
+ data-value=""
49
+ >
50
+ <input
51
+ aria-autocomplete="list"
52
+ aria-describedby="react-select-5-placeholder"
53
+ aria-expanded="false"
54
+ aria-haspopup="true"
55
+ autocapitalize="none"
56
+ autocomplete="off"
57
+ autocorrect="off"
58
+ class="react-select__input"
59
+ id="userRoles"
60
+ role="combobox"
61
+ spellcheck="false"
62
+ style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
63
+ tabindex="0"
64
+ type="text"
65
+ value=""
66
+ />
67
+ </div>
68
+ </div>
69
+ <div
70
+ class="react-select__indicators css-ny0e4k-Component"
71
+ >
72
+ <span
73
+ class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
74
+ />
75
+ <div
76
+ aria-hidden="true"
77
+ class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
78
+ >
79
+ <svg
80
+ aria-hidden="true"
81
+ class="css-tj5bde-Svg"
82
+ focusable="false"
83
+ height="20"
84
+ viewBox="0 0 20 20"
85
+ width="20"
86
+ >
87
+ <path
88
+ d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
89
+ />
90
+ </svg>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </form>
97
+ </DocumentFragment>
98
+ `;
99
+
100
+ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
101
+ <DocumentFragment>
102
+ <form
103
+ action="#"
104
+ class="envoc-form-form"
105
+ >
106
+ <div
107
+ class="envoc-form-select-group envoc-form-group"
108
+ >
109
+ <div
110
+ id="favoritenumber-error-scroll-target"
111
+ style="display: none;"
112
+ />
113
+ <label
114
+ for="favoriteNumber"
115
+ >
116
+ Favorite Number
117
+ </label>
118
+ <div
119
+ class="envoc-form-select-group css-b62m3t-container"
120
+ >
121
+ <span
122
+ class="css-1f43avz-a11yText-A11yText"
123
+ id="react-select-3-live-region"
124
+ />
125
+ <span
126
+ aria-atomic="false"
127
+ aria-live="polite"
128
+ aria-relevant="additions text"
129
+ class="css-1f43avz-a11yText-A11yText"
130
+ />
131
+ <div
132
+ class="react-select__control css-13cymwt-control"
133
+ >
134
+ <div
135
+ class="react-select__value-container css-16674sh-Component"
136
+ >
137
+ <div
138
+ class="react-select__placeholder css-1jqq78o-placeholder"
139
+ id="react-select-3-placeholder"
140
+ >
141
+ Select...
142
+ </div>
143
+ <div
144
+ class="react-select__input-container css-d9r47t-Component"
145
+ data-value=""
146
+ >
147
+ <input
148
+ aria-autocomplete="list"
149
+ aria-describedby="react-select-3-placeholder"
150
+ aria-expanded="false"
151
+ aria-haspopup="true"
152
+ autocapitalize="none"
153
+ autocomplete="off"
154
+ autocorrect="off"
155
+ class="react-select__input"
156
+ id="favoriteNumber"
157
+ role="combobox"
158
+ spellcheck="false"
159
+ style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
160
+ tabindex="0"
161
+ type="text"
162
+ value=""
163
+ />
164
+ </div>
165
+ </div>
166
+ <div
167
+ class="react-select__indicators css-ny0e4k-Component"
168
+ >
169
+ <span
170
+ class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
171
+ />
172
+ <div
173
+ aria-hidden="true"
174
+ class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
175
+ >
176
+ <svg
177
+ aria-hidden="true"
178
+ class="css-tj5bde-Svg"
179
+ focusable="false"
180
+ height="20"
181
+ viewBox="0 0 20 20"
182
+ width="20"
183
+ >
184
+ <path
185
+ d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
186
+ />
187
+ </svg>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </form>
194
+ </DocumentFragment>
195
+ `;