@zohodesk/components 1.4.21 → 1.4.22

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 (141) hide show
  1. package/README.md +29 -0
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +15 -0
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +15 -0
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +15 -0
  5. package/es/ColorSelect/ColorMultiSelect.js +38 -0
  6. package/es/ColorSelect/ColorSelect.module.css +3 -0
  7. package/es/ColorSelect/ColorSingleSelect.js +83 -0
  8. package/es/ColorSelect/__tests__/ColorMultiSelect.spec.js +71 -0
  9. package/es/ColorSelect/__tests__/ColorSingleSelect.spec.js +80 -0
  10. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +536 -0
  11. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +422 -0
  12. package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +33 -0
  13. package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +19 -0
  14. package/es/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js +79 -0
  15. package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +106 -0
  16. package/es/ColorSelect/_shared/ColorIndicator/props/defaultProps.js +8 -0
  17. package/es/ColorSelect/_shared/ColorIndicator/props/propTypes.js +10 -0
  18. package/es/ColorSelect/_shared/ColoredTag/ColoredTag.js +33 -0
  19. package/es/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js +50 -0
  20. package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +101 -0
  21. package/es/ColorSelect/_shared/ColoredTag/props/propTypes.js +10 -0
  22. package/es/ColorSelect/_shared/helpers/renderHelpers.js +43 -0
  23. package/es/ColorSelect/props/defaultProps.js +12 -0
  24. package/es/ColorSelect/props/propTypes.js +17 -0
  25. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -18
  26. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -6
  27. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -18
  28. package/es/ListItem/ListItem.js +6 -1
  29. package/es/ListItem/ListItem.module.css +6 -0
  30. package/es/ListItem/__tests__/ListItem.spec.js +8 -0
  31. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +47 -0
  32. package/es/ListItem/props/propTypes.js +1 -0
  33. package/es/MultiSelect/MultiSelect.js +11 -5
  34. package/es/MultiSelect/SelectedOptions.js +24 -1
  35. package/es/MultiSelect/Suggestions.js +4 -1
  36. package/es/MultiSelect/__tests__/MultiSelect.spec.js +38 -0
  37. package/es/MultiSelect/__tests__/SelectedOptions.spec.js +13 -0
  38. package/es/MultiSelect/__tests__/Suggestions.spec.js +12 -0
  39. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -3
  40. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -9
  41. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +91 -12
  42. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -3
  43. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +15 -0
  44. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +66 -0
  45. package/es/MultiSelect/props/propTypes.js +6 -0
  46. package/es/Select/Select.js +67 -5
  47. package/es/Select/__tests__/Select.spec.js +10 -0
  48. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -6
  49. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +111 -441
  50. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -6
  51. package/es/Select/props/defaultProps.js +2 -1
  52. package/es/Select/props/propTypes.js +3 -1
  53. package/es/TextBox/__tests__/TextBox.spec.js +1 -1
  54. package/es/TextBoxIcon/TextBoxIcon.js +17 -12
  55. package/es/TextBoxIcon/TextBoxIcon.module.css +3 -38
  56. package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +9 -2
  57. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +78 -224
  58. package/es/TextBoxIcon/props/propTypes.js +1 -2
  59. package/es/shared/ArrowIcon/ArrowIcon.js +51 -0
  60. package/es/shared/ArrowIcon/ArrowIcon.module.css +43 -0
  61. package/es/shared/ArrowIcon/__tests__/ArrowIcon.spec.js +100 -0
  62. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +221 -0
  63. package/es/shared/ArrowIcon/props/defaultProps.js +11 -0
  64. package/es/shared/ArrowIcon/props/propTypes.js +17 -0
  65. package/es/shared/InputFieldLine/InputFieldLine.js +45 -0
  66. package/es/shared/InputFieldLine/InputFieldLine.module.css +88 -0
  67. package/es/shared/InputFieldLine/__tests__/InputFieldLine.spec.js +114 -0
  68. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +194 -0
  69. package/es/shared/InputFieldLine/props/defaultProps.js +16 -0
  70. package/es/shared/InputFieldLine/props/propTypes.js +22 -0
  71. package/es/utils/Common.js +3 -2
  72. package/es/utils/dropDownUtils.js +7 -1
  73. package/lib/ColorSelect/ColorMultiSelect.js +71 -0
  74. package/lib/ColorSelect/ColorSelect.module.css +3 -0
  75. package/lib/ColorSelect/ColorSingleSelect.js +111 -0
  76. package/lib/ColorSelect/__tests__/ColorMultiSelect.spec.js +82 -0
  77. package/lib/ColorSelect/__tests__/ColorSingleSelect.spec.js +91 -0
  78. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +536 -0
  79. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +422 -0
  80. package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +47 -0
  81. package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +19 -0
  82. package/lib/ColorSelect/_shared/ColorIndicator/__tests__/ColorIndicator.spec.js +86 -0
  83. package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +106 -0
  84. package/lib/ColorSelect/_shared/ColorIndicator/props/defaultProps.js +15 -0
  85. package/lib/ColorSelect/_shared/ColorIndicator/props/propTypes.js +21 -0
  86. package/lib/ColorSelect/_shared/ColoredTag/ColoredTag.js +69 -0
  87. package/lib/ColorSelect/_shared/ColoredTag/__tests__/ColoredTag.spec.js +58 -0
  88. package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +101 -0
  89. package/lib/ColorSelect/_shared/ColoredTag/props/propTypes.js +29 -0
  90. package/lib/ColorSelect/_shared/helpers/renderHelpers.js +63 -0
  91. package/lib/ColorSelect/props/defaultProps.js +32 -0
  92. package/lib/ColorSelect/props/propTypes.js +39 -0
  93. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +3 -18
  94. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +1 -6
  95. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +3 -18
  96. package/lib/ListItem/ListItem.js +6 -1
  97. package/lib/ListItem/ListItem.module.css +6 -0
  98. package/lib/ListItem/__tests__/ListItem.spec.js +12 -4
  99. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +47 -0
  100. package/lib/ListItem/props/propTypes.js +1 -0
  101. package/lib/MultiSelect/MultiSelect.js +11 -5
  102. package/lib/MultiSelect/SelectedOptions.js +24 -1
  103. package/lib/MultiSelect/Suggestions.js +5 -1
  104. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +42 -2
  105. package/lib/MultiSelect/__tests__/SelectedOptions.spec.js +15 -0
  106. package/lib/MultiSelect/__tests__/Suggestions.spec.js +16 -2
  107. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +1 -3
  108. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +3 -9
  109. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +91 -12
  110. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +1 -3
  111. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +15 -0
  112. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +66 -0
  113. package/lib/MultiSelect/props/propTypes.js +6 -0
  114. package/lib/Select/Select.js +67 -4
  115. package/lib/Select/__tests__/Select.spec.js +12 -0
  116. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +1 -6
  117. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +111 -441
  118. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +1 -6
  119. package/lib/Select/props/defaultProps.js +2 -1
  120. package/lib/Select/props/propTypes.js +3 -1
  121. package/lib/TextBox/__tests__/TextBox.spec.js +36 -36
  122. package/lib/TextBoxIcon/TextBoxIcon.js +18 -13
  123. package/lib/TextBoxIcon/TextBoxIcon.module.css +3 -38
  124. package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +9 -2
  125. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +78 -224
  126. package/lib/TextBoxIcon/props/propTypes.js +1 -2
  127. package/lib/shared/ArrowIcon/ArrowIcon.js +65 -0
  128. package/lib/shared/ArrowIcon/ArrowIcon.module.css +43 -0
  129. package/lib/shared/ArrowIcon/__tests__/ArrowIcon.spec.js +107 -0
  130. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +221 -0
  131. package/lib/shared/ArrowIcon/props/defaultProps.js +18 -0
  132. package/lib/shared/ArrowIcon/props/propTypes.js +28 -0
  133. package/lib/shared/InputFieldLine/InputFieldLine.js +57 -0
  134. package/lib/shared/InputFieldLine/InputFieldLine.module.css +88 -0
  135. package/lib/shared/InputFieldLine/__tests__/InputFieldLine.spec.js +122 -0
  136. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +194 -0
  137. package/lib/shared/InputFieldLine/props/defaultProps.js +23 -0
  138. package/lib/shared/InputFieldLine/props/propTypes.js +39 -0
  139. package/lib/utils/Common.js +8 -4
  140. package/lib/utils/dropDownUtils.js +10 -1
  141. package/package.json +9 -7
package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap ADDED
@@ -0,0 +1,536 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`ColorMultiSelect Should render the default selected value 1`] = `
4
+ <DocumentFragment>
5
+ <div
6
+ class="wrapper effect"
7
+ data-id="multiSelect"
8
+ data-selector-id="multiSelect"
9
+ data-test-id="multiSelect"
10
+ >
11
+ <div
12
+ class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
13
+ data-id="containerComponent"
14
+ data-selector-id="container"
15
+ data-test-id="containerComponent"
16
+ >
17
+ <div
18
+ class="wrapper grow basisAuto shrinkOn"
19
+ data-id="boxComponent"
20
+ data-selector-id="box"
21
+ data-test-id="boxComponent"
22
+ >
23
+ <span
24
+ class=" custmSpan custmSpanMedium
25
+ "
26
+ />
27
+ <div
28
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
29
+ data-selector-id="textBoxIcon"
30
+ >
31
+ <div
32
+ class="grow basis shrinkOff"
33
+ data-id="boxComponent"
34
+ data-selector-id="box"
35
+ data-test-id="boxComponent"
36
+ >
37
+ <input
38
+ aria-expanded="false"
39
+ aria-haspopup="true"
40
+ aria-required="true"
41
+ autocomplete="off"
42
+ class=" container medium default effect borderColor_default "
43
+ data-id="multiSelect_textBox"
44
+ data-selector-id="textBoxIcon"
45
+ data-test-id="multiSelect_textBox"
46
+ maxlength="250"
47
+ role="combobox"
48
+ type="text"
49
+ value=""
50
+ />
51
+ </div>
52
+ <div
53
+ class="iconContainer shrinkOff"
54
+ data-id="boxComponent"
55
+ data-selector-id="box"
56
+ data-test-id="boxComponent"
57
+ >
58
+ <div
59
+ class="flex cover rowdir"
60
+ data-id="containerComponent"
61
+ data-selector-id="container"
62
+ data-test-id="containerComponent"
63
+ >
64
+ <div
65
+ class="icon shrinkOff"
66
+ data-id="boxComponent"
67
+ data-selector-id="box"
68
+ data-test-id="boxComponent"
69
+ >
70
+ <div
71
+ class="rightPlaceholder inflex rowdir vCenter"
72
+ data-id="containerComponent"
73
+ data-selector-id="container"
74
+ data-test-id="containerComponent"
75
+ />
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </DocumentFragment>
84
+ `;
85
+
86
+ exports[`ColorMultiSelect Should render the selected value 1`] = `
87
+ <DocumentFragment>
88
+ <div
89
+ class="wrapper effect"
90
+ data-id="multiSelect"
91
+ data-selector-id="multiSelect"
92
+ data-test-id="multiSelect"
93
+ >
94
+ <div
95
+ class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
96
+ data-id="containerComponent"
97
+ data-selector-id="container"
98
+ data-test-id="containerComponent"
99
+ >
100
+ <div
101
+ class="tag medium shrinkOff"
102
+ data-id="multiSelect_selectedOptions"
103
+ data-selector-id="box"
104
+ data-test-id="multiSelect_selectedOptions"
105
+ >
106
+ <div
107
+ aria-labelledby="7"
108
+ class="container effect medium lgRadius danger pointer "
109
+ data-id="tag_Tag"
110
+ data-selector-id="tag"
111
+ data-test-id="tag_Tag"
112
+ data-title="Red"
113
+ style="--tag_bg_color: #ff6e6e; --tag_text_color: black; --tag_border_color: black;"
114
+ tabindex="0"
115
+ >
116
+ <div
117
+ aria-hidden="true"
118
+ class="text mediumtext"
119
+ id="7"
120
+ >
121
+ Red
122
+ </div>
123
+ <button
124
+ aria-label="Delete"
125
+ class="buttonReset close
126
+ lgRadiusClose
127
+ closedanger"
128
+ data-id="tag_RemoveTag"
129
+ data-test-id="tag_RemoveTag"
130
+ type="button"
131
+ value="text"
132
+ >
133
+ <div
134
+ class="flex cover coldir both"
135
+ data-id="containerComponent"
136
+ data-selector-id="container"
137
+ data-test-id="containerComponent"
138
+ >
139
+ <i
140
+ aria-hidden="true"
141
+ class="zd_font_icons basic icon-close2 fbold "
142
+ data-id="fontIcon"
143
+ data-selector-id="fontIcon"
144
+ data-test-id="fontIcon"
145
+ style="--zd-iconfont-size: var(--zd_font_size8);"
146
+ />
147
+ </div>
148
+ </button>
149
+ </div>
150
+ </div>
151
+ <div
152
+ class="tag medium shrinkOff"
153
+ data-id="multiSelect_selectedOptions"
154
+ data-selector-id="box"
155
+ data-test-id="multiSelect_selectedOptions"
156
+ >
157
+ <div
158
+ aria-labelledby="8"
159
+ class="container effect medium lgRadius danger pointer "
160
+ data-id="tag_Tag"
161
+ data-selector-id="tag"
162
+ data-test-id="tag_Tag"
163
+ data-title="Green"
164
+ style="--tag_bg_color: #77d779; --tag_text_color: black; --tag_border_color: black;"
165
+ tabindex="0"
166
+ >
167
+ <div
168
+ aria-hidden="true"
169
+ class="text mediumtext"
170
+ id="8"
171
+ >
172
+ Green
173
+ </div>
174
+ <button
175
+ aria-label="Delete"
176
+ class="buttonReset close
177
+ lgRadiusClose
178
+ closedanger"
179
+ data-id="tag_RemoveTag"
180
+ data-test-id="tag_RemoveTag"
181
+ type="button"
182
+ value="text"
183
+ >
184
+ <div
185
+ class="flex cover coldir both"
186
+ data-id="containerComponent"
187
+ data-selector-id="container"
188
+ data-test-id="containerComponent"
189
+ >
190
+ <i
191
+ aria-hidden="true"
192
+ class="zd_font_icons basic icon-close2 fbold "
193
+ data-id="fontIcon"
194
+ data-selector-id="fontIcon"
195
+ data-test-id="fontIcon"
196
+ style="--zd-iconfont-size: var(--zd_font_size8);"
197
+ />
198
+ </div>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ <div
203
+ class="wrapper grow basisAuto shrinkOn"
204
+ data-id="boxComponent"
205
+ data-selector-id="box"
206
+ data-test-id="boxComponent"
207
+ >
208
+ <span
209
+ class=" custmSpan custmSpanMedium clearIconSpace
210
+ "
211
+ />
212
+ <div
213
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
214
+ data-selector-id="textBoxIcon"
215
+ >
216
+ <div
217
+ class="grow basis shrinkOff"
218
+ data-id="boxComponent"
219
+ data-selector-id="box"
220
+ data-test-id="boxComponent"
221
+ >
222
+ <input
223
+ aria-expanded="false"
224
+ aria-haspopup="true"
225
+ aria-required="true"
226
+ autocomplete="off"
227
+ class=" container medium default effect borderColor_default "
228
+ data-id="multiSelect_textBox"
229
+ data-selector-id="textBoxIcon"
230
+ data-test-id="multiSelect_textBox"
231
+ maxlength="250"
232
+ placeholder=""
233
+ role="combobox"
234
+ type="text"
235
+ value=""
236
+ />
237
+ </div>
238
+ <div
239
+ class="iconContainer shrinkOff"
240
+ data-id="boxComponent"
241
+ data-selector-id="box"
242
+ data-test-id="boxComponent"
243
+ >
244
+ <div
245
+ class="flex cover rowdir"
246
+ data-id="containerComponent"
247
+ data-selector-id="container"
248
+ data-test-id="containerComponent"
249
+ >
250
+ <div
251
+ class="icon shrinkOff"
252
+ data-id="boxComponent"
253
+ data-selector-id="box"
254
+ data-test-id="boxComponent"
255
+ >
256
+ <div
257
+ class="rightPlaceholder inflex rowdir vCenter"
258
+ data-id="containerComponent"
259
+ data-selector-id="container"
260
+ data-test-id="containerComponent"
261
+ >
262
+ <button
263
+ class="delete defaultDelete shrinkOff"
264
+ data-id="multiSelect_clearIcon"
265
+ data-selector-id="box"
266
+ data-test-id="multiSelect_clearIcon"
267
+ data-title="Clear all"
268
+ >
269
+ <i
270
+ aria-hidden="true"
271
+ class="zd_font_icons basic icon-delete rtl "
272
+ data-id="fontIcon"
273
+ data-selector-id="fontIcon"
274
+ data-test-id="fontIcon"
275
+ style="--zd-iconfont-size: var(--zd_font_size15);"
276
+ />
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </DocumentFragment>
287
+ `;
288
+
289
+ exports[`ColorMultiSelect rendering the defult props 1`] = `
290
+ <DocumentFragment>
291
+ <div
292
+ class="wrapper effect"
293
+ data-id="multiSelect"
294
+ data-selector-id="multiSelect"
295
+ data-test-id="multiSelect"
296
+ >
297
+ <div
298
+ class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
299
+ data-id="containerComponent"
300
+ data-selector-id="container"
301
+ data-test-id="containerComponent"
302
+ >
303
+ <div
304
+ class="wrapper grow basisAuto shrinkOn"
305
+ data-id="boxComponent"
306
+ data-selector-id="box"
307
+ data-test-id="boxComponent"
308
+ >
309
+ <span
310
+ class=" custmSpan custmSpanMedium
311
+ "
312
+ />
313
+ <div
314
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
315
+ data-selector-id="textBoxIcon"
316
+ >
317
+ <div
318
+ class="grow basis shrinkOff"
319
+ data-id="boxComponent"
320
+ data-selector-id="box"
321
+ data-test-id="boxComponent"
322
+ >
323
+ <input
324
+ aria-expanded="false"
325
+ aria-haspopup="true"
326
+ aria-required="true"
327
+ autocomplete="off"
328
+ class=" container medium default effect borderColor_default "
329
+ data-id="multiSelect_textBox"
330
+ data-selector-id="textBoxIcon"
331
+ data-test-id="multiSelect_textBox"
332
+ maxlength="250"
333
+ role="combobox"
334
+ type="text"
335
+ value=""
336
+ />
337
+ </div>
338
+ <div
339
+ class="iconContainer shrinkOff"
340
+ data-id="boxComponent"
341
+ data-selector-id="box"
342
+ data-test-id="boxComponent"
343
+ >
344
+ <div
345
+ class="flex cover rowdir"
346
+ data-id="containerComponent"
347
+ data-selector-id="container"
348
+ data-test-id="containerComponent"
349
+ >
350
+ <div
351
+ class="icon shrinkOff"
352
+ data-id="boxComponent"
353
+ data-selector-id="box"
354
+ data-test-id="boxComponent"
355
+ >
356
+ <div
357
+ class="rightPlaceholder inflex rowdir vCenter"
358
+ data-id="containerComponent"
359
+ data-selector-id="container"
360
+ data-test-id="containerComponent"
361
+ />
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </DocumentFragment>
370
+ `;
371
+
372
+ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
373
+ <DocumentFragment>
374
+ <div
375
+ class="wrapper effect"
376
+ data-id="multiSelect"
377
+ data-selector-id="multiSelect"
378
+ data-test-id="multiSelect"
379
+ >
380
+ <div
381
+ class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
382
+ data-id="containerComponent"
383
+ data-selector-id="container"
384
+ data-test-id="containerComponent"
385
+ >
386
+ <div
387
+ class="wrapper grow basisAuto shrinkOn"
388
+ data-id="boxComponent"
389
+ data-selector-id="box"
390
+ data-test-id="boxComponent"
391
+ >
392
+ <span
393
+ class=" custmSpan custmSpanMedium
394
+ "
395
+ />
396
+ <div
397
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
398
+ data-selector-id="textBoxIcon"
399
+ >
400
+ <div
401
+ class="grow basis shrinkOff"
402
+ data-id="boxComponent"
403
+ data-selector-id="box"
404
+ data-test-id="boxComponent"
405
+ >
406
+ <input
407
+ aria-expanded="false"
408
+ aria-haspopup="true"
409
+ aria-required="true"
410
+ autocomplete="off"
411
+ class=" container medium default effect borderColor_default "
412
+ data-id="multiSelect_textBox"
413
+ data-selector-id="textBoxIcon"
414
+ data-test-id="multiSelect_textBox"
415
+ maxlength="250"
416
+ role="combobox"
417
+ type="text"
418
+ value=""
419
+ />
420
+ </div>
421
+ <div
422
+ class="iconContainer shrinkOff"
423
+ data-id="boxComponent"
424
+ data-selector-id="box"
425
+ data-test-id="boxComponent"
426
+ >
427
+ <div
428
+ class="flex cover rowdir"
429
+ data-id="containerComponent"
430
+ data-selector-id="container"
431
+ data-test-id="containerComponent"
432
+ >
433
+ <div
434
+ class="icon shrinkOff"
435
+ data-id="boxComponent"
436
+ data-selector-id="box"
437
+ data-test-id="boxComponent"
438
+ >
439
+ <div
440
+ class="rightPlaceholder inflex rowdir vCenter"
441
+ data-id="containerComponent"
442
+ data-selector-id="container"
443
+ data-test-id="containerComponent"
444
+ />
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </DocumentFragment>
453
+ `;
454
+
455
+ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
456
+ <DocumentFragment>
457
+ <div
458
+ class="wrapper effect"
459
+ data-id="multiSelect"
460
+ data-selector-id="multiSelect"
461
+ data-test-id="multiSelect"
462
+ >
463
+ <div
464
+ class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
465
+ data-id="containerComponent"
466
+ data-selector-id="container"
467
+ data-test-id="containerComponent"
468
+ >
469
+ <div
470
+ class="wrapper grow basisAuto shrinkOn"
471
+ data-id="boxComponent"
472
+ data-selector-id="box"
473
+ data-test-id="boxComponent"
474
+ >
475
+ <span
476
+ class=" custmSpan custmSpanMedium
477
+ "
478
+ />
479
+ <div
480
+ class="varClass customContainer effect container custmInputWrapper flex rowdir"
481
+ data-selector-id="textBoxIcon"
482
+ >
483
+ <div
484
+ class="grow basis shrinkOff"
485
+ data-id="boxComponent"
486
+ data-selector-id="box"
487
+ data-test-id="boxComponent"
488
+ >
489
+ <input
490
+ aria-expanded="false"
491
+ aria-haspopup="true"
492
+ aria-required="true"
493
+ autocomplete="off"
494
+ class=" container medium default effect borderColor_default "
495
+ data-id="multiSelect_textBox"
496
+ data-selector-id="textBoxIcon"
497
+ data-test-id="multiSelect_textBox"
498
+ maxlength="250"
499
+ role="combobox"
500
+ type="text"
501
+ value=""
502
+ />
503
+ </div>
504
+ <div
505
+ class="iconContainer shrinkOff"
506
+ data-id="boxComponent"
507
+ data-selector-id="box"
508
+ data-test-id="boxComponent"
509
+ >
510
+ <div
511
+ class="flex cover rowdir"
512
+ data-id="containerComponent"
513
+ data-selector-id="container"
514
+ data-test-id="containerComponent"
515
+ >
516
+ <div
517
+ class="icon shrinkOff"
518
+ data-id="boxComponent"
519
+ data-selector-id="box"
520
+ data-test-id="boxComponent"
521
+ >
522
+ <div
523
+ class="rightPlaceholder inflex rowdir vCenter"
524
+ data-id="containerComponent"
525
+ data-selector-id="container"
526
+ data-test-id="containerComponent"
527
+ />
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </DocumentFragment>
536
+ `;