@fluentui-react-native/menu 1.0.79 → 1.0.81

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 (5) hide show
  1. package/CHANGELOG.json +37 -1
  2. package/CHANGELOG.md +19 -2
  3. package/jest.config.js +1 -1
  4. package/package.json +4 -3
  5. package/src/__tests__/__snapshots__/Menu.test.tsx.snap +663 -253
package/src/__tests__/__snapshots__/Menu.test.tsx.snap CHANGED
@@ -2,7 +2,16 @@
2
2
 
3
3
  exports[`Menu component tests Menu default 1`] = `
4
4
  <View
5
- accessibilityActions={Array []}
5
+ accessibilityActions={
6
+ Array [
7
+ Object {
8
+ "name": "Expand",
9
+ },
10
+ Object {
11
+ "name": "Collapse",
12
+ },
13
+ ]
14
+ }
6
15
  accessibilityLabel="Default"
7
16
  accessibilityRole="button"
8
17
  accessibilityState={
@@ -11,14 +20,27 @@ exports[`Menu component tests Menu default 1`] = `
11
20
  }
12
21
  }
13
22
  accessible={true}
14
- collapsable={false}
15
23
  enableFocusRing={true}
16
24
  focusable={true}
25
+ keyUpEvents={
26
+ Array [
27
+ Object {
28
+ "key": " ",
29
+ },
30
+ Object {
31
+ "key": "Enter",
32
+ },
33
+ ]
34
+ }
17
35
  onAccessibilityAction={[Function]}
18
36
  onAccessibilityTap={[Function]}
19
37
  onBlur={[Function]}
20
38
  onClick={[Function]}
21
39
  onFocus={[Function]}
40
+ onKeyDown={[Function]}
41
+ onKeyUp={[Function]}
42
+ onMouseEnter={[Function]}
43
+ onMouseLeave={[Function]}
22
44
  onResponderGrant={[Function]}
23
45
  onResponderMove={[Function]}
24
46
  onResponderRelease={[Function]}
@@ -29,16 +51,17 @@ exports[`Menu component tests Menu default 1`] = `
29
51
  Object {
30
52
  "alignItems": "center",
31
53
  "alignSelf": "flex-start",
32
- "backgroundColor": "#0f6cbd",
33
- "borderColor": "#0f548c",
54
+ "backgroundColor": "#ffffff",
55
+ "borderColor": "#d1d1d1",
34
56
  "borderRadius": 4,
35
57
  "borderWidth": 1,
36
58
  "display": "flex",
37
59
  "flexDirection": "row",
38
60
  "justifyContent": "center",
39
- "minWidth": 96,
40
- "padding": 8,
41
- "paddingHorizontal": 15,
61
+ "minHeight": 32,
62
+ "minWidth": 64,
63
+ "padding": 3,
64
+ "paddingHorizontal": 7,
42
65
  "width": undefined,
43
66
  }
44
67
  }
@@ -46,17 +69,18 @@ exports[`Menu component tests Menu default 1`] = `
46
69
  <Text
47
70
  ellipsizeMode="tail"
48
71
  numberOfLines={0}
72
+ onAccessibilityTap={[Function]}
49
73
  style={
50
74
  Object {
51
- "color": "#ffffff",
52
- "fontFamily": "System",
53
- "fontSize": 15,
54
- "fontWeight": "600",
75
+ "color": "#242424",
76
+ "fontFamily": "Segoe UI",
77
+ "fontSize": 12,
78
+ "fontWeight": "400",
55
79
  "margin": 0,
56
- "marginBottom": 0,
57
- "marginEnd": 0,
80
+ "marginBottom": 1,
81
+ "marginEnd": -2,
58
82
  "marginStart": 0,
59
- "marginTop": 0,
83
+ "marginTop": -1,
60
84
  }
61
85
  }
62
86
  >
@@ -68,7 +92,16 @@ exports[`Menu component tests Menu default 1`] = `
68
92
  exports[`Menu component tests Menu defaultOpen 1`] = `
69
93
  Array [
70
94
  <View
71
- accessibilityActions={Array []}
95
+ accessibilityActions={
96
+ Array [
97
+ Object {
98
+ "name": "Expand",
99
+ },
100
+ Object {
101
+ "name": "Collapse",
102
+ },
103
+ ]
104
+ }
72
105
  accessibilityLabel="Open"
73
106
  accessibilityRole="button"
74
107
  accessibilityState={
@@ -77,14 +110,27 @@ Array [
77
110
  }
78
111
  }
79
112
  accessible={true}
80
- collapsable={false}
81
113
  enableFocusRing={true}
82
114
  focusable={true}
115
+ keyUpEvents={
116
+ Array [
117
+ Object {
118
+ "key": " ",
119
+ },
120
+ Object {
121
+ "key": "Enter",
122
+ },
123
+ ]
124
+ }
83
125
  onAccessibilityAction={[Function]}
84
126
  onAccessibilityTap={[Function]}
85
127
  onBlur={[Function]}
86
128
  onClick={[Function]}
87
129
  onFocus={[Function]}
130
+ onKeyDown={[Function]}
131
+ onKeyUp={[Function]}
132
+ onMouseEnter={[Function]}
133
+ onMouseLeave={[Function]}
88
134
  onResponderGrant={[Function]}
89
135
  onResponderMove={[Function]}
90
136
  onResponderRelease={[Function]}
@@ -95,16 +141,17 @@ Array [
95
141
  Object {
96
142
  "alignItems": "center",
97
143
  "alignSelf": "flex-start",
98
- "backgroundColor": "#0f6cbd",
99
- "borderColor": "#0f548c",
144
+ "backgroundColor": "#ffffff",
145
+ "borderColor": "#d1d1d1",
100
146
  "borderRadius": 4,
101
147
  "borderWidth": 1,
102
148
  "display": "flex",
103
149
  "flexDirection": "row",
104
150
  "justifyContent": "center",
105
- "minWidth": 96,
106
- "padding": 8,
107
- "paddingHorizontal": 15,
151
+ "minHeight": 32,
152
+ "minWidth": 64,
153
+ "padding": 3,
154
+ "paddingHorizontal": 7,
108
155
  "width": undefined,
109
156
  }
110
157
  }
@@ -112,17 +159,18 @@ Array [
112
159
  <Text
113
160
  ellipsizeMode="tail"
114
161
  numberOfLines={0}
162
+ onAccessibilityTap={[Function]}
115
163
  style={
116
164
  Object {
117
- "color": "#ffffff",
118
- "fontFamily": "System",
119
- "fontSize": 15,
120
- "fontWeight": "600",
165
+ "color": "#242424",
166
+ "fontFamily": "Segoe UI",
167
+ "fontSize": 12,
168
+ "fontWeight": "400",
121
169
  "margin": 0,
122
- "marginBottom": 0,
123
- "marginEnd": 0,
170
+ "marginBottom": 1,
171
+ "marginEnd": -2,
124
172
  "marginStart": 0,
125
- "marginTop": 0,
173
+ "marginTop": -1,
126
174
  }
127
175
  }
128
176
  >
@@ -135,7 +183,7 @@ Array [
135
183
  borderWidth={1}
136
184
  doNotTakePointerCapture={false}
137
185
  onDismiss={[Function]}
138
- setInitialFocus={false}
186
+ setInitialFocus={true}
139
187
  style={
140
188
  Object {
141
189
  "backgroundColor": "#faf9f8",
@@ -158,7 +206,7 @@ Array [
158
206
  "display": "flex",
159
207
  "maxWidth": 300,
160
208
  "minWidth": 128,
161
- "padding": 8,
209
+ "paddingVertical": 4,
162
210
  }
163
211
  }
164
212
  >
@@ -171,13 +219,26 @@ Array [
171
219
  }
172
220
  }
173
221
  accessible={true}
174
- collapsable={false}
175
222
  enableFocusRing={true}
176
223
  focusable={true}
224
+ keyDownEvents={
225
+ Array [
226
+ Object {
227
+ "key": " ",
228
+ },
229
+ Object {
230
+ "key": "Enter",
231
+ },
232
+ ]
233
+ }
177
234
  onAccessibilityTap={[Function]}
178
235
  onBlur={[Function]}
179
236
  onClick={[Function]}
180
237
  onFocus={[Function]}
238
+ onKeyDown={[Function]}
239
+ onKeyUp={[Function]}
240
+ onMouseEnter={[Function]}
241
+ onMouseLeave={[Function]}
181
242
  onResponderGrant={[Function]}
182
243
  onResponderMove={[Function]}
183
244
  onResponderRelease={[Function]}
@@ -188,24 +249,27 @@ Array [
188
249
  Object {
189
250
  "alignItems": "center",
190
251
  "backgroundColor": "#ffffff",
191
- "borderRadius": 4,
252
+ "borderRadius": 0,
192
253
  "display": "flex",
193
254
  "flexDirection": "row",
194
255
  "maxWidth": 300,
195
- "minHeight": 32,
256
+ "minHeight": 24,
196
257
  "minWidth": 160,
258
+ "padding": 4,
259
+ "paddingHorizontal": 8,
197
260
  }
198
261
  }
199
262
  >
200
263
  <Text
201
264
  ellipsizeMode="tail"
202
265
  numberOfLines={0}
266
+ onAccessibilityTap={[Function]}
203
267
  style={
204
268
  Object {
205
- "color": "#424242",
269
+ "color": "#242424",
206
270
  "flexGrow": 1,
207
- "fontFamily": "System",
208
- "fontSize": 15,
271
+ "fontFamily": "Segoe UI",
272
+ "fontSize": 12,
209
273
  "fontWeight": "400",
210
274
  "margin": 0,
211
275
  }
@@ -223,13 +287,26 @@ Array [
223
287
  }
224
288
  }
225
289
  accessible={true}
226
- collapsable={false}
227
290
  enableFocusRing={true}
228
291
  focusable={true}
292
+ keyDownEvents={
293
+ Array [
294
+ Object {
295
+ "key": " ",
296
+ },
297
+ Object {
298
+ "key": "Enter",
299
+ },
300
+ ]
301
+ }
229
302
  onAccessibilityTap={[Function]}
230
303
  onBlur={[Function]}
231
304
  onClick={[Function]}
232
305
  onFocus={[Function]}
306
+ onKeyDown={[Function]}
307
+ onKeyUp={[Function]}
308
+ onMouseEnter={[Function]}
309
+ onMouseLeave={[Function]}
233
310
  onResponderGrant={[Function]}
234
311
  onResponderMove={[Function]}
235
312
  onResponderRelease={[Function]}
@@ -240,25 +317,27 @@ Array [
240
317
  Object {
241
318
  "alignItems": "center",
242
319
  "backgroundColor": "#ffffff",
243
- "borderRadius": 4,
320
+ "borderRadius": 0,
244
321
  "display": "flex",
245
322
  "flexDirection": "row",
246
- "marginTop": 4,
247
323
  "maxWidth": 300,
248
- "minHeight": 32,
324
+ "minHeight": 24,
249
325
  "minWidth": 160,
326
+ "padding": 4,
327
+ "paddingHorizontal": 8,
250
328
  }
251
329
  }
252
330
  >
253
331
  <Text
254
332
  ellipsizeMode="tail"
255
333
  numberOfLines={0}
334
+ onAccessibilityTap={[Function]}
256
335
  style={
257
336
  Object {
258
337
  "color": "#bdbdbd",
259
338
  "flexGrow": 1,
260
- "fontFamily": "System",
261
- "fontSize": 15,
339
+ "fontFamily": "Segoe UI",
340
+ "fontSize": 12,
262
341
  "fontWeight": "400",
263
342
  "margin": 0,
264
343
  }
@@ -276,7 +355,16 @@ Array [
276
355
  exports[`Menu component tests Menu open 1`] = `
277
356
  Array [
278
357
  <View
279
- accessibilityActions={Array []}
358
+ accessibilityActions={
359
+ Array [
360
+ Object {
361
+ "name": "Expand",
362
+ },
363
+ Object {
364
+ "name": "Collapse",
365
+ },
366
+ ]
367
+ }
280
368
  accessibilityLabel="Open"
281
369
  accessibilityRole="button"
282
370
  accessibilityState={
@@ -285,14 +373,27 @@ Array [
285
373
  }
286
374
  }
287
375
  accessible={true}
288
- collapsable={false}
289
376
  enableFocusRing={true}
290
377
  focusable={true}
378
+ keyUpEvents={
379
+ Array [
380
+ Object {
381
+ "key": " ",
382
+ },
383
+ Object {
384
+ "key": "Enter",
385
+ },
386
+ ]
387
+ }
291
388
  onAccessibilityAction={[Function]}
292
389
  onAccessibilityTap={[Function]}
293
390
  onBlur={[Function]}
294
391
  onClick={[Function]}
295
392
  onFocus={[Function]}
393
+ onKeyDown={[Function]}
394
+ onKeyUp={[Function]}
395
+ onMouseEnter={[Function]}
396
+ onMouseLeave={[Function]}
296
397
  onResponderGrant={[Function]}
297
398
  onResponderMove={[Function]}
298
399
  onResponderRelease={[Function]}
@@ -303,16 +404,17 @@ Array [
303
404
  Object {
304
405
  "alignItems": "center",
305
406
  "alignSelf": "flex-start",
306
- "backgroundColor": "#0f6cbd",
307
- "borderColor": "#0f548c",
407
+ "backgroundColor": "#ffffff",
408
+ "borderColor": "#d1d1d1",
308
409
  "borderRadius": 4,
309
410
  "borderWidth": 1,
310
411
  "display": "flex",
311
412
  "flexDirection": "row",
312
413
  "justifyContent": "center",
313
- "minWidth": 96,
314
- "padding": 8,
315
- "paddingHorizontal": 15,
414
+ "minHeight": 32,
415
+ "minWidth": 64,
416
+ "padding": 3,
417
+ "paddingHorizontal": 7,
316
418
  "width": undefined,
317
419
  }
318
420
  }
@@ -320,17 +422,18 @@ Array [
320
422
  <Text
321
423
  ellipsizeMode="tail"
322
424
  numberOfLines={0}
425
+ onAccessibilityTap={[Function]}
323
426
  style={
324
427
  Object {
325
- "color": "#ffffff",
326
- "fontFamily": "System",
327
- "fontSize": 15,
328
- "fontWeight": "600",
428
+ "color": "#242424",
429
+ "fontFamily": "Segoe UI",
430
+ "fontSize": 12,
431
+ "fontWeight": "400",
329
432
  "margin": 0,
330
- "marginBottom": 0,
331
- "marginEnd": 0,
433
+ "marginBottom": 1,
434
+ "marginEnd": -2,
332
435
  "marginStart": 0,
333
- "marginTop": 0,
436
+ "marginTop": -1,
334
437
  }
335
438
  }
336
439
  >
@@ -349,7 +452,7 @@ Array [
349
452
  }
350
453
  doNotTakePointerCapture={false}
351
454
  onDismiss={[Function]}
352
- setInitialFocus={false}
455
+ setInitialFocus={true}
353
456
  style={
354
457
  Object {
355
458
  "backgroundColor": "#faf9f8",
@@ -372,7 +475,7 @@ Array [
372
475
  "display": "flex",
373
476
  "maxWidth": 300,
374
477
  "minWidth": 128,
375
- "padding": 8,
478
+ "paddingVertical": 4,
376
479
  }
377
480
  }
378
481
  >
@@ -385,13 +488,26 @@ Array [
385
488
  }
386
489
  }
387
490
  accessible={true}
388
- collapsable={false}
389
491
  enableFocusRing={true}
390
492
  focusable={true}
493
+ keyDownEvents={
494
+ Array [
495
+ Object {
496
+ "key": " ",
497
+ },
498
+ Object {
499
+ "key": "Enter",
500
+ },
501
+ ]
502
+ }
391
503
  onAccessibilityTap={[Function]}
392
504
  onBlur={[Function]}
393
505
  onClick={[Function]}
394
506
  onFocus={[Function]}
507
+ onKeyDown={[Function]}
508
+ onKeyUp={[Function]}
509
+ onMouseEnter={[Function]}
510
+ onMouseLeave={[Function]}
395
511
  onResponderGrant={[Function]}
396
512
  onResponderMove={[Function]}
397
513
  onResponderRelease={[Function]}
@@ -402,24 +518,27 @@ Array [
402
518
  Object {
403
519
  "alignItems": "center",
404
520
  "backgroundColor": "#ffffff",
405
- "borderRadius": 4,
521
+ "borderRadius": 0,
406
522
  "display": "flex",
407
523
  "flexDirection": "row",
408
524
  "maxWidth": 300,
409
- "minHeight": 32,
525
+ "minHeight": 24,
410
526
  "minWidth": 160,
527
+ "padding": 4,
528
+ "paddingHorizontal": 8,
411
529
  }
412
530
  }
413
531
  >
414
532
  <Text
415
533
  ellipsizeMode="tail"
416
534
  numberOfLines={0}
535
+ onAccessibilityTap={[Function]}
417
536
  style={
418
537
  Object {
419
- "color": "#424242",
538
+ "color": "#242424",
420
539
  "flexGrow": 1,
421
- "fontFamily": "System",
422
- "fontSize": 15,
540
+ "fontFamily": "Segoe UI",
541
+ "fontSize": 12,
423
542
  "fontWeight": "400",
424
543
  "margin": 0,
425
544
  }
@@ -437,7 +556,16 @@ Array [
437
556
  exports[`Menu component tests Menu open checkbox and divider 1`] = `
438
557
  Array [
439
558
  <View
440
- accessibilityActions={Array []}
559
+ accessibilityActions={
560
+ Array [
561
+ Object {
562
+ "name": "Expand",
563
+ },
564
+ Object {
565
+ "name": "Collapse",
566
+ },
567
+ ]
568
+ }
441
569
  accessibilityLabel="Open"
442
570
  accessibilityRole="button"
443
571
  accessibilityState={
@@ -446,14 +574,27 @@ Array [
446
574
  }
447
575
  }
448
576
  accessible={true}
449
- collapsable={false}
450
577
  enableFocusRing={true}
451
578
  focusable={true}
579
+ keyUpEvents={
580
+ Array [
581
+ Object {
582
+ "key": " ",
583
+ },
584
+ Object {
585
+ "key": "Enter",
586
+ },
587
+ ]
588
+ }
452
589
  onAccessibilityAction={[Function]}
453
590
  onAccessibilityTap={[Function]}
454
591
  onBlur={[Function]}
455
592
  onClick={[Function]}
456
593
  onFocus={[Function]}
594
+ onKeyDown={[Function]}
595
+ onKeyUp={[Function]}
596
+ onMouseEnter={[Function]}
597
+ onMouseLeave={[Function]}
457
598
  onResponderGrant={[Function]}
458
599
  onResponderMove={[Function]}
459
600
  onResponderRelease={[Function]}
@@ -464,16 +605,17 @@ Array [
464
605
  Object {
465
606
  "alignItems": "center",
466
607
  "alignSelf": "flex-start",
467
- "backgroundColor": "#0f6cbd",
468
- "borderColor": "#0f548c",
608
+ "backgroundColor": "#ffffff",
609
+ "borderColor": "#d1d1d1",
469
610
  "borderRadius": 4,
470
611
  "borderWidth": 1,
471
612
  "display": "flex",
472
613
  "flexDirection": "row",
473
614
  "justifyContent": "center",
474
- "minWidth": 96,
475
- "padding": 8,
476
- "paddingHorizontal": 15,
615
+ "minHeight": 32,
616
+ "minWidth": 64,
617
+ "padding": 3,
618
+ "paddingHorizontal": 7,
477
619
  "width": undefined,
478
620
  }
479
621
  }
@@ -481,17 +623,18 @@ Array [
481
623
  <Text
482
624
  ellipsizeMode="tail"
483
625
  numberOfLines={0}
626
+ onAccessibilityTap={[Function]}
484
627
  style={
485
628
  Object {
486
- "color": "#ffffff",
487
- "fontFamily": "System",
488
- "fontSize": 15,
489
- "fontWeight": "600",
629
+ "color": "#242424",
630
+ "fontFamily": "Segoe UI",
631
+ "fontSize": 12,
632
+ "fontWeight": "400",
490
633
  "margin": 0,
491
- "marginBottom": 0,
492
- "marginEnd": 0,
634
+ "marginBottom": 1,
635
+ "marginEnd": -2,
493
636
  "marginStart": 0,
494
- "marginTop": 0,
637
+ "marginTop": -1,
495
638
  }
496
639
  }
497
640
  >
@@ -510,7 +653,7 @@ Array [
510
653
  }
511
654
  doNotTakePointerCapture={false}
512
655
  onDismiss={[Function]}
513
- setInitialFocus={false}
656
+ setInitialFocus={true}
514
657
  style={
515
658
  Object {
516
659
  "backgroundColor": "#faf9f8",
@@ -533,7 +676,7 @@ Array [
533
676
  "display": "flex",
534
677
  "maxWidth": 300,
535
678
  "minWidth": 128,
536
- "padding": 8,
679
+ "paddingVertical": 4,
537
680
  }
538
681
  }
539
682
  >
@@ -554,13 +697,26 @@ Array [
554
697
  }
555
698
  }
556
699
  accessible={true}
557
- collapsable={false}
558
700
  enableFocusRing={true}
559
701
  focusable={true}
702
+ keyDownEvents={
703
+ Array [
704
+ Object {
705
+ "key": " ",
706
+ },
707
+ Object {
708
+ "key": "Enter",
709
+ },
710
+ ]
711
+ }
560
712
  onAccessibilityAction={[Function]}
561
713
  onBlur={[Function]}
562
714
  onClick={[Function]}
563
715
  onFocus={[Function]}
716
+ onKeyDown={[Function]}
717
+ onKeyUp={[Function]}
718
+ onMouseEnter={[Function]}
719
+ onMouseLeave={[Function]}
564
720
  onResponderGrant={[Function]}
565
721
  onResponderMove={[Function]}
566
722
  onResponderRelease={[Function]}
@@ -571,12 +727,14 @@ Array [
571
727
  Object {
572
728
  "alignItems": "center",
573
729
  "backgroundColor": "#ffffff",
574
- "borderRadius": 4,
730
+ "borderRadius": 0,
575
731
  "display": "flex",
576
732
  "flexDirection": "row",
577
733
  "maxWidth": 300,
578
- "minHeight": 32,
734
+ "minHeight": 24,
579
735
  "minWidth": 160,
736
+ "padding": 4,
737
+ "paddingHorizontal": 8,
580
738
  }
581
739
  }
582
740
  >
@@ -584,7 +742,7 @@ Array [
584
742
  align="xMidYMid"
585
743
  bbHeight={16}
586
744
  bbWidth={16}
587
- color={4282532418}
745
+ color={4280558628}
588
746
  focusable={false}
589
747
  height={16}
590
748
  meetOrSlice={0}
@@ -597,7 +755,7 @@ Array [
597
755
  "borderWidth": 0,
598
756
  },
599
757
  Object {
600
- "marginEnd": 8,
758
+ "marginEnd": 4,
601
759
  },
602
760
  Object {
603
761
  "flex": 0,
@@ -607,9 +765,9 @@ Array [
607
765
  },
608
766
  ]
609
767
  }
610
- tintColor={4282532418}
611
- vbHeight={16}
612
- vbWidth={16}
768
+ tintColor={4280558628}
769
+ vbHeight={12}
770
+ vbWidth={12}
613
771
  width={16}
614
772
  xml="
615
773
  <svg>
@@ -635,12 +793,13 @@ Array [
635
793
  <Text
636
794
  ellipsizeMode="tail"
637
795
  numberOfLines={0}
796
+ onAccessibilityTap={[Function]}
638
797
  style={
639
798
  Object {
640
- "color": "#424242",
799
+ "color": "#242424",
641
800
  "flexGrow": 1,
642
- "fontFamily": "System",
643
- "fontSize": 15,
801
+ "fontFamily": "Segoe UI",
802
+ "fontSize": 12,
644
803
  "fontWeight": "400",
645
804
  "margin": 0,
646
805
  }
@@ -655,7 +814,7 @@ Array [
655
814
  "backgroundColor": "#d1d1d1",
656
815
  "display": "flex",
657
816
  "height": 1,
658
- "margin": 4,
817
+ "margin": 2,
659
818
  "marginVertical": undefined,
660
819
  "width": undefined,
661
820
  }
@@ -678,13 +837,26 @@ Array [
678
837
  }
679
838
  }
680
839
  accessible={true}
681
- collapsable={false}
682
840
  enableFocusRing={true}
683
841
  focusable={true}
842
+ keyDownEvents={
843
+ Array [
844
+ Object {
845
+ "key": " ",
846
+ },
847
+ Object {
848
+ "key": "Enter",
849
+ },
850
+ ]
851
+ }
684
852
  onAccessibilityAction={[Function]}
685
853
  onBlur={[Function]}
686
854
  onClick={[Function]}
687
855
  onFocus={[Function]}
856
+ onKeyDown={[Function]}
857
+ onKeyUp={[Function]}
858
+ onMouseEnter={[Function]}
859
+ onMouseLeave={[Function]}
688
860
  onResponderGrant={[Function]}
689
861
  onResponderMove={[Function]}
690
862
  onResponderRelease={[Function]}
@@ -695,13 +867,14 @@ Array [
695
867
  Object {
696
868
  "alignItems": "center",
697
869
  "backgroundColor": "#ffffff",
698
- "borderRadius": 4,
870
+ "borderRadius": 0,
699
871
  "display": "flex",
700
872
  "flexDirection": "row",
701
- "marginTop": 4,
702
873
  "maxWidth": 300,
703
- "minHeight": 32,
874
+ "minHeight": 24,
704
875
  "minWidth": 160,
876
+ "padding": 4,
877
+ "paddingHorizontal": 8,
705
878
  }
706
879
  }
707
880
  >
@@ -722,7 +895,7 @@ Array [
722
895
  "borderWidth": 0,
723
896
  },
724
897
  Object {
725
- "marginEnd": 8,
898
+ "marginEnd": 4,
726
899
  },
727
900
  Object {
728
901
  "flex": 0,
@@ -733,8 +906,8 @@ Array [
733
906
  ]
734
907
  }
735
908
  tintColor={4290624957}
736
- vbHeight={16}
737
- vbWidth={16}
909
+ vbHeight={12}
910
+ vbWidth={12}
738
911
  width={16}
739
912
  xml="
740
913
  <svg>
@@ -760,12 +933,13 @@ Array [
760
933
  <Text
761
934
  ellipsizeMode="tail"
762
935
  numberOfLines={0}
936
+ onAccessibilityTap={[Function]}
763
937
  style={
764
938
  Object {
765
939
  "color": "#bdbdbd",
766
940
  "flexGrow": 1,
767
- "fontFamily": "System",
768
- "fontSize": 15,
941
+ "fontFamily": "Segoe UI",
942
+ "fontSize": 12,
769
943
  "fontWeight": "400",
770
944
  "margin": 0,
771
945
  }
@@ -783,7 +957,16 @@ Array [
783
957
  exports[`Menu component tests Menu open checkbox checked 1`] = `
784
958
  Array [
785
959
  <View
786
- accessibilityActions={Array []}
960
+ accessibilityActions={
961
+ Array [
962
+ Object {
963
+ "name": "Expand",
964
+ },
965
+ Object {
966
+ "name": "Collapse",
967
+ },
968
+ ]
969
+ }
787
970
  accessibilityLabel="Open"
788
971
  accessibilityRole="button"
789
972
  accessibilityState={
@@ -792,14 +975,27 @@ Array [
792
975
  }
793
976
  }
794
977
  accessible={true}
795
- collapsable={false}
796
978
  enableFocusRing={true}
797
979
  focusable={true}
980
+ keyUpEvents={
981
+ Array [
982
+ Object {
983
+ "key": " ",
984
+ },
985
+ Object {
986
+ "key": "Enter",
987
+ },
988
+ ]
989
+ }
798
990
  onAccessibilityAction={[Function]}
799
991
  onAccessibilityTap={[Function]}
800
992
  onBlur={[Function]}
801
993
  onClick={[Function]}
802
994
  onFocus={[Function]}
995
+ onKeyDown={[Function]}
996
+ onKeyUp={[Function]}
997
+ onMouseEnter={[Function]}
998
+ onMouseLeave={[Function]}
803
999
  onResponderGrant={[Function]}
804
1000
  onResponderMove={[Function]}
805
1001
  onResponderRelease={[Function]}
@@ -810,16 +1006,17 @@ Array [
810
1006
  Object {
811
1007
  "alignItems": "center",
812
1008
  "alignSelf": "flex-start",
813
- "backgroundColor": "#0f6cbd",
814
- "borderColor": "#0f548c",
1009
+ "backgroundColor": "#ffffff",
1010
+ "borderColor": "#d1d1d1",
815
1011
  "borderRadius": 4,
816
1012
  "borderWidth": 1,
817
1013
  "display": "flex",
818
1014
  "flexDirection": "row",
819
1015
  "justifyContent": "center",
820
- "minWidth": 96,
821
- "padding": 8,
822
- "paddingHorizontal": 15,
1016
+ "minHeight": 32,
1017
+ "minWidth": 64,
1018
+ "padding": 3,
1019
+ "paddingHorizontal": 7,
823
1020
  "width": undefined,
824
1021
  }
825
1022
  }
@@ -827,17 +1024,18 @@ Array [
827
1024
  <Text
828
1025
  ellipsizeMode="tail"
829
1026
  numberOfLines={0}
1027
+ onAccessibilityTap={[Function]}
830
1028
  style={
831
1029
  Object {
832
- "color": "#ffffff",
833
- "fontFamily": "System",
834
- "fontSize": 15,
835
- "fontWeight": "600",
1030
+ "color": "#242424",
1031
+ "fontFamily": "Segoe UI",
1032
+ "fontSize": 12,
1033
+ "fontWeight": "400",
836
1034
  "margin": 0,
837
- "marginBottom": 0,
838
- "marginEnd": 0,
1035
+ "marginBottom": 1,
1036
+ "marginEnd": -2,
839
1037
  "marginStart": 0,
840
- "marginTop": 0,
1038
+ "marginTop": -1,
841
1039
  }
842
1040
  }
843
1041
  >
@@ -856,7 +1054,7 @@ Array [
856
1054
  }
857
1055
  doNotTakePointerCapture={false}
858
1056
  onDismiss={[Function]}
859
- setInitialFocus={false}
1057
+ setInitialFocus={true}
860
1058
  style={
861
1059
  Object {
862
1060
  "backgroundColor": "#faf9f8",
@@ -879,7 +1077,7 @@ Array [
879
1077
  "display": "flex",
880
1078
  "maxWidth": 300,
881
1079
  "minWidth": 128,
882
- "padding": 8,
1080
+ "paddingVertical": 4,
883
1081
  }
884
1082
  }
885
1083
  >
@@ -900,13 +1098,26 @@ Array [
900
1098
  }
901
1099
  }
902
1100
  accessible={true}
903
- collapsable={false}
904
1101
  enableFocusRing={true}
905
1102
  focusable={true}
1103
+ keyDownEvents={
1104
+ Array [
1105
+ Object {
1106
+ "key": " ",
1107
+ },
1108
+ Object {
1109
+ "key": "Enter",
1110
+ },
1111
+ ]
1112
+ }
906
1113
  onAccessibilityAction={[Function]}
907
1114
  onBlur={[Function]}
908
1115
  onClick={[Function]}
909
1116
  onFocus={[Function]}
1117
+ onKeyDown={[Function]}
1118
+ onKeyUp={[Function]}
1119
+ onMouseEnter={[Function]}
1120
+ onMouseLeave={[Function]}
910
1121
  onResponderGrant={[Function]}
911
1122
  onResponderMove={[Function]}
912
1123
  onResponderRelease={[Function]}
@@ -917,12 +1128,14 @@ Array [
917
1128
  Object {
918
1129
  "alignItems": "center",
919
1130
  "backgroundColor": "#ffffff",
920
- "borderRadius": 4,
1131
+ "borderRadius": 0,
921
1132
  "display": "flex",
922
1133
  "flexDirection": "row",
923
1134
  "maxWidth": 300,
924
- "minHeight": 32,
1135
+ "minHeight": 24,
925
1136
  "minWidth": 160,
1137
+ "padding": 4,
1138
+ "paddingHorizontal": 8,
926
1139
  }
927
1140
  }
928
1141
  >
@@ -930,7 +1143,7 @@ Array [
930
1143
  align="xMidYMid"
931
1144
  bbHeight={16}
932
1145
  bbWidth={16}
933
- color={4282532418}
1146
+ color={4280558628}
934
1147
  focusable={false}
935
1148
  height={16}
936
1149
  meetOrSlice={0}
@@ -943,7 +1156,7 @@ Array [
943
1156
  "borderWidth": 0,
944
1157
  },
945
1158
  Object {
946
- "marginEnd": 8,
1159
+ "marginEnd": 4,
947
1160
  },
948
1161
  Object {
949
1162
  "flex": 0,
@@ -953,9 +1166,9 @@ Array [
953
1166
  },
954
1167
  ]
955
1168
  }
956
- tintColor={4282532418}
957
- vbHeight={16}
958
- vbWidth={16}
1169
+ tintColor={4280558628}
1170
+ vbHeight={12}
1171
+ vbWidth={12}
959
1172
  width={16}
960
1173
  xml="
961
1174
  <svg>
@@ -981,12 +1194,13 @@ Array [
981
1194
  <Text
982
1195
  ellipsizeMode="tail"
983
1196
  numberOfLines={0}
1197
+ onAccessibilityTap={[Function]}
984
1198
  style={
985
1199
  Object {
986
- "color": "#424242",
1200
+ "color": "#242424",
987
1201
  "flexGrow": 1,
988
- "fontFamily": "System",
989
- "fontSize": 15,
1202
+ "fontFamily": "Segoe UI",
1203
+ "fontSize": 12,
990
1204
  "fontWeight": "400",
991
1205
  "margin": 0,
992
1206
  }
@@ -1001,7 +1215,7 @@ Array [
1001
1215
  "backgroundColor": "#d1d1d1",
1002
1216
  "display": "flex",
1003
1217
  "height": 1,
1004
- "margin": 4,
1218
+ "margin": 2,
1005
1219
  "marginVertical": undefined,
1006
1220
  "width": undefined,
1007
1221
  }
@@ -1024,13 +1238,26 @@ Array [
1024
1238
  }
1025
1239
  }
1026
1240
  accessible={true}
1027
- collapsable={false}
1028
1241
  enableFocusRing={true}
1029
1242
  focusable={true}
1243
+ keyDownEvents={
1244
+ Array [
1245
+ Object {
1246
+ "key": " ",
1247
+ },
1248
+ Object {
1249
+ "key": "Enter",
1250
+ },
1251
+ ]
1252
+ }
1030
1253
  onAccessibilityAction={[Function]}
1031
1254
  onBlur={[Function]}
1032
1255
  onClick={[Function]}
1033
1256
  onFocus={[Function]}
1257
+ onKeyDown={[Function]}
1258
+ onKeyUp={[Function]}
1259
+ onMouseEnter={[Function]}
1260
+ onMouseLeave={[Function]}
1034
1261
  onResponderGrant={[Function]}
1035
1262
  onResponderMove={[Function]}
1036
1263
  onResponderRelease={[Function]}
@@ -1041,13 +1268,14 @@ Array [
1041
1268
  Object {
1042
1269
  "alignItems": "center",
1043
1270
  "backgroundColor": "#ffffff",
1044
- "borderRadius": 4,
1271
+ "borderRadius": 0,
1045
1272
  "display": "flex",
1046
1273
  "flexDirection": "row",
1047
- "marginTop": 4,
1048
1274
  "maxWidth": 300,
1049
- "minHeight": 32,
1275
+ "minHeight": 24,
1050
1276
  "minWidth": 160,
1277
+ "padding": 4,
1278
+ "paddingHorizontal": 8,
1051
1279
  }
1052
1280
  }
1053
1281
  >
@@ -1055,7 +1283,7 @@ Array [
1055
1283
  align="xMidYMid"
1056
1284
  bbHeight={16}
1057
1285
  bbWidth={16}
1058
- color={4282532418}
1286
+ color={4280558628}
1059
1287
  focusable={false}
1060
1288
  height={16}
1061
1289
  meetOrSlice={0}
@@ -1068,7 +1296,7 @@ Array [
1068
1296
  "borderWidth": 0,
1069
1297
  },
1070
1298
  Object {
1071
- "marginEnd": 8,
1299
+ "marginEnd": 4,
1072
1300
  },
1073
1301
  Object {
1074
1302
  "flex": 0,
@@ -1078,9 +1306,9 @@ Array [
1078
1306
  },
1079
1307
  ]
1080
1308
  }
1081
- tintColor={4282532418}
1082
- vbHeight={16}
1083
- vbWidth={16}
1309
+ tintColor={4280558628}
1310
+ vbHeight={12}
1311
+ vbWidth={12}
1084
1312
  width={16}
1085
1313
  xml="
1086
1314
  <svg>
@@ -1106,12 +1334,13 @@ Array [
1106
1334
  <Text
1107
1335
  ellipsizeMode="tail"
1108
1336
  numberOfLines={0}
1337
+ onAccessibilityTap={[Function]}
1109
1338
  style={
1110
1339
  Object {
1111
- "color": "#424242",
1340
+ "color": "#242424",
1112
1341
  "flexGrow": 1,
1113
- "fontFamily": "System",
1114
- "fontSize": 15,
1342
+ "fontFamily": "Segoe UI",
1343
+ "fontSize": 12,
1115
1344
  "fontWeight": "400",
1116
1345
  "margin": 0,
1117
1346
  }
@@ -1129,7 +1358,16 @@ Array [
1129
1358
  exports[`Menu component tests Menu open checkbox defaultChecked 1`] = `
1130
1359
  Array [
1131
1360
  <View
1132
- accessibilityActions={Array []}
1361
+ accessibilityActions={
1362
+ Array [
1363
+ Object {
1364
+ "name": "Expand",
1365
+ },
1366
+ Object {
1367
+ "name": "Collapse",
1368
+ },
1369
+ ]
1370
+ }
1133
1371
  accessibilityLabel="Open"
1134
1372
  accessibilityRole="button"
1135
1373
  accessibilityState={
@@ -1138,14 +1376,27 @@ Array [
1138
1376
  }
1139
1377
  }
1140
1378
  accessible={true}
1141
- collapsable={false}
1142
1379
  enableFocusRing={true}
1143
1380
  focusable={true}
1381
+ keyUpEvents={
1382
+ Array [
1383
+ Object {
1384
+ "key": " ",
1385
+ },
1386
+ Object {
1387
+ "key": "Enter",
1388
+ },
1389
+ ]
1390
+ }
1144
1391
  onAccessibilityAction={[Function]}
1145
1392
  onAccessibilityTap={[Function]}
1146
1393
  onBlur={[Function]}
1147
1394
  onClick={[Function]}
1148
1395
  onFocus={[Function]}
1396
+ onKeyDown={[Function]}
1397
+ onKeyUp={[Function]}
1398
+ onMouseEnter={[Function]}
1399
+ onMouseLeave={[Function]}
1149
1400
  onResponderGrant={[Function]}
1150
1401
  onResponderMove={[Function]}
1151
1402
  onResponderRelease={[Function]}
@@ -1156,16 +1407,17 @@ Array [
1156
1407
  Object {
1157
1408
  "alignItems": "center",
1158
1409
  "alignSelf": "flex-start",
1159
- "backgroundColor": "#0f6cbd",
1160
- "borderColor": "#0f548c",
1410
+ "backgroundColor": "#ffffff",
1411
+ "borderColor": "#d1d1d1",
1161
1412
  "borderRadius": 4,
1162
1413
  "borderWidth": 1,
1163
1414
  "display": "flex",
1164
1415
  "flexDirection": "row",
1165
1416
  "justifyContent": "center",
1166
- "minWidth": 96,
1167
- "padding": 8,
1168
- "paddingHorizontal": 15,
1417
+ "minHeight": 32,
1418
+ "minWidth": 64,
1419
+ "padding": 3,
1420
+ "paddingHorizontal": 7,
1169
1421
  "width": undefined,
1170
1422
  }
1171
1423
  }
@@ -1173,17 +1425,18 @@ Array [
1173
1425
  <Text
1174
1426
  ellipsizeMode="tail"
1175
1427
  numberOfLines={0}
1428
+ onAccessibilityTap={[Function]}
1176
1429
  style={
1177
1430
  Object {
1178
- "color": "#ffffff",
1179
- "fontFamily": "System",
1180
- "fontSize": 15,
1181
- "fontWeight": "600",
1431
+ "color": "#242424",
1432
+ "fontFamily": "Segoe UI",
1433
+ "fontSize": 12,
1434
+ "fontWeight": "400",
1182
1435
  "margin": 0,
1183
- "marginBottom": 0,
1184
- "marginEnd": 0,
1436
+ "marginBottom": 1,
1437
+ "marginEnd": -2,
1185
1438
  "marginStart": 0,
1186
- "marginTop": 0,
1439
+ "marginTop": -1,
1187
1440
  }
1188
1441
  }
1189
1442
  >
@@ -1202,7 +1455,7 @@ Array [
1202
1455
  }
1203
1456
  doNotTakePointerCapture={false}
1204
1457
  onDismiss={[Function]}
1205
- setInitialFocus={false}
1458
+ setInitialFocus={true}
1206
1459
  style={
1207
1460
  Object {
1208
1461
  "backgroundColor": "#faf9f8",
@@ -1225,7 +1478,7 @@ Array [
1225
1478
  "display": "flex",
1226
1479
  "maxWidth": 300,
1227
1480
  "minWidth": 128,
1228
- "padding": 8,
1481
+ "paddingVertical": 4,
1229
1482
  }
1230
1483
  }
1231
1484
  >
@@ -1246,13 +1499,26 @@ Array [
1246
1499
  }
1247
1500
  }
1248
1501
  accessible={true}
1249
- collapsable={false}
1250
1502
  enableFocusRing={true}
1251
1503
  focusable={true}
1504
+ keyDownEvents={
1505
+ Array [
1506
+ Object {
1507
+ "key": " ",
1508
+ },
1509
+ Object {
1510
+ "key": "Enter",
1511
+ },
1512
+ ]
1513
+ }
1252
1514
  onAccessibilityAction={[Function]}
1253
1515
  onBlur={[Function]}
1254
1516
  onClick={[Function]}
1255
1517
  onFocus={[Function]}
1518
+ onKeyDown={[Function]}
1519
+ onKeyUp={[Function]}
1520
+ onMouseEnter={[Function]}
1521
+ onMouseLeave={[Function]}
1256
1522
  onResponderGrant={[Function]}
1257
1523
  onResponderMove={[Function]}
1258
1524
  onResponderRelease={[Function]}
@@ -1263,12 +1529,14 @@ Array [
1263
1529
  Object {
1264
1530
  "alignItems": "center",
1265
1531
  "backgroundColor": "#ffffff",
1266
- "borderRadius": 4,
1532
+ "borderRadius": 0,
1267
1533
  "display": "flex",
1268
1534
  "flexDirection": "row",
1269
1535
  "maxWidth": 300,
1270
- "minHeight": 32,
1536
+ "minHeight": 24,
1271
1537
  "minWidth": 160,
1538
+ "padding": 4,
1539
+ "paddingHorizontal": 8,
1272
1540
  }
1273
1541
  }
1274
1542
  >
@@ -1276,7 +1544,7 @@ Array [
1276
1544
  align="xMidYMid"
1277
1545
  bbHeight={16}
1278
1546
  bbWidth={16}
1279
- color={4282532418}
1547
+ color={4280558628}
1280
1548
  focusable={false}
1281
1549
  height={16}
1282
1550
  meetOrSlice={0}
@@ -1289,7 +1557,7 @@ Array [
1289
1557
  "borderWidth": 0,
1290
1558
  },
1291
1559
  Object {
1292
- "marginEnd": 8,
1560
+ "marginEnd": 4,
1293
1561
  },
1294
1562
  Object {
1295
1563
  "flex": 0,
@@ -1299,9 +1567,9 @@ Array [
1299
1567
  },
1300
1568
  ]
1301
1569
  }
1302
- tintColor={4282532418}
1303
- vbHeight={16}
1304
- vbWidth={16}
1570
+ tintColor={4280558628}
1571
+ vbHeight={12}
1572
+ vbWidth={12}
1305
1573
  width={16}
1306
1574
  xml="
1307
1575
  <svg>
@@ -1327,12 +1595,13 @@ Array [
1327
1595
  <Text
1328
1596
  ellipsizeMode="tail"
1329
1597
  numberOfLines={0}
1598
+ onAccessibilityTap={[Function]}
1330
1599
  style={
1331
1600
  Object {
1332
- "color": "#424242",
1601
+ "color": "#242424",
1333
1602
  "flexGrow": 1,
1334
- "fontFamily": "System",
1335
- "fontSize": 15,
1603
+ "fontFamily": "Segoe UI",
1604
+ "fontSize": 12,
1336
1605
  "fontWeight": "400",
1337
1606
  "margin": 0,
1338
1607
  }
@@ -1347,7 +1616,7 @@ Array [
1347
1616
  "backgroundColor": "#d1d1d1",
1348
1617
  "display": "flex",
1349
1618
  "height": 1,
1350
- "margin": 4,
1619
+ "margin": 2,
1351
1620
  "marginVertical": undefined,
1352
1621
  "width": undefined,
1353
1622
  }
@@ -1370,13 +1639,26 @@ Array [
1370
1639
  }
1371
1640
  }
1372
1641
  accessible={true}
1373
- collapsable={false}
1374
1642
  enableFocusRing={true}
1375
1643
  focusable={true}
1644
+ keyDownEvents={
1645
+ Array [
1646
+ Object {
1647
+ "key": " ",
1648
+ },
1649
+ Object {
1650
+ "key": "Enter",
1651
+ },
1652
+ ]
1653
+ }
1376
1654
  onAccessibilityAction={[Function]}
1377
1655
  onBlur={[Function]}
1378
1656
  onClick={[Function]}
1379
1657
  onFocus={[Function]}
1658
+ onKeyDown={[Function]}
1659
+ onKeyUp={[Function]}
1660
+ onMouseEnter={[Function]}
1661
+ onMouseLeave={[Function]}
1380
1662
  onResponderGrant={[Function]}
1381
1663
  onResponderMove={[Function]}
1382
1664
  onResponderRelease={[Function]}
@@ -1387,13 +1669,14 @@ Array [
1387
1669
  Object {
1388
1670
  "alignItems": "center",
1389
1671
  "backgroundColor": "#ffffff",
1390
- "borderRadius": 4,
1672
+ "borderRadius": 0,
1391
1673
  "display": "flex",
1392
1674
  "flexDirection": "row",
1393
- "marginTop": 4,
1394
1675
  "maxWidth": 300,
1395
- "minHeight": 32,
1676
+ "minHeight": 24,
1396
1677
  "minWidth": 160,
1678
+ "padding": 4,
1679
+ "paddingHorizontal": 8,
1397
1680
  }
1398
1681
  }
1399
1682
  >
@@ -1401,7 +1684,7 @@ Array [
1401
1684
  align="xMidYMid"
1402
1685
  bbHeight={16}
1403
1686
  bbWidth={16}
1404
- color={4282532418}
1687
+ color={4280558628}
1405
1688
  focusable={false}
1406
1689
  height={16}
1407
1690
  meetOrSlice={0}
@@ -1414,7 +1697,7 @@ Array [
1414
1697
  "borderWidth": 0,
1415
1698
  },
1416
1699
  Object {
1417
- "marginEnd": 8,
1700
+ "marginEnd": 4,
1418
1701
  },
1419
1702
  Object {
1420
1703
  "flex": 0,
@@ -1424,9 +1707,9 @@ Array [
1424
1707
  },
1425
1708
  ]
1426
1709
  }
1427
- tintColor={4282532418}
1428
- vbHeight={16}
1429
- vbWidth={16}
1710
+ tintColor={4280558628}
1711
+ vbHeight={12}
1712
+ vbWidth={12}
1430
1713
  width={16}
1431
1714
  xml="
1432
1715
  <svg>
@@ -1452,12 +1735,13 @@ Array [
1452
1735
  <Text
1453
1736
  ellipsizeMode="tail"
1454
1737
  numberOfLines={0}
1738
+ onAccessibilityTap={[Function]}
1455
1739
  style={
1456
1740
  Object {
1457
- "color": "#424242",
1741
+ "color": "#242424",
1458
1742
  "flexGrow": 1,
1459
- "fontFamily": "System",
1460
- "fontSize": 15,
1743
+ "fontFamily": "Segoe UI",
1744
+ "fontSize": 12,
1461
1745
  "fontWeight": "400",
1462
1746
  "margin": 0,
1463
1747
  }
@@ -1475,7 +1759,16 @@ Array [
1475
1759
  exports[`Menu component tests Menu open radio 1`] = `
1476
1760
  Array [
1477
1761
  <View
1478
- accessibilityActions={Array []}
1762
+ accessibilityActions={
1763
+ Array [
1764
+ Object {
1765
+ "name": "Expand",
1766
+ },
1767
+ Object {
1768
+ "name": "Collapse",
1769
+ },
1770
+ ]
1771
+ }
1479
1772
  accessibilityLabel="Open"
1480
1773
  accessibilityRole="button"
1481
1774
  accessibilityState={
@@ -1484,14 +1777,27 @@ Array [
1484
1777
  }
1485
1778
  }
1486
1779
  accessible={true}
1487
- collapsable={false}
1488
1780
  enableFocusRing={true}
1489
1781
  focusable={true}
1782
+ keyUpEvents={
1783
+ Array [
1784
+ Object {
1785
+ "key": " ",
1786
+ },
1787
+ Object {
1788
+ "key": "Enter",
1789
+ },
1790
+ ]
1791
+ }
1490
1792
  onAccessibilityAction={[Function]}
1491
1793
  onAccessibilityTap={[Function]}
1492
1794
  onBlur={[Function]}
1493
1795
  onClick={[Function]}
1494
1796
  onFocus={[Function]}
1797
+ onKeyDown={[Function]}
1798
+ onKeyUp={[Function]}
1799
+ onMouseEnter={[Function]}
1800
+ onMouseLeave={[Function]}
1495
1801
  onResponderGrant={[Function]}
1496
1802
  onResponderMove={[Function]}
1497
1803
  onResponderRelease={[Function]}
@@ -1502,16 +1808,17 @@ Array [
1502
1808
  Object {
1503
1809
  "alignItems": "center",
1504
1810
  "alignSelf": "flex-start",
1505
- "backgroundColor": "#0f6cbd",
1506
- "borderColor": "#0f548c",
1811
+ "backgroundColor": "#ffffff",
1812
+ "borderColor": "#d1d1d1",
1507
1813
  "borderRadius": 4,
1508
1814
  "borderWidth": 1,
1509
1815
  "display": "flex",
1510
1816
  "flexDirection": "row",
1511
1817
  "justifyContent": "center",
1512
- "minWidth": 96,
1513
- "padding": 8,
1514
- "paddingHorizontal": 15,
1818
+ "minHeight": 32,
1819
+ "minWidth": 64,
1820
+ "padding": 3,
1821
+ "paddingHorizontal": 7,
1515
1822
  "width": undefined,
1516
1823
  }
1517
1824
  }
@@ -1519,17 +1826,18 @@ Array [
1519
1826
  <Text
1520
1827
  ellipsizeMode="tail"
1521
1828
  numberOfLines={0}
1829
+ onAccessibilityTap={[Function]}
1522
1830
  style={
1523
1831
  Object {
1524
- "color": "#ffffff",
1525
- "fontFamily": "System",
1526
- "fontSize": 15,
1527
- "fontWeight": "600",
1832
+ "color": "#242424",
1833
+ "fontFamily": "Segoe UI",
1834
+ "fontSize": 12,
1835
+ "fontWeight": "400",
1528
1836
  "margin": 0,
1529
- "marginBottom": 0,
1530
- "marginEnd": 0,
1837
+ "marginBottom": 1,
1838
+ "marginEnd": -2,
1531
1839
  "marginStart": 0,
1532
- "marginTop": 0,
1840
+ "marginTop": -1,
1533
1841
  }
1534
1842
  }
1535
1843
  >
@@ -1548,7 +1856,7 @@ Array [
1548
1856
  }
1549
1857
  doNotTakePointerCapture={false}
1550
1858
  onDismiss={[Function]}
1551
- setInitialFocus={false}
1859
+ setInitialFocus={true}
1552
1860
  style={
1553
1861
  Object {
1554
1862
  "backgroundColor": "#faf9f8",
@@ -1571,7 +1879,7 @@ Array [
1571
1879
  "display": "flex",
1572
1880
  "maxWidth": 300,
1573
1881
  "minWidth": 128,
1574
- "padding": 8,
1882
+ "paddingVertical": 4,
1575
1883
  }
1576
1884
  }
1577
1885
  >
@@ -1592,13 +1900,26 @@ Array [
1592
1900
  }
1593
1901
  }
1594
1902
  accessible={true}
1595
- collapsable={false}
1596
1903
  enableFocusRing={true}
1597
1904
  focusable={true}
1905
+ keyDownEvents={
1906
+ Array [
1907
+ Object {
1908
+ "key": " ",
1909
+ },
1910
+ Object {
1911
+ "key": "Enter",
1912
+ },
1913
+ ]
1914
+ }
1598
1915
  onAccessibilityAction={[Function]}
1599
1916
  onBlur={[Function]}
1600
1917
  onClick={[Function]}
1601
1918
  onFocus={[Function]}
1919
+ onKeyDown={[Function]}
1920
+ onKeyUp={[Function]}
1921
+ onMouseEnter={[Function]}
1922
+ onMouseLeave={[Function]}
1602
1923
  onResponderGrant={[Function]}
1603
1924
  onResponderMove={[Function]}
1604
1925
  onResponderRelease={[Function]}
@@ -1609,12 +1930,14 @@ Array [
1609
1930
  Object {
1610
1931
  "alignItems": "center",
1611
1932
  "backgroundColor": "#ffffff",
1612
- "borderRadius": 4,
1933
+ "borderRadius": 0,
1613
1934
  "display": "flex",
1614
1935
  "flexDirection": "row",
1615
1936
  "maxWidth": 300,
1616
- "minHeight": 32,
1937
+ "minHeight": 24,
1617
1938
  "minWidth": 160,
1939
+ "padding": 4,
1940
+ "paddingHorizontal": 8,
1618
1941
  }
1619
1942
  }
1620
1943
  >
@@ -1622,7 +1945,7 @@ Array [
1622
1945
  align="xMidYMid"
1623
1946
  bbHeight={16}
1624
1947
  bbWidth={16}
1625
- color={4282532418}
1948
+ color={4280558628}
1626
1949
  focusable={false}
1627
1950
  height={16}
1628
1951
  meetOrSlice={0}
@@ -1635,7 +1958,7 @@ Array [
1635
1958
  "borderWidth": 0,
1636
1959
  },
1637
1960
  Object {
1638
- "marginEnd": 8,
1961
+ "marginEnd": 4,
1639
1962
  },
1640
1963
  Object {
1641
1964
  "flex": 0,
@@ -1645,9 +1968,9 @@ Array [
1645
1968
  },
1646
1969
  ]
1647
1970
  }
1648
- tintColor={4282532418}
1649
- vbHeight={16}
1650
- vbWidth={16}
1971
+ tintColor={4280558628}
1972
+ vbHeight={12}
1973
+ vbWidth={12}
1651
1974
  width={16}
1652
1975
  xml="
1653
1976
  <svg>
@@ -1673,12 +1996,13 @@ Array [
1673
1996
  <Text
1674
1997
  ellipsizeMode="tail"
1675
1998
  numberOfLines={0}
1999
+ onAccessibilityTap={[Function]}
1676
2000
  style={
1677
2001
  Object {
1678
- "color": "#424242",
2002
+ "color": "#242424",
1679
2003
  "flexGrow": 1,
1680
- "fontFamily": "System",
1681
- "fontSize": 15,
2004
+ "fontFamily": "Segoe UI",
2005
+ "fontSize": 12,
1682
2006
  "fontWeight": "400",
1683
2007
  "margin": 0,
1684
2008
  }
@@ -1704,13 +2028,26 @@ Array [
1704
2028
  }
1705
2029
  }
1706
2030
  accessible={true}
1707
- collapsable={false}
1708
2031
  enableFocusRing={true}
1709
2032
  focusable={true}
2033
+ keyDownEvents={
2034
+ Array [
2035
+ Object {
2036
+ "key": " ",
2037
+ },
2038
+ Object {
2039
+ "key": "Enter",
2040
+ },
2041
+ ]
2042
+ }
1710
2043
  onAccessibilityAction={[Function]}
1711
2044
  onBlur={[Function]}
1712
2045
  onClick={[Function]}
1713
2046
  onFocus={[Function]}
2047
+ onKeyDown={[Function]}
2048
+ onKeyUp={[Function]}
2049
+ onMouseEnter={[Function]}
2050
+ onMouseLeave={[Function]}
1714
2051
  onResponderGrant={[Function]}
1715
2052
  onResponderMove={[Function]}
1716
2053
  onResponderRelease={[Function]}
@@ -1721,13 +2058,14 @@ Array [
1721
2058
  Object {
1722
2059
  "alignItems": "center",
1723
2060
  "backgroundColor": "#ffffff",
1724
- "borderRadius": 4,
2061
+ "borderRadius": 0,
1725
2062
  "display": "flex",
1726
2063
  "flexDirection": "row",
1727
- "marginTop": 4,
1728
2064
  "maxWidth": 300,
1729
- "minHeight": 32,
2065
+ "minHeight": 24,
1730
2066
  "minWidth": 160,
2067
+ "padding": 4,
2068
+ "paddingHorizontal": 8,
1731
2069
  }
1732
2070
  }
1733
2071
  >
@@ -1735,7 +2073,7 @@ Array [
1735
2073
  align="xMidYMid"
1736
2074
  bbHeight={16}
1737
2075
  bbWidth={16}
1738
- color={4282532418}
2076
+ color={4280558628}
1739
2077
  focusable={false}
1740
2078
  height={16}
1741
2079
  meetOrSlice={0}
@@ -1748,7 +2086,7 @@ Array [
1748
2086
  "borderWidth": 0,
1749
2087
  },
1750
2088
  Object {
1751
- "marginEnd": 8,
2089
+ "marginEnd": 4,
1752
2090
  },
1753
2091
  Object {
1754
2092
  "flex": 0,
@@ -1758,9 +2096,9 @@ Array [
1758
2096
  },
1759
2097
  ]
1760
2098
  }
1761
- tintColor={4282532418}
1762
- vbHeight={16}
1763
- vbWidth={16}
2099
+ tintColor={4280558628}
2100
+ vbHeight={12}
2101
+ vbWidth={12}
1764
2102
  width={16}
1765
2103
  xml="
1766
2104
  <svg>
@@ -1786,12 +2124,13 @@ Array [
1786
2124
  <Text
1787
2125
  ellipsizeMode="tail"
1788
2126
  numberOfLines={0}
2127
+ onAccessibilityTap={[Function]}
1789
2128
  style={
1790
2129
  Object {
1791
- "color": "#424242",
2130
+ "color": "#242424",
1792
2131
  "flexGrow": 1,
1793
- "fontFamily": "System",
1794
- "fontSize": 15,
2132
+ "fontFamily": "Segoe UI",
2133
+ "fontSize": 12,
1795
2134
  "fontWeight": "400",
1796
2135
  "margin": 0,
1797
2136
  }
@@ -1809,7 +2148,16 @@ Array [
1809
2148
  exports[`Menu component tests Menu submenu 1`] = `
1810
2149
  Array [
1811
2150
  <View
1812
- accessibilityActions={Array []}
2151
+ accessibilityActions={
2152
+ Array [
2153
+ Object {
2154
+ "name": "Expand",
2155
+ },
2156
+ Object {
2157
+ "name": "Collapse",
2158
+ },
2159
+ ]
2160
+ }
1813
2161
  accessibilityLabel="Default"
1814
2162
  accessibilityRole="button"
1815
2163
  accessibilityState={
@@ -1818,14 +2166,27 @@ Array [
1818
2166
  }
1819
2167
  }
1820
2168
  accessible={true}
1821
- collapsable={false}
1822
2169
  enableFocusRing={true}
1823
2170
  focusable={true}
2171
+ keyUpEvents={
2172
+ Array [
2173
+ Object {
2174
+ "key": " ",
2175
+ },
2176
+ Object {
2177
+ "key": "Enter",
2178
+ },
2179
+ ]
2180
+ }
1824
2181
  onAccessibilityAction={[Function]}
1825
2182
  onAccessibilityTap={[Function]}
1826
2183
  onBlur={[Function]}
1827
2184
  onClick={[Function]}
1828
2185
  onFocus={[Function]}
2186
+ onKeyDown={[Function]}
2187
+ onKeyUp={[Function]}
2188
+ onMouseEnter={[Function]}
2189
+ onMouseLeave={[Function]}
1829
2190
  onResponderGrant={[Function]}
1830
2191
  onResponderMove={[Function]}
1831
2192
  onResponderRelease={[Function]}
@@ -1836,16 +2197,17 @@ Array [
1836
2197
  Object {
1837
2198
  "alignItems": "center",
1838
2199
  "alignSelf": "flex-start",
1839
- "backgroundColor": "#0f6cbd",
1840
- "borderColor": "#0f548c",
2200
+ "backgroundColor": "#ffffff",
2201
+ "borderColor": "#d1d1d1",
1841
2202
  "borderRadius": 4,
1842
2203
  "borderWidth": 1,
1843
2204
  "display": "flex",
1844
2205
  "flexDirection": "row",
1845
2206
  "justifyContent": "center",
1846
- "minWidth": 96,
1847
- "padding": 8,
1848
- "paddingHorizontal": 15,
2207
+ "minHeight": 32,
2208
+ "minWidth": 64,
2209
+ "padding": 3,
2210
+ "paddingHorizontal": 7,
1849
2211
  "width": undefined,
1850
2212
  }
1851
2213
  }
@@ -1853,17 +2215,18 @@ Array [
1853
2215
  <Text
1854
2216
  ellipsizeMode="tail"
1855
2217
  numberOfLines={0}
2218
+ onAccessibilityTap={[Function]}
1856
2219
  style={
1857
2220
  Object {
1858
- "color": "#ffffff",
1859
- "fontFamily": "System",
1860
- "fontSize": 15,
1861
- "fontWeight": "600",
2221
+ "color": "#242424",
2222
+ "fontFamily": "Segoe UI",
2223
+ "fontSize": 12,
2224
+ "fontWeight": "400",
1862
2225
  "margin": 0,
1863
- "marginBottom": 0,
1864
- "marginEnd": 0,
2226
+ "marginBottom": 1,
2227
+ "marginEnd": -2,
1865
2228
  "marginStart": 0,
1866
- "marginTop": 0,
2229
+ "marginTop": -1,
1867
2230
  }
1868
2231
  }
1869
2232
  >
@@ -1882,7 +2245,7 @@ Array [
1882
2245
  }
1883
2246
  doNotTakePointerCapture={false}
1884
2247
  onDismiss={[Function]}
1885
- setInitialFocus={false}
2248
+ setInitialFocus={true}
1886
2249
  style={
1887
2250
  Object {
1888
2251
  "backgroundColor": "#faf9f8",
@@ -1905,7 +2268,7 @@ Array [
1905
2268
  "display": "flex",
1906
2269
  "maxWidth": 300,
1907
2270
  "minWidth": 128,
1908
- "padding": 8,
2271
+ "paddingVertical": 4,
1909
2272
  }
1910
2273
  }
1911
2274
  >
@@ -1918,13 +2281,26 @@ Array [
1918
2281
  }
1919
2282
  }
1920
2283
  accessible={true}
1921
- collapsable={false}
1922
2284
  enableFocusRing={true}
1923
2285
  focusable={true}
2286
+ keyDownEvents={
2287
+ Array [
2288
+ Object {
2289
+ "key": " ",
2290
+ },
2291
+ Object {
2292
+ "key": "Enter",
2293
+ },
2294
+ ]
2295
+ }
1924
2296
  onAccessibilityTap={[Function]}
1925
2297
  onBlur={[Function]}
1926
2298
  onClick={[Function]}
1927
2299
  onFocus={[Function]}
2300
+ onKeyDown={[Function]}
2301
+ onKeyUp={[Function]}
2302
+ onMouseEnter={[Function]}
2303
+ onMouseLeave={[Function]}
1928
2304
  onResponderGrant={[Function]}
1929
2305
  onResponderMove={[Function]}
1930
2306
  onResponderRelease={[Function]}
@@ -1935,24 +2311,27 @@ Array [
1935
2311
  Object {
1936
2312
  "alignItems": "center",
1937
2313
  "backgroundColor": "#ffffff",
1938
- "borderRadius": 4,
2314
+ "borderRadius": 0,
1939
2315
  "display": "flex",
1940
2316
  "flexDirection": "row",
1941
2317
  "maxWidth": 300,
1942
- "minHeight": 32,
2318
+ "minHeight": 24,
1943
2319
  "minWidth": 160,
2320
+ "padding": 4,
2321
+ "paddingHorizontal": 8,
1944
2322
  }
1945
2323
  }
1946
2324
  >
1947
2325
  <Text
1948
2326
  ellipsizeMode="tail"
1949
2327
  numberOfLines={0}
2328
+ onAccessibilityTap={[Function]}
1950
2329
  style={
1951
2330
  Object {
1952
- "color": "#424242",
2331
+ "color": "#242424",
1953
2332
  "flexGrow": 1,
1954
- "fontFamily": "System",
1955
- "fontSize": 15,
2333
+ "fontFamily": "Segoe UI",
2334
+ "fontSize": 12,
1956
2335
  "fontWeight": "400",
1957
2336
  "margin": 0,
1958
2337
  }
@@ -1962,7 +2341,16 @@ Array [
1962
2341
  </Text>
1963
2342
  </View>
1964
2343
  <View
1965
- accessibilityActions={Array []}
2344
+ accessibilityActions={
2345
+ Array [
2346
+ Object {
2347
+ "name": "Expand",
2348
+ },
2349
+ Object {
2350
+ "name": "Collapse",
2351
+ },
2352
+ ]
2353
+ }
1966
2354
  accessibilityLabel="Option 2"
1967
2355
  accessibilityRole="menuitem"
1968
2356
  accessibilityState={
@@ -1972,14 +2360,33 @@ Array [
1972
2360
  }
1973
2361
  }
1974
2362
  accessible={true}
1975
- collapsable={false}
1976
2363
  enableFocusRing={true}
1977
2364
  focusable={true}
2365
+ keyDownEvents={
2366
+ Array [
2367
+ Object {
2368
+ "key": " ",
2369
+ },
2370
+ Object {
2371
+ "key": "Enter",
2372
+ },
2373
+ Object {
2374
+ "key": "ArrowLeft",
2375
+ },
2376
+ Object {
2377
+ "key": "ArrowRight",
2378
+ },
2379
+ ]
2380
+ }
1978
2381
  onAccessibilityAction={[Function]}
1979
2382
  onAccessibilityTap={[Function]}
1980
2383
  onBlur={[Function]}
1981
2384
  onClick={[Function]}
1982
2385
  onFocus={[Function]}
2386
+ onKeyDown={[Function]}
2387
+ onKeyUp={[Function]}
2388
+ onMouseEnter={[Function]}
2389
+ onMouseLeave={[Function]}
1983
2390
  onResponderGrant={[Function]}
1984
2391
  onResponderMove={[Function]}
1985
2392
  onResponderRelease={[Function]}
@@ -1990,24 +2397,27 @@ Array [
1990
2397
  Object {
1991
2398
  "alignItems": "center",
1992
2399
  "backgroundColor": "#ffffff",
1993
- "borderRadius": 4,
2400
+ "borderRadius": 0,
1994
2401
  "display": "flex",
1995
2402
  "flexDirection": "row",
1996
2403
  "maxWidth": 300,
1997
- "minHeight": 32,
2404
+ "minHeight": 24,
1998
2405
  "minWidth": 160,
2406
+ "padding": 4,
2407
+ "paddingHorizontal": 8,
1999
2408
  }
2000
2409
  }
2001
2410
  >
2002
2411
  <Text
2003
2412
  ellipsizeMode="tail"
2004
2413
  numberOfLines={0}
2414
+ onAccessibilityTap={[Function]}
2005
2415
  style={
2006
2416
  Object {
2007
- "color": "#424242",
2417
+ "color": "#242424",
2008
2418
  "flexGrow": 1,
2009
- "fontFamily": "System",
2010
- "fontSize": 15,
2419
+ "fontFamily": "Segoe UI",
2420
+ "fontSize": 12,
2011
2421
  "fontWeight": "400",
2012
2422
  "margin": 0,
2013
2423
  }
@@ -2019,7 +2429,7 @@ Array [
2019
2429
  align="xMidYMid"
2020
2430
  bbHeight={16}
2021
2431
  bbWidth={16}
2022
- color={4282532418}
2432
+ color={4280558628}
2023
2433
  focusable={false}
2024
2434
  height={16}
2025
2435
  meetOrSlice={0}
@@ -2038,9 +2448,9 @@ Array [
2038
2448
  },
2039
2449
  ]
2040
2450
  }
2041
- tintColor={4282532418}
2042
- vbHeight={16}
2043
- vbWidth={16}
2451
+ tintColor={4280558628}
2452
+ vbHeight={12}
2453
+ vbWidth={12}
2044
2454
  width={16}
2045
2455
  xml="
2046
2456
  <svg>