@zohodesk/components 1.2.62 → 1.2.63
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/propValidation_report.html +1 -1
- package/README.md +5 -0
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +12 -4
- package/es/MultiSelect/AdvancedMultiSelect.js +12 -6
- package/es/MultiSelect/MultiSelect.js +10 -4
- package/es/MultiSelect/MultiSelectWithAvatar.js +4 -2
- package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/es/MultiSelect/props/defaultProps.js +8 -4
- package/es/MultiSelect/props/propTypes.js +4 -2
- 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/utils/dropDownUtils.js +10 -6
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +11 -5
- package/lib/MultiSelect/AdvancedMultiSelect.js +12 -6
- package/lib/MultiSelect/MultiSelect.js +8 -4
- package/lib/MultiSelect/MultiSelectWithAvatar.js +4 -2
- package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +28 -0
- package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +390 -0
- package/lib/MultiSelect/props/defaultProps.js +8 -4
- package/lib/MultiSelect/props/propTypes.js +3 -2
- 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/utils/dropDownUtils.js +12 -6
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -72,3 +72,393 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
|
|
|
72
72
|
</div>
|
|
73
73
|
</DocumentFragment>
|
|
74
74
|
`;
|
|
75
|
+
|
|
76
|
+
exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
|
|
77
|
+
<DocumentFragment>
|
|
78
|
+
<div
|
|
79
|
+
class="wrapper effect "
|
|
80
|
+
data-id="multiSelectComp"
|
|
81
|
+
data-selector-id="advancedMultiSelect"
|
|
82
|
+
data-test-id="multiSelectComp"
|
|
83
|
+
>
|
|
84
|
+
<div
|
|
85
|
+
class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
|
|
86
|
+
data-id="containerComponent"
|
|
87
|
+
data-selector-id="container"
|
|
88
|
+
data-test-id="containerComponent"
|
|
89
|
+
>
|
|
90
|
+
<div
|
|
91
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
92
|
+
data-id="multiSelectComp_textBox"
|
|
93
|
+
data-selector-id="box"
|
|
94
|
+
data-test-id="multiSelectComp_textBox"
|
|
95
|
+
>
|
|
96
|
+
<span
|
|
97
|
+
class=" custmSpan custmSpanMedium
|
|
98
|
+
"
|
|
99
|
+
/>
|
|
100
|
+
<div
|
|
101
|
+
class="container effect custmInputWrapper flex rowdir"
|
|
102
|
+
data-id="containerComponent"
|
|
103
|
+
data-selector-id="textBoxIcon"
|
|
104
|
+
data-test-id="containerComponent"
|
|
105
|
+
>
|
|
106
|
+
<div
|
|
107
|
+
class="grow basis shrinkOff"
|
|
108
|
+
data-id="boxComponent"
|
|
109
|
+
data-selector-id="box"
|
|
110
|
+
data-test-id="boxComponent"
|
|
111
|
+
>
|
|
112
|
+
<input
|
|
113
|
+
aria-controls="1"
|
|
114
|
+
aria-describedby="2"
|
|
115
|
+
aria-expanded="true"
|
|
116
|
+
aria-haspopup="true"
|
|
117
|
+
aria-owns="1"
|
|
118
|
+
autocomplete="off"
|
|
119
|
+
class=" container medium default effect borderColor_default "
|
|
120
|
+
data-id="textBoxIcon"
|
|
121
|
+
data-selector-id="textBoxIcon"
|
|
122
|
+
data-test-id="textBoxIcon"
|
|
123
|
+
maxlength="250"
|
|
124
|
+
role="combobox"
|
|
125
|
+
type="text"
|
|
126
|
+
value=""
|
|
127
|
+
/>
|
|
128
|
+
</div>
|
|
129
|
+
<div
|
|
130
|
+
class="iconContainer shrinkOff"
|
|
131
|
+
data-id="boxComponent"
|
|
132
|
+
data-selector-id="box"
|
|
133
|
+
data-test-id="boxComponent"
|
|
134
|
+
>
|
|
135
|
+
<div
|
|
136
|
+
class="flex cover rowdir"
|
|
137
|
+
data-id="containerComponent"
|
|
138
|
+
data-selector-id="container"
|
|
139
|
+
data-test-id="containerComponent"
|
|
140
|
+
/>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div
|
|
146
|
+
aria-multiselectable="true"
|
|
147
|
+
class="main container bottomMid default"
|
|
148
|
+
data-a11y-focus-main-area="true"
|
|
149
|
+
data-arrow-position="mid"
|
|
150
|
+
data-box-direction="bottom"
|
|
151
|
+
data-id="multiSelectComp_dropbox"
|
|
152
|
+
data-position="bottomMid"
|
|
153
|
+
data-selector-id="dropBox"
|
|
154
|
+
data-test-id="multiSelectComp_dropbox"
|
|
155
|
+
dot-ui-element="dropbox"
|
|
156
|
+
id="1"
|
|
157
|
+
role="listbox"
|
|
158
|
+
style="z-index: 4;"
|
|
159
|
+
>
|
|
160
|
+
<div
|
|
161
|
+
class="subContainer shadow boxPadding radius bounce defaultPalette"
|
|
162
|
+
data-id="multiSelectComp_dropbox_subcontainer"
|
|
163
|
+
data-selector-id="dropBox_subcontainer"
|
|
164
|
+
data-test-id="multiSelectComp_dropbox_subcontainer"
|
|
165
|
+
tabindex="-1"
|
|
166
|
+
>
|
|
167
|
+
<div
|
|
168
|
+
class="flex rowdir"
|
|
169
|
+
data-id="containerComponent"
|
|
170
|
+
data-selector-id="container"
|
|
171
|
+
data-test-id="containerComponent"
|
|
172
|
+
>
|
|
173
|
+
<div
|
|
174
|
+
class="grow basis shrinkOff"
|
|
175
|
+
data-id="boxComponent"
|
|
176
|
+
data-selector-id="box"
|
|
177
|
+
data-test-id="boxComponent"
|
|
178
|
+
>
|
|
179
|
+
<div
|
|
180
|
+
class="box flex cover coldir"
|
|
181
|
+
data-id="containerComponent"
|
|
182
|
+
data-selector-id="container"
|
|
183
|
+
data-test-id="containerComponent"
|
|
184
|
+
>
|
|
185
|
+
<div
|
|
186
|
+
class="small grow basis shrinkOn scrolly"
|
|
187
|
+
data-id="CardContent"
|
|
188
|
+
data-selector-id="cardContent"
|
|
189
|
+
data-test-id="CardContent"
|
|
190
|
+
>
|
|
191
|
+
<div
|
|
192
|
+
class="flex coldir"
|
|
193
|
+
data-id="containerComponent"
|
|
194
|
+
data-selector-id="container"
|
|
195
|
+
data-test-id="containerComponent"
|
|
196
|
+
tabindex="0"
|
|
197
|
+
>
|
|
198
|
+
<div
|
|
199
|
+
class="shrinkOff"
|
|
200
|
+
data-id="multiSelectComp_Options"
|
|
201
|
+
data-selector-id="box"
|
|
202
|
+
data-test-id="multiSelectComp_Options"
|
|
203
|
+
>
|
|
204
|
+
<li
|
|
205
|
+
aria-label="Apple"
|
|
206
|
+
aria-selected="false"
|
|
207
|
+
class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
|
|
208
|
+
data-a11y-inset-focus="true"
|
|
209
|
+
data-a11y-list-active="true"
|
|
210
|
+
data-id="Apple"
|
|
211
|
+
data-selector-id="listItem"
|
|
212
|
+
data-test-id="Apple"
|
|
213
|
+
data-title="Apple"
|
|
214
|
+
role="option"
|
|
215
|
+
tabindex="0"
|
|
216
|
+
>
|
|
217
|
+
<div
|
|
218
|
+
class="value basisAuto shrinkOn"
|
|
219
|
+
data-id="boxComponent"
|
|
220
|
+
data-selector-id="box"
|
|
221
|
+
data-test-id="boxComponent"
|
|
222
|
+
>
|
|
223
|
+
Apple
|
|
224
|
+
</div>
|
|
225
|
+
</li>
|
|
226
|
+
<li
|
|
227
|
+
aria-label="Orange"
|
|
228
|
+
aria-selected="false"
|
|
229
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
230
|
+
data-a11y-inset-focus="true"
|
|
231
|
+
data-a11y-list-active="false"
|
|
232
|
+
data-id="Orange"
|
|
233
|
+
data-selector-id="listItem"
|
|
234
|
+
data-test-id="Orange"
|
|
235
|
+
data-title="Orange"
|
|
236
|
+
role="option"
|
|
237
|
+
tabindex="0"
|
|
238
|
+
>
|
|
239
|
+
<div
|
|
240
|
+
class="value basisAuto shrinkOn"
|
|
241
|
+
data-id="boxComponent"
|
|
242
|
+
data-selector-id="box"
|
|
243
|
+
data-test-id="boxComponent"
|
|
244
|
+
>
|
|
245
|
+
Orange
|
|
246
|
+
</div>
|
|
247
|
+
</li>
|
|
248
|
+
<li
|
|
249
|
+
aria-label="string test"
|
|
250
|
+
aria-selected="false"
|
|
251
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
252
|
+
data-a11y-inset-focus="true"
|
|
253
|
+
data-a11y-list-active="false"
|
|
254
|
+
data-id="string test"
|
|
255
|
+
data-selector-id="listItem"
|
|
256
|
+
data-test-id="string test"
|
|
257
|
+
data-title="string test"
|
|
258
|
+
role="option"
|
|
259
|
+
tabindex="0"
|
|
260
|
+
>
|
|
261
|
+
<div
|
|
262
|
+
class="value basisAuto shrinkOn"
|
|
263
|
+
data-id="boxComponent"
|
|
264
|
+
data-selector-id="box"
|
|
265
|
+
data-test-id="boxComponent"
|
|
266
|
+
>
|
|
267
|
+
string test
|
|
268
|
+
</div>
|
|
269
|
+
</li>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</DocumentFragment>
|
|
280
|
+
`;
|
|
281
|
+
|
|
282
|
+
exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
|
|
283
|
+
<DocumentFragment>
|
|
284
|
+
<div
|
|
285
|
+
class="wrapper effect "
|
|
286
|
+
data-id="multiSelectComp"
|
|
287
|
+
data-selector-id="advancedMultiSelect"
|
|
288
|
+
data-test-id="multiSelectComp"
|
|
289
|
+
>
|
|
290
|
+
<div
|
|
291
|
+
class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
|
|
292
|
+
data-id="containerComponent"
|
|
293
|
+
data-selector-id="container"
|
|
294
|
+
data-test-id="containerComponent"
|
|
295
|
+
>
|
|
296
|
+
<div
|
|
297
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
298
|
+
data-id="multiSelectComp_textBox"
|
|
299
|
+
data-selector-id="box"
|
|
300
|
+
data-test-id="multiSelectComp_textBox"
|
|
301
|
+
>
|
|
302
|
+
<span
|
|
303
|
+
class=" custmSpan custmSpanMedium
|
|
304
|
+
"
|
|
305
|
+
/>
|
|
306
|
+
<div
|
|
307
|
+
class="container effect custmInputWrapper flex rowdir"
|
|
308
|
+
data-id="containerComponent"
|
|
309
|
+
data-selector-id="textBoxIcon"
|
|
310
|
+
data-test-id="containerComponent"
|
|
311
|
+
>
|
|
312
|
+
<div
|
|
313
|
+
class="grow basis shrinkOff"
|
|
314
|
+
data-id="boxComponent"
|
|
315
|
+
data-selector-id="box"
|
|
316
|
+
data-test-id="boxComponent"
|
|
317
|
+
>
|
|
318
|
+
<input
|
|
319
|
+
aria-controls="1"
|
|
320
|
+
aria-describedby="2"
|
|
321
|
+
aria-expanded="true"
|
|
322
|
+
aria-haspopup="true"
|
|
323
|
+
aria-owns="1"
|
|
324
|
+
autocomplete="off"
|
|
325
|
+
class=" container medium default effect borderColor_default "
|
|
326
|
+
data-id="textBoxIcon"
|
|
327
|
+
data-selector-id="textBoxIcon"
|
|
328
|
+
data-test-id="textBoxIcon"
|
|
329
|
+
maxlength="250"
|
|
330
|
+
role="combobox"
|
|
331
|
+
type="text"
|
|
332
|
+
value=""
|
|
333
|
+
/>
|
|
334
|
+
</div>
|
|
335
|
+
<div
|
|
336
|
+
class="iconContainer shrinkOff"
|
|
337
|
+
data-id="boxComponent"
|
|
338
|
+
data-selector-id="box"
|
|
339
|
+
data-test-id="boxComponent"
|
|
340
|
+
>
|
|
341
|
+
<div
|
|
342
|
+
class="flex cover rowdir"
|
|
343
|
+
data-id="containerComponent"
|
|
344
|
+
data-selector-id="container"
|
|
345
|
+
data-test-id="containerComponent"
|
|
346
|
+
/>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<div
|
|
352
|
+
aria-multiselectable="true"
|
|
353
|
+
class="main container bottomMid default"
|
|
354
|
+
data-a11y-focus-main-area="true"
|
|
355
|
+
data-arrow-position="mid"
|
|
356
|
+
data-box-direction="bottom"
|
|
357
|
+
data-id="multiSelectComp_dropbox"
|
|
358
|
+
data-position="bottomMid"
|
|
359
|
+
data-selector-id="dropBox"
|
|
360
|
+
data-test-id="multiSelectComp_dropbox"
|
|
361
|
+
dot-ui-element="dropbox"
|
|
362
|
+
id="1"
|
|
363
|
+
role="listbox"
|
|
364
|
+
style="z-index: 4;"
|
|
365
|
+
>
|
|
366
|
+
<div
|
|
367
|
+
class="subContainer shadow boxPadding radius bounce defaultPalette"
|
|
368
|
+
data-id="multiSelectComp_dropbox_subcontainer"
|
|
369
|
+
data-selector-id="dropBox_subcontainer"
|
|
370
|
+
data-test-id="multiSelectComp_dropbox_subcontainer"
|
|
371
|
+
tabindex="-1"
|
|
372
|
+
>
|
|
373
|
+
<div
|
|
374
|
+
class="flex rowdir"
|
|
375
|
+
data-id="containerComponent"
|
|
376
|
+
data-selector-id="container"
|
|
377
|
+
data-test-id="containerComponent"
|
|
378
|
+
>
|
|
379
|
+
<div
|
|
380
|
+
class="grow basis shrinkOff"
|
|
381
|
+
data-id="boxComponent"
|
|
382
|
+
data-selector-id="box"
|
|
383
|
+
data-test-id="boxComponent"
|
|
384
|
+
>
|
|
385
|
+
<div
|
|
386
|
+
class="box flex cover coldir"
|
|
387
|
+
data-id="containerComponent"
|
|
388
|
+
data-selector-id="container"
|
|
389
|
+
data-test-id="containerComponent"
|
|
390
|
+
>
|
|
391
|
+
<div
|
|
392
|
+
class="small grow basis shrinkOn scrolly"
|
|
393
|
+
data-id="CardContent"
|
|
394
|
+
data-selector-id="cardContent"
|
|
395
|
+
data-test-id="CardContent"
|
|
396
|
+
>
|
|
397
|
+
<div
|
|
398
|
+
class="flex coldir"
|
|
399
|
+
data-id="containerComponent"
|
|
400
|
+
data-selector-id="container"
|
|
401
|
+
data-test-id="containerComponent"
|
|
402
|
+
tabindex="0"
|
|
403
|
+
>
|
|
404
|
+
<div
|
|
405
|
+
class="shrinkOff"
|
|
406
|
+
data-id="multiSelectComp_Options"
|
|
407
|
+
data-selector-id="box"
|
|
408
|
+
data-test-id="multiSelectComp_Options"
|
|
409
|
+
>
|
|
410
|
+
<li
|
|
411
|
+
aria-label="Apple"
|
|
412
|
+
aria-selected="false"
|
|
413
|
+
class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
|
|
414
|
+
data-a11y-inset-focus="true"
|
|
415
|
+
data-a11y-list-active="true"
|
|
416
|
+
data-id="Apple"
|
|
417
|
+
data-selector-id="listItem"
|
|
418
|
+
data-test-id="Apple"
|
|
419
|
+
data-title="Apple"
|
|
420
|
+
role="option"
|
|
421
|
+
tabindex="0"
|
|
422
|
+
>
|
|
423
|
+
<div
|
|
424
|
+
class="value basisAuto shrinkOn"
|
|
425
|
+
data-id="boxComponent"
|
|
426
|
+
data-selector-id="box"
|
|
427
|
+
data-test-id="boxComponent"
|
|
428
|
+
>
|
|
429
|
+
Apple
|
|
430
|
+
</div>
|
|
431
|
+
</li>
|
|
432
|
+
<li
|
|
433
|
+
aria-label="Orange"
|
|
434
|
+
aria-selected="false"
|
|
435
|
+
class="list medium default mediumwithTick withBorder flex rowdir vCenter"
|
|
436
|
+
data-a11y-inset-focus="true"
|
|
437
|
+
data-a11y-list-active="false"
|
|
438
|
+
data-id="Orange"
|
|
439
|
+
data-selector-id="listItem"
|
|
440
|
+
data-test-id="Orange"
|
|
441
|
+
data-title="Orange"
|
|
442
|
+
role="option"
|
|
443
|
+
tabindex="0"
|
|
444
|
+
>
|
|
445
|
+
<div
|
|
446
|
+
class="value basisAuto shrinkOn"
|
|
447
|
+
data-id="boxComponent"
|
|
448
|
+
data-selector-id="box"
|
|
449
|
+
data-test-id="boxComponent"
|
|
450
|
+
>
|
|
451
|
+
Orange
|
|
452
|
+
</div>
|
|
453
|
+
</li>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</DocumentFragment>
|
|
464
|
+
`;
|
|
@@ -45,7 +45,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
|
|
|
45
45
|
needEffect: true,
|
|
46
46
|
palette: 'default',
|
|
47
47
|
isLoading: false,
|
|
48
|
-
dataSelectorId: 'advancedGroupMultiSelect'
|
|
48
|
+
dataSelectorId: 'advancedGroupMultiSelect',
|
|
49
|
+
allowValueFallback: true
|
|
49
50
|
};
|
|
50
51
|
exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
|
|
51
52
|
var AdvancedMultiSelect_defaultProps = {
|
|
@@ -80,7 +81,8 @@ var AdvancedMultiSelect_defaultProps = {
|
|
|
80
81
|
dataSelectorId: 'advancedMultiSelect',
|
|
81
82
|
customClass: {},
|
|
82
83
|
isAbsolutePositioningNeeded: true,
|
|
83
|
-
isRestrictScroll: false
|
|
84
|
+
isRestrictScroll: false,
|
|
85
|
+
allowValueFallback: true
|
|
84
86
|
};
|
|
85
87
|
exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
|
|
86
88
|
var EmptyState_defaultProps = {
|
|
@@ -129,7 +131,8 @@ var MultiSelect_defaultProps = {
|
|
|
129
131
|
selectedOptionsCount: 0,
|
|
130
132
|
cardHeaderName: '',
|
|
131
133
|
needResponsive: true,
|
|
132
|
-
customProps: {}
|
|
134
|
+
customProps: {},
|
|
135
|
+
allowValueFallback: true
|
|
133
136
|
};
|
|
134
137
|
exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
|
|
135
138
|
var MultiSelectHeader_defaultProps = {
|
|
@@ -168,7 +171,8 @@ var MultiSelectWithAvatar_defaultProps = {
|
|
|
168
171
|
dataSelectorId: 'multiSelectWithAvatar',
|
|
169
172
|
keepSelectedOptions: false,
|
|
170
173
|
customProps: {},
|
|
171
|
-
needResponsive: true
|
|
174
|
+
needResponsive: true,
|
|
175
|
+
allowValueFallback: true
|
|
172
176
|
};
|
|
173
177
|
exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
|
|
174
178
|
var SelectedOptions_defaultProps = {
|
|
@@ -131,7 +131,8 @@ var MultiSelect_propTypes = {
|
|
|
131
131
|
customProps: _propTypes["default"].shape({
|
|
132
132
|
TextBoxIconProps: _propTypes["default"].object
|
|
133
133
|
}),
|
|
134
|
-
isFocus: _propTypes["default"].bool
|
|
134
|
+
isFocus: _propTypes["default"].bool,
|
|
135
|
+
allowValueFallback: _propTypes["default"].bool
|
|
135
136
|
};
|
|
136
137
|
exports.MultiSelect_propTypes = MultiSelect_propTypes;
|
|
137
138
|
var MultiSelectHeader_propTypes = {
|
|
@@ -272,7 +273,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
|
|
|
272
273
|
needToCloseOnSelect: _propTypes["default"].func,
|
|
273
274
|
searchStr: _propTypes["default"].string,
|
|
274
275
|
children: _propTypes["default"].node
|
|
275
|
-
}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _AdvancedGroupMultiSe);
|
|
276
|
+
}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
|
|
276
277
|
exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
|
|
277
278
|
|
|
278
279
|
var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
|
|
@@ -246,9 +246,11 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
246
246
|
}, {
|
|
247
247
|
key: "handleGetGroupSelectOptions",
|
|
248
248
|
value: function handleGetGroupSelectOptions(props) {
|
|
249
|
-
var groupedOptions = props.groupedOptions
|
|
249
|
+
var groupedOptions = props.groupedOptions,
|
|
250
|
+
allowValueFallback = props.allowValueFallback;
|
|
250
251
|
return this.getGroupSelectOptions({
|
|
251
|
-
groupedOptions: groupedOptions
|
|
252
|
+
groupedOptions: groupedOptions,
|
|
253
|
+
allowValueFallback: allowValueFallback
|
|
252
254
|
});
|
|
253
255
|
}
|
|
254
256
|
}, {
|
package/lib/Select/Select.js
CHANGED
|
@@ -307,6 +307,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
|
|
|
307
307
|
var options = props.options,
|
|
308
308
|
valueField = props.valueField,
|
|
309
309
|
textField = props.textField,
|
|
310
|
+
allowValueFallback = props.allowValueFallback,
|
|
310
311
|
_props$customProps = props.customProps,
|
|
311
312
|
customProps = _props$customProps === void 0 ? {} : _props$customProps;
|
|
312
313
|
var _customProps$listItem = customProps.listItemProps,
|
|
@@ -315,7 +316,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
|
|
|
315
316
|
options: options,
|
|
316
317
|
valueField: valueField,
|
|
317
318
|
textField: textField,
|
|
318
|
-
listItemProps: listItemProps
|
|
319
|
+
listItemProps: listItemProps,
|
|
320
|
+
allowValueFallback: allowValueFallback
|
|
319
321
|
});
|
|
320
322
|
}
|
|
321
323
|
}, {
|
|
@@ -98,13 +98,15 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
|
|
|
98
98
|
var options = props.options,
|
|
99
99
|
valueField = props.valueField,
|
|
100
100
|
textField = props.textField,
|
|
101
|
-
imageField = props.imageField
|
|
101
|
+
imageField = props.imageField,
|
|
102
|
+
allowValueFallback = props.allowValueFallback;
|
|
102
103
|
return this.formatOptions({
|
|
103
104
|
options: options,
|
|
104
105
|
valueField: valueField,
|
|
105
106
|
textField: textField,
|
|
106
107
|
imageField: imageField,
|
|
107
|
-
optionType: 'avatar'
|
|
108
|
+
optionType: 'avatar',
|
|
109
|
+
allowValueFallback: allowValueFallback
|
|
108
110
|
});
|
|
109
111
|
}
|
|
110
112
|
}, {
|
|
@@ -45,7 +45,8 @@ var Select_defaultProps = {
|
|
|
45
45
|
iconOnHover: false,
|
|
46
46
|
customProps: {},
|
|
47
47
|
isLoading: false,
|
|
48
|
-
isAbsolutePositioningNeeded: true
|
|
48
|
+
isAbsolutePositioningNeeded: true,
|
|
49
|
+
allowValueFallback: true
|
|
49
50
|
};
|
|
50
51
|
exports.Select_defaultProps = Select_defaultProps;
|
|
51
52
|
var GroupSelect_defaultProps = {
|
|
@@ -83,7 +84,8 @@ var GroupSelect_defaultProps = {
|
|
|
83
84
|
i18nKeys: {},
|
|
84
85
|
iconOnHover: false,
|
|
85
86
|
isLoading: false,
|
|
86
|
-
customProps: {}
|
|
87
|
+
customProps: {},
|
|
88
|
+
allowValueFallback: true
|
|
87
89
|
};
|
|
88
90
|
exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
|
|
89
91
|
var SelectWithAvatar_defaultProps = {
|
|
@@ -109,7 +109,8 @@ var Select_propTypes = {
|
|
|
109
109
|
positionsOffset: _propTypes["default"].object,
|
|
110
110
|
targetOffset: _propTypes["default"].object,
|
|
111
111
|
isRestrictScroll: _propTypes["default"].bool,
|
|
112
|
-
dropBoxPortalId: _propTypes["default"].string
|
|
112
|
+
dropBoxPortalId: _propTypes["default"].string,
|
|
113
|
+
allowValueFallback: _propTypes["default"].bool
|
|
113
114
|
};
|
|
114
115
|
exports.Select_propTypes = Select_propTypes;
|
|
115
116
|
var GroupSelect_propTypes = {
|
|
@@ -195,7 +196,8 @@ var GroupSelect_propTypes = {
|
|
|
195
196
|
customProps: _propTypes["default"].shape({
|
|
196
197
|
TextBoxProps: _propTypes["default"].object,
|
|
197
198
|
TextBoxIconProps: _propTypes["default"].object
|
|
198
|
-
})
|
|
199
|
+
}),
|
|
200
|
+
allowValueFallback: _propTypes["default"].bool
|
|
199
201
|
};
|
|
200
202
|
exports.GroupSelect_propTypes = GroupSelect_propTypes;
|
|
201
203
|
|
|
@@ -142,6 +142,10 @@ var getListItemProps = function getListItemProps(props) {
|
|
|
142
142
|
return props.listItemProps || '';
|
|
143
143
|
};
|
|
144
144
|
|
|
145
|
+
var getAllowValueFallback = function getAllowValueFallback(props) {
|
|
146
|
+
return props.allowValueFallback !== false;
|
|
147
|
+
};
|
|
148
|
+
|
|
145
149
|
var makeGetMultiSelectFilterSuggestions = function makeGetMultiSelectFilterSuggestions() {
|
|
146
150
|
return (0, _reselect.createSelector)([getOptions, getSelectedOptionsSel, getSearchStr, getNeedSearch, getIsStartWithSearch, getKeepSelectedOptions], function (options, selectedOptions, searchStr, needSearch, isStartsWithSearch, keepSelectedOptions) {
|
|
147
151
|
var suggestions = [];
|
|
@@ -228,7 +232,7 @@ var extractOptionIdFromJson = function extractOptionIdFromJson(id, localData) {
|
|
|
228
232
|
exports.extractOptionIdFromJson = extractOptionIdFromJson;
|
|
229
233
|
|
|
230
234
|
var makeFormatOptions = function makeFormatOptions() {
|
|
231
|
-
return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps) {
|
|
235
|
+
return (0, _reselect.createSelector)([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback], function (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback) {
|
|
232
236
|
var revampOptions = [];
|
|
233
237
|
var remvampOptionIds = [];
|
|
234
238
|
var normalizedAllOptions = {};
|
|
@@ -244,7 +248,7 @@ var makeFormatOptions = function makeFormatOptions() {
|
|
|
244
248
|
impIconSize = option.iconSize,
|
|
245
249
|
listStyle = option.listItemProps;
|
|
246
250
|
var id = _typeof(option) === 'object' ? option[impValueField || valueField] : option;
|
|
247
|
-
var value = _typeof(option) === 'object' ? option[impTextField || textField] : option;
|
|
251
|
+
var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
|
|
248
252
|
var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : ''; // grouping options (group select/MultiSelect)
|
|
249
253
|
|
|
250
254
|
id = !(0, _Common.getIsEmptyValue)(id) ? optionIdGrouping(id, prefixText) : '';
|
|
@@ -297,7 +301,7 @@ var makeFormatOptions = function makeFormatOptions() {
|
|
|
297
301
|
exports.makeFormatOptions = makeFormatOptions;
|
|
298
302
|
|
|
299
303
|
var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptions() {
|
|
300
|
-
return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength) {
|
|
304
|
+
return (0, _reselect.createSelector)([getSelectedOptionsSel, getNormalizedFormatOptions, getSelectedOptionsLength, getAllowValueFallback], function (selectedOptions, normalizedFormatOptions, selectedOptionsLength, allowValueFallback) {
|
|
301
305
|
var output = [];
|
|
302
306
|
var revampSelectedOptions = [];
|
|
303
307
|
var normalizedSelectedOptions = {};
|
|
@@ -313,7 +317,8 @@ var makeGetMultiSelectSelectedOptions = function makeGetMultiSelectSelectedOptio
|
|
|
313
317
|
revampSelectedOptions.push(id);
|
|
314
318
|
output.push(normalizedFormatOptions[option]);
|
|
315
319
|
normalizedSelectedOptions[id] = normalizedFormatOptions[option];
|
|
316
|
-
} else if ((0, _Common.getIsEmptyValue)(id) && !(0, _Common.getIsEmptyValue)(option) && revampSelectedOptions.indexOf(option) === -1) {
|
|
320
|
+
} else if (allowValueFallback && (0, _Common.getIsEmptyValue)(id) && !(0, _Common.getIsEmptyValue)(option) && revampSelectedOptions.indexOf(option) === -1) {
|
|
321
|
+
//fallback case
|
|
317
322
|
var newObj = {
|
|
318
323
|
id: option,
|
|
319
324
|
value: option
|
|
@@ -412,7 +417,7 @@ var getGroupedOptions = function getGroupedOptions(props) {
|
|
|
412
417
|
var getFormatOptions = makeFormatOptions();
|
|
413
418
|
|
|
414
419
|
var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
|
|
415
|
-
return (0, _reselect.createSelector)([getGroupedOptions], function (groupedOptions) {
|
|
420
|
+
return (0, _reselect.createSelector)([getGroupedOptions, getAllowValueFallback], function (groupedOptions, allowValueFallback) {
|
|
416
421
|
var revampedGroups = [];
|
|
417
422
|
var allOptionIds = [];
|
|
418
423
|
var allNormalizedOptions = {}; //all group normalized options
|
|
@@ -435,7 +440,8 @@ var makeGetGroupSelectOptions = function makeGetGroupSelectOptions() {
|
|
|
435
440
|
options: options,
|
|
436
441
|
valueField: valueField,
|
|
437
442
|
textField: textField,
|
|
438
|
-
prefixText: groupId
|
|
443
|
+
prefixText: groupId,
|
|
444
|
+
allowValueFallback: allowValueFallback
|
|
439
445
|
}),
|
|
440
446
|
allOptions = _getFormatOptions.allOptions,
|
|
441
447
|
normalizedAllOptions = _getFormatOptions.normalizedAllOptions,
|