@zohodesk/components 1.2.62 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cli/config/variables/variableMapping.json +7 -0
- package/.cli/propValidation_report.html +1 -1
- package/README.md +13 -0
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +1 -0
- package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -0
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +1 -0
- package/es/ListItem/ListContainer.js +3 -2
- package/es/ListItem/ListItem.module.css +52 -6
- package/es/ListItem/ListItemWithAvatar.js +17 -6
- package/es/ListItem/ListItemWithCheckBox.js +18 -6
- package/es/ListItem/ListItemWithIcon.js +20 -7
- package/es/ListItem/ListItemWithRadio.js +19 -6
- package/es/ListItem/__tests__/ListContainer.spec.js +8 -0
- package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
- package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
- package/es/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
- package/es/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
- package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
- package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
- package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
- package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
- package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
- package/es/ListItem/props/defaultProps.js +13 -5
- package/es/ListItem/props/propTypes.js +13 -1
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +12 -4
- package/es/MultiSelect/AdvancedMultiSelect.js +20 -8
- package/es/MultiSelect/MultiSelect.js +16 -6
- package/es/MultiSelect/MultiSelect.module.css +9 -1
- package/es/MultiSelect/MultiSelectWithAvatar.js +8 -2
- package/es/MultiSelect/Suggestions.js +5 -2
- package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
- package/es/MultiSelect/props/defaultProps.js +8 -4
- package/es/MultiSelect/props/propTypes.js +7 -2
- package/es/Radio/props/propTypes.js +1 -1
- package/es/Select/GroupSelect.js +4 -2
- package/es/Select/Select.js +3 -1
- package/es/Select/SelectWithAvatar.js +4 -2
- package/es/Select/props/defaultProps.js +4 -2
- package/es/Select/props/propTypes.js +4 -2
- package/es/common/common.module.css +10 -0
- package/es/utils/dropDownUtils.js +42 -13
- package/es/v1/Radio/props/propTypes.js +1 -1
- package/lib/ListItem/ListContainer.js +3 -2
- package/lib/ListItem/ListItem.module.css +52 -6
- package/lib/ListItem/ListItemWithAvatar.js +16 -5
- package/lib/ListItem/ListItemWithCheckBox.js +17 -5
- package/lib/ListItem/ListItemWithIcon.js +19 -6
- package/lib/ListItem/ListItemWithRadio.js +18 -5
- package/lib/ListItem/__tests__/ListContainer.spec.js +8 -0
- package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +35 -0
- package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +35 -0
- package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +35 -0
- package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +35 -0
- package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +13 -0
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +200 -2
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +451 -30
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +202 -4
- package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +447 -30
- package/lib/ListItem/props/defaultProps.js +13 -5
- package/lib/ListItem/props/propTypes.js +12 -2
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +11 -5
- package/lib/MultiSelect/AdvancedMultiSelect.js +86 -73
- package/lib/MultiSelect/MultiSelect.js +14 -6
- package/lib/MultiSelect/MultiSelect.module.css +9 -1
- package/lib/MultiSelect/MultiSelectWithAvatar.js +8 -2
- package/lib/MultiSelect/Suggestions.js +5 -2
- package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -13
- package/lib/MultiSelect/props/defaultProps.js +8 -4
- package/lib/MultiSelect/props/propTypes.js +7 -3
- package/lib/Radio/props/propTypes.js +1 -1
- package/lib/Select/GroupSelect.js +4 -2
- package/lib/Select/Select.js +3 -1
- package/lib/Select/SelectWithAvatar.js +4 -2
- package/lib/Select/props/defaultProps.js +4 -2
- package/lib/Select/props/propTypes.js +4 -2
- package/lib/common/common.module.css +10 -0
- package/lib/utils/dropDownUtils.js +52 -16
- package/lib/v1/Radio/props/propTypes.js +1 -1
- package/package.json +6 -6
- package/result.json +1 -1
|
@@ -1,6 +1,204 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`ListItemWithRadio
|
|
3
|
+
exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align center 1`] = `
|
|
4
|
+
<DocumentFragment>
|
|
5
|
+
<li
|
|
6
|
+
class="list medium default withBorder flex rowdir vCenter"
|
|
7
|
+
data-a11y-inset-focus="true"
|
|
8
|
+
data-id="listItemWithRadioComp"
|
|
9
|
+
data-selector-id="listItemWithRadio"
|
|
10
|
+
data-test-id="listItemWithRadioComp"
|
|
11
|
+
role="option"
|
|
12
|
+
tabindex="0"
|
|
13
|
+
>
|
|
14
|
+
<div
|
|
15
|
+
class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfCenter"
|
|
16
|
+
data-id="listItemWithRadioComp_radio"
|
|
17
|
+
data-selector-id="box"
|
|
18
|
+
data-test-id="listItemWithRadioComp_radio"
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
class="shrinkOff selfCenter"
|
|
22
|
+
data-id="boxComponent"
|
|
23
|
+
data-selector-id="box"
|
|
24
|
+
data-test-id="boxComponent"
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
aria-checked="false"
|
|
28
|
+
aria-hidden="true"
|
|
29
|
+
aria-readonly="false"
|
|
30
|
+
class="container pointer hoverEfffect inflex rowdir both"
|
|
31
|
+
data-id="RadioComp"
|
|
32
|
+
data-selector-id="container"
|
|
33
|
+
data-test-id="RadioComp"
|
|
34
|
+
role="radio"
|
|
35
|
+
tabindex="-1"
|
|
36
|
+
>
|
|
37
|
+
<div
|
|
38
|
+
class="radio
|
|
39
|
+
hoverprimary medium filled centerPathprimary shrinkOff"
|
|
40
|
+
data-id="boxComponent"
|
|
41
|
+
data-selector-id="box"
|
|
42
|
+
data-test-id="boxComponent"
|
|
43
|
+
>
|
|
44
|
+
<input
|
|
45
|
+
type="hidden"
|
|
46
|
+
value=""
|
|
47
|
+
/>
|
|
48
|
+
<label
|
|
49
|
+
class="radioLabel pointer"
|
|
50
|
+
>
|
|
51
|
+
<svg
|
|
52
|
+
viewBox="0 0 40 40"
|
|
53
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
54
|
+
>
|
|
55
|
+
<circle
|
|
56
|
+
class="rdBox"
|
|
57
|
+
cx="20"
|
|
58
|
+
cy="20"
|
|
59
|
+
r="19"
|
|
60
|
+
/>
|
|
61
|
+
</svg>
|
|
62
|
+
</label>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div
|
|
68
|
+
class="grow basis shrinkOn"
|
|
69
|
+
data-id="boxComponent"
|
|
70
|
+
data-selector-id="box"
|
|
71
|
+
data-test-id="boxComponent"
|
|
72
|
+
>
|
|
73
|
+
<div
|
|
74
|
+
class="flex cover coldir"
|
|
75
|
+
data-id="containerComponent"
|
|
76
|
+
data-selector-id="container"
|
|
77
|
+
data-test-id="containerComponent"
|
|
78
|
+
>
|
|
79
|
+
<div
|
|
80
|
+
class="value shrinkOff"
|
|
81
|
+
data-id="boxComponent"
|
|
82
|
+
data-selector-id="box"
|
|
83
|
+
data-test-id="boxComponent"
|
|
84
|
+
>
|
|
85
|
+
List
|
|
86
|
+
</div>
|
|
87
|
+
<div
|
|
88
|
+
class="secondaryField shrinkOff"
|
|
89
|
+
data-id="boxComponent"
|
|
90
|
+
data-selector-id="box"
|
|
91
|
+
data-test-id="boxComponent"
|
|
92
|
+
data-title="secondaryValue"
|
|
93
|
+
>
|
|
94
|
+
secondaryValue
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</li>
|
|
99
|
+
</DocumentFragment>
|
|
100
|
+
`;
|
|
101
|
+
|
|
102
|
+
exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align end 1`] = `
|
|
103
|
+
<DocumentFragment>
|
|
104
|
+
<li
|
|
105
|
+
class="list medium default withBorder flex rowdir vCenter"
|
|
106
|
+
data-a11y-inset-focus="true"
|
|
107
|
+
data-id="listItemWithRadioComp"
|
|
108
|
+
data-selector-id="listItemWithRadio"
|
|
109
|
+
data-test-id="listItemWithRadioComp"
|
|
110
|
+
role="option"
|
|
111
|
+
tabindex="0"
|
|
112
|
+
>
|
|
113
|
+
<div
|
|
114
|
+
class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfEnd"
|
|
115
|
+
data-id="listItemWithRadioComp_radio"
|
|
116
|
+
data-selector-id="box"
|
|
117
|
+
data-test-id="listItemWithRadioComp_radio"
|
|
118
|
+
>
|
|
119
|
+
<div
|
|
120
|
+
class="lhsBox_medium shrinkOff selfEnd"
|
|
121
|
+
data-id="boxComponent"
|
|
122
|
+
data-selector-id="box"
|
|
123
|
+
data-test-id="boxComponent"
|
|
124
|
+
>
|
|
125
|
+
<div
|
|
126
|
+
aria-checked="false"
|
|
127
|
+
aria-hidden="true"
|
|
128
|
+
aria-readonly="false"
|
|
129
|
+
class="container pointer hoverEfffect inflex rowdir both"
|
|
130
|
+
data-id="RadioComp"
|
|
131
|
+
data-selector-id="container"
|
|
132
|
+
data-test-id="RadioComp"
|
|
133
|
+
role="radio"
|
|
134
|
+
tabindex="-1"
|
|
135
|
+
>
|
|
136
|
+
<div
|
|
137
|
+
class="radio
|
|
138
|
+
hoverprimary medium filled centerPathprimary shrinkOff"
|
|
139
|
+
data-id="boxComponent"
|
|
140
|
+
data-selector-id="box"
|
|
141
|
+
data-test-id="boxComponent"
|
|
142
|
+
>
|
|
143
|
+
<input
|
|
144
|
+
type="hidden"
|
|
145
|
+
value=""
|
|
146
|
+
/>
|
|
147
|
+
<label
|
|
148
|
+
class="radioLabel pointer"
|
|
149
|
+
>
|
|
150
|
+
<svg
|
|
151
|
+
viewBox="0 0 40 40"
|
|
152
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
153
|
+
>
|
|
154
|
+
<circle
|
|
155
|
+
class="rdBox"
|
|
156
|
+
cx="20"
|
|
157
|
+
cy="20"
|
|
158
|
+
r="19"
|
|
159
|
+
/>
|
|
160
|
+
</svg>
|
|
161
|
+
</label>
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
<div
|
|
167
|
+
class="grow basis shrinkOn"
|
|
168
|
+
data-id="boxComponent"
|
|
169
|
+
data-selector-id="box"
|
|
170
|
+
data-test-id="boxComponent"
|
|
171
|
+
>
|
|
172
|
+
<div
|
|
173
|
+
class="flex cover coldir"
|
|
174
|
+
data-id="containerComponent"
|
|
175
|
+
data-selector-id="container"
|
|
176
|
+
data-test-id="containerComponent"
|
|
177
|
+
>
|
|
178
|
+
<div
|
|
179
|
+
class="value shrinkOff"
|
|
180
|
+
data-id="boxComponent"
|
|
181
|
+
data-selector-id="box"
|
|
182
|
+
data-test-id="boxComponent"
|
|
183
|
+
>
|
|
184
|
+
List
|
|
185
|
+
</div>
|
|
186
|
+
<div
|
|
187
|
+
class="secondaryField shrinkOff"
|
|
188
|
+
data-id="boxComponent"
|
|
189
|
+
data-selector-id="box"
|
|
190
|
+
data-test-id="boxComponent"
|
|
191
|
+
data-title="secondaryValue"
|
|
192
|
+
>
|
|
193
|
+
secondaryValue
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
</li>
|
|
198
|
+
</DocumentFragment>
|
|
199
|
+
`;
|
|
200
|
+
|
|
201
|
+
exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
|
|
4
202
|
<DocumentFragment>
|
|
5
203
|
<li
|
|
6
204
|
class="list medium default withBorder flex rowdir vCenter"
|
|
@@ -12,58 +210,277 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
|
|
|
12
210
|
tabindex="0"
|
|
13
211
|
>
|
|
14
212
|
<div
|
|
15
|
-
class="iconBox shrinkOff"
|
|
213
|
+
class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
|
|
16
214
|
data-id="listItemWithRadioComp_radio"
|
|
17
215
|
data-selector-id="box"
|
|
18
216
|
data-test-id="listItemWithRadioComp_radio"
|
|
19
217
|
>
|
|
20
218
|
<div
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
219
|
+
class="lhsBox_medium shrinkOff selfStart"
|
|
220
|
+
data-id="boxComponent"
|
|
221
|
+
data-selector-id="box"
|
|
222
|
+
data-test-id="boxComponent"
|
|
223
|
+
>
|
|
224
|
+
<div
|
|
225
|
+
aria-checked="false"
|
|
226
|
+
aria-hidden="true"
|
|
227
|
+
aria-readonly="false"
|
|
228
|
+
class="container pointer hoverEfffect inflex rowdir both"
|
|
229
|
+
data-id="RadioComp"
|
|
230
|
+
data-selector-id="container"
|
|
231
|
+
data-test-id="RadioComp"
|
|
232
|
+
role="radio"
|
|
233
|
+
tabindex="-1"
|
|
234
|
+
>
|
|
235
|
+
<div
|
|
236
|
+
class="radio
|
|
237
|
+
hoverprimary medium filled centerPathprimary shrinkOff"
|
|
238
|
+
data-id="boxComponent"
|
|
239
|
+
data-selector-id="box"
|
|
240
|
+
data-test-id="boxComponent"
|
|
241
|
+
>
|
|
242
|
+
<input
|
|
243
|
+
type="hidden"
|
|
244
|
+
value=""
|
|
245
|
+
/>
|
|
246
|
+
<label
|
|
247
|
+
class="radioLabel pointer"
|
|
248
|
+
>
|
|
249
|
+
<svg
|
|
250
|
+
viewBox="0 0 40 40"
|
|
251
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
252
|
+
>
|
|
253
|
+
<circle
|
|
254
|
+
class="rdBox"
|
|
255
|
+
cx="20"
|
|
256
|
+
cy="20"
|
|
257
|
+
r="19"
|
|
258
|
+
/>
|
|
259
|
+
</svg>
|
|
260
|
+
</label>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
<div
|
|
266
|
+
class="grow basis shrinkOn"
|
|
267
|
+
data-id="boxComponent"
|
|
268
|
+
data-selector-id="box"
|
|
269
|
+
data-test-id="boxComponent"
|
|
270
|
+
>
|
|
271
|
+
<div
|
|
272
|
+
class="flex cover coldir"
|
|
273
|
+
data-id="containerComponent"
|
|
26
274
|
data-selector-id="container"
|
|
27
|
-
data-test-id="
|
|
28
|
-
role="radio"
|
|
29
|
-
tabindex="-1"
|
|
275
|
+
data-test-id="containerComponent"
|
|
30
276
|
>
|
|
31
277
|
<div
|
|
32
|
-
class="
|
|
278
|
+
class="value shrinkOff"
|
|
279
|
+
data-id="boxComponent"
|
|
280
|
+
data-selector-id="box"
|
|
281
|
+
data-test-id="boxComponent"
|
|
282
|
+
>
|
|
283
|
+
List
|
|
284
|
+
</div>
|
|
285
|
+
<div
|
|
286
|
+
class="secondaryField shrinkOff"
|
|
287
|
+
data-id="boxComponent"
|
|
288
|
+
data-selector-id="box"
|
|
289
|
+
data-test-id="boxComponent"
|
|
290
|
+
data-title="secondaryValue"
|
|
291
|
+
>
|
|
292
|
+
secondaryValue
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</li>
|
|
297
|
+
</DocumentFragment>
|
|
298
|
+
`;
|
|
299
|
+
|
|
300
|
+
exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
|
|
301
|
+
<DocumentFragment>
|
|
302
|
+
<li
|
|
303
|
+
class="list medium default withBorder flex rowdir vCenter"
|
|
304
|
+
data-a11y-inset-focus="true"
|
|
305
|
+
data-id="listItemWithRadioComp"
|
|
306
|
+
data-selector-id="listItemWithRadio"
|
|
307
|
+
data-test-id="listItemWithRadioComp"
|
|
308
|
+
role="option"
|
|
309
|
+
tabindex="0"
|
|
310
|
+
>
|
|
311
|
+
<div
|
|
312
|
+
class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
|
|
313
|
+
data-id="listItemWithRadioComp_radio"
|
|
314
|
+
data-selector-id="box"
|
|
315
|
+
data-test-id="listItemWithRadioComp_radio"
|
|
316
|
+
>
|
|
317
|
+
<div
|
|
318
|
+
class="lhsBox_medium shrinkOff selfStart"
|
|
319
|
+
data-id="boxComponent"
|
|
320
|
+
data-selector-id="box"
|
|
321
|
+
data-test-id="boxComponent"
|
|
322
|
+
>
|
|
323
|
+
<div
|
|
324
|
+
aria-checked="false"
|
|
325
|
+
aria-hidden="true"
|
|
326
|
+
aria-readonly="false"
|
|
327
|
+
class="container pointer hoverEfffect inflex rowdir both"
|
|
328
|
+
data-id="RadioComp"
|
|
329
|
+
data-selector-id="container"
|
|
330
|
+
data-test-id="RadioComp"
|
|
331
|
+
role="radio"
|
|
332
|
+
tabindex="-1"
|
|
333
|
+
>
|
|
334
|
+
<div
|
|
335
|
+
class="radio
|
|
33
336
|
hoverprimary medium filled centerPathprimary shrinkOff"
|
|
337
|
+
data-id="boxComponent"
|
|
338
|
+
data-selector-id="box"
|
|
339
|
+
data-test-id="boxComponent"
|
|
340
|
+
>
|
|
341
|
+
<input
|
|
342
|
+
type="hidden"
|
|
343
|
+
value=""
|
|
344
|
+
/>
|
|
345
|
+
<label
|
|
346
|
+
class="radioLabel pointer"
|
|
347
|
+
>
|
|
348
|
+
<svg
|
|
349
|
+
viewBox="0 0 40 40"
|
|
350
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
351
|
+
>
|
|
352
|
+
<circle
|
|
353
|
+
class="rdBox"
|
|
354
|
+
cx="20"
|
|
355
|
+
cy="20"
|
|
356
|
+
r="19"
|
|
357
|
+
/>
|
|
358
|
+
</svg>
|
|
359
|
+
</label>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
<div
|
|
365
|
+
class="grow basis shrinkOn"
|
|
366
|
+
data-id="boxComponent"
|
|
367
|
+
data-selector-id="box"
|
|
368
|
+
data-test-id="boxComponent"
|
|
369
|
+
>
|
|
370
|
+
<div
|
|
371
|
+
class="flex cover coldir"
|
|
372
|
+
data-id="containerComponent"
|
|
373
|
+
data-selector-id="container"
|
|
374
|
+
data-test-id="containerComponent"
|
|
375
|
+
>
|
|
376
|
+
<div
|
|
377
|
+
class="value shrinkOff"
|
|
34
378
|
data-id="boxComponent"
|
|
35
379
|
data-selector-id="box"
|
|
36
380
|
data-test-id="boxComponent"
|
|
37
381
|
>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
382
|
+
List
|
|
383
|
+
</div>
|
|
384
|
+
<div
|
|
385
|
+
class="secondaryField shrinkOff"
|
|
386
|
+
data-id="boxComponent"
|
|
387
|
+
data-selector-id="box"
|
|
388
|
+
data-test-id="boxComponent"
|
|
389
|
+
data-title="secondaryValue"
|
|
390
|
+
>
|
|
391
|
+
secondaryValue
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
</div>
|
|
395
|
+
</li>
|
|
396
|
+
</DocumentFragment>
|
|
397
|
+
`;
|
|
398
|
+
|
|
399
|
+
exports[`ListItemWithRadio rendering the defult props 1`] = `
|
|
400
|
+
<DocumentFragment>
|
|
401
|
+
<li
|
|
402
|
+
class="list medium default withBorder flex rowdir vCenter"
|
|
403
|
+
data-a11y-inset-focus="true"
|
|
404
|
+
data-id="listItemWithRadioComp"
|
|
405
|
+
data-selector-id="listItemWithRadio"
|
|
406
|
+
data-test-id="listItemWithRadioComp"
|
|
407
|
+
role="option"
|
|
408
|
+
tabindex="0"
|
|
409
|
+
>
|
|
410
|
+
<div
|
|
411
|
+
class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
|
|
412
|
+
data-id="listItemWithRadioComp_radio"
|
|
413
|
+
data-selector-id="box"
|
|
414
|
+
data-test-id="listItemWithRadioComp_radio"
|
|
415
|
+
>
|
|
416
|
+
<div
|
|
417
|
+
class="lhsBox_medium shrinkOff selfStart"
|
|
418
|
+
data-id="boxComponent"
|
|
419
|
+
data-selector-id="box"
|
|
420
|
+
data-test-id="boxComponent"
|
|
421
|
+
>
|
|
422
|
+
<div
|
|
423
|
+
aria-checked="false"
|
|
424
|
+
aria-hidden="true"
|
|
425
|
+
aria-readonly="false"
|
|
426
|
+
class="container pointer hoverEfffect inflex rowdir both"
|
|
427
|
+
data-id="RadioComp"
|
|
428
|
+
data-selector-id="container"
|
|
429
|
+
data-test-id="RadioComp"
|
|
430
|
+
role="radio"
|
|
431
|
+
tabindex="-1"
|
|
432
|
+
>
|
|
433
|
+
<div
|
|
434
|
+
class="radio
|
|
435
|
+
hoverprimary medium filled centerPathprimary shrinkOff"
|
|
436
|
+
data-id="boxComponent"
|
|
437
|
+
data-selector-id="box"
|
|
438
|
+
data-test-id="boxComponent"
|
|
44
439
|
>
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
440
|
+
<input
|
|
441
|
+
type="hidden"
|
|
442
|
+
value=""
|
|
443
|
+
/>
|
|
444
|
+
<label
|
|
445
|
+
class="radioLabel pointer"
|
|
48
446
|
>
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
447
|
+
<svg
|
|
448
|
+
viewBox="0 0 40 40"
|
|
449
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
450
|
+
>
|
|
451
|
+
<circle
|
|
452
|
+
class="rdBox"
|
|
453
|
+
cx="20"
|
|
454
|
+
cy="20"
|
|
455
|
+
r="19"
|
|
456
|
+
/>
|
|
457
|
+
</svg>
|
|
458
|
+
</label>
|
|
459
|
+
</div>
|
|
57
460
|
</div>
|
|
58
461
|
</div>
|
|
59
462
|
</div>
|
|
60
463
|
<div
|
|
61
|
-
class="
|
|
464
|
+
class="grow basis shrinkOn"
|
|
62
465
|
data-id="boxComponent"
|
|
63
466
|
data-selector-id="box"
|
|
64
467
|
data-test-id="boxComponent"
|
|
65
468
|
>
|
|
66
|
-
|
|
469
|
+
<div
|
|
470
|
+
class="flex cover coldir"
|
|
471
|
+
data-id="containerComponent"
|
|
472
|
+
data-selector-id="container"
|
|
473
|
+
data-test-id="containerComponent"
|
|
474
|
+
>
|
|
475
|
+
<div
|
|
476
|
+
class="value shrinkOff"
|
|
477
|
+
data-id="boxComponent"
|
|
478
|
+
data-selector-id="box"
|
|
479
|
+
data-test-id="boxComponent"
|
|
480
|
+
>
|
|
481
|
+
List
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
67
484
|
</div>
|
|
68
485
|
</li>
|
|
69
486
|
</DocumentFragment>
|
|
@@ -18,7 +18,8 @@ var ListContainerDefaultProps = {
|
|
|
18
18
|
customClass: '',
|
|
19
19
|
customProps: {},
|
|
20
20
|
dataSelectorId: 'listContainer',
|
|
21
|
-
needMultiLineText: false
|
|
21
|
+
needMultiLineText: false,
|
|
22
|
+
align: 'vertical'
|
|
22
23
|
};
|
|
23
24
|
exports.ListContainerDefaultProps = ListContainerDefaultProps;
|
|
24
25
|
var ListItemDefaultProps = {
|
|
@@ -55,7 +56,8 @@ var ListItemWithAvatarDefaultProps = {
|
|
|
55
56
|
customClass: {},
|
|
56
57
|
customProps: {},
|
|
57
58
|
dataSelectorId: 'listItemWithAvatar',
|
|
58
|
-
needMultiLineText: false
|
|
59
|
+
needMultiLineText: false,
|
|
60
|
+
lhsAlignContent: 'start'
|
|
59
61
|
};
|
|
60
62
|
exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
|
|
61
63
|
var ListItemWithCheckBoxDefaultProps = {
|
|
@@ -70,7 +72,9 @@ var ListItemWithCheckBoxDefaultProps = {
|
|
|
70
72
|
customClass: {},
|
|
71
73
|
customProps: {},
|
|
72
74
|
dataSelectorId: 'listItemWithCheckBox',
|
|
73
|
-
needMultiLineText: false
|
|
75
|
+
needMultiLineText: false,
|
|
76
|
+
lhsAlignContent: 'start',
|
|
77
|
+
lhsJustifyContent: 'center'
|
|
74
78
|
};
|
|
75
79
|
exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
|
|
76
80
|
var ListItemWithIconDefaultProps = {
|
|
@@ -88,7 +92,9 @@ var ListItemWithIconDefaultProps = {
|
|
|
88
92
|
customClass: '',
|
|
89
93
|
customProps: {},
|
|
90
94
|
dataSelectorId: 'listItemWithIcon',
|
|
91
|
-
needMultiLineText: false
|
|
95
|
+
needMultiLineText: false,
|
|
96
|
+
lhsAlignContent: 'start',
|
|
97
|
+
lhsJustifyContent: 'center'
|
|
92
98
|
};
|
|
93
99
|
exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
|
|
94
100
|
var ListItemWithRadioDefaultProps = {
|
|
@@ -104,6 +110,8 @@ var ListItemWithRadioDefaultProps = {
|
|
|
104
110
|
customClass: {},
|
|
105
111
|
customProps: {},
|
|
106
112
|
dataSelectorId: 'listItemWithRadio',
|
|
107
|
-
needMultiLineText: false
|
|
113
|
+
needMultiLineText: false,
|
|
114
|
+
lhsAlignContent: 'start',
|
|
115
|
+
lhsJustifyContent: 'center'
|
|
108
116
|
};
|
|
109
117
|
exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;
|
|
@@ -43,7 +43,8 @@ var ListContainer_Props = {
|
|
|
43
43
|
}),
|
|
44
44
|
customClass: _propTypes["default"].string,
|
|
45
45
|
customProps: _propTypes["default"].object,
|
|
46
|
-
eleRef: _propTypes["default"].func
|
|
46
|
+
eleRef: _propTypes["default"].func,
|
|
47
|
+
align: _propTypes["default"].string
|
|
47
48
|
};
|
|
48
49
|
exports.ListContainer_Props = ListContainer_Props;
|
|
49
50
|
var ListItem_Props = {
|
|
@@ -87,7 +88,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
|
|
|
87
88
|
active: _propTypes["default"].bool,
|
|
88
89
|
autoHover: _propTypes["default"].bool,
|
|
89
90
|
avatarPalette: _propTypes["default"].string
|
|
90
|
-
}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
|
|
91
|
+
}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
|
|
91
92
|
role: _propTypes["default"].string,
|
|
92
93
|
ariaSelected: _propTypes["default"].bool,
|
|
93
94
|
ariaHidden: _propTypes["default"].bool
|
|
@@ -120,6 +121,9 @@ var ListItemWithCheckBox_Props = {
|
|
|
120
121
|
size: _propTypes["default"].string,
|
|
121
122
|
title: _propTypes["default"].string,
|
|
122
123
|
value: _propTypes["default"].string,
|
|
124
|
+
secondaryValue: _propTypes["default"].string,
|
|
125
|
+
lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
126
|
+
lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
123
127
|
a11y: _propTypes["default"].shape({
|
|
124
128
|
role: _propTypes["default"].string,
|
|
125
129
|
ariaSelected: _propTypes["default"].bool
|
|
@@ -155,6 +159,9 @@ var ListItemWithIcon_Props = {
|
|
|
155
159
|
size: _propTypes["default"].string,
|
|
156
160
|
title: _propTypes["default"].string,
|
|
157
161
|
value: _propTypes["default"].string,
|
|
162
|
+
secondaryValue: _propTypes["default"].string,
|
|
163
|
+
lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
164
|
+
lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
158
165
|
a11y: _propTypes["default"].shape({
|
|
159
166
|
role: _propTypes["default"].string,
|
|
160
167
|
ariaSelected: _propTypes["default"].bool,
|
|
@@ -188,6 +195,9 @@ var ListItemWithRadio_Props = {
|
|
|
188
195
|
size: _propTypes["default"].string,
|
|
189
196
|
title: _propTypes["default"].string,
|
|
190
197
|
value: _propTypes["default"].string,
|
|
198
|
+
secondaryValue: _propTypes["default"].string,
|
|
199
|
+
lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
200
|
+
lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
|
|
191
201
|
a11y: _propTypes["default"].shape({
|
|
192
202
|
role: _propTypes["default"].string,
|
|
193
203
|
ariaSelected: _propTypes["default"].bool
|
|
@@ -199,11 +199,13 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
199
199
|
key: "handleFormatSelectedOptions",
|
|
200
200
|
value: function handleFormatSelectedOptions(selectedOptionDetails, props) {
|
|
201
201
|
var valueField = props.valueField,
|
|
202
|
-
textField = props.textField
|
|
202
|
+
textField = props.textField,
|
|
203
|
+
allowValueFallback = props.allowValueFallback;
|
|
203
204
|
return this.formatSelectedOptions({
|
|
204
205
|
options: selectedOptionDetails,
|
|
205
206
|
valueField: valueField,
|
|
206
|
-
textField: textField
|
|
207
|
+
textField: textField,
|
|
208
|
+
allowValueFallback: allowValueFallback
|
|
207
209
|
});
|
|
208
210
|
}
|
|
209
211
|
}, {
|
|
@@ -264,6 +266,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
264
266
|
}, {
|
|
265
267
|
key: "handleSelectedOptionIdChange",
|
|
266
268
|
value: function handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
|
|
269
|
+
var allowValueFallback = this.props.allowValueFallback;
|
|
267
270
|
var newSelectedOptions = selectedGroupOptions.map(function (option) {
|
|
268
271
|
return (0, _dropDownUtils.optionIdGrouping)(option.id, option.groupId);
|
|
269
272
|
});
|
|
@@ -275,7 +278,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
275
278
|
return this.getSelectedOptions({
|
|
276
279
|
selectedOptions: newSelectedOptions,
|
|
277
280
|
normalizedFormatOptions: formatOptions,
|
|
278
|
-
selectedOptionsLength: selectedOptionsLength
|
|
281
|
+
selectedOptionsLength: selectedOptionsLength,
|
|
282
|
+
allowValueFallback: allowValueFallback
|
|
279
283
|
});
|
|
280
284
|
}
|
|
281
285
|
}, {
|
|
@@ -322,10 +326,12 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
322
326
|
}, {
|
|
323
327
|
key: "handleGetGroupSelectOptions",
|
|
324
328
|
value: function handleGetGroupSelectOptions(props) {
|
|
325
|
-
var
|
|
329
|
+
var allowValueFallback = props.allowValueFallback,
|
|
330
|
+
_props$groupedOptions = props.groupedOptions,
|
|
326
331
|
groupedOptions = _props$groupedOptions === void 0 ? [] : _props$groupedOptions;
|
|
327
332
|
return this.getGroupSelectOptions({
|
|
328
|
-
groupedOptions: groupedOptions
|
|
333
|
+
groupedOptions: groupedOptions,
|
|
334
|
+
allowValueFallback: allowValueFallback
|
|
329
335
|
});
|
|
330
336
|
}
|
|
331
337
|
}, {
|