@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

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