@hero-design/rn 7.16.2 → 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 (51) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +224 -160
  3. package/lib/index.js +223 -159
  4. package/package.json +2 -2
  5. package/src/components/List/BasicListItem.tsx +8 -4
  6. package/src/components/Select/MultiSelect/Option.tsx +20 -11
  7. package/src/components/Select/MultiSelect/OptionList.tsx +47 -41
  8. package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx +25 -14
  9. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +3 -1
  10. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1612 -108
  11. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +5265 -319
  12. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +122 -1
  13. package/src/components/Select/MultiSelect/index.tsx +26 -36
  14. package/src/components/Select/SingleSelect/Option.tsx +19 -3
  15. package/src/components/Select/SingleSelect/OptionList.tsx +47 -39
  16. package/src/components/Select/SingleSelect/__tests__/OptionList.spec.tsx +23 -12
  17. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +3 -1
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +1612 -108
  19. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +4898 -268
  20. package/src/components/Select/SingleSelect/__tests__/index.spec.tsx +117 -1
  21. package/src/components/Select/SingleSelect/index.tsx +26 -37
  22. package/src/components/Select/StyledOptionList.tsx +43 -44
  23. package/src/components/Select/StyledSelect.tsx +7 -3
  24. package/src/components/Select/__tests__/StyledSelect.spec.tsx +1 -9
  25. package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap +0 -13
  26. package/src/components/Select/__tests__/helpers.spec.tsx +74 -0
  27. package/src/components/Select/helpers.tsx +87 -4
  28. package/src/components/Select/types.ts +99 -0
  29. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +157 -1
  30. package/src/components/TextInput/__tests__/index.spec.tsx +29 -8
  31. package/src/components/TextInput/index.tsx +18 -7
  32. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +3 -3
  33. package/src/theme/components/select.ts +3 -3
  34. package/src/types.ts +7 -1
  35. package/types/components/List/BasicListItem.d.ts +1 -1
  36. package/types/components/Select/MultiSelect/Option.d.ts +4 -2
  37. package/types/components/Select/MultiSelect/OptionList.d.ts +6 -7
  38. package/types/components/Select/MultiSelect/index.d.ts +5 -5
  39. package/types/components/Select/SingleSelect/Option.d.ts +4 -2
  40. package/types/components/Select/SingleSelect/OptionList.d.ts +6 -7
  41. package/types/components/Select/SingleSelect/index.d.ts +5 -5
  42. package/types/components/Select/StyledOptionList.d.ts +10 -16
  43. package/types/components/Select/StyledSelect.d.ts +8 -2
  44. package/types/components/Select/__tests__/helpers.spec.d.ts +1 -0
  45. package/types/components/Select/helpers.d.ts +14 -2
  46. package/types/components/Select/index.d.ts +1 -1
  47. package/types/components/Select/types.d.ts +32 -7
  48. package/types/components/TextInput/index.d.ts +4 -2
  49. package/types/theme/components/select.d.ts +3 -3
  50. package/types/types.d.ts +2 -1
  51. 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,23 +54,131 @@ 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>
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
+ />
64
182
  <View
65
183
  accessibilityState={
66
184
  Object {
@@ -85,7 +203,9 @@ exports[`OptionList render isLoading correctly 1`] = `
85
203
  "opacity": 1,
86
204
  "padding": 16,
87
205
  },
88
- undefined,
206
+ Object {
207
+ "marginHorizontal": 12,
208
+ },
89
209
  ]
90
210
  }
91
211
  >
@@ -116,7 +236,7 @@ exports[`OptionList render isLoading correctly 1`] = `
116
236
  themeFontWeight="regular"
117
237
  themeIntent="body"
118
238
  >
119
- A
239
+ A1
120
240
  </Text>
121
241
  </View>
122
242
  <View
@@ -145,6 +265,119 @@ exports[`OptionList render isLoading correctly 1`] = `
145
265
  />
146
266
  </View>
147
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,
356
+ },
357
+ undefined,
358
+ ]
359
+ }
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>
380
+ </View>
148
381
  </View>
149
382
  </View>
150
383
  <View
@@ -152,6 +385,49 @@ exports[`OptionList render isLoading correctly 1`] = `
152
385
  style={null}
153
386
  >
154
387
  <View>
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
+ />
155
431
  <View
156
432
  accessibilityState={
157
433
  Object {
@@ -176,7 +452,9 @@ exports[`OptionList render isLoading correctly 1`] = `
176
452
  "opacity": 1,
177
453
  "padding": 16,
178
454
  },
179
- undefined,
455
+ Object {
456
+ "marginHorizontal": 12,
457
+ },
180
458
  ]
181
459
  }
182
460
  >
@@ -207,10 +485,59 @@ exports[`OptionList render isLoading correctly 1`] = `
207
485
  themeFontWeight="regular"
208
486
  themeIntent="body"
209
487
  >
210
- B
488
+ B1
211
489
  </Text>
212
490
  </View>
213
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
+ />
214
541
  </View>
215
542
  </View>
216
543
  <View
@@ -242,7 +569,9 @@ exports[`OptionList render isLoading correctly 1`] = `
242
569
  "opacity": 1,
243
570
  "padding": 16,
244
571
  },
245
- undefined,
572
+ Object {
573
+ "marginHorizontal": 12,
574
+ },
246
575
  ]
247
576
  }
248
577
  >
@@ -273,12 +602,59 @@ exports[`OptionList render isLoading correctly 1`] = `
273
602
  themeFontWeight="regular"
274
603
  themeIntent="body"
275
604
  >
276
- C
605
+ B2
277
606
  </Text>
278
607
  </View>
279
608
  </View>
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
+ />
280
652
  </View>
281
653
  </View>
654
+ <View
655
+ onLayout={[Function]}
656
+ style={null}
657
+ />
282
658
  <View
283
659
  onLayout={[Function]}
284
660
  >
@@ -439,16 +815,26 @@ exports[`OptionList renders correctly 1`] = `
439
815
  data={
440
816
  Array [
441
817
  Object {
442
- "text": "A",
443
- "value": "a",
444
- },
445
- Object {
446
- "text": "B",
447
- "value": "b",
818
+ "category": "A",
819
+ "data": Array [
820
+ Object {
821
+ "text": "A1",
822
+ "value": "a1",
823
+ },
824
+ ],
448
825
  },
449
826
  Object {
450
- "text": "C",
451
- "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
+ ],
452
838
  },
453
839
  ]
454
840
  }
@@ -465,46 +851,46 @@ exports[`OptionList renders correctly 1`] = `
465
851
  onScrollBeginDrag={[Function]}
466
852
  onScrollEndDrag={[Function]}
467
853
  onScrollToIndexFailed={[Function]}
468
- removeClippedSubviews={false}
469
854
  renderItem={[Function]}
470
855
  scrollEventThrottle={50}
471
- stickyHeaderIndices={Array []}
472
- style={
473
- Object {
474
- "paddingHorizontal": 16,
475
- }
856
+ stickyHeaderIndices={
857
+ Array [
858
+ 0,
859
+ 3,
860
+ ]
476
861
  }
477
- viewabilityConfigCallbackPairs={Array []}
862
+ style={Object {}}
478
863
  >
479
864
  <View>
480
865
  <View
481
866
  onLayout={[Function]}
482
867
  style={null}
483
868
  >
484
- <View>
485
- <View
486
- accessibilityState={
869
+ <View
870
+ style={
871
+ Array [
487
872
  Object {
488
- "disabled": false,
489
- }
490
- }
491
- accessible={true}
492
- focusable={true}
493
- onClick={[Function]}
494
- onResponderGrant={[Function]}
495
- onResponderMove={[Function]}
496
- onResponderRelease={[Function]}
497
- onResponderTerminate={[Function]}
498
- onResponderTerminationRequest={[Function]}
499
- onStartShouldSetResponder={[Function]}
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
500
889
  style={
501
890
  Array [
502
891
  Object {
503
- "alignItems": "center",
504
- "backgroundColor": "#f1e9fb",
892
+ "display": "flex",
505
893
  "flexDirection": "row",
506
- "opacity": 1,
507
- "padding": 16,
508
894
  },
509
895
  undefined,
510
896
  ]
@@ -514,16 +900,126 @@ exports[`OptionList renders correctly 1`] = `
514
900
  style={
515
901
  Array [
516
902
  Object {
517
- "flex": 1,
903
+ "marginRight": 8,
518
904
  },
519
905
  undefined,
520
906
  ]
521
907
  }
522
- >
523
- <Text
524
- style={
525
- Array [
526
- Object {
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>
931
+ <View
932
+ onLayout={[Function]}
933
+ style={null}
934
+ >
935
+ <View>
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
+ }
985
+ accessible={true}
986
+ focusable={true}
987
+ onClick={[Function]}
988
+ onResponderGrant={[Function]}
989
+ onResponderMove={[Function]}
990
+ onResponderRelease={[Function]}
991
+ onResponderTerminate={[Function]}
992
+ onResponderTerminationRequest={[Function]}
993
+ onStartShouldSetResponder={[Function]}
994
+ style={
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
+ ]
1007
+ }
1008
+ >
1009
+ <View
1010
+ style={
1011
+ Array [
1012
+ Object {
1013
+ "flex": 1,
1014
+ },
1015
+ undefined,
1016
+ ]
1017
+ }
1018
+ >
1019
+ <Text
1020
+ style={
1021
+ Array [
1022
+ Object {
527
1023
  "color": "#292a2b",
528
1024
  "fontFamily": "BeVietnamPro-Regular",
529
1025
  "fontSize": 16,
@@ -537,7 +1033,7 @@ exports[`OptionList renders correctly 1`] = `
537
1033
  themeFontWeight="regular"
538
1034
  themeIntent="body"
539
1035
  >
540
- A
1036
+ A1
541
1037
  </Text>
542
1038
  </View>
543
1039
  <View
@@ -566,6 +1062,119 @@ exports[`OptionList renders correctly 1`] = `
566
1062
  />
567
1063
  </View>
568
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,
1153
+ },
1154
+ undefined,
1155
+ ]
1156
+ }
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>
1177
+ </View>
569
1178
  </View>
570
1179
  </View>
571
1180
  <View
@@ -573,6 +1182,49 @@ exports[`OptionList renders correctly 1`] = `
573
1182
  style={null}
574
1183
  >
575
1184
  <View>
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
+ />
576
1228
  <View
577
1229
  accessibilityState={
578
1230
  Object {
@@ -597,7 +1249,9 @@ exports[`OptionList renders correctly 1`] = `
597
1249
  "opacity": 1,
598
1250
  "padding": 16,
599
1251
  },
600
- undefined,
1252
+ Object {
1253
+ "marginHorizontal": 12,
1254
+ },
601
1255
  ]
602
1256
  }
603
1257
  >
@@ -628,10 +1282,59 @@ exports[`OptionList renders correctly 1`] = `
628
1282
  themeFontWeight="regular"
629
1283
  themeIntent="body"
630
1284
  >
631
- B
1285
+ B1
632
1286
  </Text>
633
1287
  </View>
634
1288
  </View>
1289
+ <View
1290
+ highlighted={false}
1291
+ leadingItem={
1292
+ Object {
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",
1335
+ }
1336
+ }
1337
+ />
635
1338
  </View>
636
1339
  </View>
637
1340
  <View
@@ -663,7 +1366,9 @@ exports[`OptionList renders correctly 1`] = `
663
1366
  "opacity": 1,
664
1367
  "padding": 16,
665
1368
  },
666
- undefined,
1369
+ Object {
1370
+ "marginHorizontal": 12,
1371
+ },
667
1372
  ]
668
1373
  }
669
1374
  >
@@ -694,12 +1399,59 @@ exports[`OptionList renders correctly 1`] = `
694
1399
  themeFontWeight="regular"
695
1400
  themeIntent="body"
696
1401
  >
697
- C
1402
+ B2
698
1403
  </Text>
699
1404
  </View>
700
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
+ />
701
1449
  </View>
702
1450
  </View>
1451
+ <View
1452
+ onLayout={[Function]}
1453
+ style={null}
1454
+ />
703
1455
  </View>
704
1456
  </RCTScrollView>
705
1457
  `;
@@ -710,16 +1462,26 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
710
1462
  data={
711
1463
  Array [
712
1464
  Object {
713
- "text": "A",
714
- "value": "a",
715
- },
716
- Object {
717
- "text": "B",
718
- "value": "b",
1465
+ "category": "A",
1466
+ "data": Array [
1467
+ Object {
1468
+ "text": "A1",
1469
+ "value": "a1",
1470
+ },
1471
+ ],
719
1472
  },
720
1473
  Object {
721
- "text": "C",
722
- "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
+ ],
723
1485
  },
724
1486
  ]
725
1487
  }
@@ -736,23 +1498,131 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
736
1498
  onScrollBeginDrag={[Function]}
737
1499
  onScrollEndDrag={[Function]}
738
1500
  onScrollToIndexFailed={[Function]}
739
- removeClippedSubviews={false}
740
1501
  renderItem={[Function]}
741
1502
  scrollEventThrottle={50}
742
- stickyHeaderIndices={Array []}
743
- style={
744
- Object {
745
- "paddingHorizontal": 16,
746
- }
1503
+ stickyHeaderIndices={
1504
+ Array [
1505
+ 0,
1506
+ 3,
1507
+ ]
747
1508
  }
748
- viewabilityConfigCallbackPairs={Array []}
1509
+ style={Object {}}
749
1510
  >
750
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>
751
1578
  <View
752
1579
  onLayout={[Function]}
753
1580
  style={null}
754
1581
  >
755
1582
  <View>
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
+ />
756
1626
  <View
757
1627
  accessibilityState={
758
1628
  Object {
@@ -777,7 +1647,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
777
1647
  "opacity": 1,
778
1648
  "padding": 16,
779
1649
  },
780
- undefined,
1650
+ Object {
1651
+ "marginHorizontal": 12,
1652
+ },
781
1653
  ]
782
1654
  }
783
1655
  >
@@ -808,7 +1680,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
808
1680
  themeFontWeight="regular"
809
1681
  themeIntent="body"
810
1682
  >
811
- A
1683
+ A1
812
1684
  </Text>
813
1685
  </View>
814
1686
  <View
@@ -837,6 +1709,119 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
837
1709
  />
838
1710
  </View>
839
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={
1740
+ Object {
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",
1772
+ "flexDirection": "row",
1773
+ "justifyContent": "space-between",
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
+ ]
1793
+ }
1794
+ >
1795
+ <View
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>
840
1825
  </View>
841
1826
  </View>
842
1827
  <View
@@ -844,6 +1829,49 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
844
1829
  style={null}
845
1830
  >
846
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 [
1862
+ Object {
1863
+ "marginTop": 12,
1864
+ },
1865
+ undefined,
1866
+ ]
1867
+ }
1868
+ trailingItem={
1869
+ Object {
1870
+ "text": "B1",
1871
+ "value": "b1",
1872
+ }
1873
+ }
1874
+ />
847
1875
  <View
848
1876
  accessibilityState={
849
1877
  Object {
@@ -868,7 +1896,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
868
1896
  "opacity": 1,
869
1897
  "padding": 16,
870
1898
  },
871
- undefined,
1899
+ Object {
1900
+ "marginHorizontal": 12,
1901
+ },
872
1902
  ]
873
1903
  }
874
1904
  >
@@ -899,7 +1929,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
899
1929
  themeFontWeight="regular"
900
1930
  themeIntent="body"
901
1931
  >
902
- B
1932
+ B1
903
1933
  </Text>
904
1934
  </View>
905
1935
  <View
@@ -928,6 +1958,55 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
928
1958
  />
929
1959
  </View>
930
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
+ />
931
2010
  </View>
932
2011
  </View>
933
2012
  <View
@@ -959,7 +2038,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
959
2038
  "opacity": 1,
960
2039
  "padding": 16,
961
2040
  },
962
- undefined,
2041
+ Object {
2042
+ "marginHorizontal": 12,
2043
+ },
963
2044
  ]
964
2045
  }
965
2046
  >
@@ -990,12 +2071,59 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
990
2071
  themeFontWeight="regular"
991
2072
  themeIntent="body"
992
2073
  >
993
- C
2074
+ B2
994
2075
  </Text>
995
2076
  </View>
996
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
+ />
997
2121
  </View>
998
2122
  </View>
2123
+ <View
2124
+ onLayout={[Function]}
2125
+ style={null}
2126
+ />
999
2127
  </View>
1000
2128
  </RCTScrollView>
1001
2129
  `;
@@ -1006,16 +2134,26 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1006
2134
  data={
1007
2135
  Array [
1008
2136
  Object {
1009
- "text": "A",
1010
- "value": "a",
1011
- },
1012
- Object {
1013
- "text": "B",
1014
- "value": "b",
2137
+ "category": "A",
2138
+ "data": Array [
2139
+ Object {
2140
+ "text": "A1",
2141
+ "value": "a1",
2142
+ },
2143
+ ],
1015
2144
  },
1016
2145
  Object {
1017
- "text": "C",
1018
- "value": "c",
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
+ ],
1019
2157
  },
1020
2158
  ]
1021
2159
  }
@@ -1032,23 +2170,131 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1032
2170
  onScrollBeginDrag={[Function]}
1033
2171
  onScrollEndDrag={[Function]}
1034
2172
  onScrollToIndexFailed={[Function]}
1035
- removeClippedSubviews={false}
1036
2173
  renderItem={[Function]}
1037
2174
  scrollEventThrottle={50}
1038
- stickyHeaderIndices={Array []}
1039
- style={
1040
- Object {
1041
- "paddingHorizontal": 16,
1042
- }
2175
+ stickyHeaderIndices={
2176
+ Array [
2177
+ 0,
2178
+ 3,
2179
+ ]
1043
2180
  }
1044
- viewabilityConfigCallbackPairs={Array []}
2181
+ style={Object {}}
1045
2182
  >
1046
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
2219
+ style={
2220
+ Array [
2221
+ Object {
2222
+ "marginRight": 8,
2223
+ },
2224
+ undefined,
2225
+ ]
2226
+ }
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>
2247
+ </View>
2248
+ </View>
2249
+ </View>
1047
2250
  <View
1048
2251
  onLayout={[Function]}
1049
2252
  style={null}
1050
2253
  >
1051
2254
  <View>
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
+ />
1052
2298
  <View
1053
2299
  accessibilityState={
1054
2300
  Object {
@@ -1073,7 +2319,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1073
2319
  "opacity": 1,
1074
2320
  "padding": 16,
1075
2321
  },
1076
- undefined,
2322
+ Object {
2323
+ "marginHorizontal": 12,
2324
+ },
1077
2325
  ]
1078
2326
  }
1079
2327
  >
@@ -1104,7 +2352,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1104
2352
  themeFontWeight="regular"
1105
2353
  themeIntent="body"
1106
2354
  >
1107
- A
2355
+ A1
1108
2356
  </Text>
1109
2357
  </View>
1110
2358
  <View
@@ -1133,6 +2381,119 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1133
2381
  />
1134
2382
  </View>
1135
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
+ />
2427
+ </View>
2428
+ </View>
2429
+ <View
2430
+ onLayout={[Function]}
2431
+ style={null}
2432
+ />
2433
+ <View
2434
+ onLayout={[Function]}
2435
+ style={null}
2436
+ >
2437
+ <View
2438
+ style={
2439
+ Array [
2440
+ Object {
2441
+ "alignContent": "center",
2442
+ "backgroundColor": "#dadbde",
2443
+ "display": "flex",
2444
+ "flexDirection": "row",
2445
+ "justifyContent": "space-between",
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
+ ]
2465
+ }
2466
+ >
2467
+ <View
2468
+ style={
2469
+ Array [
2470
+ Object {
2471
+ "marginRight": 8,
2472
+ },
2473
+ undefined,
2474
+ ]
2475
+ }
2476
+ />
2477
+ <Text
2478
+ style={
2479
+ Array [
2480
+ Object {
2481
+ "color": "#292a2b",
2482
+ "fontFamily": "BeVietnamPro-Regular",
2483
+ "fontSize": 16,
2484
+ "letterSpacing": 0.48,
2485
+ "lineHeight": 24,
2486
+ },
2487
+ undefined,
2488
+ ]
2489
+ }
2490
+ themeFontSize="large"
2491
+ themeFontWeight="regular"
2492
+ themeIntent="body"
2493
+ >
2494
+ B
2495
+ </Text>
2496
+ </View>
1136
2497
  </View>
1137
2498
  </View>
1138
2499
  <View
@@ -1140,6 +2501,49 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1140
2501
  style={null}
1141
2502
  >
1142
2503
  <View>
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
+ />
1143
2547
  <View
1144
2548
  accessibilityState={
1145
2549
  Object {
@@ -1164,7 +2568,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1164
2568
  "opacity": 1,
1165
2569
  "padding": 16,
1166
2570
  },
1167
- undefined,
2571
+ Object {
2572
+ "marginHorizontal": 12,
2573
+ },
1168
2574
  ]
1169
2575
  }
1170
2576
  >
@@ -1195,10 +2601,59 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1195
2601
  themeFontWeight="regular"
1196
2602
  themeIntent="body"
1197
2603
  >
1198
- B
2604
+ B1
1199
2605
  </Text>
1200
2606
  </View>
1201
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
+ />
1202
2657
  </View>
1203
2658
  </View>
1204
2659
  <View
@@ -1230,7 +2685,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1230
2685
  "opacity": 1,
1231
2686
  "padding": 16,
1232
2687
  },
1233
- undefined,
2688
+ Object {
2689
+ "marginHorizontal": 12,
2690
+ },
1234
2691
  ]
1235
2692
  }
1236
2693
  >
@@ -1261,12 +2718,59 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
1261
2718
  themeFontWeight="regular"
1262
2719
  themeIntent="body"
1263
2720
  >
1264
- C
2721
+ B2
1265
2722
  </Text>
1266
2723
  </View>
1267
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
+ />
1268
2768
  </View>
1269
2769
  </View>
2770
+ <View
2771
+ onLayout={[Function]}
2772
+ style={null}
2773
+ />
1270
2774
  </View>
1271
2775
  </RCTScrollView>
1272
2776
  `;