@zohodesk/components 1.4.7 → 1.4.9
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 +17 -4
- package/es/Accordion/Accordion.js +1 -1
- package/es/Card/Card.js +1 -1
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +16 -8
- package/es/MultiSelect/AdvancedMultiSelect.js +13 -6
- package/es/MultiSelect/EmptyState.js +2 -1
- package/es/MultiSelect/MultiSelect.js +27 -16
- package/es/MultiSelect/MultiSelectWithAvatar.js +9 -2
- package/es/MultiSelect/SelectedOptions.js +4 -2
- package/es/MultiSelect/Suggestions.js +10 -2
- package/es/MultiSelect/__tests__/MultiSelect.spec.js +25 -0
- package/es/MultiSelect/__tests__/Suggestions.spec.js +58 -0
- package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +253 -0
- package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +343 -0
- package/es/MultiSelect/constants.js +6 -0
- package/es/MultiSelect/props/propTypes.js +15 -55
- package/es/Popup/Popup.js +45 -17
- package/es/Popup/Registry.js +1 -0
- package/es/Select/Select.js +1 -1
- package/es/Select/__tests__/Select.spec.js +8 -1
- package/es/utils/dropDownUtils.js +25 -6
- package/es/v1/Popup/Popup.js +1 -1
- package/es/v1/Select/Select.js +1 -1
- package/lib/Accordion/Accordion.js +2 -2
- package/lib/Card/Card.js +2 -2
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +94 -83
- package/lib/MultiSelect/AdvancedMultiSelect.js +16 -7
- package/lib/MultiSelect/EmptyState.js +3 -1
- package/lib/MultiSelect/MultiSelect.js +30 -17
- package/lib/MultiSelect/MultiSelectWithAvatar.js +11 -3
- package/lib/MultiSelect/SelectedOptions.js +4 -2
- package/lib/MultiSelect/Suggestions.js +10 -2
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +25 -0
- package/lib/MultiSelect/__tests__/Suggestions.spec.js +58 -0
- package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +253 -0
- package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +343 -0
- package/lib/MultiSelect/constants.js +13 -0
- package/lib/MultiSelect/props/propTypes.js +14 -55
- package/lib/Popup/Popup.js +54 -18
- package/lib/Popup/Registry.js +1 -0
- package/lib/Select/Select.js +2 -2
- package/lib/Select/__tests__/Select.spec.js +8 -1
- package/lib/utils/dropDownUtils.js +24 -3
- package/lib/v1/Popup/Popup.js +2 -2
- package/lib/v1/Select/Select.js +2 -2
- package/package.json +11 -9
|
@@ -84,3 +84,256 @@ exports[`MultiSelect rendering the defult props 1`] = `
|
|
|
84
84
|
</div>
|
|
85
85
|
</DocumentFragment>
|
|
86
86
|
`;
|
|
87
|
+
|
|
88
|
+
exports[`MultiSelect rendering with limit feature 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="5"
|
|
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="text1"
|
|
115
|
+
tabindex="0"
|
|
116
|
+
>
|
|
117
|
+
<div
|
|
118
|
+
aria-hidden="true"
|
|
119
|
+
class="text mediumtext"
|
|
120
|
+
id="5"
|
|
121
|
+
>
|
|
122
|
+
text1
|
|
123
|
+
</div>
|
|
124
|
+
<button
|
|
125
|
+
aria-label="Delete"
|
|
126
|
+
class="buttonReset close
|
|
127
|
+
lgRadiusClose
|
|
128
|
+
closedanger"
|
|
129
|
+
data-id="tag_RemoveTag"
|
|
130
|
+
data-test-id="tag_RemoveTag"
|
|
131
|
+
type="button"
|
|
132
|
+
value="text"
|
|
133
|
+
>
|
|
134
|
+
<div
|
|
135
|
+
class="flex cover coldir both"
|
|
136
|
+
data-id="containerComponent"
|
|
137
|
+
data-selector-id="container"
|
|
138
|
+
data-test-id="containerComponent"
|
|
139
|
+
>
|
|
140
|
+
<i
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
143
|
+
data-id="fontIcon"
|
|
144
|
+
data-selector-id="fontIcon"
|
|
145
|
+
data-test-id="fontIcon"
|
|
146
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
147
|
+
/>
|
|
148
|
+
</div>
|
|
149
|
+
</button>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
<div
|
|
153
|
+
class="tag medium shrinkOff"
|
|
154
|
+
data-id="multiSelect_selectedOptions"
|
|
155
|
+
data-selector-id="box"
|
|
156
|
+
data-test-id="multiSelect_selectedOptions"
|
|
157
|
+
>
|
|
158
|
+
<div
|
|
159
|
+
aria-labelledby="6"
|
|
160
|
+
class="container effect medium lgRadius danger pointer "
|
|
161
|
+
data-id="tag_Tag"
|
|
162
|
+
data-selector-id="tag"
|
|
163
|
+
data-test-id="tag_Tag"
|
|
164
|
+
data-title="text2"
|
|
165
|
+
tabindex="0"
|
|
166
|
+
>
|
|
167
|
+
<div
|
|
168
|
+
aria-hidden="true"
|
|
169
|
+
class="text mediumtext"
|
|
170
|
+
id="6"
|
|
171
|
+
>
|
|
172
|
+
text2
|
|
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="tag medium shrinkOff"
|
|
204
|
+
data-id="multiSelect_selectedOptions"
|
|
205
|
+
data-selector-id="box"
|
|
206
|
+
data-test-id="multiSelect_selectedOptions"
|
|
207
|
+
>
|
|
208
|
+
<div
|
|
209
|
+
aria-labelledby="7"
|
|
210
|
+
class="container effect medium lgRadius danger pointer "
|
|
211
|
+
data-id="tag_Tag"
|
|
212
|
+
data-selector-id="tag"
|
|
213
|
+
data-test-id="tag_Tag"
|
|
214
|
+
data-title="text3"
|
|
215
|
+
tabindex="0"
|
|
216
|
+
>
|
|
217
|
+
<div
|
|
218
|
+
aria-hidden="true"
|
|
219
|
+
class="text mediumtext"
|
|
220
|
+
id="7"
|
|
221
|
+
>
|
|
222
|
+
text3
|
|
223
|
+
</div>
|
|
224
|
+
<button
|
|
225
|
+
aria-label="Delete"
|
|
226
|
+
class="buttonReset close
|
|
227
|
+
lgRadiusClose
|
|
228
|
+
closedanger"
|
|
229
|
+
data-id="tag_RemoveTag"
|
|
230
|
+
data-test-id="tag_RemoveTag"
|
|
231
|
+
type="button"
|
|
232
|
+
value="text"
|
|
233
|
+
>
|
|
234
|
+
<div
|
|
235
|
+
class="flex cover coldir both"
|
|
236
|
+
data-id="containerComponent"
|
|
237
|
+
data-selector-id="container"
|
|
238
|
+
data-test-id="containerComponent"
|
|
239
|
+
>
|
|
240
|
+
<i
|
|
241
|
+
aria-hidden="true"
|
|
242
|
+
class="zd_font_icons basic icon-close2 fbold "
|
|
243
|
+
data-id="fontIcon"
|
|
244
|
+
data-selector-id="fontIcon"
|
|
245
|
+
data-test-id="fontIcon"
|
|
246
|
+
style="--zd-iconfont-size: var(--zd_font_size8);"
|
|
247
|
+
/>
|
|
248
|
+
</div>
|
|
249
|
+
</button>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
<div
|
|
253
|
+
class="wrapper grow basisAuto shrinkOn"
|
|
254
|
+
data-id="boxComponent"
|
|
255
|
+
data-selector-id="box"
|
|
256
|
+
data-test-id="boxComponent"
|
|
257
|
+
>
|
|
258
|
+
<span
|
|
259
|
+
class=" custmSpan custmSpanMedium clearIconSpace
|
|
260
|
+
"
|
|
261
|
+
/>
|
|
262
|
+
<div
|
|
263
|
+
class="container effect custmInputWrapper flex rowdir"
|
|
264
|
+
data-id="containerComponent"
|
|
265
|
+
data-selector-id="textBoxIcon"
|
|
266
|
+
data-test-id="containerComponent"
|
|
267
|
+
>
|
|
268
|
+
<div
|
|
269
|
+
class="grow basis shrinkOff"
|
|
270
|
+
data-id="boxComponent"
|
|
271
|
+
data-selector-id="box"
|
|
272
|
+
data-test-id="boxComponent"
|
|
273
|
+
>
|
|
274
|
+
<input
|
|
275
|
+
aria-expanded="false"
|
|
276
|
+
aria-haspopup="true"
|
|
277
|
+
aria-required="true"
|
|
278
|
+
autocomplete="off"
|
|
279
|
+
class=" container medium default effect borderColor_default "
|
|
280
|
+
data-id="multiSelect_textBox"
|
|
281
|
+
data-selector-id="textBoxIcon"
|
|
282
|
+
data-test-id="multiSelect_textBox"
|
|
283
|
+
maxlength="250"
|
|
284
|
+
placeholder=""
|
|
285
|
+
role="combobox"
|
|
286
|
+
type="text"
|
|
287
|
+
value=""
|
|
288
|
+
/>
|
|
289
|
+
</div>
|
|
290
|
+
<div
|
|
291
|
+
class="iconContainer shrinkOff"
|
|
292
|
+
data-id="boxComponent"
|
|
293
|
+
data-selector-id="box"
|
|
294
|
+
data-test-id="boxComponent"
|
|
295
|
+
>
|
|
296
|
+
<div
|
|
297
|
+
class="flex cover rowdir"
|
|
298
|
+
data-id="containerComponent"
|
|
299
|
+
data-selector-id="container"
|
|
300
|
+
data-test-id="containerComponent"
|
|
301
|
+
>
|
|
302
|
+
<div
|
|
303
|
+
class="icon shrinkOff"
|
|
304
|
+
data-id="boxComponent"
|
|
305
|
+
data-selector-id="box"
|
|
306
|
+
data-test-id="boxComponent"
|
|
307
|
+
>
|
|
308
|
+
<div
|
|
309
|
+
class="rightPlaceholder inflex rowdir vCenter"
|
|
310
|
+
data-id="containerComponent"
|
|
311
|
+
data-selector-id="container"
|
|
312
|
+
data-test-id="containerComponent"
|
|
313
|
+
>
|
|
314
|
+
<button
|
|
315
|
+
class="delete defaultDelete shrinkOff"
|
|
316
|
+
data-id="multiSelect_clearIcon"
|
|
317
|
+
data-selector-id="box"
|
|
318
|
+
data-test-id="multiSelect_clearIcon"
|
|
319
|
+
data-title="Clear Selected Items"
|
|
320
|
+
>
|
|
321
|
+
<i
|
|
322
|
+
aria-hidden="true"
|
|
323
|
+
class="zd_font_icons basic icon-delete rtl "
|
|
324
|
+
data-id="fontIcon"
|
|
325
|
+
data-selector-id="fontIcon"
|
|
326
|
+
data-test-id="fontIcon"
|
|
327
|
+
style="--zd-iconfont-size: var(--zd_font_size15);"
|
|
328
|
+
/>
|
|
329
|
+
</button>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
</DocumentFragment>
|
|
339
|
+
`;
|
|
@@ -18,3 +18,346 @@ exports[`Suggestions rendering the defult props 1`] = `
|
|
|
18
18
|
</div>
|
|
19
19
|
</DocumentFragment>
|
|
20
20
|
`;
|
|
21
|
+
|
|
22
|
+
exports[`Suggestions rendering with limit props 1`] = `
|
|
23
|
+
<DocumentFragment>
|
|
24
|
+
<div
|
|
25
|
+
class="flex coldir"
|
|
26
|
+
data-id="containerComponent"
|
|
27
|
+
data-selector-id="container"
|
|
28
|
+
data-test-id="containerComponent"
|
|
29
|
+
tabindex="0"
|
|
30
|
+
>
|
|
31
|
+
<div
|
|
32
|
+
class="shrinkOff"
|
|
33
|
+
data-id="undefined"
|
|
34
|
+
data-selector-id="box"
|
|
35
|
+
data-test-id="undefined"
|
|
36
|
+
>
|
|
37
|
+
<li
|
|
38
|
+
aria-label="text2"
|
|
39
|
+
aria-selected="true"
|
|
40
|
+
class="list medium default activedefault activewithBorder flex rowdir vCenter"
|
|
41
|
+
data-a11y-inset-focus="true"
|
|
42
|
+
data-a11y-list-active="false"
|
|
43
|
+
data-id="text2"
|
|
44
|
+
data-selected="true"
|
|
45
|
+
data-selector-id="listItem"
|
|
46
|
+
data-test-id="text2"
|
|
47
|
+
data-title="text2"
|
|
48
|
+
role="option"
|
|
49
|
+
style="color: red;"
|
|
50
|
+
tabindex="0"
|
|
51
|
+
>
|
|
52
|
+
<div
|
|
53
|
+
class="leftBox grow basis shrinkOff"
|
|
54
|
+
data-id="boxComponent"
|
|
55
|
+
data-selector-id="box"
|
|
56
|
+
data-test-id="boxComponent"
|
|
57
|
+
>
|
|
58
|
+
<div
|
|
59
|
+
class="titleBox shrinkOff"
|
|
60
|
+
data-id="boxComponent"
|
|
61
|
+
data-selector-id="box"
|
|
62
|
+
data-test-id="boxComponent"
|
|
63
|
+
>
|
|
64
|
+
<div
|
|
65
|
+
class="value basisAuto shrinkOn"
|
|
66
|
+
data-id="boxComponent"
|
|
67
|
+
data-selector-id="box"
|
|
68
|
+
data-test-id="boxComponent"
|
|
69
|
+
>
|
|
70
|
+
text2
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</li>
|
|
75
|
+
<li
|
|
76
|
+
aria-label="text3"
|
|
77
|
+
aria-selected="true"
|
|
78
|
+
class="list medium default activedefault activewithBorder flex rowdir vCenter"
|
|
79
|
+
data-a11y-inset-focus="true"
|
|
80
|
+
data-a11y-list-active="false"
|
|
81
|
+
data-id="text3"
|
|
82
|
+
data-selected="true"
|
|
83
|
+
data-selector-id="listItem"
|
|
84
|
+
data-test-id="text3"
|
|
85
|
+
data-title="text3"
|
|
86
|
+
role="option"
|
|
87
|
+
style="color: blue;"
|
|
88
|
+
tabindex="0"
|
|
89
|
+
>
|
|
90
|
+
<div
|
|
91
|
+
class="leftBox grow basis shrinkOff"
|
|
92
|
+
data-id="boxComponent"
|
|
93
|
+
data-selector-id="box"
|
|
94
|
+
data-test-id="boxComponent"
|
|
95
|
+
>
|
|
96
|
+
<div
|
|
97
|
+
class="titleBox shrinkOff"
|
|
98
|
+
data-id="boxComponent"
|
|
99
|
+
data-selector-id="box"
|
|
100
|
+
data-test-id="boxComponent"
|
|
101
|
+
>
|
|
102
|
+
<div
|
|
103
|
+
class="value basisAuto shrinkOn"
|
|
104
|
+
data-id="boxComponent"
|
|
105
|
+
data-selector-id="box"
|
|
106
|
+
data-test-id="boxComponent"
|
|
107
|
+
>
|
|
108
|
+
text3
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
</li>
|
|
113
|
+
<li
|
|
114
|
+
aria-label="text4"
|
|
115
|
+
aria-selected="true"
|
|
116
|
+
class="list medium default activedefault activewithBorder flex rowdir vCenter"
|
|
117
|
+
data-a11y-inset-focus="true"
|
|
118
|
+
data-a11y-list-active="false"
|
|
119
|
+
data-id="text4"
|
|
120
|
+
data-selected="true"
|
|
121
|
+
data-selector-id="listItem"
|
|
122
|
+
data-test-id="text4"
|
|
123
|
+
data-title="text4"
|
|
124
|
+
role="option"
|
|
125
|
+
tabindex="0"
|
|
126
|
+
>
|
|
127
|
+
<div
|
|
128
|
+
class="leftBox grow basis shrinkOff"
|
|
129
|
+
data-id="boxComponent"
|
|
130
|
+
data-selector-id="box"
|
|
131
|
+
data-test-id="boxComponent"
|
|
132
|
+
>
|
|
133
|
+
<div
|
|
134
|
+
class="titleBox shrinkOff"
|
|
135
|
+
data-id="boxComponent"
|
|
136
|
+
data-selector-id="box"
|
|
137
|
+
data-test-id="boxComponent"
|
|
138
|
+
>
|
|
139
|
+
<div
|
|
140
|
+
class="value basisAuto shrinkOn"
|
|
141
|
+
data-id="boxComponent"
|
|
142
|
+
data-selector-id="box"
|
|
143
|
+
data-test-id="boxComponent"
|
|
144
|
+
>
|
|
145
|
+
text4
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</li>
|
|
150
|
+
<li
|
|
151
|
+
aria-label="text5"
|
|
152
|
+
aria-selected="false"
|
|
153
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
154
|
+
data-a11y-inset-focus="true"
|
|
155
|
+
data-a11y-list-active="false"
|
|
156
|
+
data-id="text5"
|
|
157
|
+
data-selector-id="listItem"
|
|
158
|
+
data-test-id="text5"
|
|
159
|
+
data-title="Limit Reached"
|
|
160
|
+
role="option"
|
|
161
|
+
>
|
|
162
|
+
<div
|
|
163
|
+
class="leftBox grow basis shrinkOff"
|
|
164
|
+
data-id="boxComponent"
|
|
165
|
+
data-selector-id="box"
|
|
166
|
+
data-test-id="boxComponent"
|
|
167
|
+
>
|
|
168
|
+
<div
|
|
169
|
+
class="titleBox shrinkOff"
|
|
170
|
+
data-id="boxComponent"
|
|
171
|
+
data-selector-id="box"
|
|
172
|
+
data-test-id="boxComponent"
|
|
173
|
+
>
|
|
174
|
+
<div
|
|
175
|
+
class="value basisAuto shrinkOn"
|
|
176
|
+
data-id="boxComponent"
|
|
177
|
+
data-selector-id="box"
|
|
178
|
+
data-test-id="boxComponent"
|
|
179
|
+
>
|
|
180
|
+
text5
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</li>
|
|
185
|
+
<li
|
|
186
|
+
aria-label="text6"
|
|
187
|
+
aria-selected="false"
|
|
188
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
189
|
+
data-a11y-inset-focus="true"
|
|
190
|
+
data-a11y-list-active="false"
|
|
191
|
+
data-id="text6"
|
|
192
|
+
data-selector-id="listItem"
|
|
193
|
+
data-test-id="text6"
|
|
194
|
+
data-title="Limit Reached"
|
|
195
|
+
role="option"
|
|
196
|
+
>
|
|
197
|
+
<div
|
|
198
|
+
class="leftBox grow basis shrinkOff"
|
|
199
|
+
data-id="boxComponent"
|
|
200
|
+
data-selector-id="box"
|
|
201
|
+
data-test-id="boxComponent"
|
|
202
|
+
>
|
|
203
|
+
<div
|
|
204
|
+
class="titleBox shrinkOff"
|
|
205
|
+
data-id="boxComponent"
|
|
206
|
+
data-selector-id="box"
|
|
207
|
+
data-test-id="boxComponent"
|
|
208
|
+
>
|
|
209
|
+
<div
|
|
210
|
+
class="value basisAuto shrinkOn"
|
|
211
|
+
data-id="boxComponent"
|
|
212
|
+
data-selector-id="box"
|
|
213
|
+
data-test-id="boxComponent"
|
|
214
|
+
>
|
|
215
|
+
text6
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
</li>
|
|
220
|
+
<li
|
|
221
|
+
aria-label="text7"
|
|
222
|
+
aria-selected="false"
|
|
223
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
224
|
+
data-a11y-inset-focus="true"
|
|
225
|
+
data-a11y-list-active="false"
|
|
226
|
+
data-id="text7"
|
|
227
|
+
data-selector-id="listItem"
|
|
228
|
+
data-test-id="text7"
|
|
229
|
+
data-title="Limit Reached"
|
|
230
|
+
role="option"
|
|
231
|
+
>
|
|
232
|
+
<div
|
|
233
|
+
class="leftBox grow basis shrinkOff"
|
|
234
|
+
data-id="boxComponent"
|
|
235
|
+
data-selector-id="box"
|
|
236
|
+
data-test-id="boxComponent"
|
|
237
|
+
>
|
|
238
|
+
<div
|
|
239
|
+
class="titleBox shrinkOff"
|
|
240
|
+
data-id="boxComponent"
|
|
241
|
+
data-selector-id="box"
|
|
242
|
+
data-test-id="boxComponent"
|
|
243
|
+
>
|
|
244
|
+
<div
|
|
245
|
+
class="value basisAuto shrinkOn"
|
|
246
|
+
data-id="boxComponent"
|
|
247
|
+
data-selector-id="box"
|
|
248
|
+
data-test-id="boxComponent"
|
|
249
|
+
>
|
|
250
|
+
text7
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</li>
|
|
255
|
+
<li
|
|
256
|
+
aria-label="text8"
|
|
257
|
+
aria-selected="false"
|
|
258
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
259
|
+
data-a11y-inset-focus="true"
|
|
260
|
+
data-a11y-list-active="false"
|
|
261
|
+
data-id="text8"
|
|
262
|
+
data-selector-id="listItem"
|
|
263
|
+
data-test-id="text8"
|
|
264
|
+
data-title="Limit Reached"
|
|
265
|
+
role="option"
|
|
266
|
+
>
|
|
267
|
+
<div
|
|
268
|
+
class="leftBox grow basis shrinkOff"
|
|
269
|
+
data-id="boxComponent"
|
|
270
|
+
data-selector-id="box"
|
|
271
|
+
data-test-id="boxComponent"
|
|
272
|
+
>
|
|
273
|
+
<div
|
|
274
|
+
class="titleBox shrinkOff"
|
|
275
|
+
data-id="boxComponent"
|
|
276
|
+
data-selector-id="box"
|
|
277
|
+
data-test-id="boxComponent"
|
|
278
|
+
>
|
|
279
|
+
<div
|
|
280
|
+
class="value basisAuto shrinkOn"
|
|
281
|
+
data-id="boxComponent"
|
|
282
|
+
data-selector-id="box"
|
|
283
|
+
data-test-id="boxComponent"
|
|
284
|
+
>
|
|
285
|
+
text8
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
</li>
|
|
290
|
+
<li
|
|
291
|
+
aria-label="text9"
|
|
292
|
+
aria-selected="false"
|
|
293
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
294
|
+
data-a11y-inset-focus="true"
|
|
295
|
+
data-a11y-list-active="false"
|
|
296
|
+
data-id="text9"
|
|
297
|
+
data-selector-id="listItem"
|
|
298
|
+
data-test-id="text9"
|
|
299
|
+
data-title="Limit Reached"
|
|
300
|
+
role="option"
|
|
301
|
+
>
|
|
302
|
+
<div
|
|
303
|
+
class="leftBox grow basis shrinkOff"
|
|
304
|
+
data-id="boxComponent"
|
|
305
|
+
data-selector-id="box"
|
|
306
|
+
data-test-id="boxComponent"
|
|
307
|
+
>
|
|
308
|
+
<div
|
|
309
|
+
class="titleBox shrinkOff"
|
|
310
|
+
data-id="boxComponent"
|
|
311
|
+
data-selector-id="box"
|
|
312
|
+
data-test-id="boxComponent"
|
|
313
|
+
>
|
|
314
|
+
<div
|
|
315
|
+
class="value basisAuto shrinkOn"
|
|
316
|
+
data-id="boxComponent"
|
|
317
|
+
data-selector-id="box"
|
|
318
|
+
data-test-id="boxComponent"
|
|
319
|
+
>
|
|
320
|
+
text9
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</li>
|
|
325
|
+
<li
|
|
326
|
+
aria-label="text10"
|
|
327
|
+
aria-selected="false"
|
|
328
|
+
class="list medium default disable withBorder flex rowdir vCenter"
|
|
329
|
+
data-a11y-inset-focus="true"
|
|
330
|
+
data-a11y-list-active="false"
|
|
331
|
+
data-id="text10"
|
|
332
|
+
data-selector-id="listItem"
|
|
333
|
+
data-test-id="text10"
|
|
334
|
+
data-title="Limit Reached"
|
|
335
|
+
role="option"
|
|
336
|
+
>
|
|
337
|
+
<div
|
|
338
|
+
class="leftBox grow basis shrinkOff"
|
|
339
|
+
data-id="boxComponent"
|
|
340
|
+
data-selector-id="box"
|
|
341
|
+
data-test-id="boxComponent"
|
|
342
|
+
>
|
|
343
|
+
<div
|
|
344
|
+
class="titleBox shrinkOff"
|
|
345
|
+
data-id="boxComponent"
|
|
346
|
+
data-selector-id="box"
|
|
347
|
+
data-test-id="boxComponent"
|
|
348
|
+
>
|
|
349
|
+
<div
|
|
350
|
+
class="value basisAuto shrinkOn"
|
|
351
|
+
data-id="boxComponent"
|
|
352
|
+
data-selector-id="box"
|
|
353
|
+
data-test-id="boxComponent"
|
|
354
|
+
>
|
|
355
|
+
text10
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</li>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</DocumentFragment>
|
|
363
|
+
`;
|