@hero-design/rn 7.16.1 → 7.17.0

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 (54) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +228 -187
  3. package/lib/index.js +227 -186
  4. package/package.json +2 -2
  5. package/src/components/DatePicker/DatePickerIOS.tsx +2 -2
  6. package/src/components/List/BasicListItem.tsx +8 -4
  7. package/src/components/List/StyledBasicListItem.tsx +2 -2
  8. package/src/components/Select/MultiSelect/Option.tsx +21 -15
  9. package/src/components/Select/MultiSelect/OptionList.tsx +47 -41
  10. package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx +25 -14
  11. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +41 -21
  12. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1995 -352
  13. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +5611 -523
  14. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +122 -1
  15. package/src/components/Select/MultiSelect/index.tsx +26 -36
  16. package/src/components/Select/SingleSelect/Option.tsx +20 -13
  17. package/src/components/Select/SingleSelect/OptionList.tsx +47 -39
  18. package/src/components/Select/SingleSelect/__tests__/OptionList.spec.tsx +23 -12
  19. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +23 -14
  20. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1846 -258
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +5140 -412
  22. package/src/components/Select/SingleSelect/__tests__/index.spec.tsx +117 -1
  23. package/src/components/Select/SingleSelect/index.tsx +26 -37
  24. package/src/components/Select/StyledOptionList.tsx +43 -44
  25. package/src/components/Select/StyledSelect.tsx +6 -15
  26. package/src/components/Select/__tests__/StyledSelect.spec.tsx +1 -23
  27. package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap +0 -67
  28. package/src/components/Select/__tests__/helpers.spec.tsx +74 -0
  29. package/src/components/Select/helpers.tsx +87 -4
  30. package/src/components/Select/types.ts +99 -0
  31. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +157 -1
  32. package/src/components/TextInput/__tests__/index.spec.tsx +29 -8
  33. package/src/components/TextInput/index.tsx +18 -7
  34. package/src/components/TimePicker/TimePickerIOS.tsx +2 -2
  35. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +3 -5
  36. package/src/theme/components/select.ts +3 -5
  37. package/src/types.ts +7 -1
  38. package/types/components/List/BasicListItem.d.ts +1 -1
  39. package/types/components/Select/MultiSelect/Option.d.ts +4 -2
  40. package/types/components/Select/MultiSelect/OptionList.d.ts +6 -7
  41. package/types/components/Select/MultiSelect/index.d.ts +5 -5
  42. package/types/components/Select/SingleSelect/Option.d.ts +4 -2
  43. package/types/components/Select/SingleSelect/OptionList.d.ts +6 -7
  44. package/types/components/Select/SingleSelect/index.d.ts +5 -5
  45. package/types/components/Select/StyledOptionList.d.ts +10 -16
  46. package/types/components/Select/StyledSelect.d.ts +5 -7
  47. package/types/components/Select/__tests__/helpers.spec.d.ts +1 -0
  48. package/types/components/Select/helpers.d.ts +14 -2
  49. package/types/components/Select/index.d.ts +1 -1
  50. package/types/components/Select/types.d.ts +32 -7
  51. package/types/components/TextInput/index.d.ts +4 -2
  52. package/types/theme/components/select.d.ts +3 -5
  53. package/types/types.d.ts +2 -1
  54. package/src/components/Select/types.tsx +0 -52
package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap CHANGED
@@ -18,16 +18,26 @@ exports[`OptionList render isLoading correctly 1`] = `
18
18
  data={
19
19
  Array [
20
20
  Object {
21
- "text": "A",
22
- "value": "a",
23
- },
24
- Object {
25
- "text": "B",
26
- "value": "b",
21
+ "category": "A",
22
+ "data": Array [
23
+ Object {
24
+ "text": "A1",
25
+ "value": "a1",
26
+ },
27
+ ],
27
28
  },
28
29
  Object {
29
- "text": "C",
30
- "value": "c",
30
+ "category": "B",
31
+ "data": Array [
32
+ Object {
33
+ "text": "B1",
34
+ "value": "b1",
35
+ },
36
+ Object {
37
+ "text": "B2",
38
+ "value": "b2",
39
+ },
40
+ ],
31
41
  },
32
42
  ]
33
43
  }
@@ -44,28 +54,139 @@ exports[`OptionList render isLoading correctly 1`] = `
44
54
  onScrollBeginDrag={[Function]}
45
55
  onScrollEndDrag={[Function]}
46
56
  onScrollToIndexFailed={[Function]}
47
- removeClippedSubviews={false}
48
57
  renderItem={[Function]}
49
58
  scrollEventThrottle={50}
50
- stickyHeaderIndices={Array []}
51
- style={
52
- Object {
53
- "paddingHorizontal": 16,
54
- }
59
+ stickyHeaderIndices={
60
+ Array [
61
+ 0,
62
+ 3,
63
+ ]
55
64
  }
56
- viewabilityConfigCallbackPairs={Array []}
65
+ style={Object {}}
57
66
  >
58
67
  <View>
68
+ <View
69
+ onLayout={[Function]}
70
+ style={null}
71
+ >
72
+ <View
73
+ style={
74
+ Array [
75
+ Object {
76
+ "alignContent": "center",
77
+ "backgroundColor": "#dadbde",
78
+ "display": "flex",
79
+ "flexDirection": "row",
80
+ "justifyContent": "space-between",
81
+ "marginBottom": 16,
82
+ "paddingHorizontal": 16,
83
+ "paddingVertical": 8,
84
+ },
85
+ Object {
86
+ "marginBottom": 0,
87
+ },
88
+ ]
89
+ }
90
+ >
91
+ <View
92
+ style={
93
+ Array [
94
+ Object {
95
+ "display": "flex",
96
+ "flexDirection": "row",
97
+ },
98
+ undefined,
99
+ ]
100
+ }
101
+ >
102
+ <View
103
+ style={
104
+ Array [
105
+ Object {
106
+ "marginRight": 8,
107
+ },
108
+ undefined,
109
+ ]
110
+ }
111
+ />
112
+ <Text
113
+ style={
114
+ Array [
115
+ Object {
116
+ "color": "#292a2b",
117
+ "fontFamily": "BeVietnamPro-Regular",
118
+ "fontSize": 16,
119
+ "letterSpacing": 0.48,
120
+ "lineHeight": 24,
121
+ },
122
+ undefined,
123
+ ]
124
+ }
125
+ themeFontSize="large"
126
+ themeFontWeight="regular"
127
+ themeIntent="body"
128
+ >
129
+ A
130
+ </Text>
131
+ </View>
132
+ </View>
133
+ </View>
59
134
  <View
60
135
  onLayout={[Function]}
61
136
  style={null}
62
137
  >
63
138
  <View>
64
139
  <View
140
+ highlighted={false}
141
+ section={
142
+ Object {
143
+ "category": "A",
144
+ "data": Array [
145
+ Object {
146
+ "text": "A1",
147
+ "value": "a1",
148
+ },
149
+ ],
150
+ }
151
+ }
152
+ style={
153
+ Array [
154
+ Object {
155
+ "marginTop": 12,
156
+ },
157
+ undefined,
158
+ ]
159
+ }
160
+ trailingItem={
161
+ Object {
162
+ "text": "A1",
163
+ "value": "a1",
164
+ }
165
+ }
166
+ trailingSection={
167
+ Object {
168
+ "category": "B",
169
+ "data": Array [
170
+ Object {
171
+ "text": "B1",
172
+ "value": "b1",
173
+ },
174
+ Object {
175
+ "text": "B2",
176
+ "value": "b2",
177
+ },
178
+ ],
179
+ }
180
+ }
181
+ />
182
+ <View
183
+ accessibilityState={
184
+ Object {
185
+ "disabled": false,
186
+ }
187
+ }
65
188
  accessible={true}
66
- collapsable={false}
67
189
  focusable={true}
68
- nativeID="animatedComponent"
69
190
  onClick={[Function]}
70
191
  onResponderGrant={[Function]}
71
192
  onResponderMove={[Function]}
@@ -74,22 +195,28 @@ exports[`OptionList render isLoading correctly 1`] = `
74
195
  onResponderTerminationRequest={[Function]}
75
196
  onStartShouldSetResponder={[Function]}
76
197
  style={
77
- Object {
78
- "alignItems": "center",
79
- "backgroundColor": "#f1e9fb",
80
- "borderRadius": 4,
81
- "flexDirection": "row",
82
- "justifyContent": "space-between",
83
- "opacity": 1,
84
- "padding": 16,
85
- }
198
+ Array [
199
+ Object {
200
+ "alignItems": "center",
201
+ "backgroundColor": "#f1e9fb",
202
+ "flexDirection": "row",
203
+ "opacity": 1,
204
+ "padding": 16,
205
+ },
206
+ Object {
207
+ "marginHorizontal": 12,
208
+ },
209
+ ]
86
210
  }
87
211
  >
88
212
  <View
89
213
  style={
90
- Object {
91
- "flex": 1,
92
- }
214
+ Array [
215
+ Object {
216
+ "flex": 1,
217
+ },
218
+ undefined,
219
+ ]
93
220
  }
94
221
  >
95
222
  <Text
@@ -109,23 +236,147 @@ exports[`OptionList render isLoading correctly 1`] = `
109
236
  themeFontWeight="regular"
110
237
  themeIntent="body"
111
238
  >
112
- A
239
+ A1
113
240
  </Text>
114
241
  </View>
115
- <HeroIcon
116
- name="checkmark"
242
+ <View
117
243
  style={
118
244
  Array [
119
245
  Object {
120
- "color": "#292a2b",
121
- "fontSize": 20,
246
+ "marginLeft": 8,
247
+ },
248
+ undefined,
249
+ ]
250
+ }
251
+ >
252
+ <HeroIcon
253
+ name="checkmark"
254
+ style={
255
+ Array [
256
+ Object {
257
+ "color": "#292a2b",
258
+ "fontSize": 20,
259
+ },
260
+ undefined,
261
+ ]
262
+ }
263
+ themeIntent="text"
264
+ themeSize="small"
265
+ />
266
+ </View>
267
+ </View>
268
+ <View
269
+ highlighted={false}
270
+ leadingItem={
271
+ Object {
272
+ "text": "A1",
273
+ "value": "a1",
274
+ }
275
+ }
276
+ section={
277
+ Object {
278
+ "category": "A",
279
+ "data": Array [
280
+ Object {
281
+ "text": "A1",
282
+ "value": "a1",
283
+ },
284
+ ],
285
+ }
286
+ }
287
+ style={
288
+ Array [
289
+ Object {
290
+ "marginTop": 12,
291
+ },
292
+ undefined,
293
+ ]
294
+ }
295
+ trailingSection={
296
+ Object {
297
+ "category": "B",
298
+ "data": Array [
299
+ Object {
300
+ "text": "B1",
301
+ "value": "b1",
302
+ },
303
+ Object {
304
+ "text": "B2",
305
+ "value": "b2",
306
+ },
307
+ ],
308
+ }
309
+ }
310
+ />
311
+ </View>
312
+ </View>
313
+ <View
314
+ onLayout={[Function]}
315
+ style={null}
316
+ />
317
+ <View
318
+ onLayout={[Function]}
319
+ style={null}
320
+ >
321
+ <View
322
+ style={
323
+ Array [
324
+ Object {
325
+ "alignContent": "center",
326
+ "backgroundColor": "#dadbde",
327
+ "display": "flex",
328
+ "flexDirection": "row",
329
+ "justifyContent": "space-between",
330
+ "marginBottom": 16,
331
+ "paddingHorizontal": 16,
332
+ "paddingVertical": 8,
333
+ },
334
+ Object {
335
+ "marginBottom": 0,
336
+ },
337
+ ]
338
+ }
339
+ >
340
+ <View
341
+ style={
342
+ Array [
343
+ Object {
344
+ "display": "flex",
345
+ "flexDirection": "row",
346
+ },
347
+ undefined,
348
+ ]
349
+ }
350
+ >
351
+ <View
352
+ style={
353
+ Array [
354
+ Object {
355
+ "marginRight": 8,
122
356
  },
123
357
  undefined,
124
358
  ]
125
359
  }
126
- themeIntent="text"
127
- themeSize="small"
128
360
  />
361
+ <Text
362
+ style={
363
+ Array [
364
+ Object {
365
+ "color": "#292a2b",
366
+ "fontFamily": "BeVietnamPro-Regular",
367
+ "fontSize": 16,
368
+ "letterSpacing": 0.48,
369
+ "lineHeight": 24,
370
+ },
371
+ undefined,
372
+ ]
373
+ }
374
+ themeFontSize="large"
375
+ themeFontWeight="regular"
376
+ themeIntent="body"
377
+ >
378
+ B
379
+ </Text>
129
380
  </View>
130
381
  </View>
131
382
  </View>
@@ -135,10 +386,56 @@ exports[`OptionList render isLoading correctly 1`] = `
135
386
  >
136
387
  <View>
137
388
  <View
389
+ highlighted={false}
390
+ leadingSection={
391
+ Object {
392
+ "category": "A",
393
+ "data": Array [
394
+ Object {
395
+ "text": "A1",
396
+ "value": "a1",
397
+ },
398
+ ],
399
+ }
400
+ }
401
+ section={
402
+ Object {
403
+ "category": "B",
404
+ "data": Array [
405
+ Object {
406
+ "text": "B1",
407
+ "value": "b1",
408
+ },
409
+ Object {
410
+ "text": "B2",
411
+ "value": "b2",
412
+ },
413
+ ],
414
+ }
415
+ }
416
+ style={
417
+ Array [
418
+ Object {
419
+ "marginTop": 12,
420
+ },
421
+ undefined,
422
+ ]
423
+ }
424
+ trailingItem={
425
+ Object {
426
+ "text": "B1",
427
+ "value": "b1",
428
+ }
429
+ }
430
+ />
431
+ <View
432
+ accessibilityState={
433
+ Object {
434
+ "disabled": false,
435
+ }
436
+ }
138
437
  accessible={true}
139
- collapsable={false}
140
438
  focusable={true}
141
- nativeID="animatedComponent"
142
439
  onClick={[Function]}
143
440
  onResponderGrant={[Function]}
144
441
  onResponderMove={[Function]}
@@ -147,22 +444,28 @@ exports[`OptionList render isLoading correctly 1`] = `
147
444
  onResponderTerminationRequest={[Function]}
148
445
  onStartShouldSetResponder={[Function]}
149
446
  style={
150
- Object {
151
- "alignItems": "center",
152
- "backgroundColor": "#ffffff",
153
- "borderRadius": 4,
154
- "flexDirection": "row",
155
- "justifyContent": "space-between",
156
- "opacity": 1,
157
- "padding": 16,
158
- }
447
+ Array [
448
+ Object {
449
+ "alignItems": "center",
450
+ "backgroundColor": "#ffffff",
451
+ "flexDirection": "row",
452
+ "opacity": 1,
453
+ "padding": 16,
454
+ },
455
+ Object {
456
+ "marginHorizontal": 12,
457
+ },
458
+ ]
159
459
  }
160
460
  >
161
461
  <View
162
462
  style={
163
- Object {
164
- "flex": 1,
165
- }
463
+ Array [
464
+ Object {
465
+ "flex": 1,
466
+ },
467
+ undefined,
468
+ ]
166
469
  }
167
470
  >
168
471
  <Text
@@ -182,10 +485,59 @@ exports[`OptionList render isLoading correctly 1`] = `
182
485
  themeFontWeight="regular"
183
486
  themeIntent="body"
184
487
  >
185
- B
488
+ B1
186
489
  </Text>
187
490
  </View>
188
491
  </View>
492
+ <View
493
+ highlighted={false}
494
+ leadingItem={
495
+ Object {
496
+ "text": "B1",
497
+ "value": "b1",
498
+ }
499
+ }
500
+ leadingSection={
501
+ Object {
502
+ "category": "A",
503
+ "data": Array [
504
+ Object {
505
+ "text": "A1",
506
+ "value": "a1",
507
+ },
508
+ ],
509
+ }
510
+ }
511
+ section={
512
+ Object {
513
+ "category": "B",
514
+ "data": Array [
515
+ Object {
516
+ "text": "B1",
517
+ "value": "b1",
518
+ },
519
+ Object {
520
+ "text": "B2",
521
+ "value": "b2",
522
+ },
523
+ ],
524
+ }
525
+ }
526
+ style={
527
+ Array [
528
+ Object {
529
+ "marginTop": 4,
530
+ },
531
+ undefined,
532
+ ]
533
+ }
534
+ trailingItem={
535
+ Object {
536
+ "text": "B2",
537
+ "value": "b2",
538
+ }
539
+ }
540
+ />
189
541
  </View>
190
542
  </View>
191
543
  <View
@@ -194,10 +546,13 @@ exports[`OptionList render isLoading correctly 1`] = `
194
546
  >
195
547
  <View>
196
548
  <View
549
+ accessibilityState={
550
+ Object {
551
+ "disabled": false,
552
+ }
553
+ }
197
554
  accessible={true}
198
- collapsable={false}
199
555
  focusable={true}
200
- nativeID="animatedComponent"
201
556
  onClick={[Function]}
202
557
  onResponderGrant={[Function]}
203
558
  onResponderMove={[Function]}
@@ -206,22 +561,28 @@ exports[`OptionList render isLoading correctly 1`] = `
206
561
  onResponderTerminationRequest={[Function]}
207
562
  onStartShouldSetResponder={[Function]}
208
563
  style={
209
- Object {
210
- "alignItems": "center",
211
- "backgroundColor": "#ffffff",
212
- "borderRadius": 4,
213
- "flexDirection": "row",
214
- "justifyContent": "space-between",
215
- "opacity": 1,
216
- "padding": 16,
217
- }
564
+ Array [
565
+ Object {
566
+ "alignItems": "center",
567
+ "backgroundColor": "#ffffff",
568
+ "flexDirection": "row",
569
+ "opacity": 1,
570
+ "padding": 16,
571
+ },
572
+ Object {
573
+ "marginHorizontal": 12,
574
+ },
575
+ ]
218
576
  }
219
577
  >
220
578
  <View
221
579
  style={
222
- Object {
223
- "flex": 1,
224
- }
580
+ Array [
581
+ Object {
582
+ "flex": 1,
583
+ },
584
+ undefined,
585
+ ]
225
586
  }
226
587
  >
227
588
  <Text
@@ -241,18 +602,65 @@ exports[`OptionList render isLoading correctly 1`] = `
241
602
  themeFontWeight="regular"
242
603
  themeIntent="body"
243
604
  >
244
- C
605
+ B2
245
606
  </Text>
246
607
  </View>
247
608
  </View>
248
- </View>
249
- </View>
250
- <View
251
- onLayout={[Function]}
252
- >
253
- <View
254
- style={
255
- Object {
609
+ <View
610
+ highlighted={false}
611
+ leadingItem={
612
+ Object {
613
+ "text": "B2",
614
+ "value": "b2",
615
+ }
616
+ }
617
+ leadingSection={
618
+ Object {
619
+ "category": "A",
620
+ "data": Array [
621
+ Object {
622
+ "text": "A1",
623
+ "value": "a1",
624
+ },
625
+ ],
626
+ }
627
+ }
628
+ section={
629
+ Object {
630
+ "category": "B",
631
+ "data": Array [
632
+ Object {
633
+ "text": "B1",
634
+ "value": "b1",
635
+ },
636
+ Object {
637
+ "text": "B2",
638
+ "value": "b2",
639
+ },
640
+ ],
641
+ }
642
+ }
643
+ style={
644
+ Array [
645
+ Object {
646
+ "marginTop": 12,
647
+ },
648
+ undefined,
649
+ ]
650
+ }
651
+ />
652
+ </View>
653
+ </View>
654
+ <View
655
+ onLayout={[Function]}
656
+ style={null}
657
+ />
658
+ <View
659
+ onLayout={[Function]}
660
+ >
661
+ <View
662
+ style={
663
+ Object {
256
664
  "alignItems": "center",
257
665
  "display": "flex",
258
666
  "height": 56,
@@ -407,16 +815,26 @@ exports[`OptionList renders correctly 1`] = `
407
815
  data={
408
816
  Array [
409
817
  Object {
410
- "text": "A",
411
- "value": "a",
412
- },
413
- Object {
414
- "text": "B",
415
- "value": "b",
818
+ "category": "A",
819
+ "data": Array [
820
+ Object {
821
+ "text": "A1",
822
+ "value": "a1",
823
+ },
824
+ ],
416
825
  },
417
826
  Object {
418
- "text": "C",
419
- "value": "c",
827
+ "category": "B",
828
+ "data": Array [
829
+ Object {
830
+ "text": "B1",
831
+ "value": "b1",
832
+ },
833
+ Object {
834
+ "text": "B2",
835
+ "value": "b2",
836
+ },
837
+ ],
420
838
  },
421
839
  ]
422
840
  }
@@ -433,28 +851,139 @@ exports[`OptionList renders correctly 1`] = `
433
851
  onScrollBeginDrag={[Function]}
434
852
  onScrollEndDrag={[Function]}
435
853
  onScrollToIndexFailed={[Function]}
436
- removeClippedSubviews={false}
437
854
  renderItem={[Function]}
438
855
  scrollEventThrottle={50}
439
- stickyHeaderIndices={Array []}
440
- style={
441
- Object {
442
- "paddingHorizontal": 16,
443
- }
856
+ stickyHeaderIndices={
857
+ Array [
858
+ 0,
859
+ 3,
860
+ ]
444
861
  }
445
- viewabilityConfigCallbackPairs={Array []}
862
+ style={Object {}}
446
863
  >
447
864
  <View>
865
+ <View
866
+ onLayout={[Function]}
867
+ style={null}
868
+ >
869
+ <View
870
+ style={
871
+ Array [
872
+ Object {
873
+ "alignContent": "center",
874
+ "backgroundColor": "#dadbde",
875
+ "display": "flex",
876
+ "flexDirection": "row",
877
+ "justifyContent": "space-between",
878
+ "marginBottom": 16,
879
+ "paddingHorizontal": 16,
880
+ "paddingVertical": 8,
881
+ },
882
+ Object {
883
+ "marginBottom": 0,
884
+ },
885
+ ]
886
+ }
887
+ >
888
+ <View
889
+ style={
890
+ Array [
891
+ Object {
892
+ "display": "flex",
893
+ "flexDirection": "row",
894
+ },
895
+ undefined,
896
+ ]
897
+ }
898
+ >
899
+ <View
900
+ style={
901
+ Array [
902
+ Object {
903
+ "marginRight": 8,
904
+ },
905
+ undefined,
906
+ ]
907
+ }
908
+ />
909
+ <Text
910
+ style={
911
+ Array [
912
+ Object {
913
+ "color": "#292a2b",
914
+ "fontFamily": "BeVietnamPro-Regular",
915
+ "fontSize": 16,
916
+ "letterSpacing": 0.48,
917
+ "lineHeight": 24,
918
+ },
919
+ undefined,
920
+ ]
921
+ }
922
+ themeFontSize="large"
923
+ themeFontWeight="regular"
924
+ themeIntent="body"
925
+ >
926
+ A
927
+ </Text>
928
+ </View>
929
+ </View>
930
+ </View>
448
931
  <View
449
932
  onLayout={[Function]}
450
933
  style={null}
451
934
  >
452
935
  <View>
453
936
  <View
937
+ highlighted={false}
938
+ section={
939
+ Object {
940
+ "category": "A",
941
+ "data": Array [
942
+ Object {
943
+ "text": "A1",
944
+ "value": "a1",
945
+ },
946
+ ],
947
+ }
948
+ }
949
+ style={
950
+ Array [
951
+ Object {
952
+ "marginTop": 12,
953
+ },
954
+ undefined,
955
+ ]
956
+ }
957
+ trailingItem={
958
+ Object {
959
+ "text": "A1",
960
+ "value": "a1",
961
+ }
962
+ }
963
+ trailingSection={
964
+ Object {
965
+ "category": "B",
966
+ "data": Array [
967
+ Object {
968
+ "text": "B1",
969
+ "value": "b1",
970
+ },
971
+ Object {
972
+ "text": "B2",
973
+ "value": "b2",
974
+ },
975
+ ],
976
+ }
977
+ }
978
+ />
979
+ <View
980
+ accessibilityState={
981
+ Object {
982
+ "disabled": false,
983
+ }
984
+ }
454
985
  accessible={true}
455
- collapsable={false}
456
986
  focusable={true}
457
- nativeID="animatedComponent"
458
987
  onClick={[Function]}
459
988
  onResponderGrant={[Function]}
460
989
  onResponderMove={[Function]}
@@ -463,22 +992,28 @@ exports[`OptionList renders correctly 1`] = `
463
992
  onResponderTerminationRequest={[Function]}
464
993
  onStartShouldSetResponder={[Function]}
465
994
  style={
466
- Object {
467
- "alignItems": "center",
468
- "backgroundColor": "#f1e9fb",
469
- "borderRadius": 4,
470
- "flexDirection": "row",
471
- "justifyContent": "space-between",
472
- "opacity": 1,
473
- "padding": 16,
474
- }
995
+ Array [
996
+ Object {
997
+ "alignItems": "center",
998
+ "backgroundColor": "#f1e9fb",
999
+ "flexDirection": "row",
1000
+ "opacity": 1,
1001
+ "padding": 16,
1002
+ },
1003
+ Object {
1004
+ "marginHorizontal": 12,
1005
+ },
1006
+ ]
475
1007
  }
476
1008
  >
477
1009
  <View
478
1010
  style={
479
- Object {
480
- "flex": 1,
481
- }
1011
+ Array [
1012
+ Object {
1013
+ "flex": 1,
1014
+ },
1015
+ undefined,
1016
+ ]
482
1017
  }
483
1018
  >
484
1019
  <Text
@@ -498,23 +1033,147 @@ exports[`OptionList renders correctly 1`] = `
498
1033
  themeFontWeight="regular"
499
1034
  themeIntent="body"
500
1035
  >
501
- A
1036
+ A1
502
1037
  </Text>
503
1038
  </View>
504
- <HeroIcon
505
- name="checkmark"
1039
+ <View
506
1040
  style={
507
1041
  Array [
508
1042
  Object {
509
- "color": "#292a2b",
510
- "fontSize": 20,
1043
+ "marginLeft": 8,
1044
+ },
1045
+ undefined,
1046
+ ]
1047
+ }
1048
+ >
1049
+ <HeroIcon
1050
+ name="checkmark"
1051
+ style={
1052
+ Array [
1053
+ Object {
1054
+ "color": "#292a2b",
1055
+ "fontSize": 20,
1056
+ },
1057
+ undefined,
1058
+ ]
1059
+ }
1060
+ themeIntent="text"
1061
+ themeSize="small"
1062
+ />
1063
+ </View>
1064
+ </View>
1065
+ <View
1066
+ highlighted={false}
1067
+ leadingItem={
1068
+ Object {
1069
+ "text": "A1",
1070
+ "value": "a1",
1071
+ }
1072
+ }
1073
+ section={
1074
+ Object {
1075
+ "category": "A",
1076
+ "data": Array [
1077
+ Object {
1078
+ "text": "A1",
1079
+ "value": "a1",
1080
+ },
1081
+ ],
1082
+ }
1083
+ }
1084
+ style={
1085
+ Array [
1086
+ Object {
1087
+ "marginTop": 12,
1088
+ },
1089
+ undefined,
1090
+ ]
1091
+ }
1092
+ trailingSection={
1093
+ Object {
1094
+ "category": "B",
1095
+ "data": Array [
1096
+ Object {
1097
+ "text": "B1",
1098
+ "value": "b1",
1099
+ },
1100
+ Object {
1101
+ "text": "B2",
1102
+ "value": "b2",
1103
+ },
1104
+ ],
1105
+ }
1106
+ }
1107
+ />
1108
+ </View>
1109
+ </View>
1110
+ <View
1111
+ onLayout={[Function]}
1112
+ style={null}
1113
+ />
1114
+ <View
1115
+ onLayout={[Function]}
1116
+ style={null}
1117
+ >
1118
+ <View
1119
+ style={
1120
+ Array [
1121
+ Object {
1122
+ "alignContent": "center",
1123
+ "backgroundColor": "#dadbde",
1124
+ "display": "flex",
1125
+ "flexDirection": "row",
1126
+ "justifyContent": "space-between",
1127
+ "marginBottom": 16,
1128
+ "paddingHorizontal": 16,
1129
+ "paddingVertical": 8,
1130
+ },
1131
+ Object {
1132
+ "marginBottom": 0,
1133
+ },
1134
+ ]
1135
+ }
1136
+ >
1137
+ <View
1138
+ style={
1139
+ Array [
1140
+ Object {
1141
+ "display": "flex",
1142
+ "flexDirection": "row",
1143
+ },
1144
+ undefined,
1145
+ ]
1146
+ }
1147
+ >
1148
+ <View
1149
+ style={
1150
+ Array [
1151
+ Object {
1152
+ "marginRight": 8,
511
1153
  },
512
1154
  undefined,
513
1155
  ]
514
1156
  }
515
- themeIntent="text"
516
- themeSize="small"
517
1157
  />
1158
+ <Text
1159
+ style={
1160
+ Array [
1161
+ Object {
1162
+ "color": "#292a2b",
1163
+ "fontFamily": "BeVietnamPro-Regular",
1164
+ "fontSize": 16,
1165
+ "letterSpacing": 0.48,
1166
+ "lineHeight": 24,
1167
+ },
1168
+ undefined,
1169
+ ]
1170
+ }
1171
+ themeFontSize="large"
1172
+ themeFontWeight="regular"
1173
+ themeIntent="body"
1174
+ >
1175
+ B
1176
+ </Text>
518
1177
  </View>
519
1178
  </View>
520
1179
  </View>
@@ -524,10 +1183,56 @@ exports[`OptionList renders correctly 1`] = `
524
1183
  >
525
1184
  <View>
526
1185
  <View
1186
+ highlighted={false}
1187
+ leadingSection={
1188
+ Object {
1189
+ "category": "A",
1190
+ "data": Array [
1191
+ Object {
1192
+ "text": "A1",
1193
+ "value": "a1",
1194
+ },
1195
+ ],
1196
+ }
1197
+ }
1198
+ section={
1199
+ Object {
1200
+ "category": "B",
1201
+ "data": Array [
1202
+ Object {
1203
+ "text": "B1",
1204
+ "value": "b1",
1205
+ },
1206
+ Object {
1207
+ "text": "B2",
1208
+ "value": "b2",
1209
+ },
1210
+ ],
1211
+ }
1212
+ }
1213
+ style={
1214
+ Array [
1215
+ Object {
1216
+ "marginTop": 12,
1217
+ },
1218
+ undefined,
1219
+ ]
1220
+ }
1221
+ trailingItem={
1222
+ Object {
1223
+ "text": "B1",
1224
+ "value": "b1",
1225
+ }
1226
+ }
1227
+ />
1228
+ <View
1229
+ accessibilityState={
1230
+ Object {
1231
+ "disabled": false,
1232
+ }
1233
+ }
527
1234
  accessible={true}
528
- collapsable={false}
529
1235
  focusable={true}
530
- nativeID="animatedComponent"
531
1236
  onClick={[Function]}
532
1237
  onResponderGrant={[Function]}
533
1238
  onResponderMove={[Function]}
@@ -536,22 +1241,28 @@ exports[`OptionList renders correctly 1`] = `
536
1241
  onResponderTerminationRequest={[Function]}
537
1242
  onStartShouldSetResponder={[Function]}
538
1243
  style={
539
- Object {
540
- "alignItems": "center",
541
- "backgroundColor": "#ffffff",
542
- "borderRadius": 4,
543
- "flexDirection": "row",
544
- "justifyContent": "space-between",
545
- "opacity": 1,
546
- "padding": 16,
547
- }
1244
+ Array [
1245
+ Object {
1246
+ "alignItems": "center",
1247
+ "backgroundColor": "#ffffff",
1248
+ "flexDirection": "row",
1249
+ "opacity": 1,
1250
+ "padding": 16,
1251
+ },
1252
+ Object {
1253
+ "marginHorizontal": 12,
1254
+ },
1255
+ ]
548
1256
  }
549
1257
  >
550
1258
  <View
551
1259
  style={
552
- Object {
553
- "flex": 1,
554
- }
1260
+ Array [
1261
+ Object {
1262
+ "flex": 1,
1263
+ },
1264
+ undefined,
1265
+ ]
555
1266
  }
556
1267
  >
557
1268
  <Text
@@ -571,46 +1282,104 @@ exports[`OptionList renders correctly 1`] = `
571
1282
  themeFontWeight="regular"
572
1283
  themeIntent="body"
573
1284
  >
574
- B
1285
+ B1
575
1286
  </Text>
576
1287
  </View>
577
1288
  </View>
578
- </View>
579
- </View>
580
- <View
581
- onLayout={[Function]}
582
- style={null}
583
- >
584
- <View>
585
1289
  <View
586
- accessible={true}
587
- collapsable={false}
588
- focusable={true}
589
- nativeID="animatedComponent"
590
- onClick={[Function]}
591
- onResponderGrant={[Function]}
592
- onResponderMove={[Function]}
593
- onResponderRelease={[Function]}
594
- onResponderTerminate={[Function]}
595
- onResponderTerminationRequest={[Function]}
596
- onStartShouldSetResponder={[Function]}
597
- style={
1290
+ highlighted={false}
1291
+ leadingItem={
598
1292
  Object {
599
- "alignItems": "center",
600
- "backgroundColor": "#ffffff",
601
- "borderRadius": 4,
602
- "flexDirection": "row",
603
- "justifyContent": "space-between",
604
- "opacity": 1,
605
- "padding": 16,
1293
+ "text": "B1",
1294
+ "value": "b1",
1295
+ }
1296
+ }
1297
+ leadingSection={
1298
+ Object {
1299
+ "category": "A",
1300
+ "data": Array [
1301
+ Object {
1302
+ "text": "A1",
1303
+ "value": "a1",
1304
+ },
1305
+ ],
1306
+ }
1307
+ }
1308
+ section={
1309
+ Object {
1310
+ "category": "B",
1311
+ "data": Array [
1312
+ Object {
1313
+ "text": "B1",
1314
+ "value": "b1",
1315
+ },
1316
+ Object {
1317
+ "text": "B2",
1318
+ "value": "b2",
1319
+ },
1320
+ ],
1321
+ }
1322
+ }
1323
+ style={
1324
+ Array [
1325
+ Object {
1326
+ "marginTop": 4,
1327
+ },
1328
+ undefined,
1329
+ ]
1330
+ }
1331
+ trailingItem={
1332
+ Object {
1333
+ "text": "B2",
1334
+ "value": "b2",
606
1335
  }
607
1336
  }
1337
+ />
1338
+ </View>
1339
+ </View>
1340
+ <View
1341
+ onLayout={[Function]}
1342
+ style={null}
1343
+ >
1344
+ <View>
1345
+ <View
1346
+ accessibilityState={
1347
+ Object {
1348
+ "disabled": false,
1349
+ }
1350
+ }
1351
+ accessible={true}
1352
+ focusable={true}
1353
+ onClick={[Function]}
1354
+ onResponderGrant={[Function]}
1355
+ onResponderMove={[Function]}
1356
+ onResponderRelease={[Function]}
1357
+ onResponderTerminate={[Function]}
1358
+ onResponderTerminationRequest={[Function]}
1359
+ onStartShouldSetResponder={[Function]}
1360
+ style={
1361
+ Array [
1362
+ Object {
1363
+ "alignItems": "center",
1364
+ "backgroundColor": "#ffffff",
1365
+ "flexDirection": "row",
1366
+ "opacity": 1,
1367
+ "padding": 16,
1368
+ },
1369
+ Object {
1370
+ "marginHorizontal": 12,
1371
+ },
1372
+ ]
1373
+ }
608
1374
  >
609
1375
  <View
610
1376
  style={
611
- Object {
612
- "flex": 1,
613
- }
1377
+ Array [
1378
+ Object {
1379
+ "flex": 1,
1380
+ },
1381
+ undefined,
1382
+ ]
614
1383
  }
615
1384
  >
616
1385
  <Text
@@ -630,12 +1399,59 @@ exports[`OptionList renders correctly 1`] = `
630
1399
  themeFontWeight="regular"
631
1400
  themeIntent="body"
632
1401
  >
633
- C
1402
+ B2
634
1403
  </Text>
635
1404
  </View>
636
1405
  </View>
1406
+ <View
1407
+ highlighted={false}
1408
+ leadingItem={
1409
+ Object {
1410
+ "text": "B2",
1411
+ "value": "b2",
1412
+ }
1413
+ }
1414
+ leadingSection={
1415
+ Object {
1416
+ "category": "A",
1417
+ "data": Array [
1418
+ Object {
1419
+ "text": "A1",
1420
+ "value": "a1",
1421
+ },
1422
+ ],
1423
+ }
1424
+ }
1425
+ section={
1426
+ Object {
1427
+ "category": "B",
1428
+ "data": Array [
1429
+ Object {
1430
+ "text": "B1",
1431
+ "value": "b1",
1432
+ },
1433
+ Object {
1434
+ "text": "B2",
1435
+ "value": "b2",
1436
+ },
1437
+ ],
1438
+ }
1439
+ }
1440
+ style={
1441
+ Array [
1442
+ Object {
1443
+ "marginTop": 12,
1444
+ },
1445
+ undefined,
1446
+ ]
1447
+ }
1448
+ />
637
1449
  </View>
638
1450
  </View>
1451
+ <View
1452
+ onLayout={[Function]}
1453
+ style={null}
1454
+ />
639
1455
  </View>
640
1456
  </RCTScrollView>
641
1457
  `;
@@ -646,16 +1462,26 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
646
1462
  data={
647
1463
  Array [
648
1464
  Object {
649
- "text": "A",
650
- "value": "a",
651
- },
652
- Object {
653
- "text": "B",
654
- "value": "b",
1465
+ "category": "A",
1466
+ "data": Array [
1467
+ Object {
1468
+ "text": "A1",
1469
+ "value": "a1",
1470
+ },
1471
+ ],
655
1472
  },
656
1473
  Object {
657
- "text": "C",
658
- "value": "c",
1474
+ "category": "B",
1475
+ "data": Array [
1476
+ Object {
1477
+ "text": "B1",
1478
+ "value": "b1",
1479
+ },
1480
+ Object {
1481
+ "text": "B2",
1482
+ "value": "b2",
1483
+ },
1484
+ ],
659
1485
  },
660
1486
  ]
661
1487
  }
@@ -672,28 +1498,139 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
672
1498
  onScrollBeginDrag={[Function]}
673
1499
  onScrollEndDrag={[Function]}
674
1500
  onScrollToIndexFailed={[Function]}
675
- removeClippedSubviews={false}
676
1501
  renderItem={[Function]}
677
1502
  scrollEventThrottle={50}
678
- stickyHeaderIndices={Array []}
679
- style={
680
- Object {
681
- "paddingHorizontal": 16,
682
- }
1503
+ stickyHeaderIndices={
1504
+ Array [
1505
+ 0,
1506
+ 3,
1507
+ ]
683
1508
  }
684
- viewabilityConfigCallbackPairs={Array []}
1509
+ style={Object {}}
685
1510
  >
686
1511
  <View>
1512
+ <View
1513
+ onLayout={[Function]}
1514
+ style={null}
1515
+ >
1516
+ <View
1517
+ style={
1518
+ Array [
1519
+ Object {
1520
+ "alignContent": "center",
1521
+ "backgroundColor": "#dadbde",
1522
+ "display": "flex",
1523
+ "flexDirection": "row",
1524
+ "justifyContent": "space-between",
1525
+ "marginBottom": 16,
1526
+ "paddingHorizontal": 16,
1527
+ "paddingVertical": 8,
1528
+ },
1529
+ Object {
1530
+ "marginBottom": 0,
1531
+ },
1532
+ ]
1533
+ }
1534
+ >
1535
+ <View
1536
+ style={
1537
+ Array [
1538
+ Object {
1539
+ "display": "flex",
1540
+ "flexDirection": "row",
1541
+ },
1542
+ undefined,
1543
+ ]
1544
+ }
1545
+ >
1546
+ <View
1547
+ style={
1548
+ Array [
1549
+ Object {
1550
+ "marginRight": 8,
1551
+ },
1552
+ undefined,
1553
+ ]
1554
+ }
1555
+ />
1556
+ <Text
1557
+ style={
1558
+ Array [
1559
+ Object {
1560
+ "color": "#292a2b",
1561
+ "fontFamily": "BeVietnamPro-Regular",
1562
+ "fontSize": 16,
1563
+ "letterSpacing": 0.48,
1564
+ "lineHeight": 24,
1565
+ },
1566
+ undefined,
1567
+ ]
1568
+ }
1569
+ themeFontSize="large"
1570
+ themeFontWeight="regular"
1571
+ themeIntent="body"
1572
+ >
1573
+ A
1574
+ </Text>
1575
+ </View>
1576
+ </View>
1577
+ </View>
687
1578
  <View
688
1579
  onLayout={[Function]}
689
1580
  style={null}
690
1581
  >
691
1582
  <View>
692
1583
  <View
1584
+ highlighted={false}
1585
+ section={
1586
+ Object {
1587
+ "category": "A",
1588
+ "data": Array [
1589
+ Object {
1590
+ "text": "A1",
1591
+ "value": "a1",
1592
+ },
1593
+ ],
1594
+ }
1595
+ }
1596
+ style={
1597
+ Array [
1598
+ Object {
1599
+ "marginTop": 12,
1600
+ },
1601
+ undefined,
1602
+ ]
1603
+ }
1604
+ trailingItem={
1605
+ Object {
1606
+ "text": "A1",
1607
+ "value": "a1",
1608
+ }
1609
+ }
1610
+ trailingSection={
1611
+ Object {
1612
+ "category": "B",
1613
+ "data": Array [
1614
+ Object {
1615
+ "text": "B1",
1616
+ "value": "b1",
1617
+ },
1618
+ Object {
1619
+ "text": "B2",
1620
+ "value": "b2",
1621
+ },
1622
+ ],
1623
+ }
1624
+ }
1625
+ />
1626
+ <View
1627
+ accessibilityState={
1628
+ Object {
1629
+ "disabled": false,
1630
+ }
1631
+ }
693
1632
  accessible={true}
694
- collapsable={false}
695
1633
  focusable={true}
696
- nativeID="animatedComponent"
697
1634
  onClick={[Function]}
698
1635
  onResponderGrant={[Function]}
699
1636
  onResponderMove={[Function]}
@@ -702,22 +1639,277 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
702
1639
  onResponderTerminationRequest={[Function]}
703
1640
  onStartShouldSetResponder={[Function]}
704
1641
  style={
1642
+ Array [
1643
+ Object {
1644
+ "alignItems": "center",
1645
+ "backgroundColor": "#f1e9fb",
1646
+ "flexDirection": "row",
1647
+ "opacity": 1,
1648
+ "padding": 16,
1649
+ },
1650
+ Object {
1651
+ "marginHorizontal": 12,
1652
+ },
1653
+ ]
1654
+ }
1655
+ >
1656
+ <View
1657
+ style={
1658
+ Array [
1659
+ Object {
1660
+ "flex": 1,
1661
+ },
1662
+ undefined,
1663
+ ]
1664
+ }
1665
+ >
1666
+ <Text
1667
+ style={
1668
+ Array [
1669
+ Object {
1670
+ "color": "#292a2b",
1671
+ "fontFamily": "BeVietnamPro-Regular",
1672
+ "fontSize": 16,
1673
+ "letterSpacing": 0.48,
1674
+ "lineHeight": 24,
1675
+ },
1676
+ undefined,
1677
+ ]
1678
+ }
1679
+ themeFontSize="large"
1680
+ themeFontWeight="regular"
1681
+ themeIntent="body"
1682
+ >
1683
+ A1
1684
+ </Text>
1685
+ </View>
1686
+ <View
1687
+ style={
1688
+ Array [
1689
+ Object {
1690
+ "marginLeft": 8,
1691
+ },
1692
+ undefined,
1693
+ ]
1694
+ }
1695
+ >
1696
+ <HeroIcon
1697
+ name="checkmark"
1698
+ style={
1699
+ Array [
1700
+ Object {
1701
+ "color": "#292a2b",
1702
+ "fontSize": 20,
1703
+ },
1704
+ undefined,
1705
+ ]
1706
+ }
1707
+ themeIntent="text"
1708
+ themeSize="small"
1709
+ />
1710
+ </View>
1711
+ </View>
1712
+ <View
1713
+ highlighted={false}
1714
+ leadingItem={
1715
+ Object {
1716
+ "text": "A1",
1717
+ "value": "a1",
1718
+ }
1719
+ }
1720
+ section={
1721
+ Object {
1722
+ "category": "A",
1723
+ "data": Array [
1724
+ Object {
1725
+ "text": "A1",
1726
+ "value": "a1",
1727
+ },
1728
+ ],
1729
+ }
1730
+ }
1731
+ style={
1732
+ Array [
1733
+ Object {
1734
+ "marginTop": 12,
1735
+ },
1736
+ undefined,
1737
+ ]
1738
+ }
1739
+ trailingSection={
705
1740
  Object {
706
- "alignItems": "center",
707
- "backgroundColor": "#f1e9fb",
708
- "borderRadius": 4,
1741
+ "category": "B",
1742
+ "data": Array [
1743
+ Object {
1744
+ "text": "B1",
1745
+ "value": "b1",
1746
+ },
1747
+ Object {
1748
+ "text": "B2",
1749
+ "value": "b2",
1750
+ },
1751
+ ],
1752
+ }
1753
+ }
1754
+ />
1755
+ </View>
1756
+ </View>
1757
+ <View
1758
+ onLayout={[Function]}
1759
+ style={null}
1760
+ />
1761
+ <View
1762
+ onLayout={[Function]}
1763
+ style={null}
1764
+ >
1765
+ <View
1766
+ style={
1767
+ Array [
1768
+ Object {
1769
+ "alignContent": "center",
1770
+ "backgroundColor": "#dadbde",
1771
+ "display": "flex",
709
1772
  "flexDirection": "row",
710
1773
  "justifyContent": "space-between",
711
- "opacity": 1,
712
- "padding": 16,
713
- }
1774
+ "marginBottom": 16,
1775
+ "paddingHorizontal": 16,
1776
+ "paddingVertical": 8,
1777
+ },
1778
+ Object {
1779
+ "marginBottom": 0,
1780
+ },
1781
+ ]
1782
+ }
1783
+ >
1784
+ <View
1785
+ style={
1786
+ Array [
1787
+ Object {
1788
+ "display": "flex",
1789
+ "flexDirection": "row",
1790
+ },
1791
+ undefined,
1792
+ ]
714
1793
  }
715
1794
  >
716
1795
  <View
717
1796
  style={
1797
+ Array [
1798
+ Object {
1799
+ "marginRight": 8,
1800
+ },
1801
+ undefined,
1802
+ ]
1803
+ }
1804
+ />
1805
+ <Text
1806
+ style={
1807
+ Array [
1808
+ Object {
1809
+ "color": "#292a2b",
1810
+ "fontFamily": "BeVietnamPro-Regular",
1811
+ "fontSize": 16,
1812
+ "letterSpacing": 0.48,
1813
+ "lineHeight": 24,
1814
+ },
1815
+ undefined,
1816
+ ]
1817
+ }
1818
+ themeFontSize="large"
1819
+ themeFontWeight="regular"
1820
+ themeIntent="body"
1821
+ >
1822
+ B
1823
+ </Text>
1824
+ </View>
1825
+ </View>
1826
+ </View>
1827
+ <View
1828
+ onLayout={[Function]}
1829
+ style={null}
1830
+ >
1831
+ <View>
1832
+ <View
1833
+ highlighted={false}
1834
+ leadingSection={
1835
+ Object {
1836
+ "category": "A",
1837
+ "data": Array [
1838
+ Object {
1839
+ "text": "A1",
1840
+ "value": "a1",
1841
+ },
1842
+ ],
1843
+ }
1844
+ }
1845
+ section={
1846
+ Object {
1847
+ "category": "B",
1848
+ "data": Array [
1849
+ Object {
1850
+ "text": "B1",
1851
+ "value": "b1",
1852
+ },
1853
+ Object {
1854
+ "text": "B2",
1855
+ "value": "b2",
1856
+ },
1857
+ ],
1858
+ }
1859
+ }
1860
+ style={
1861
+ Array [
718
1862
  Object {
719
- "flex": 1,
720
- }
1863
+ "marginTop": 12,
1864
+ },
1865
+ undefined,
1866
+ ]
1867
+ }
1868
+ trailingItem={
1869
+ Object {
1870
+ "text": "B1",
1871
+ "value": "b1",
1872
+ }
1873
+ }
1874
+ />
1875
+ <View
1876
+ accessibilityState={
1877
+ Object {
1878
+ "disabled": false,
1879
+ }
1880
+ }
1881
+ accessible={true}
1882
+ focusable={true}
1883
+ onClick={[Function]}
1884
+ onResponderGrant={[Function]}
1885
+ onResponderMove={[Function]}
1886
+ onResponderRelease={[Function]}
1887
+ onResponderTerminate={[Function]}
1888
+ onResponderTerminationRequest={[Function]}
1889
+ onStartShouldSetResponder={[Function]}
1890
+ style={
1891
+ Array [
1892
+ Object {
1893
+ "alignItems": "center",
1894
+ "backgroundColor": "#f1e9fb",
1895
+ "flexDirection": "row",
1896
+ "opacity": 1,
1897
+ "padding": 16,
1898
+ },
1899
+ Object {
1900
+ "marginHorizontal": 12,
1901
+ },
1902
+ ]
1903
+ }
1904
+ >
1905
+ <View
1906
+ style={
1907
+ Array [
1908
+ Object {
1909
+ "flex": 1,
1910
+ },
1911
+ undefined,
1912
+ ]
721
1913
  }
722
1914
  >
723
1915
  <Text
@@ -737,24 +1929,84 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
737
1929
  themeFontWeight="regular"
738
1930
  themeIntent="body"
739
1931
  >
740
- A
1932
+ B1
741
1933
  </Text>
742
1934
  </View>
743
- <HeroIcon
744
- name="checkmark"
1935
+ <View
745
1936
  style={
746
1937
  Array [
747
1938
  Object {
748
- "color": "#292a2b",
749
- "fontSize": 20,
1939
+ "marginLeft": 8,
750
1940
  },
751
1941
  undefined,
752
1942
  ]
753
1943
  }
754
- themeIntent="text"
755
- themeSize="small"
756
- />
1944
+ >
1945
+ <HeroIcon
1946
+ name="checkmark"
1947
+ style={
1948
+ Array [
1949
+ Object {
1950
+ "color": "#292a2b",
1951
+ "fontSize": 20,
1952
+ },
1953
+ undefined,
1954
+ ]
1955
+ }
1956
+ themeIntent="text"
1957
+ themeSize="small"
1958
+ />
1959
+ </View>
757
1960
  </View>
1961
+ <View
1962
+ highlighted={false}
1963
+ leadingItem={
1964
+ Object {
1965
+ "text": "B1",
1966
+ "value": "b1",
1967
+ }
1968
+ }
1969
+ leadingSection={
1970
+ Object {
1971
+ "category": "A",
1972
+ "data": Array [
1973
+ Object {
1974
+ "text": "A1",
1975
+ "value": "a1",
1976
+ },
1977
+ ],
1978
+ }
1979
+ }
1980
+ section={
1981
+ Object {
1982
+ "category": "B",
1983
+ "data": Array [
1984
+ Object {
1985
+ "text": "B1",
1986
+ "value": "b1",
1987
+ },
1988
+ Object {
1989
+ "text": "B2",
1990
+ "value": "b2",
1991
+ },
1992
+ ],
1993
+ }
1994
+ }
1995
+ style={
1996
+ Array [
1997
+ Object {
1998
+ "marginTop": 4,
1999
+ },
2000
+ undefined,
2001
+ ]
2002
+ }
2003
+ trailingItem={
2004
+ Object {
2005
+ "text": "B2",
2006
+ "value": "b2",
2007
+ }
2008
+ }
2009
+ />
758
2010
  </View>
759
2011
  </View>
760
2012
  <View
@@ -763,10 +2015,13 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
763
2015
  >
764
2016
  <View>
765
2017
  <View
2018
+ accessibilityState={
2019
+ Object {
2020
+ "disabled": false,
2021
+ }
2022
+ }
766
2023
  accessible={true}
767
- collapsable={false}
768
2024
  focusable={true}
769
- nativeID="animatedComponent"
770
2025
  onClick={[Function]}
771
2026
  onResponderGrant={[Function]}
772
2027
  onResponderMove={[Function]}
@@ -775,22 +2030,28 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
775
2030
  onResponderTerminationRequest={[Function]}
776
2031
  onStartShouldSetResponder={[Function]}
777
2032
  style={
778
- Object {
779
- "alignItems": "center",
780
- "backgroundColor": "#f1e9fb",
781
- "borderRadius": 4,
782
- "flexDirection": "row",
783
- "justifyContent": "space-between",
784
- "opacity": 1,
785
- "padding": 16,
786
- }
2033
+ Array [
2034
+ Object {
2035
+ "alignItems": "center",
2036
+ "backgroundColor": "#ffffff",
2037
+ "flexDirection": "row",
2038
+ "opacity": 1,
2039
+ "padding": 16,
2040
+ },
2041
+ Object {
2042
+ "marginHorizontal": 12,
2043
+ },
2044
+ ]
787
2045
  }
788
2046
  >
789
2047
  <View
790
2048
  style={
791
- Object {
792
- "flex": 1,
793
- }
2049
+ Array [
2050
+ Object {
2051
+ "flex": 1,
2052
+ },
2053
+ undefined,
2054
+ ]
794
2055
  }
795
2056
  >
796
2057
  <Text
@@ -810,23 +2071,179 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
810
2071
  themeFontWeight="regular"
811
2072
  themeIntent="body"
812
2073
  >
813
- B
2074
+ B2
814
2075
  </Text>
815
2076
  </View>
816
- <HeroIcon
817
- name="checkmark"
2077
+ </View>
2078
+ <View
2079
+ highlighted={false}
2080
+ leadingItem={
2081
+ Object {
2082
+ "text": "B2",
2083
+ "value": "b2",
2084
+ }
2085
+ }
2086
+ leadingSection={
2087
+ Object {
2088
+ "category": "A",
2089
+ "data": Array [
2090
+ Object {
2091
+ "text": "A1",
2092
+ "value": "a1",
2093
+ },
2094
+ ],
2095
+ }
2096
+ }
2097
+ section={
2098
+ Object {
2099
+ "category": "B",
2100
+ "data": Array [
2101
+ Object {
2102
+ "text": "B1",
2103
+ "value": "b1",
2104
+ },
2105
+ Object {
2106
+ "text": "B2",
2107
+ "value": "b2",
2108
+ },
2109
+ ],
2110
+ }
2111
+ }
2112
+ style={
2113
+ Array [
2114
+ Object {
2115
+ "marginTop": 12,
2116
+ },
2117
+ undefined,
2118
+ ]
2119
+ }
2120
+ />
2121
+ </View>
2122
+ </View>
2123
+ <View
2124
+ onLayout={[Function]}
2125
+ style={null}
2126
+ />
2127
+ </View>
2128
+ </RCTScrollView>
2129
+ `;
2130
+
2131
+ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
2132
+ <RCTScrollView
2133
+ ListFooterComponent={null}
2134
+ data={
2135
+ Array [
2136
+ Object {
2137
+ "category": "A",
2138
+ "data": Array [
2139
+ Object {
2140
+ "text": "A1",
2141
+ "value": "a1",
2142
+ },
2143
+ ],
2144
+ },
2145
+ Object {
2146
+ "category": "B",
2147
+ "data": Array [
2148
+ Object {
2149
+ "text": "B1",
2150
+ "value": "b1",
2151
+ },
2152
+ Object {
2153
+ "text": "B2",
2154
+ "value": "b2",
2155
+ },
2156
+ ],
2157
+ },
2158
+ ]
2159
+ }
2160
+ getItem={[Function]}
2161
+ getItemCount={[Function]}
2162
+ keyExtractor={[Function]}
2163
+ onContentSizeChange={[Function]}
2164
+ onEndReached={[Function]}
2165
+ onEndReachedThreshold={0.1}
2166
+ onLayout={[Function]}
2167
+ onMomentumScrollBegin={[Function]}
2168
+ onMomentumScrollEnd={[Function]}
2169
+ onScroll={[Function]}
2170
+ onScrollBeginDrag={[Function]}
2171
+ onScrollEndDrag={[Function]}
2172
+ onScrollToIndexFailed={[Function]}
2173
+ renderItem={[Function]}
2174
+ scrollEventThrottle={50}
2175
+ stickyHeaderIndices={
2176
+ Array [
2177
+ 0,
2178
+ 3,
2179
+ ]
2180
+ }
2181
+ style={Object {}}
2182
+ >
2183
+ <View>
2184
+ <View
2185
+ onLayout={[Function]}
2186
+ style={null}
2187
+ >
2188
+ <View
2189
+ style={
2190
+ Array [
2191
+ Object {
2192
+ "alignContent": "center",
2193
+ "backgroundColor": "#dadbde",
2194
+ "display": "flex",
2195
+ "flexDirection": "row",
2196
+ "justifyContent": "space-between",
2197
+ "marginBottom": 16,
2198
+ "paddingHorizontal": 16,
2199
+ "paddingVertical": 8,
2200
+ },
2201
+ Object {
2202
+ "marginBottom": 0,
2203
+ },
2204
+ ]
2205
+ }
2206
+ >
2207
+ <View
2208
+ style={
2209
+ Array [
2210
+ Object {
2211
+ "display": "flex",
2212
+ "flexDirection": "row",
2213
+ },
2214
+ undefined,
2215
+ ]
2216
+ }
2217
+ >
2218
+ <View
818
2219
  style={
819
2220
  Array [
820
2221
  Object {
821
- "color": "#292a2b",
822
- "fontSize": 20,
2222
+ "marginRight": 8,
823
2223
  },
824
2224
  undefined,
825
2225
  ]
826
2226
  }
827
- themeIntent="text"
828
- themeSize="small"
829
2227
  />
2228
+ <Text
2229
+ style={
2230
+ Array [
2231
+ Object {
2232
+ "color": "#292a2b",
2233
+ "fontFamily": "BeVietnamPro-Regular",
2234
+ "fontSize": 16,
2235
+ "letterSpacing": 0.48,
2236
+ "lineHeight": 24,
2237
+ },
2238
+ undefined,
2239
+ ]
2240
+ }
2241
+ themeFontSize="large"
2242
+ themeFontWeight="regular"
2243
+ themeIntent="body"
2244
+ >
2245
+ A
2246
+ </Text>
830
2247
  </View>
831
2248
  </View>
832
2249
  </View>
@@ -836,10 +2253,56 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
836
2253
  >
837
2254
  <View>
838
2255
  <View
2256
+ highlighted={false}
2257
+ section={
2258
+ Object {
2259
+ "category": "A",
2260
+ "data": Array [
2261
+ Object {
2262
+ "text": "A1",
2263
+ "value": "a1",
2264
+ },
2265
+ ],
2266
+ }
2267
+ }
2268
+ style={
2269
+ Array [
2270
+ Object {
2271
+ "marginTop": 12,
2272
+ },
2273
+ undefined,
2274
+ ]
2275
+ }
2276
+ trailingItem={
2277
+ Object {
2278
+ "text": "A1",
2279
+ "value": "a1",
2280
+ }
2281
+ }
2282
+ trailingSection={
2283
+ Object {
2284
+ "category": "B",
2285
+ "data": Array [
2286
+ Object {
2287
+ "text": "B1",
2288
+ "value": "b1",
2289
+ },
2290
+ Object {
2291
+ "text": "B2",
2292
+ "value": "b2",
2293
+ },
2294
+ ],
2295
+ }
2296
+ }
2297
+ />
2298
+ <View
2299
+ accessibilityState={
2300
+ Object {
2301
+ "disabled": false,
2302
+ }
2303
+ }
839
2304
  accessible={true}
840
- collapsable={false}
841
2305
  focusable={true}
842
- nativeID="animatedComponent"
843
2306
  onClick={[Function]}
844
2307
  onResponderGrant={[Function]}
845
2308
  onResponderMove={[Function]}
@@ -848,22 +2311,28 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
848
2311
  onResponderTerminationRequest={[Function]}
849
2312
  onStartShouldSetResponder={[Function]}
850
2313
  style={
851
- Object {
852
- "alignItems": "center",
853
- "backgroundColor": "#ffffff",
854
- "borderRadius": 4,
855
- "flexDirection": "row",
856
- "justifyContent": "space-between",
857
- "opacity": 1,
858
- "padding": 16,
859
- }
2314
+ Array [
2315
+ Object {
2316
+ "alignItems": "center",
2317
+ "backgroundColor": "#f1e9fb",
2318
+ "flexDirection": "row",
2319
+ "opacity": 1,
2320
+ "padding": 16,
2321
+ },
2322
+ Object {
2323
+ "marginHorizontal": 12,
2324
+ },
2325
+ ]
860
2326
  }
861
2327
  >
862
2328
  <View
863
2329
  style={
864
- Object {
865
- "flex": 1,
866
- }
2330
+ Array [
2331
+ Object {
2332
+ "flex": 1,
2333
+ },
2334
+ undefined,
2335
+ ]
867
2336
  }
868
2337
  >
869
2338
  <Text
@@ -883,130 +2352,147 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
883
2352
  themeFontWeight="regular"
884
2353
  themeIntent="body"
885
2354
  >
886
- C
2355
+ A1
887
2356
  </Text>
888
2357
  </View>
2358
+ <View
2359
+ style={
2360
+ Array [
2361
+ Object {
2362
+ "marginLeft": 8,
2363
+ },
2364
+ undefined,
2365
+ ]
2366
+ }
2367
+ >
2368
+ <HeroIcon
2369
+ name="checkmark"
2370
+ style={
2371
+ Array [
2372
+ Object {
2373
+ "color": "#292a2b",
2374
+ "fontSize": 20,
2375
+ },
2376
+ undefined,
2377
+ ]
2378
+ }
2379
+ themeIntent="text"
2380
+ themeSize="small"
2381
+ />
2382
+ </View>
889
2383
  </View>
2384
+ <View
2385
+ highlighted={false}
2386
+ leadingItem={
2387
+ Object {
2388
+ "text": "A1",
2389
+ "value": "a1",
2390
+ }
2391
+ }
2392
+ section={
2393
+ Object {
2394
+ "category": "A",
2395
+ "data": Array [
2396
+ Object {
2397
+ "text": "A1",
2398
+ "value": "a1",
2399
+ },
2400
+ ],
2401
+ }
2402
+ }
2403
+ style={
2404
+ Array [
2405
+ Object {
2406
+ "marginTop": 12,
2407
+ },
2408
+ undefined,
2409
+ ]
2410
+ }
2411
+ trailingSection={
2412
+ Object {
2413
+ "category": "B",
2414
+ "data": Array [
2415
+ Object {
2416
+ "text": "B1",
2417
+ "value": "b1",
2418
+ },
2419
+ Object {
2420
+ "text": "B2",
2421
+ "value": "b2",
2422
+ },
2423
+ ],
2424
+ }
2425
+ }
2426
+ />
890
2427
  </View>
891
2428
  </View>
892
- </View>
893
- </RCTScrollView>
894
- `;
895
-
896
- exports[`OptionList trigger onPress correctly on select additional value 1`] = `
897
- <RCTScrollView
898
- ListFooterComponent={null}
899
- data={
900
- Array [
901
- Object {
902
- "text": "A",
903
- "value": "a",
904
- },
905
- Object {
906
- "text": "B",
907
- "value": "b",
908
- },
909
- Object {
910
- "text": "C",
911
- "value": "c",
912
- },
913
- ]
914
- }
915
- getItem={[Function]}
916
- getItemCount={[Function]}
917
- keyExtractor={[Function]}
918
- onContentSizeChange={[Function]}
919
- onEndReached={[Function]}
920
- onEndReachedThreshold={0.1}
921
- onLayout={[Function]}
922
- onMomentumScrollBegin={[Function]}
923
- onMomentumScrollEnd={[Function]}
924
- onScroll={[Function]}
925
- onScrollBeginDrag={[Function]}
926
- onScrollEndDrag={[Function]}
927
- onScrollToIndexFailed={[Function]}
928
- removeClippedSubviews={false}
929
- renderItem={[Function]}
930
- scrollEventThrottle={50}
931
- stickyHeaderIndices={Array []}
932
- style={
933
- Object {
934
- "paddingHorizontal": 16,
935
- }
936
- }
937
- viewabilityConfigCallbackPairs={Array []}
938
- >
939
- <View>
2429
+ <View
2430
+ onLayout={[Function]}
2431
+ style={null}
2432
+ />
940
2433
  <View
941
2434
  onLayout={[Function]}
942
2435
  style={null}
943
2436
  >
944
- <View>
945
- <View
946
- accessible={true}
947
- collapsable={false}
948
- focusable={true}
949
- nativeID="animatedComponent"
950
- onClick={[Function]}
951
- onResponderGrant={[Function]}
952
- onResponderMove={[Function]}
953
- onResponderRelease={[Function]}
954
- onResponderTerminate={[Function]}
955
- onResponderTerminationRequest={[Function]}
956
- onStartShouldSetResponder={[Function]}
957
- style={
2437
+ <View
2438
+ style={
2439
+ Array [
958
2440
  Object {
959
- "alignItems": "center",
960
- "backgroundColor": "#f1e9fb",
961
- "borderRadius": 4,
2441
+ "alignContent": "center",
2442
+ "backgroundColor": "#dadbde",
2443
+ "display": "flex",
962
2444
  "flexDirection": "row",
963
2445
  "justifyContent": "space-between",
964
- "opacity": 1,
965
- "padding": 16,
966
- }
2446
+ "marginBottom": 16,
2447
+ "paddingHorizontal": 16,
2448
+ "paddingVertical": 8,
2449
+ },
2450
+ Object {
2451
+ "marginBottom": 0,
2452
+ },
2453
+ ]
2454
+ }
2455
+ >
2456
+ <View
2457
+ style={
2458
+ Array [
2459
+ Object {
2460
+ "display": "flex",
2461
+ "flexDirection": "row",
2462
+ },
2463
+ undefined,
2464
+ ]
967
2465
  }
968
2466
  >
969
2467
  <View
970
2468
  style={
971
- Object {
972
- "flex": 1,
973
- }
2469
+ Array [
2470
+ Object {
2471
+ "marginRight": 8,
2472
+ },
2473
+ undefined,
2474
+ ]
974
2475
  }
975
- >
976
- <Text
977
- style={
978
- Array [
979
- Object {
980
- "color": "#292a2b",
981
- "fontFamily": "BeVietnamPro-Regular",
982
- "fontSize": 16,
983
- "letterSpacing": 0.48,
984
- "lineHeight": 24,
985
- },
986
- undefined,
987
- ]
988
- }
989
- themeFontSize="large"
990
- themeFontWeight="regular"
991
- themeIntent="body"
992
- >
993
- A
994
- </Text>
995
- </View>
996
- <HeroIcon
997
- name="checkmark"
2476
+ />
2477
+ <Text
998
2478
  style={
999
2479
  Array [
1000
2480
  Object {
1001
2481
  "color": "#292a2b",
1002
- "fontSize": 20,
2482
+ "fontFamily": "BeVietnamPro-Regular",
2483
+ "fontSize": 16,
2484
+ "letterSpacing": 0.48,
2485
+ "lineHeight": 24,
1003
2486
  },
1004
2487
  undefined,
1005
2488
  ]
1006
2489
  }
1007
- themeIntent="text"
1008
- themeSize="small"
1009
- />
2490
+ themeFontSize="large"
2491
+ themeFontWeight="regular"
2492
+ themeIntent="body"
2493
+ >
2494
+ B
2495
+ </Text>
1010
2496
  </View>
1011
2497
  </View>
1012
2498
  </View>
@@ -1016,10 +2502,56 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1016
2502
  >
1017
2503
  <View>
1018
2504
  <View
2505
+ highlighted={false}
2506
+ leadingSection={
2507
+ Object {
2508
+ "category": "A",
2509
+ "data": Array [
2510
+ Object {
2511
+ "text": "A1",
2512
+ "value": "a1",
2513
+ },
2514
+ ],
2515
+ }
2516
+ }
2517
+ section={
2518
+ Object {
2519
+ "category": "B",
2520
+ "data": Array [
2521
+ Object {
2522
+ "text": "B1",
2523
+ "value": "b1",
2524
+ },
2525
+ Object {
2526
+ "text": "B2",
2527
+ "value": "b2",
2528
+ },
2529
+ ],
2530
+ }
2531
+ }
2532
+ style={
2533
+ Array [
2534
+ Object {
2535
+ "marginTop": 12,
2536
+ },
2537
+ undefined,
2538
+ ]
2539
+ }
2540
+ trailingItem={
2541
+ Object {
2542
+ "text": "B1",
2543
+ "value": "b1",
2544
+ }
2545
+ }
2546
+ />
2547
+ <View
2548
+ accessibilityState={
2549
+ Object {
2550
+ "disabled": false,
2551
+ }
2552
+ }
1019
2553
  accessible={true}
1020
- collapsable={false}
1021
2554
  focusable={true}
1022
- nativeID="animatedComponent"
1023
2555
  onClick={[Function]}
1024
2556
  onResponderGrant={[Function]}
1025
2557
  onResponderMove={[Function]}
@@ -1028,22 +2560,28 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1028
2560
  onResponderTerminationRequest={[Function]}
1029
2561
  onStartShouldSetResponder={[Function]}
1030
2562
  style={
1031
- Object {
1032
- "alignItems": "center",
1033
- "backgroundColor": "#ffffff",
1034
- "borderRadius": 4,
1035
- "flexDirection": "row",
1036
- "justifyContent": "space-between",
1037
- "opacity": 1,
1038
- "padding": 16,
1039
- }
2563
+ Array [
2564
+ Object {
2565
+ "alignItems": "center",
2566
+ "backgroundColor": "#ffffff",
2567
+ "flexDirection": "row",
2568
+ "opacity": 1,
2569
+ "padding": 16,
2570
+ },
2571
+ Object {
2572
+ "marginHorizontal": 12,
2573
+ },
2574
+ ]
1040
2575
  }
1041
2576
  >
1042
2577
  <View
1043
2578
  style={
1044
- Object {
1045
- "flex": 1,
1046
- }
2579
+ Array [
2580
+ Object {
2581
+ "flex": 1,
2582
+ },
2583
+ undefined,
2584
+ ]
1047
2585
  }
1048
2586
  >
1049
2587
  <Text
@@ -1063,10 +2601,59 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1063
2601
  themeFontWeight="regular"
1064
2602
  themeIntent="body"
1065
2603
  >
1066
- B
2604
+ B1
1067
2605
  </Text>
1068
2606
  </View>
1069
2607
  </View>
2608
+ <View
2609
+ highlighted={false}
2610
+ leadingItem={
2611
+ Object {
2612
+ "text": "B1",
2613
+ "value": "b1",
2614
+ }
2615
+ }
2616
+ leadingSection={
2617
+ Object {
2618
+ "category": "A",
2619
+ "data": Array [
2620
+ Object {
2621
+ "text": "A1",
2622
+ "value": "a1",
2623
+ },
2624
+ ],
2625
+ }
2626
+ }
2627
+ section={
2628
+ Object {
2629
+ "category": "B",
2630
+ "data": Array [
2631
+ Object {
2632
+ "text": "B1",
2633
+ "value": "b1",
2634
+ },
2635
+ Object {
2636
+ "text": "B2",
2637
+ "value": "b2",
2638
+ },
2639
+ ],
2640
+ }
2641
+ }
2642
+ style={
2643
+ Array [
2644
+ Object {
2645
+ "marginTop": 4,
2646
+ },
2647
+ undefined,
2648
+ ]
2649
+ }
2650
+ trailingItem={
2651
+ Object {
2652
+ "text": "B2",
2653
+ "value": "b2",
2654
+ }
2655
+ }
2656
+ />
1070
2657
  </View>
1071
2658
  </View>
1072
2659
  <View
@@ -1075,10 +2662,13 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1075
2662
  >
1076
2663
  <View>
1077
2664
  <View
2665
+ accessibilityState={
2666
+ Object {
2667
+ "disabled": false,
2668
+ }
2669
+ }
1078
2670
  accessible={true}
1079
- collapsable={false}
1080
2671
  focusable={true}
1081
- nativeID="animatedComponent"
1082
2672
  onClick={[Function]}
1083
2673
  onResponderGrant={[Function]}
1084
2674
  onResponderMove={[Function]}
@@ -1087,22 +2677,28 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1087
2677
  onResponderTerminationRequest={[Function]}
1088
2678
  onStartShouldSetResponder={[Function]}
1089
2679
  style={
1090
- Object {
1091
- "alignItems": "center",
1092
- "backgroundColor": "#ffffff",
1093
- "borderRadius": 4,
1094
- "flexDirection": "row",
1095
- "justifyContent": "space-between",
1096
- "opacity": 1,
1097
- "padding": 16,
1098
- }
2680
+ Array [
2681
+ Object {
2682
+ "alignItems": "center",
2683
+ "backgroundColor": "#ffffff",
2684
+ "flexDirection": "row",
2685
+ "opacity": 1,
2686
+ "padding": 16,
2687
+ },
2688
+ Object {
2689
+ "marginHorizontal": 12,
2690
+ },
2691
+ ]
1099
2692
  }
1100
2693
  >
1101
2694
  <View
1102
2695
  style={
1103
- Object {
1104
- "flex": 1,
1105
- }
2696
+ Array [
2697
+ Object {
2698
+ "flex": 1,
2699
+ },
2700
+ undefined,
2701
+ ]
1106
2702
  }
1107
2703
  >
1108
2704
  <Text
@@ -1122,12 +2718,59 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1122
2718
  themeFontWeight="regular"
1123
2719
  themeIntent="body"
1124
2720
  >
1125
- C
2721
+ B2
1126
2722
  </Text>
1127
2723
  </View>
1128
2724
  </View>
2725
+ <View
2726
+ highlighted={false}
2727
+ leadingItem={
2728
+ Object {
2729
+ "text": "B2",
2730
+ "value": "b2",
2731
+ }
2732
+ }
2733
+ leadingSection={
2734
+ Object {
2735
+ "category": "A",
2736
+ "data": Array [
2737
+ Object {
2738
+ "text": "A1",
2739
+ "value": "a1",
2740
+ },
2741
+ ],
2742
+ }
2743
+ }
2744
+ section={
2745
+ Object {
2746
+ "category": "B",
2747
+ "data": Array [
2748
+ Object {
2749
+ "text": "B1",
2750
+ "value": "b1",
2751
+ },
2752
+ Object {
2753
+ "text": "B2",
2754
+ "value": "b2",
2755
+ },
2756
+ ],
2757
+ }
2758
+ }
2759
+ style={
2760
+ Array [
2761
+ Object {
2762
+ "marginTop": 12,
2763
+ },
2764
+ undefined,
2765
+ ]
2766
+ }
2767
+ />
1129
2768
  </View>
1130
2769
  </View>
2770
+ <View
2771
+ onLayout={[Function]}
2772
+ style={null}
2773
+ />
1131
2774
  </View>
1132
2775
  </RCTScrollView>
1133
2776
  `;