@zohodesk/components 1.6.31 → 1.6.34

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 (163) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/assets/Appearance/light/mode/Component_LightMode.module.css +1 -1
  3. package/es/Accordion/__tests__/Accordion.spec.js +117 -3
  4. package/es/Accordion/__tests__/AccordionItem.spec.js +118 -6
  5. package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  6. package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  7. package/es/Animation/__tests__/Animation.spec.js +28 -4
  8. package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  9. package/es/Button/css/Button.module.css +2 -3
  10. package/es/CheckBox/CheckBox.js +1 -1
  11. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  12. package/es/DateTime/DateTime.module.css +2 -2
  13. package/es/DateTime/__tests__/CalendarView.spec.js +70 -3
  14. package/es/DateTime/__tests__/DateTime.spec.js +89 -6
  15. package/es/DateTime/__tests__/DateTimePopupFooter.spec.js +20 -2
  16. package/es/DateTime/__tests__/DateTimePopupHeader.spec.js +29 -2
  17. package/es/DateTime/__tests__/DateWidget.spec.js +34 -2
  18. package/es/DateTime/__tests__/DaysRow.spec.js +19 -3
  19. package/es/DateTime/__tests__/Time.spec.js +50 -3
  20. package/es/DateTime/__tests__/YearView.spec.js +60 -3
  21. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  22. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  23. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  24. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  25. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  26. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  27. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  28. package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  29. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  30. package/es/Heading/Heading.module.css +1 -1
  31. package/es/Heading/__tests__/Heading.spec.js +57 -3
  32. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  33. package/es/ListItem/__tests__/ListContainer.spec.js +228 -1
  34. package/es/ListItem/__tests__/ListItem.spec.js +359 -1
  35. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +390 -1
  36. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +214 -1
  37. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +303 -1
  38. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +230 -1
  39. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  40. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  41. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  42. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  45. package/es/MultiSelect/MultiSelect.module.css +1 -2
  46. package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +671 -1
  47. package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +730 -1
  48. package/es/MultiSelect/__tests__/EmptyState.spec.js +268 -1
  49. package/es/MultiSelect/__tests__/MultiSelect.spec.js +889 -2
  50. package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js +50 -1
  51. package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +487 -1
  52. package/es/MultiSelect/__tests__/SelectedOptions.spec.js +291 -1
  53. package/es/MultiSelect/__tests__/Suggestions.spec.js +370 -2
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  55. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  56. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  58. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  59. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  60. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  61. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  62. package/es/PopOver/__tests__/PopOver.spec.js +141 -2
  63. package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  64. package/es/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +212 -1
  65. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  66. package/es/Tab/Tabs.module.css +1 -2
  67. package/es/Tab/__tests__/Tab.spec.js +249 -1
  68. package/es/Tab/__tests__/TabContent.spec.js +34 -1
  69. package/es/Tab/__tests__/TabContentWrapper.spec.js +72 -1
  70. package/es/Tab/__tests__/TabWrapper.spec.js +163 -1
  71. package/es/Tab/__tests__/Tabs.spec.js +681 -1
  72. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  73. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  74. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  75. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  76. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  77. package/es/Textarea/Textarea.module.css +1 -1
  78. package/es/Tooltip/Tooltip.module.css +1 -2
  79. package/es/Tooltip/__tests__/Tooltip.spec.js +590 -0
  80. package/es/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  81. package/es/Typography/css/Typography.module.css +8 -7
  82. package/es/common/common.module.css +4 -4
  83. package/lib/Accordion/__tests__/Accordion.spec.js +122 -2
  84. package/lib/Accordion/__tests__/AccordionItem.spec.js +126 -4
  85. package/lib/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +344 -2
  86. package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +155 -3
  87. package/lib/Animation/__tests__/Animation.spec.js +31 -5
  88. package/lib/Animation/__tests__/__snapshots__/Animation.spec.js.snap +92 -2
  89. package/lib/Button/css/Button.module.css +2 -3
  90. package/lib/CheckBox/CheckBox.js +1 -1
  91. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +1 -1
  92. package/lib/DateTime/DateTime.module.css +2 -2
  93. package/lib/DateTime/__tests__/CalendarView.spec.js +71 -2
  94. package/lib/DateTime/__tests__/DateTime.spec.js +92 -6
  95. package/lib/DateTime/__tests__/DateTimePopupFooter.spec.js +21 -1
  96. package/lib/DateTime/__tests__/DateTimePopupHeader.spec.js +30 -1
  97. package/lib/DateTime/__tests__/DateWidget.spec.js +35 -1
  98. package/lib/DateTime/__tests__/DaysRow.spec.js +20 -2
  99. package/lib/DateTime/__tests__/Time.spec.js +51 -2
  100. package/lib/DateTime/__tests__/YearView.spec.js +61 -2
  101. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +2907 -170
  102. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +4392 -108
  103. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +67 -1
  104. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +187 -1
  105. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +265 -1
  106. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +155 -2
  107. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +522 -5
  108. package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap +540 -0
  109. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +1 -4
  110. package/lib/Heading/Heading.module.css +1 -1
  111. package/lib/Heading/__tests__/Heading.spec.js +60 -4
  112. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +87 -14
  113. package/lib/ListItem/__tests__/ListContainer.spec.js +229 -0
  114. package/lib/ListItem/__tests__/ListItem.spec.js +362 -0
  115. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +391 -0
  116. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +215 -0
  117. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +304 -0
  118. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +231 -0
  119. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +602 -0
  120. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +1807 -0
  121. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +2703 -0
  122. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +2909 -0
  123. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +2009 -0
  124. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +3070 -0
  125. package/lib/MultiSelect/MultiSelect.module.css +1 -2
  126. package/lib/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js +692 -0
  127. package/lib/MultiSelect/__tests__/AdvancedMultiSelect.spec.js +741 -0
  128. package/lib/MultiSelect/__tests__/EmptyState.spec.js +273 -0
  129. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +910 -0
  130. package/lib/MultiSelect/__tests__/MultiSelectHeader.spec.js +51 -0
  131. package/lib/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js +497 -0
  132. package/lib/MultiSelect/__tests__/SelectedOptions.spec.js +305 -0
  133. package/lib/MultiSelect/__tests__/Suggestions.spec.js +375 -0
  134. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +11785 -0
  135. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +12083 -0
  136. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +253 -0
  137. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +14052 -0
  138. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +136 -0
  139. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11506 -0
  140. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +1382 -0
  141. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +3611 -0
  142. package/lib/PopOver/__tests__/PopOver.spec.js +150 -1
  143. package/lib/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1260 -0
  144. package/lib/ResponsiveDropBox/__tests__/ResponsiveDropBox.spec.js +213 -0
  145. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1802 -0
  146. package/lib/Tab/Tabs.module.css +1 -2
  147. package/lib/Tab/__tests__/Tab.spec.js +250 -0
  148. package/lib/Tab/__tests__/TabContent.spec.js +35 -0
  149. package/lib/Tab/__tests__/TabContentWrapper.spec.js +76 -0
  150. package/lib/Tab/__tests__/TabWrapper.spec.js +174 -0
  151. package/lib/Tab/__tests__/Tabs.spec.js +741 -0
  152. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +1049 -0
  153. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +99 -0
  154. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +121 -0
  155. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2002 -0
  156. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +11053 -0
  157. package/lib/Textarea/Textarea.module.css +1 -1
  158. package/lib/Tooltip/Tooltip.module.css +1 -2
  159. package/lib/Tooltip/__tests__/Tooltip.spec.js +629 -0
  160. package/lib/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap +813 -0
  161. package/lib/Typography/css/Typography.module.css +8 -7
  162. package/lib/common/common.module.css +4 -4
  163. package/package.json +6 -5
package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap CHANGED
@@ -1,5 +1,1807 @@
1
1
  // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
2
 
3
+ exports[`ResponsiveDropBox Render with a11y role and ariaLabelledby 1`] = `
4
+ <body>
5
+ <div>
6
+ <div
7
+ aria-labelledby="drop-box-label"
8
+ class="main container bottomStart default boxDirection arrow"
9
+ data-a11y-focus-main-area="true"
10
+ data-arrow-position="end"
11
+ data-box-direction="bottom"
12
+ data-id="dropBox"
13
+ data-position="bottomStart"
14
+ data-selector-id="dropBox"
15
+ data-test-id="dropBox"
16
+ dot-ui-element="dropbox"
17
+ role="dialog"
18
+ style="z-index: 4;"
19
+ >
20
+ <div
21
+ class="subContainer shadow radius defaultPalette"
22
+ data-id="dropBox_subcontainer"
23
+ data-selector-id="dropBox_subcontainer"
24
+ data-test-id="dropBox_subcontainer"
25
+ tabindex="-1"
26
+ >
27
+ <div
28
+ class="arrowPosition"
29
+ data-id="dropBox_arrow"
30
+ data-selector-id="dropBox_arrow"
31
+ data-test-id="dropBox_arrow"
32
+ >
33
+ <div
34
+ class="arrowShape"
35
+ />
36
+ </div>
37
+ <div
38
+ class="d-flex d-flex-col"
39
+ data-id="containerComponent"
40
+ data-selector-id="container"
41
+ data-test-id="containerComponent"
42
+ />
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </body>
47
+ `;
48
+
49
+ exports[`ResponsiveDropBox Render with alignBox as row 1`] = `
50
+ <body>
51
+ <div>
52
+ <div
53
+ class="main container bottomStart default boxDirection arrow"
54
+ data-a11y-focus-main-area="true"
55
+ data-arrow-position="end"
56
+ data-box-direction="bottom"
57
+ data-id="dropBox"
58
+ data-position="bottomStart"
59
+ data-selector-id="dropBox"
60
+ data-test-id="dropBox"
61
+ dot-ui-element="dropbox"
62
+ style="z-index: 4;"
63
+ >
64
+ <div
65
+ class="subContainer shadow radius defaultPalette"
66
+ data-id="dropBox_subcontainer"
67
+ data-selector-id="dropBox_subcontainer"
68
+ data-test-id="dropBox_subcontainer"
69
+ tabindex="-1"
70
+ >
71
+ <div
72
+ class="arrowPosition"
73
+ data-id="dropBox_arrow"
74
+ data-selector-id="dropBox_arrow"
75
+ data-test-id="dropBox_arrow"
76
+ >
77
+ <div
78
+ class="arrowShape"
79
+ />
80
+ </div>
81
+ <div
82
+ class="d-flex d-flex-row"
83
+ data-id="containerComponent"
84
+ data-selector-id="container"
85
+ data-test-id="containerComponent"
86
+ />
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </body>
91
+ `;
92
+
93
+ exports[`ResponsiveDropBox Render with boxPosition as bottomCenter 1`] = `
94
+ <body>
95
+ <div>
96
+ <div
97
+ class="main container bottomMid default boxDirection arrow"
98
+ data-a11y-focus-main-area="true"
99
+ data-arrow-position="mid"
100
+ data-box-direction="bottom"
101
+ data-id="dropBox"
102
+ data-position="bottomMid"
103
+ data-selector-id="dropBox"
104
+ data-test-id="dropBox"
105
+ dot-ui-element="dropbox"
106
+ style="z-index: 4;"
107
+ >
108
+ <div
109
+ class="subContainer shadow radius defaultPalette"
110
+ data-id="dropBox_subcontainer"
111
+ data-selector-id="dropBox_subcontainer"
112
+ data-test-id="dropBox_subcontainer"
113
+ tabindex="-1"
114
+ >
115
+ <div
116
+ class="arrowPosition"
117
+ data-id="dropBox_arrow"
118
+ data-selector-id="dropBox_arrow"
119
+ data-test-id="dropBox_arrow"
120
+ >
121
+ <div
122
+ class="arrowShape"
123
+ />
124
+ </div>
125
+ <div
126
+ class="d-flex d-flex-col"
127
+ data-id="containerComponent"
128
+ data-selector-id="container"
129
+ data-test-id="containerComponent"
130
+ />
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </body>
135
+ `;
136
+
137
+ exports[`ResponsiveDropBox Render with boxPosition as bottomRight 1`] = `
138
+ <body>
139
+ <div>
140
+ <div
141
+ class="main container bottomEnd default boxDirection arrow"
142
+ data-a11y-focus-main-area="true"
143
+ data-arrow-position="start"
144
+ data-box-direction="bottom"
145
+ data-id="dropBox"
146
+ data-position="bottomEnd"
147
+ data-selector-id="dropBox"
148
+ data-test-id="dropBox"
149
+ dot-ui-element="dropbox"
150
+ style="z-index: 4;"
151
+ >
152
+ <div
153
+ class="subContainer shadow radius defaultPalette"
154
+ data-id="dropBox_subcontainer"
155
+ data-selector-id="dropBox_subcontainer"
156
+ data-test-id="dropBox_subcontainer"
157
+ tabindex="-1"
158
+ >
159
+ <div
160
+ class="arrowPosition"
161
+ data-id="dropBox_arrow"
162
+ data-selector-id="dropBox_arrow"
163
+ data-test-id="dropBox_arrow"
164
+ >
165
+ <div
166
+ class="arrowShape"
167
+ />
168
+ </div>
169
+ <div
170
+ class="d-flex d-flex-col"
171
+ data-id="containerComponent"
172
+ data-selector-id="container"
173
+ data-test-id="containerComponent"
174
+ />
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </body>
179
+ `;
180
+
181
+ exports[`ResponsiveDropBox Render with boxPosition as leftBottom 1`] = `
182
+ <body>
183
+ <div>
184
+ <div
185
+ class="main container leftEnd default boxDirection arrow"
186
+ data-a11y-focus-main-area="true"
187
+ data-arrow-position="start"
188
+ data-box-direction="left"
189
+ data-id="dropBox"
190
+ data-position="leftEnd"
191
+ data-selector-id="dropBox"
192
+ data-test-id="dropBox"
193
+ dot-ui-element="dropbox"
194
+ style="z-index: 4;"
195
+ >
196
+ <div
197
+ class="subContainer shadow radius defaultPalette"
198
+ data-id="dropBox_subcontainer"
199
+ data-selector-id="dropBox_subcontainer"
200
+ data-test-id="dropBox_subcontainer"
201
+ tabindex="-1"
202
+ >
203
+ <div
204
+ class="arrowPosition"
205
+ data-id="dropBox_arrow"
206
+ data-selector-id="dropBox_arrow"
207
+ data-test-id="dropBox_arrow"
208
+ >
209
+ <div
210
+ class="arrowShape"
211
+ />
212
+ </div>
213
+ <div
214
+ class="d-flex d-flex-col"
215
+ data-id="containerComponent"
216
+ data-selector-id="container"
217
+ data-test-id="containerComponent"
218
+ />
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </body>
223
+ `;
224
+
225
+ exports[`ResponsiveDropBox Render with boxPosition as leftCenter 1`] = `
226
+ <body>
227
+ <div>
228
+ <div
229
+ class="main container leftMid default boxDirection arrow"
230
+ data-a11y-focus-main-area="true"
231
+ data-arrow-position="mid"
232
+ data-box-direction="left"
233
+ data-id="dropBox"
234
+ data-position="leftMid"
235
+ data-selector-id="dropBox"
236
+ data-test-id="dropBox"
237
+ dot-ui-element="dropbox"
238
+ style="z-index: 4;"
239
+ >
240
+ <div
241
+ class="subContainer shadow radius defaultPalette"
242
+ data-id="dropBox_subcontainer"
243
+ data-selector-id="dropBox_subcontainer"
244
+ data-test-id="dropBox_subcontainer"
245
+ tabindex="-1"
246
+ >
247
+ <div
248
+ class="arrowPosition"
249
+ data-id="dropBox_arrow"
250
+ data-selector-id="dropBox_arrow"
251
+ data-test-id="dropBox_arrow"
252
+ >
253
+ <div
254
+ class="arrowShape"
255
+ />
256
+ </div>
257
+ <div
258
+ class="d-flex d-flex-col"
259
+ data-id="containerComponent"
260
+ data-selector-id="container"
261
+ data-test-id="containerComponent"
262
+ />
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </body>
267
+ `;
268
+
269
+ exports[`ResponsiveDropBox Render with boxPosition as leftTop 1`] = `
270
+ <body>
271
+ <div>
272
+ <div
273
+ class="main container leftStart default boxDirection arrow"
274
+ data-a11y-focus-main-area="true"
275
+ data-arrow-position="end"
276
+ data-box-direction="left"
277
+ data-id="dropBox"
278
+ data-position="leftStart"
279
+ data-selector-id="dropBox"
280
+ data-test-id="dropBox"
281
+ dot-ui-element="dropbox"
282
+ style="z-index: 4;"
283
+ >
284
+ <div
285
+ class="subContainer shadow radius defaultPalette"
286
+ data-id="dropBox_subcontainer"
287
+ data-selector-id="dropBox_subcontainer"
288
+ data-test-id="dropBox_subcontainer"
289
+ tabindex="-1"
290
+ >
291
+ <div
292
+ class="arrowPosition"
293
+ data-id="dropBox_arrow"
294
+ data-selector-id="dropBox_arrow"
295
+ data-test-id="dropBox_arrow"
296
+ >
297
+ <div
298
+ class="arrowShape"
299
+ />
300
+ </div>
301
+ <div
302
+ class="d-flex d-flex-col"
303
+ data-id="containerComponent"
304
+ data-selector-id="container"
305
+ data-test-id="containerComponent"
306
+ />
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </body>
311
+ `;
312
+
313
+ exports[`ResponsiveDropBox Render with boxPosition as rightBottom 1`] = `
314
+ <body>
315
+ <div>
316
+ <div
317
+ class="main container rightEnd default boxDirection arrow"
318
+ data-a11y-focus-main-area="true"
319
+ data-arrow-position="start"
320
+ data-box-direction="right"
321
+ data-id="dropBox"
322
+ data-position="rightEnd"
323
+ data-selector-id="dropBox"
324
+ data-test-id="dropBox"
325
+ dot-ui-element="dropbox"
326
+ style="z-index: 4;"
327
+ >
328
+ <div
329
+ class="subContainer shadow radius defaultPalette"
330
+ data-id="dropBox_subcontainer"
331
+ data-selector-id="dropBox_subcontainer"
332
+ data-test-id="dropBox_subcontainer"
333
+ tabindex="-1"
334
+ >
335
+ <div
336
+ class="arrowPosition"
337
+ data-id="dropBox_arrow"
338
+ data-selector-id="dropBox_arrow"
339
+ data-test-id="dropBox_arrow"
340
+ >
341
+ <div
342
+ class="arrowShape"
343
+ />
344
+ </div>
345
+ <div
346
+ class="d-flex d-flex-col"
347
+ data-id="containerComponent"
348
+ data-selector-id="container"
349
+ data-test-id="containerComponent"
350
+ />
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </body>
355
+ `;
356
+
357
+ exports[`ResponsiveDropBox Render with boxPosition as rightCenter 1`] = `
358
+ <body>
359
+ <div>
360
+ <div
361
+ class="main container rightMid default boxDirection arrow"
362
+ data-a11y-focus-main-area="true"
363
+ data-arrow-position="mid"
364
+ data-box-direction="right"
365
+ data-id="dropBox"
366
+ data-position="rightMid"
367
+ data-selector-id="dropBox"
368
+ data-test-id="dropBox"
369
+ dot-ui-element="dropbox"
370
+ style="z-index: 4;"
371
+ >
372
+ <div
373
+ class="subContainer shadow radius defaultPalette"
374
+ data-id="dropBox_subcontainer"
375
+ data-selector-id="dropBox_subcontainer"
376
+ data-test-id="dropBox_subcontainer"
377
+ tabindex="-1"
378
+ >
379
+ <div
380
+ class="arrowPosition"
381
+ data-id="dropBox_arrow"
382
+ data-selector-id="dropBox_arrow"
383
+ data-test-id="dropBox_arrow"
384
+ >
385
+ <div
386
+ class="arrowShape"
387
+ />
388
+ </div>
389
+ <div
390
+ class="d-flex d-flex-col"
391
+ data-id="containerComponent"
392
+ data-selector-id="container"
393
+ data-test-id="containerComponent"
394
+ />
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </body>
399
+ `;
400
+
401
+ exports[`ResponsiveDropBox Render with boxPosition as rightTop 1`] = `
402
+ <body>
403
+ <div>
404
+ <div
405
+ class="main container rightStart default boxDirection arrow"
406
+ data-a11y-focus-main-area="true"
407
+ data-arrow-position="end"
408
+ data-box-direction="right"
409
+ data-id="dropBox"
410
+ data-position="rightStart"
411
+ data-selector-id="dropBox"
412
+ data-test-id="dropBox"
413
+ dot-ui-element="dropbox"
414
+ style="z-index: 4;"
415
+ >
416
+ <div
417
+ class="subContainer shadow radius defaultPalette"
418
+ data-id="dropBox_subcontainer"
419
+ data-selector-id="dropBox_subcontainer"
420
+ data-test-id="dropBox_subcontainer"
421
+ tabindex="-1"
422
+ >
423
+ <div
424
+ class="arrowPosition"
425
+ data-id="dropBox_arrow"
426
+ data-selector-id="dropBox_arrow"
427
+ data-test-id="dropBox_arrow"
428
+ >
429
+ <div
430
+ class="arrowShape"
431
+ />
432
+ </div>
433
+ <div
434
+ class="d-flex d-flex-col"
435
+ data-id="containerComponent"
436
+ data-selector-id="container"
437
+ data-test-id="containerComponent"
438
+ />
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </body>
443
+ `;
444
+
445
+ exports[`ResponsiveDropBox Render with boxPosition as topCenter 1`] = `
446
+ <body>
447
+ <div>
448
+ <div
449
+ class="main container topMid default boxDirection arrow"
450
+ data-a11y-focus-main-area="true"
451
+ data-arrow-position="mid"
452
+ data-box-direction="top"
453
+ data-id="dropBox"
454
+ data-position="topMid"
455
+ data-selector-id="dropBox"
456
+ data-test-id="dropBox"
457
+ dot-ui-element="dropbox"
458
+ style="z-index: 4;"
459
+ >
460
+ <div
461
+ class="subContainer shadow radius defaultPalette"
462
+ data-id="dropBox_subcontainer"
463
+ data-selector-id="dropBox_subcontainer"
464
+ data-test-id="dropBox_subcontainer"
465
+ tabindex="-1"
466
+ >
467
+ <div
468
+ class="arrowPosition"
469
+ data-id="dropBox_arrow"
470
+ data-selector-id="dropBox_arrow"
471
+ data-test-id="dropBox_arrow"
472
+ >
473
+ <div
474
+ class="arrowShape"
475
+ />
476
+ </div>
477
+ <div
478
+ class="d-flex d-flex-col"
479
+ data-id="containerComponent"
480
+ data-selector-id="container"
481
+ data-test-id="containerComponent"
482
+ />
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </body>
487
+ `;
488
+
489
+ exports[`ResponsiveDropBox Render with boxPosition as topLeft 1`] = `
490
+ <body>
491
+ <div>
492
+ <div
493
+ class="main container topStart default boxDirection arrow"
494
+ data-a11y-focus-main-area="true"
495
+ data-arrow-position="end"
496
+ data-box-direction="top"
497
+ data-id="dropBox"
498
+ data-position="topStart"
499
+ data-selector-id="dropBox"
500
+ data-test-id="dropBox"
501
+ dot-ui-element="dropbox"
502
+ style="z-index: 4;"
503
+ >
504
+ <div
505
+ class="subContainer shadow radius defaultPalette"
506
+ data-id="dropBox_subcontainer"
507
+ data-selector-id="dropBox_subcontainer"
508
+ data-test-id="dropBox_subcontainer"
509
+ tabindex="-1"
510
+ >
511
+ <div
512
+ class="arrowPosition"
513
+ data-id="dropBox_arrow"
514
+ data-selector-id="dropBox_arrow"
515
+ data-test-id="dropBox_arrow"
516
+ >
517
+ <div
518
+ class="arrowShape"
519
+ />
520
+ </div>
521
+ <div
522
+ class="d-flex d-flex-col"
523
+ data-id="containerComponent"
524
+ data-selector-id="container"
525
+ data-test-id="containerComponent"
526
+ />
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </body>
531
+ `;
532
+
533
+ exports[`ResponsiveDropBox Render with boxPosition as topRight 1`] = `
534
+ <body>
535
+ <div>
536
+ <div
537
+ class="main container topEnd default boxDirection arrow"
538
+ data-a11y-focus-main-area="true"
539
+ data-arrow-position="start"
540
+ data-box-direction="top"
541
+ data-id="dropBox"
542
+ data-position="topEnd"
543
+ data-selector-id="dropBox"
544
+ data-test-id="dropBox"
545
+ dot-ui-element="dropbox"
546
+ style="z-index: 4;"
547
+ >
548
+ <div
549
+ class="subContainer shadow radius defaultPalette"
550
+ data-id="dropBox_subcontainer"
551
+ data-selector-id="dropBox_subcontainer"
552
+ data-test-id="dropBox_subcontainer"
553
+ tabindex="-1"
554
+ >
555
+ <div
556
+ class="arrowPosition"
557
+ data-id="dropBox_arrow"
558
+ data-selector-id="dropBox_arrow"
559
+ data-test-id="dropBox_arrow"
560
+ >
561
+ <div
562
+ class="arrowShape"
563
+ />
564
+ </div>
565
+ <div
566
+ class="d-flex d-flex-col"
567
+ data-id="containerComponent"
568
+ data-selector-id="container"
569
+ data-test-id="containerComponent"
570
+ />
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </body>
575
+ `;
576
+
577
+ exports[`ResponsiveDropBox Render with children 1`] = `
578
+ <body>
579
+ <div>
580
+ <div
581
+ class="main container bottomStart default boxDirection arrow"
582
+ data-a11y-focus-main-area="true"
583
+ data-arrow-position="end"
584
+ data-box-direction="bottom"
585
+ data-id="dropBox"
586
+ data-position="bottomStart"
587
+ data-selector-id="dropBox"
588
+ data-test-id="dropBox"
589
+ dot-ui-element="dropbox"
590
+ style="z-index: 4;"
591
+ >
592
+ <div
593
+ class="subContainer shadow radius defaultPalette"
594
+ data-id="dropBox_subcontainer"
595
+ data-selector-id="dropBox_subcontainer"
596
+ data-test-id="dropBox_subcontainer"
597
+ tabindex="-1"
598
+ >
599
+ <div
600
+ class="arrowPosition"
601
+ data-id="dropBox_arrow"
602
+ data-selector-id="dropBox_arrow"
603
+ data-test-id="dropBox_arrow"
604
+ >
605
+ <div
606
+ class="arrowShape"
607
+ />
608
+ </div>
609
+ <div
610
+ class="d-flex d-flex-col"
611
+ data-id="containerComponent"
612
+ data-selector-id="container"
613
+ data-test-id="containerComponent"
614
+ >
615
+ <div>
616
+ Drop box content
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </body>
623
+ `;
624
+
625
+ exports[`ResponsiveDropBox Render with customClass customDropBox 1`] = `
626
+ <body>
627
+ <div>
628
+ <div
629
+ class="main container bottomStart default boxDirection arrow"
630
+ data-a11y-focus-main-area="true"
631
+ data-arrow-position="end"
632
+ data-box-direction="bottom"
633
+ data-id="dropBox"
634
+ data-position="bottomStart"
635
+ data-selector-id="dropBox"
636
+ data-test-id="dropBox"
637
+ dot-ui-element="dropbox"
638
+ style="z-index: 4;"
639
+ >
640
+ <div
641
+ class="subContainer shadow radius custom-drop-box defaultPalette"
642
+ data-id="dropBox_subcontainer"
643
+ data-selector-id="dropBox_subcontainer"
644
+ data-test-id="dropBox_subcontainer"
645
+ tabindex="-1"
646
+ >
647
+ <div
648
+ class="arrowPosition"
649
+ data-id="dropBox_arrow"
650
+ data-selector-id="dropBox_arrow"
651
+ data-test-id="dropBox_arrow"
652
+ >
653
+ <div
654
+ class="arrowShape"
655
+ />
656
+ </div>
657
+ <div
658
+ class="d-flex d-flex-col"
659
+ data-id="containerComponent"
660
+ data-selector-id="container"
661
+ data-test-id="containerComponent"
662
+ />
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </body>
667
+ `;
668
+
669
+ exports[`ResponsiveDropBox Render with customClass customDropBoxWrap 1`] = `
670
+ <body>
671
+ <div>
672
+ <div
673
+ class="main container bottomStart default boxDirection arrow custom-drop-box-wrap"
674
+ data-a11y-focus-main-area="true"
675
+ data-arrow-position="end"
676
+ data-box-direction="bottom"
677
+ data-id="dropBox"
678
+ data-position="bottomStart"
679
+ data-selector-id="dropBox"
680
+ data-test-id="dropBox"
681
+ dot-ui-element="dropbox"
682
+ style="z-index: 4;"
683
+ >
684
+ <div
685
+ class="subContainer shadow radius defaultPalette"
686
+ data-id="dropBox_subcontainer"
687
+ data-selector-id="dropBox_subcontainer"
688
+ data-test-id="dropBox_subcontainer"
689
+ tabindex="-1"
690
+ >
691
+ <div
692
+ class="arrowPosition"
693
+ data-id="dropBox_arrow"
694
+ data-selector-id="dropBox_arrow"
695
+ data-test-id="dropBox_arrow"
696
+ >
697
+ <div
698
+ class="arrowShape"
699
+ />
700
+ </div>
701
+ <div
702
+ class="d-flex d-flex-col"
703
+ data-id="containerComponent"
704
+ data-selector-id="container"
705
+ data-test-id="containerComponent"
706
+ />
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </body>
711
+ `;
712
+
713
+ exports[`ResponsiveDropBox Render with customClass customMobileDropBox 1`] = `
714
+ <body>
715
+ <div>
716
+ <div
717
+ class="main container bottomStart default boxDirection arrow"
718
+ data-a11y-focus-main-area="true"
719
+ data-arrow-position="end"
720
+ data-box-direction="bottom"
721
+ data-id="dropBox"
722
+ data-position="bottomStart"
723
+ data-selector-id="dropBox"
724
+ data-test-id="dropBox"
725
+ dot-ui-element="dropbox"
726
+ style="z-index: 4;"
727
+ >
728
+ <div
729
+ class="subContainer shadow radius defaultPalette"
730
+ data-id="dropBox_subcontainer"
731
+ data-selector-id="dropBox_subcontainer"
732
+ data-test-id="dropBox_subcontainer"
733
+ tabindex="-1"
734
+ >
735
+ <div
736
+ class="arrowPosition"
737
+ data-id="dropBox_arrow"
738
+ data-selector-id="dropBox_arrow"
739
+ data-test-id="dropBox_arrow"
740
+ >
741
+ <div
742
+ class="arrowShape"
743
+ />
744
+ </div>
745
+ <div
746
+ class="d-flex d-flex-col"
747
+ data-id="containerComponent"
748
+ data-selector-id="container"
749
+ data-test-id="containerComponent"
750
+ />
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </body>
755
+ `;
756
+
757
+ exports[`ResponsiveDropBox Render with customClass customMobileDropBoxWrap 1`] = `
758
+ <body>
759
+ <div>
760
+ <div
761
+ class="main container bottomStart default boxDirection arrow"
762
+ data-a11y-focus-main-area="true"
763
+ data-arrow-position="end"
764
+ data-box-direction="bottom"
765
+ data-id="dropBox"
766
+ data-position="bottomStart"
767
+ data-selector-id="dropBox"
768
+ data-test-id="dropBox"
769
+ dot-ui-element="dropbox"
770
+ style="z-index: 4;"
771
+ >
772
+ <div
773
+ class="subContainer shadow radius defaultPalette"
774
+ data-id="dropBox_subcontainer"
775
+ data-selector-id="dropBox_subcontainer"
776
+ data-test-id="dropBox_subcontainer"
777
+ tabindex="-1"
778
+ >
779
+ <div
780
+ class="arrowPosition"
781
+ data-id="dropBox_arrow"
782
+ data-selector-id="dropBox_arrow"
783
+ data-test-id="dropBox_arrow"
784
+ >
785
+ <div
786
+ class="arrowShape"
787
+ />
788
+ </div>
789
+ <div
790
+ class="d-flex d-flex-col"
791
+ data-id="containerComponent"
792
+ data-selector-id="container"
793
+ data-test-id="containerComponent"
794
+ />
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </body>
799
+ `;
800
+
801
+ exports[`ResponsiveDropBox Render with customClass customResponsiveContainer 1`] = `
802
+ <body>
803
+ <div>
804
+ <div
805
+ class="main container bottomStart default boxDirection arrow"
806
+ data-a11y-focus-main-area="true"
807
+ data-arrow-position="end"
808
+ data-box-direction="bottom"
809
+ data-id="dropBox"
810
+ data-position="bottomStart"
811
+ data-selector-id="dropBox"
812
+ data-test-id="dropBox"
813
+ dot-ui-element="dropbox"
814
+ style="z-index: 4;"
815
+ >
816
+ <div
817
+ class="subContainer shadow radius defaultPalette"
818
+ data-id="dropBox_subcontainer"
819
+ data-selector-id="dropBox_subcontainer"
820
+ data-test-id="dropBox_subcontainer"
821
+ tabindex="-1"
822
+ >
823
+ <div
824
+ class="arrowPosition"
825
+ data-id="dropBox_arrow"
826
+ data-selector-id="dropBox_arrow"
827
+ data-test-id="dropBox_arrow"
828
+ >
829
+ <div
830
+ class="arrowShape"
831
+ />
832
+ </div>
833
+ <div
834
+ class="d-flex d-flex-col custom-responsive-container"
835
+ data-id="containerComponent"
836
+ data-selector-id="container"
837
+ data-test-id="containerComponent"
838
+ />
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </body>
843
+ `;
844
+
845
+ exports[`ResponsiveDropBox Render with dataId and dataSelectorId 1`] = `
846
+ <body>
847
+ <div>
848
+ <div
849
+ class="main container bottomStart default boxDirection arrow"
850
+ data-a11y-focus-main-area="true"
851
+ data-arrow-position="end"
852
+ data-box-direction="bottom"
853
+ data-id="responsive-drop-box"
854
+ data-position="bottomStart"
855
+ data-selector-id="responsive-drop-box"
856
+ data-test-id="responsive-drop-box"
857
+ dot-ui-element="dropbox"
858
+ style="z-index: 4;"
859
+ >
860
+ <div
861
+ class="subContainer shadow radius defaultPalette"
862
+ data-id="responsive-drop-box_subcontainer"
863
+ data-selector-id="responsive-drop-box_subcontainer"
864
+ data-test-id="responsive-drop-box_subcontainer"
865
+ tabindex="-1"
866
+ >
867
+ <div
868
+ class="arrowPosition"
869
+ data-id="responsive-drop-box_arrow"
870
+ data-selector-id="responsive-drop-box_arrow"
871
+ data-test-id="responsive-drop-box_arrow"
872
+ >
873
+ <div
874
+ class="arrowShape"
875
+ />
876
+ </div>
877
+ <div
878
+ class="d-flex d-flex-col"
879
+ data-id="containerComponent"
880
+ data-selector-id="container"
881
+ data-test-id="containerComponent"
882
+ />
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </body>
887
+ `;
888
+
889
+ exports[`ResponsiveDropBox Render with htmlId 1`] = `
890
+ <body>
891
+ <div>
892
+ <div
893
+ class="main container bottomStart default boxDirection arrow"
894
+ data-a11y-focus-main-area="true"
895
+ data-arrow-position="end"
896
+ data-box-direction="bottom"
897
+ data-id="dropBox"
898
+ data-position="bottomStart"
899
+ data-selector-id="dropBox"
900
+ data-test-id="dropBox"
901
+ dot-ui-element="dropbox"
902
+ id="responsive-drop-box-html-id"
903
+ style="z-index: 4;"
904
+ >
905
+ <div
906
+ class="subContainer shadow radius defaultPalette"
907
+ data-id="dropBox_subcontainer"
908
+ data-selector-id="dropBox_subcontainer"
909
+ data-test-id="dropBox_subcontainer"
910
+ tabindex="-1"
911
+ >
912
+ <div
913
+ class="arrowPosition"
914
+ data-id="dropBox_arrow"
915
+ data-selector-id="dropBox_arrow"
916
+ data-test-id="dropBox_arrow"
917
+ >
918
+ <div
919
+ class="arrowShape"
920
+ />
921
+ </div>
922
+ <div
923
+ class="d-flex d-flex-col"
924
+ data-id="containerComponent"
925
+ data-selector-id="container"
926
+ data-test-id="containerComponent"
927
+ />
928
+ </div>
929
+ </div>
930
+ </div>
931
+ </body>
932
+ `;
933
+
934
+ exports[`ResponsiveDropBox Render with isActive 1`] = `
935
+ <body>
936
+ <div>
937
+ <div
938
+ class="main container bottomStart default boxDirection arrow"
939
+ data-a11y-focus-main-area="true"
940
+ data-arrow-position="end"
941
+ data-box-direction="bottom"
942
+ data-id="dropBox"
943
+ data-position="bottomStart"
944
+ data-selector-id="dropBox"
945
+ data-test-id="dropBox"
946
+ dot-ui-element="dropbox"
947
+ style="z-index: 4;"
948
+ >
949
+ <div
950
+ class="subContainer shadow radius defaultPalette"
951
+ data-id="dropBox_subcontainer"
952
+ data-selector-id="dropBox_subcontainer"
953
+ data-test-id="dropBox_subcontainer"
954
+ tabindex="-1"
955
+ >
956
+ <div
957
+ class="arrowPosition"
958
+ data-id="dropBox_arrow"
959
+ data-selector-id="dropBox_arrow"
960
+ data-test-id="dropBox_arrow"
961
+ >
962
+ <div
963
+ class="arrowShape"
964
+ />
965
+ </div>
966
+ <div
967
+ class="d-flex d-flex-col"
968
+ data-id="containerComponent"
969
+ data-selector-id="container"
970
+ data-test-id="containerComponent"
971
+ />
972
+ </div>
973
+ </div>
974
+ </div>
975
+ </body>
976
+ `;
977
+
978
+ exports[`ResponsiveDropBox Render with isAnimate 1`] = `
979
+ <body>
980
+ <div>
981
+ <div
982
+ class="main container bottomStart default boxDirection arrow"
983
+ data-a11y-focus-main-area="true"
984
+ data-arrow-position="end"
985
+ data-box-direction="bottom"
986
+ data-id="dropBox"
987
+ data-position="bottomStart"
988
+ data-selector-id="dropBox"
989
+ data-test-id="dropBox"
990
+ dot-ui-element="dropbox"
991
+ style="z-index: 4;"
992
+ >
993
+ <div
994
+ class="subContainer shadow radius fadeInScale defaultPalette"
995
+ data-id="dropBox_subcontainer"
996
+ data-selector-id="dropBox_subcontainer"
997
+ data-test-id="dropBox_subcontainer"
998
+ tabindex="-1"
999
+ >
1000
+ <div
1001
+ class="arrowPosition"
1002
+ data-id="dropBox_arrow"
1003
+ data-selector-id="dropBox_arrow"
1004
+ data-test-id="dropBox_arrow"
1005
+ >
1006
+ <div
1007
+ class="arrowShape"
1008
+ />
1009
+ </div>
1010
+ <div
1011
+ class="d-flex d-flex-col"
1012
+ data-id="containerComponent"
1013
+ data-selector-id="container"
1014
+ data-test-id="containerComponent"
1015
+ />
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </body>
1020
+ `;
1021
+
1022
+ exports[`ResponsiveDropBox Render with isAnimate and animationStyle as bounce 1`] = `
1023
+ <body>
1024
+ <div>
1025
+ <div
1026
+ class="main container bottomStart default boxDirection arrow"
1027
+ data-a11y-focus-main-area="true"
1028
+ data-arrow-position="end"
1029
+ data-box-direction="bottom"
1030
+ data-id="dropBox"
1031
+ data-position="bottomStart"
1032
+ data-selector-id="dropBox"
1033
+ data-test-id="dropBox"
1034
+ dot-ui-element="dropbox"
1035
+ style="z-index: 4;"
1036
+ >
1037
+ <div
1038
+ class="subContainer shadow radius bounce defaultPalette"
1039
+ data-id="dropBox_subcontainer"
1040
+ data-selector-id="dropBox_subcontainer"
1041
+ data-test-id="dropBox_subcontainer"
1042
+ tabindex="-1"
1043
+ >
1044
+ <div
1045
+ class="arrowPosition"
1046
+ data-id="dropBox_arrow"
1047
+ data-selector-id="dropBox_arrow"
1048
+ data-test-id="dropBox_arrow"
1049
+ >
1050
+ <div
1051
+ class="arrowShape"
1052
+ />
1053
+ </div>
1054
+ <div
1055
+ class="d-flex d-flex-col"
1056
+ data-id="containerComponent"
1057
+ data-selector-id="container"
1058
+ data-test-id="containerComponent"
1059
+ />
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </body>
1064
+ `;
1065
+
1066
+ exports[`ResponsiveDropBox Render with isAnimate and animationStyle as fadeIn 1`] = `
1067
+ <body>
1068
+ <div>
1069
+ <div
1070
+ class="main container bottomStart default boxDirection arrow"
1071
+ data-a11y-focus-main-area="true"
1072
+ data-arrow-position="end"
1073
+ data-box-direction="bottom"
1074
+ data-id="dropBox"
1075
+ data-position="bottomStart"
1076
+ data-selector-id="dropBox"
1077
+ data-test-id="dropBox"
1078
+ dot-ui-element="dropbox"
1079
+ style="z-index: 4;"
1080
+ >
1081
+ <div
1082
+ class="subContainer shadow radius fadeIn defaultPalette"
1083
+ data-id="dropBox_subcontainer"
1084
+ data-selector-id="dropBox_subcontainer"
1085
+ data-test-id="dropBox_subcontainer"
1086
+ tabindex="-1"
1087
+ >
1088
+ <div
1089
+ class="arrowPosition"
1090
+ data-id="dropBox_arrow"
1091
+ data-selector-id="dropBox_arrow"
1092
+ data-test-id="dropBox_arrow"
1093
+ >
1094
+ <div
1095
+ class="arrowShape"
1096
+ />
1097
+ </div>
1098
+ <div
1099
+ class="d-flex d-flex-col"
1100
+ data-id="containerComponent"
1101
+ data-selector-id="container"
1102
+ data-test-id="containerComponent"
1103
+ />
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+ </body>
1108
+ `;
1109
+
1110
+ exports[`ResponsiveDropBox Render with isAnimate and animationStyle as scaleIn 1`] = `
1111
+ <body>
1112
+ <div>
1113
+ <div
1114
+ class="main container bottomStart default boxDirection arrow"
1115
+ data-a11y-focus-main-area="true"
1116
+ data-arrow-position="end"
1117
+ data-box-direction="bottom"
1118
+ data-id="dropBox"
1119
+ data-position="bottomStart"
1120
+ data-selector-id="dropBox"
1121
+ data-test-id="dropBox"
1122
+ dot-ui-element="dropbox"
1123
+ style="z-index: 4;"
1124
+ >
1125
+ <div
1126
+ class="subContainer shadow radius scaleIn defaultPalette"
1127
+ data-id="dropBox_subcontainer"
1128
+ data-selector-id="dropBox_subcontainer"
1129
+ data-test-id="dropBox_subcontainer"
1130
+ tabindex="-1"
1131
+ >
1132
+ <div
1133
+ class="arrowPosition"
1134
+ data-id="dropBox_arrow"
1135
+ data-selector-id="dropBox_arrow"
1136
+ data-test-id="dropBox_arrow"
1137
+ >
1138
+ <div
1139
+ class="arrowShape"
1140
+ />
1141
+ </div>
1142
+ <div
1143
+ class="d-flex d-flex-col"
1144
+ data-id="containerComponent"
1145
+ data-selector-id="container"
1146
+ data-test-id="containerComponent"
1147
+ />
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ </body>
1152
+ `;
1153
+
1154
+ exports[`ResponsiveDropBox Render with isArrow=false 1`] = `
1155
+ <body>
1156
+ <div>
1157
+ <div
1158
+ class="main container bottomStart default paddingSpace"
1159
+ data-a11y-focus-main-area="true"
1160
+ data-arrow-position="end"
1161
+ data-box-direction="bottom"
1162
+ data-id="dropBox"
1163
+ data-position="bottomStart"
1164
+ data-selector-id="dropBox"
1165
+ data-test-id="dropBox"
1166
+ dot-ui-element="dropbox"
1167
+ style="z-index: 4;"
1168
+ >
1169
+ <div
1170
+ class="subContainer shadow radius defaultPalette"
1171
+ data-id="dropBox_subcontainer"
1172
+ data-selector-id="dropBox_subcontainer"
1173
+ data-test-id="dropBox_subcontainer"
1174
+ tabindex="-1"
1175
+ >
1176
+ <div
1177
+ class="d-flex d-flex-col"
1178
+ data-id="containerComponent"
1179
+ data-selector-id="container"
1180
+ data-test-id="containerComponent"
1181
+ />
1182
+ </div>
1183
+ </div>
1184
+ </div>
1185
+ </body>
1186
+ `;
1187
+
1188
+ exports[`ResponsiveDropBox Render with isBoxPaddingNeed 1`] = `
1189
+ <body>
1190
+ <div>
1191
+ <div
1192
+ class="main container bottomStart default boxDirection arrow"
1193
+ data-a11y-focus-main-area="true"
1194
+ data-arrow-position="end"
1195
+ data-box-direction="bottom"
1196
+ data-id="dropBox"
1197
+ data-position="bottomStart"
1198
+ data-selector-id="dropBox"
1199
+ data-test-id="dropBox"
1200
+ dot-ui-element="dropbox"
1201
+ style="z-index: 4;"
1202
+ >
1203
+ <div
1204
+ class="subContainer shadow boxPadding radius defaultPalette"
1205
+ data-id="dropBox_subcontainer"
1206
+ data-selector-id="dropBox_subcontainer"
1207
+ data-test-id="dropBox_subcontainer"
1208
+ tabindex="-1"
1209
+ >
1210
+ <div
1211
+ class="arrowPosition"
1212
+ data-id="dropBox_arrow"
1213
+ data-selector-id="dropBox_arrow"
1214
+ data-test-id="dropBox_arrow"
1215
+ >
1216
+ <div
1217
+ class="arrowShape"
1218
+ />
1219
+ </div>
1220
+ <div
1221
+ class="d-flex d-flex-col"
1222
+ data-id="containerComponent"
1223
+ data-selector-id="container"
1224
+ data-test-id="containerComponent"
1225
+ />
1226
+ </div>
1227
+ </div>
1228
+ </div>
1229
+ </body>
1230
+ `;
1231
+
1232
+ exports[`ResponsiveDropBox Render with isPadding=false 1`] = `
1233
+ <body>
1234
+ <div>
1235
+ <div
1236
+ class="main container bottomStart default boxDirection arrow"
1237
+ data-a11y-focus-main-area="true"
1238
+ data-arrow-position="end"
1239
+ data-box-direction="bottom"
1240
+ data-id="dropBox"
1241
+ data-position="bottomStart"
1242
+ data-selector-id="dropBox"
1243
+ data-test-id="dropBox"
1244
+ dot-ui-element="dropbox"
1245
+ style="z-index: 4;"
1246
+ >
1247
+ <div
1248
+ class="subContainer shadow radius defaultPalette"
1249
+ data-id="dropBox_subcontainer"
1250
+ data-selector-id="dropBox_subcontainer"
1251
+ data-test-id="dropBox_subcontainer"
1252
+ tabindex="-1"
1253
+ >
1254
+ <div
1255
+ class="arrowPosition"
1256
+ data-id="dropBox_arrow"
1257
+ data-selector-id="dropBox_arrow"
1258
+ data-test-id="dropBox_arrow"
1259
+ >
1260
+ <div
1261
+ class="arrowShape"
1262
+ />
1263
+ </div>
1264
+ <div
1265
+ class="d-flex d-flex-col"
1266
+ data-id="containerComponent"
1267
+ data-selector-id="container"
1268
+ data-test-id="containerComponent"
1269
+ />
1270
+ </div>
1271
+ </div>
1272
+ </div>
1273
+ </body>
1274
+ `;
1275
+
1276
+ exports[`ResponsiveDropBox Render with isRadius=false 1`] = `
1277
+ <body>
1278
+ <div>
1279
+ <div
1280
+ class="main container bottomStart default boxDirection arrow"
1281
+ data-a11y-focus-main-area="true"
1282
+ data-arrow-position="end"
1283
+ data-box-direction="bottom"
1284
+ data-id="dropBox"
1285
+ data-position="bottomStart"
1286
+ data-selector-id="dropBox"
1287
+ data-test-id="dropBox"
1288
+ dot-ui-element="dropbox"
1289
+ style="z-index: 4;"
1290
+ >
1291
+ <div
1292
+ class="subContainer shadow defaultPalette"
1293
+ data-id="dropBox_subcontainer"
1294
+ data-selector-id="dropBox_subcontainer"
1295
+ data-test-id="dropBox_subcontainer"
1296
+ tabindex="-1"
1297
+ >
1298
+ <div
1299
+ class="arrowPosition"
1300
+ data-id="dropBox_arrow"
1301
+ data-selector-id="dropBox_arrow"
1302
+ data-test-id="dropBox_arrow"
1303
+ >
1304
+ <div
1305
+ class="arrowShape"
1306
+ />
1307
+ </div>
1308
+ <div
1309
+ class="d-flex d-flex-col"
1310
+ data-id="containerComponent"
1311
+ data-selector-id="container"
1312
+ data-test-id="containerComponent"
1313
+ />
1314
+ </div>
1315
+ </div>
1316
+ </div>
1317
+ </body>
1318
+ `;
1319
+
1320
+ exports[`ResponsiveDropBox Render with palette as dark 1`] = `
1321
+ <body>
1322
+ <div>
1323
+ <div
1324
+ class="main container bottomStart default boxDirection arrow"
1325
+ data-a11y-focus-main-area="true"
1326
+ data-arrow-position="end"
1327
+ data-box-direction="bottom"
1328
+ data-id="dropBox"
1329
+ data-position="bottomStart"
1330
+ data-selector-id="dropBox"
1331
+ data-test-id="dropBox"
1332
+ dot-ui-element="dropbox"
1333
+ style="z-index: 4;"
1334
+ >
1335
+ <div
1336
+ class="subContainer shadow radius darkPalette"
1337
+ data-id="dropBox_subcontainer"
1338
+ data-selector-id="dropBox_subcontainer"
1339
+ data-test-id="dropBox_subcontainer"
1340
+ tabindex="-1"
1341
+ >
1342
+ <div
1343
+ class="arrowPosition"
1344
+ data-id="dropBox_arrow"
1345
+ data-selector-id="dropBox_arrow"
1346
+ data-test-id="dropBox_arrow"
1347
+ >
1348
+ <div
1349
+ class="arrowShape"
1350
+ />
1351
+ </div>
1352
+ <div
1353
+ class="d-flex d-flex-col"
1354
+ data-id="containerComponent"
1355
+ data-selector-id="container"
1356
+ data-test-id="containerComponent"
1357
+ />
1358
+ </div>
1359
+ </div>
1360
+ </div>
1361
+ </body>
1362
+ `;
1363
+
1364
+ exports[`ResponsiveDropBox Render with size as large 1`] = `
1365
+ <body>
1366
+ <div>
1367
+ <div
1368
+ class="main container bottomStart large boxDirection arrow"
1369
+ data-a11y-focus-main-area="true"
1370
+ data-arrow-position="end"
1371
+ data-box-direction="bottom"
1372
+ data-id="dropBox"
1373
+ data-position="bottomStart"
1374
+ data-selector-id="dropBox"
1375
+ data-test-id="dropBox"
1376
+ dot-ui-element="dropbox"
1377
+ style="z-index: 4;"
1378
+ >
1379
+ <div
1380
+ class="subContainer shadow radius defaultPalette"
1381
+ data-id="dropBox_subcontainer"
1382
+ data-selector-id="dropBox_subcontainer"
1383
+ data-test-id="dropBox_subcontainer"
1384
+ tabindex="-1"
1385
+ >
1386
+ <div
1387
+ class="arrowPosition"
1388
+ data-id="dropBox_arrow"
1389
+ data-selector-id="dropBox_arrow"
1390
+ data-test-id="dropBox_arrow"
1391
+ >
1392
+ <div
1393
+ class="arrowShape"
1394
+ />
1395
+ </div>
1396
+ <div
1397
+ class="d-flex d-flex-col"
1398
+ data-id="containerComponent"
1399
+ data-selector-id="container"
1400
+ data-test-id="containerComponent"
1401
+ />
1402
+ </div>
1403
+ </div>
1404
+ </div>
1405
+ </body>
1406
+ `;
1407
+
1408
+ exports[`ResponsiveDropBox Render with size as medium 1`] = `
1409
+ <body>
1410
+ <div>
1411
+ <div
1412
+ class="main container bottomStart medium boxDirection arrow"
1413
+ data-a11y-focus-main-area="true"
1414
+ data-arrow-position="end"
1415
+ data-box-direction="bottom"
1416
+ data-id="dropBox"
1417
+ data-position="bottomStart"
1418
+ data-selector-id="dropBox"
1419
+ data-test-id="dropBox"
1420
+ dot-ui-element="dropbox"
1421
+ style="z-index: 4;"
1422
+ >
1423
+ <div
1424
+ class="subContainer shadow radius defaultPalette"
1425
+ data-id="dropBox_subcontainer"
1426
+ data-selector-id="dropBox_subcontainer"
1427
+ data-test-id="dropBox_subcontainer"
1428
+ tabindex="-1"
1429
+ >
1430
+ <div
1431
+ class="arrowPosition"
1432
+ data-id="dropBox_arrow"
1433
+ data-selector-id="dropBox_arrow"
1434
+ data-test-id="dropBox_arrow"
1435
+ >
1436
+ <div
1437
+ class="arrowShape"
1438
+ />
1439
+ </div>
1440
+ <div
1441
+ class="d-flex d-flex-col"
1442
+ data-id="containerComponent"
1443
+ data-selector-id="container"
1444
+ data-test-id="containerComponent"
1445
+ />
1446
+ </div>
1447
+ </div>
1448
+ </div>
1449
+ </body>
1450
+ `;
1451
+
1452
+ exports[`ResponsiveDropBox Render with size as mini 1`] = `
1453
+ <body>
1454
+ <div>
1455
+ <div
1456
+ class="main container bottomStart mini boxDirection arrow"
1457
+ data-a11y-focus-main-area="true"
1458
+ data-arrow-position="end"
1459
+ data-box-direction="bottom"
1460
+ data-id="dropBox"
1461
+ data-position="bottomStart"
1462
+ data-selector-id="dropBox"
1463
+ data-test-id="dropBox"
1464
+ dot-ui-element="dropbox"
1465
+ style="z-index: 4;"
1466
+ >
1467
+ <div
1468
+ class="subContainer shadow radius defaultPalette"
1469
+ data-id="dropBox_subcontainer"
1470
+ data-selector-id="dropBox_subcontainer"
1471
+ data-test-id="dropBox_subcontainer"
1472
+ tabindex="-1"
1473
+ >
1474
+ <div
1475
+ class="arrowPosition"
1476
+ data-id="dropBox_arrow"
1477
+ data-selector-id="dropBox_arrow"
1478
+ data-test-id="dropBox_arrow"
1479
+ >
1480
+ <div
1481
+ class="arrowShape"
1482
+ />
1483
+ </div>
1484
+ <div
1485
+ class="d-flex d-flex-col"
1486
+ data-id="containerComponent"
1487
+ data-selector-id="container"
1488
+ data-test-id="containerComponent"
1489
+ />
1490
+ </div>
1491
+ </div>
1492
+ </div>
1493
+ </body>
1494
+ `;
1495
+
1496
+ exports[`ResponsiveDropBox Render with size as mlarge 1`] = `
1497
+ <body>
1498
+ <div>
1499
+ <div
1500
+ class="main container bottomStart mlarge boxDirection arrow"
1501
+ data-a11y-focus-main-area="true"
1502
+ data-arrow-position="end"
1503
+ data-box-direction="bottom"
1504
+ data-id="dropBox"
1505
+ data-position="bottomStart"
1506
+ data-selector-id="dropBox"
1507
+ data-test-id="dropBox"
1508
+ dot-ui-element="dropbox"
1509
+ style="z-index: 4;"
1510
+ >
1511
+ <div
1512
+ class="subContainer shadow radius defaultPalette"
1513
+ data-id="dropBox_subcontainer"
1514
+ data-selector-id="dropBox_subcontainer"
1515
+ data-test-id="dropBox_subcontainer"
1516
+ tabindex="-1"
1517
+ >
1518
+ <div
1519
+ class="arrowPosition"
1520
+ data-id="dropBox_arrow"
1521
+ data-selector-id="dropBox_arrow"
1522
+ data-test-id="dropBox_arrow"
1523
+ >
1524
+ <div
1525
+ class="arrowShape"
1526
+ />
1527
+ </div>
1528
+ <div
1529
+ class="d-flex d-flex-col"
1530
+ data-id="containerComponent"
1531
+ data-selector-id="container"
1532
+ data-test-id="containerComponent"
1533
+ />
1534
+ </div>
1535
+ </div>
1536
+ </div>
1537
+ </body>
1538
+ `;
1539
+
1540
+ exports[`ResponsiveDropBox Render with size as small 1`] = `
1541
+ <body>
1542
+ <div>
1543
+ <div
1544
+ class="main container bottomStart small boxDirection arrow"
1545
+ data-a11y-focus-main-area="true"
1546
+ data-arrow-position="end"
1547
+ data-box-direction="bottom"
1548
+ data-id="dropBox"
1549
+ data-position="bottomStart"
1550
+ data-selector-id="dropBox"
1551
+ data-test-id="dropBox"
1552
+ dot-ui-element="dropbox"
1553
+ style="z-index: 4;"
1554
+ >
1555
+ <div
1556
+ class="subContainer shadow radius defaultPalette"
1557
+ data-id="dropBox_subcontainer"
1558
+ data-selector-id="dropBox_subcontainer"
1559
+ data-test-id="dropBox_subcontainer"
1560
+ tabindex="-1"
1561
+ >
1562
+ <div
1563
+ class="arrowPosition"
1564
+ data-id="dropBox_arrow"
1565
+ data-selector-id="dropBox_arrow"
1566
+ data-test-id="dropBox_arrow"
1567
+ >
1568
+ <div
1569
+ class="arrowShape"
1570
+ />
1571
+ </div>
1572
+ <div
1573
+ class="d-flex d-flex-col"
1574
+ data-id="containerComponent"
1575
+ data-selector-id="container"
1576
+ data-test-id="containerComponent"
1577
+ />
1578
+ </div>
1579
+ </div>
1580
+ </div>
1581
+ </body>
1582
+ `;
1583
+
1584
+ exports[`ResponsiveDropBox Render with size as xlarge 1`] = `
1585
+ <body>
1586
+ <div>
1587
+ <div
1588
+ class="main container bottomStart xlarge boxDirection arrow"
1589
+ data-a11y-focus-main-area="true"
1590
+ data-arrow-position="end"
1591
+ data-box-direction="bottom"
1592
+ data-id="dropBox"
1593
+ data-position="bottomStart"
1594
+ data-selector-id="dropBox"
1595
+ data-test-id="dropBox"
1596
+ dot-ui-element="dropbox"
1597
+ style="z-index: 4;"
1598
+ >
1599
+ <div
1600
+ class="subContainer shadow radius defaultPalette"
1601
+ data-id="dropBox_subcontainer"
1602
+ data-selector-id="dropBox_subcontainer"
1603
+ data-test-id="dropBox_subcontainer"
1604
+ tabindex="-1"
1605
+ >
1606
+ <div
1607
+ class="arrowPosition"
1608
+ data-id="dropBox_arrow"
1609
+ data-selector-id="dropBox_arrow"
1610
+ data-test-id="dropBox_arrow"
1611
+ >
1612
+ <div
1613
+ class="arrowShape"
1614
+ />
1615
+ </div>
1616
+ <div
1617
+ class="d-flex d-flex-col"
1618
+ data-id="containerComponent"
1619
+ data-selector-id="container"
1620
+ data-test-id="containerComponent"
1621
+ />
1622
+ </div>
1623
+ </div>
1624
+ </div>
1625
+ </body>
1626
+ `;
1627
+
1628
+ exports[`ResponsiveDropBox Render with size as xmini 1`] = `
1629
+ <body>
1630
+ <div>
1631
+ <div
1632
+ class="main container bottomStart xmini boxDirection arrow"
1633
+ data-a11y-focus-main-area="true"
1634
+ data-arrow-position="end"
1635
+ data-box-direction="bottom"
1636
+ data-id="dropBox"
1637
+ data-position="bottomStart"
1638
+ data-selector-id="dropBox"
1639
+ data-test-id="dropBox"
1640
+ dot-ui-element="dropbox"
1641
+ style="z-index: 4;"
1642
+ >
1643
+ <div
1644
+ class="subContainer shadow radius defaultPalette"
1645
+ data-id="dropBox_subcontainer"
1646
+ data-selector-id="dropBox_subcontainer"
1647
+ data-test-id="dropBox_subcontainer"
1648
+ tabindex="-1"
1649
+ >
1650
+ <div
1651
+ class="arrowPosition"
1652
+ data-id="dropBox_arrow"
1653
+ data-selector-id="dropBox_arrow"
1654
+ data-test-id="dropBox_arrow"
1655
+ >
1656
+ <div
1657
+ class="arrowShape"
1658
+ />
1659
+ </div>
1660
+ <div
1661
+ class="d-flex d-flex-col"
1662
+ data-id="containerComponent"
1663
+ data-selector-id="container"
1664
+ data-test-id="containerComponent"
1665
+ />
1666
+ </div>
1667
+ </div>
1668
+ </div>
1669
+ </body>
1670
+ `;
1671
+
1672
+ exports[`ResponsiveDropBox Render with size as xsmall 1`] = `
1673
+ <body>
1674
+ <div>
1675
+ <div
1676
+ class="main container bottomStart xsmall boxDirection arrow"
1677
+ data-a11y-focus-main-area="true"
1678
+ data-arrow-position="end"
1679
+ data-box-direction="bottom"
1680
+ data-id="dropBox"
1681
+ data-position="bottomStart"
1682
+ data-selector-id="dropBox"
1683
+ data-test-id="dropBox"
1684
+ dot-ui-element="dropbox"
1685
+ style="z-index: 4;"
1686
+ >
1687
+ <div
1688
+ class="subContainer shadow radius defaultPalette"
1689
+ data-id="dropBox_subcontainer"
1690
+ data-selector-id="dropBox_subcontainer"
1691
+ data-test-id="dropBox_subcontainer"
1692
+ tabindex="-1"
1693
+ >
1694
+ <div
1695
+ class="arrowPosition"
1696
+ data-id="dropBox_arrow"
1697
+ data-selector-id="dropBox_arrow"
1698
+ data-test-id="dropBox_arrow"
1699
+ >
1700
+ <div
1701
+ class="arrowShape"
1702
+ />
1703
+ </div>
1704
+ <div
1705
+ class="d-flex d-flex-col"
1706
+ data-id="containerComponent"
1707
+ data-selector-id="container"
1708
+ data-test-id="containerComponent"
1709
+ />
1710
+ </div>
1711
+ </div>
1712
+ </div>
1713
+ </body>
1714
+ `;
1715
+
1716
+ exports[`ResponsiveDropBox Render with size as xxlarge 1`] = `
1717
+ <body>
1718
+ <div>
1719
+ <div
1720
+ class="main container bottomStart xxlarge boxDirection arrow"
1721
+ data-a11y-focus-main-area="true"
1722
+ data-arrow-position="end"
1723
+ data-box-direction="bottom"
1724
+ data-id="dropBox"
1725
+ data-position="bottomStart"
1726
+ data-selector-id="dropBox"
1727
+ data-test-id="dropBox"
1728
+ dot-ui-element="dropbox"
1729
+ style="z-index: 4;"
1730
+ >
1731
+ <div
1732
+ class="subContainer shadow radius defaultPalette"
1733
+ data-id="dropBox_subcontainer"
1734
+ data-selector-id="dropBox_subcontainer"
1735
+ data-test-id="dropBox_subcontainer"
1736
+ tabindex="-1"
1737
+ >
1738
+ <div
1739
+ class="arrowPosition"
1740
+ data-id="dropBox_arrow"
1741
+ data-selector-id="dropBox_arrow"
1742
+ data-test-id="dropBox_arrow"
1743
+ >
1744
+ <div
1745
+ class="arrowShape"
1746
+ />
1747
+ </div>
1748
+ <div
1749
+ class="d-flex d-flex-col"
1750
+ data-id="containerComponent"
1751
+ data-selector-id="container"
1752
+ data-test-id="containerComponent"
1753
+ />
1754
+ </div>
1755
+ </div>
1756
+ </div>
1757
+ </body>
1758
+ `;
1759
+
1760
+ exports[`ResponsiveDropBox Render with tourId 1`] = `
1761
+ <body>
1762
+ <div>
1763
+ <div
1764
+ class="main container bottomStart default boxDirection arrow"
1765
+ data-a11y-focus-main-area="true"
1766
+ data-arrow-position="end"
1767
+ data-box-direction="bottom"
1768
+ data-id="dropBox"
1769
+ data-position="bottomStart"
1770
+ data-selector-id="dropBox"
1771
+ data-test-id="dropBox"
1772
+ data-tour="responsive-drop-box-tour"
1773
+ dot-ui-element="dropbox"
1774
+ style="z-index: 4;"
1775
+ >
1776
+ <div
1777
+ class="subContainer shadow radius defaultPalette"
1778
+ data-id="dropBox_subcontainer"
1779
+ data-selector-id="dropBox_subcontainer"
1780
+ data-test-id="dropBox_subcontainer"
1781
+ tabindex="-1"
1782
+ >
1783
+ <div
1784
+ class="arrowPosition"
1785
+ data-id="dropBox_arrow"
1786
+ data-selector-id="dropBox_arrow"
1787
+ data-test-id="dropBox_arrow"
1788
+ >
1789
+ <div
1790
+ class="arrowShape"
1791
+ />
1792
+ </div>
1793
+ <div
1794
+ class="d-flex d-flex-col"
1795
+ data-id="containerComponent"
1796
+ data-selector-id="container"
1797
+ data-test-id="containerComponent"
1798
+ />
1799
+ </div>
1800
+ </div>
1801
+ </div>
1802
+ </body>
1803
+ `;
1804
+
3
1805
  exports[`ResponsiveDropBox rendering the defult props 1`] = `
4
1806
  <DocumentFragment>
5
1807
  <div