@fluentui-react-native/menu 1.4.11 → 1.4.12

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 (21) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +10 -2
  3. package/lib/Menu/Menu.d.ts.map +1 -1
  4. package/lib/Menu/Menu.js +1 -1
  5. package/lib/Menu/Menu.js.map +1 -1
  6. package/lib/Menu/useMenu.js +9 -4
  7. package/lib/Menu/useMenu.js.map +1 -1
  8. package/lib/context/menuContext.js +1 -1
  9. package/lib/context/menuContext.js.map +1 -1
  10. package/lib-commonjs/Menu/Menu.d.ts.map +1 -1
  11. package/lib-commonjs/Menu/Menu.js +1 -1
  12. package/lib-commonjs/Menu/Menu.js.map +1 -1
  13. package/lib-commonjs/Menu/useMenu.js +9 -4
  14. package/lib-commonjs/Menu/useMenu.js.map +1 -1
  15. package/lib-commonjs/context/menuContext.js +1 -1
  16. package/lib-commonjs/context/menuContext.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/Menu/Menu.tsx +3 -1
  19. package/src/Menu/useMenu.ts +8 -4
  20. package/src/__tests__/__snapshots__/Menu.test.tsx.snap +539 -2338
  21. package/src/context/menuContext.ts +1 -1
package/src/__tests__/__snapshots__/Menu.test.tsx.snap CHANGED
@@ -90,2423 +90,624 @@ exports[`Menu component tests Menu default 1`] = `
90
90
  `;
91
91
 
92
92
  exports[`Menu component tests Menu defaultOpen 1`] = `
93
- Array [
94
- <View
95
- accessibilityActions={
96
- Array [
97
- Object {
98
- "name": "Expand",
99
- },
100
- Object {
101
- "name": "Collapse",
102
- },
103
- ]
104
- }
105
- accessibilityLabel="Open"
106
- accessibilityRole="button"
107
- accessibilityState={
93
+ <View
94
+ accessibilityActions={
95
+ Array [
108
96
  Object {
109
- "expanded": true,
110
- }
111
- }
112
- accessible={true}
113
- enableFocusRing={true}
114
- focusable={true}
115
- keyUpEvents={
116
- Array [
117
- Object {
118
- "key": " ",
119
- },
120
- Object {
121
- "key": "Enter",
122
- },
123
- ]
97
+ "name": "Expand",
98
+ },
99
+ Object {
100
+ "name": "Collapse",
101
+ },
102
+ ]
103
+ }
104
+ accessibilityLabel="Open"
105
+ accessibilityRole="button"
106
+ accessibilityState={
107
+ Object {
108
+ "expanded": true,
124
109
  }
125
- onAccessibilityAction={[Function]}
126
- onAccessibilityTap={[Function]}
127
- onBlur={[Function]}
128
- onClick={[Function]}
129
- onFocus={[Function]}
130
- onKeyDown={[Function]}
131
- onKeyUp={[Function]}
132
- onMouseEnter={[Function]}
133
- onMouseLeave={[Function]}
134
- onResponderGrant={[Function]}
135
- onResponderMove={[Function]}
136
- onResponderRelease={[Function]}
137
- onResponderTerminate={[Function]}
138
- onResponderTerminationRequest={[Function]}
139
- onStartShouldSetResponder={[Function]}
140
- style={
110
+ }
111
+ accessible={true}
112
+ enableFocusRing={true}
113
+ focusable={true}
114
+ keyUpEvents={
115
+ Array [
141
116
  Object {
142
- "alignItems": "center",
143
- "alignSelf": "flex-start",
144
- "backgroundColor": "#ffffff",
145
- "borderColor": "#d1d1d1",
146
- "borderRadius": 4,
147
- "borderWidth": 1,
148
- "display": "flex",
149
- "flexDirection": "row",
150
- "justifyContent": "center",
151
- "minHeight": 32,
152
- "minWidth": 64,
153
- "padding": 3,
154
- "paddingHorizontal": 7,
155
- "width": undefined,
156
- }
117
+ "key": " ",
118
+ },
119
+ Object {
120
+ "key": "Enter",
121
+ },
122
+ ]
123
+ }
124
+ onAccessibilityAction={[Function]}
125
+ onAccessibilityTap={[Function]}
126
+ onBlur={[Function]}
127
+ onClick={[Function]}
128
+ onFocus={[Function]}
129
+ onKeyDown={[Function]}
130
+ onKeyUp={[Function]}
131
+ onMouseEnter={[Function]}
132
+ onMouseLeave={[Function]}
133
+ onResponderGrant={[Function]}
134
+ onResponderMove={[Function]}
135
+ onResponderRelease={[Function]}
136
+ onResponderTerminate={[Function]}
137
+ onResponderTerminationRequest={[Function]}
138
+ onStartShouldSetResponder={[Function]}
139
+ style={
140
+ Object {
141
+ "alignItems": "center",
142
+ "alignSelf": "flex-start",
143
+ "backgroundColor": "#ffffff",
144
+ "borderColor": "#d1d1d1",
145
+ "borderRadius": 4,
146
+ "borderWidth": 1,
147
+ "display": "flex",
148
+ "flexDirection": "row",
149
+ "justifyContent": "center",
150
+ "minHeight": 32,
151
+ "minWidth": 64,
152
+ "padding": 3,
153
+ "paddingHorizontal": 7,
154
+ "width": undefined,
157
155
  }
158
- >
159
- <Text
160
- ellipsizeMode="tail"
161
- numberOfLines={0}
162
- onAccessibilityTap={[Function]}
163
- style={
164
- Object {
165
- "color": "#242424",
166
- "fontFamily": "Segoe UI",
167
- "fontSize": 12,
168
- "fontWeight": "400",
169
- "margin": 0,
170
- "marginBottom": 1,
171
- "marginEnd": -2,
172
- "marginStart": 0,
173
- "marginTop": -1,
174
- }
175
- }
176
- >
177
- Open
178
- </Text>
179
- </View>,
180
- <RCTCallout
181
- accessibilityRole="menu"
182
- borderColor="#616161"
183
- borderWidth={1}
184
- doNotTakePointerCapture={false}
185
- onDismiss={[Function]}
186
- setInitialFocus={true}
156
+ }
157
+ >
158
+ <Text
159
+ ellipsizeMode="tail"
160
+ numberOfLines={0}
161
+ onAccessibilityTap={[Function]}
187
162
  style={
188
163
  Object {
189
- "backgroundColor": "#faf9f8",
190
- "borderColor": "#616161",
191
- "borderWidth": 1,
164
+ "color": "#242424",
165
+ "fontFamily": "Segoe UI",
166
+ "fontSize": 12,
167
+ "fontWeight": "400",
168
+ "margin": 0,
169
+ "marginBottom": 1,
170
+ "marginEnd": -2,
171
+ "marginStart": 0,
172
+ "marginTop": -1,
192
173
  }
193
174
  }
194
175
  >
195
- <View
196
- accessible={false}
197
- focusable={false}
198
- onBlur={[Function]}
199
- onKeyDown={[Function]}
200
- onKeyUp={[Function]}
201
- onMouseEnter={[Function]}
202
- onMouseLeave={[Function]}
203
- style={
204
- Object {
205
- "maxHeight": undefined,
206
- }
207
- }
208
- >
209
- <View
210
- style={
211
- Object {
212
- "backgroundColor": "#ffffff",
213
- "display": "flex",
214
- "maxWidth": 300,
215
- "minWidth": 140,
216
- "paddingVertical": 4,
217
- }
218
- }
219
- >
220
- <View
221
- accessibilityLabel="Option 1"
222
- accessibilityRole="menuitem"
223
- accessibilityState={
224
- Object {
225
- "disabled": undefined,
226
- }
227
- }
228
- accessible={true}
229
- enableFocusRing={true}
230
- focusable={true}
231
- keyDownEvents={
232
- Array [
233
- Object {
234
- "key": " ",
235
- },
236
- Object {
237
- "key": "Enter",
238
- },
239
- ]
240
- }
241
- onAccessibilityTap={[Function]}
242
- onBlur={[Function]}
243
- onClick={[Function]}
244
- onFocus={[Function]}
245
- onKeyDown={[Function]}
246
- onKeyUp={[Function]}
247
- onMouseEnter={[Function]}
248
- onMouseLeave={[Function]}
249
- onResponderGrant={[Function]}
250
- onResponderMove={[Function]}
251
- onResponderRelease={[Function]}
252
- onResponderTerminate={[Function]}
253
- onResponderTerminationRequest={[Function]}
254
- onStartShouldSetResponder={[Function]}
255
- style={
256
- Object {
257
- "alignItems": "center",
258
- "backgroundColor": "#ffffff",
259
- "borderRadius": 0,
260
- "display": "flex",
261
- "flexDirection": "row",
262
- "maxWidth": 300,
263
- "minHeight": 24,
264
- "minWidth": 128,
265
- "padding": 4,
266
- "paddingHorizontal": 8,
267
- }
268
- }
269
- >
270
- <Text
271
- ellipsizeMode="tail"
272
- numberOfLines={0}
273
- onAccessibilityTap={[Function]}
274
- style={
275
- Object {
276
- "color": "#242424",
277
- "flexGrow": 1,
278
- "fontFamily": "Segoe UI",
279
- "fontSize": 12,
280
- "fontWeight": "400",
281
- "margin": 0,
282
- }
283
- }
284
- >
285
- Option 1
286
- </Text>
287
- </View>
288
- <View
289
- accessibilityLabel="Option 2"
290
- accessibilityRole="menuitem"
291
- accessibilityState={
292
- Object {
293
- "disabled": true,
294
- }
295
- }
296
- accessible={true}
297
- enableFocusRing={true}
298
- focusable={true}
299
- keyDownEvents={Array []}
300
- onAccessibilityTap={[Function]}
301
- onBlur={[Function]}
302
- onClick={[Function]}
303
- onFocus={[Function]}
304
- onKeyDown={[Function]}
305
- onKeyUp={[Function]}
306
- onMouseEnter={[Function]}
307
- onMouseLeave={[Function]}
308
- onResponderGrant={[Function]}
309
- onResponderMove={[Function]}
310
- onResponderRelease={[Function]}
311
- onResponderTerminate={[Function]}
312
- onResponderTerminationRequest={[Function]}
313
- onStartShouldSetResponder={[Function]}
314
- style={
315
- Object {
316
- "alignItems": "center",
317
- "backgroundColor": "#ffffff",
318
- "borderRadius": 0,
319
- "display": "flex",
320
- "flexDirection": "row",
321
- "maxWidth": 300,
322
- "minHeight": 24,
323
- "minWidth": 128,
324
- "padding": 4,
325
- "paddingHorizontal": 8,
326
- }
327
- }
328
- >
329
- <Text
330
- ellipsizeMode="tail"
331
- numberOfLines={0}
332
- onAccessibilityTap={[Function]}
333
- style={
334
- Object {
335
- "color": "#bdbdbd",
336
- "flexGrow": 1,
337
- "fontFamily": "Segoe UI",
338
- "fontSize": 12,
339
- "fontWeight": "400",
340
- "margin": 0,
341
- }
342
- }
343
- >
344
- Option 2
345
- </Text>
346
- </View>
347
- </View>
348
- </View>
349
- </RCTCallout>,
350
- ]
176
+ Open
177
+ </Text>
178
+ </View>
351
179
  `;
352
180
 
353
181
  exports[`Menu component tests Menu open 1`] = `
354
- Array [
355
- <View
356
- accessibilityActions={
357
- Array [
358
- Object {
359
- "name": "Expand",
360
- },
361
- Object {
362
- "name": "Collapse",
363
- },
364
- ]
365
- }
366
- accessibilityLabel="Open"
367
- accessibilityRole="button"
368
- accessibilityState={
182
+ <View
183
+ accessibilityActions={
184
+ Array [
369
185
  Object {
370
- "expanded": true,
371
- }
372
- }
373
- accessible={true}
374
- enableFocusRing={true}
375
- focusable={true}
376
- keyUpEvents={
377
- Array [
378
- Object {
379
- "key": " ",
380
- },
381
- Object {
382
- "key": "Enter",
383
- },
384
- ]
385
- }
386
- onAccessibilityAction={[Function]}
387
- onAccessibilityTap={[Function]}
388
- onBlur={[Function]}
389
- onClick={[Function]}
390
- onFocus={[Function]}
391
- onKeyDown={[Function]}
392
- onKeyUp={[Function]}
393
- onMouseEnter={[Function]}
394
- onMouseLeave={[Function]}
395
- onResponderGrant={[Function]}
396
- onResponderMove={[Function]}
397
- onResponderRelease={[Function]}
398
- onResponderTerminate={[Function]}
399
- onResponderTerminationRequest={[Function]}
400
- onStartShouldSetResponder={[Function]}
401
- style={
186
+ "name": "Expand",
187
+ },
402
188
  Object {
403
- "alignItems": "center",
404
- "alignSelf": "flex-start",
405
- "backgroundColor": "#ffffff",
406
- "borderColor": "#d1d1d1",
407
- "borderRadius": 4,
408
- "borderWidth": 1,
409
- "display": "flex",
410
- "flexDirection": "row",
411
- "justifyContent": "center",
412
- "minHeight": 32,
413
- "minWidth": 64,
414
- "padding": 3,
415
- "paddingHorizontal": 7,
416
- "width": undefined,
417
- }
189
+ "name": "Collapse",
190
+ },
191
+ ]
192
+ }
193
+ accessibilityLabel="Open"
194
+ accessibilityRole="button"
195
+ accessibilityState={
196
+ Object {
197
+ "expanded": true,
418
198
  }
419
- >
420
- <Text
421
- ellipsizeMode="tail"
422
- numberOfLines={0}
423
- onAccessibilityTap={[Function]}
424
- style={
425
- Object {
426
- "color": "#242424",
427
- "fontFamily": "Segoe UI",
428
- "fontSize": 12,
429
- "fontWeight": "400",
430
- "margin": 0,
431
- "marginBottom": 1,
432
- "marginEnd": -2,
433
- "marginStart": 0,
434
- "marginTop": -1,
435
- }
436
- }
437
- >
438
- Open
439
- </Text>
440
- </View>,
441
- <RCTCallout
442
- accessibilityRole="menu"
443
- borderColor="#616161"
444
- borderWidth={1}
445
- dismissBehaviors={
446
- Array [
447
- "preventDismissOnKeyDown",
448
- "preventDismissOnClickOutside",
449
- ]
199
+ }
200
+ accessible={true}
201
+ enableFocusRing={true}
202
+ focusable={true}
203
+ keyUpEvents={
204
+ Array [
205
+ Object {
206
+ "key": " ",
207
+ },
208
+ Object {
209
+ "key": "Enter",
210
+ },
211
+ ]
212
+ }
213
+ onAccessibilityAction={[Function]}
214
+ onAccessibilityTap={[Function]}
215
+ onBlur={[Function]}
216
+ onClick={[Function]}
217
+ onFocus={[Function]}
218
+ onKeyDown={[Function]}
219
+ onKeyUp={[Function]}
220
+ onMouseEnter={[Function]}
221
+ onMouseLeave={[Function]}
222
+ onResponderGrant={[Function]}
223
+ onResponderMove={[Function]}
224
+ onResponderRelease={[Function]}
225
+ onResponderTerminate={[Function]}
226
+ onResponderTerminationRequest={[Function]}
227
+ onStartShouldSetResponder={[Function]}
228
+ style={
229
+ Object {
230
+ "alignItems": "center",
231
+ "alignSelf": "flex-start",
232
+ "backgroundColor": "#ffffff",
233
+ "borderColor": "#d1d1d1",
234
+ "borderRadius": 4,
235
+ "borderWidth": 1,
236
+ "display": "flex",
237
+ "flexDirection": "row",
238
+ "justifyContent": "center",
239
+ "minHeight": 32,
240
+ "minWidth": 64,
241
+ "padding": 3,
242
+ "paddingHorizontal": 7,
243
+ "width": undefined,
450
244
  }
451
- doNotTakePointerCapture={false}
452
- onDismiss={[Function]}
453
- setInitialFocus={true}
245
+ }
246
+ >
247
+ <Text
248
+ ellipsizeMode="tail"
249
+ numberOfLines={0}
250
+ onAccessibilityTap={[Function]}
454
251
  style={
455
252
  Object {
456
- "backgroundColor": "#faf9f8",
457
- "borderColor": "#616161",
458
- "borderWidth": 1,
253
+ "color": "#242424",
254
+ "fontFamily": "Segoe UI",
255
+ "fontSize": 12,
256
+ "fontWeight": "400",
257
+ "margin": 0,
258
+ "marginBottom": 1,
259
+ "marginEnd": -2,
260
+ "marginStart": 0,
261
+ "marginTop": -1,
459
262
  }
460
263
  }
461
264
  >
462
- <View
463
- accessible={false}
464
- focusable={false}
465
- onBlur={[Function]}
466
- onKeyDown={[Function]}
467
- onKeyUp={[Function]}
468
- onMouseEnter={[Function]}
469
- onMouseLeave={[Function]}
470
- style={
471
- Object {
472
- "maxHeight": undefined,
473
- }
474
- }
475
- >
476
- <View
477
- style={
478
- Object {
479
- "backgroundColor": "#ffffff",
480
- "display": "flex",
481
- "maxWidth": 300,
482
- "minWidth": 140,
483
- "paddingVertical": 4,
484
- }
485
- }
486
- >
487
- <View
488
- accessibilityLabel="Option 1"
489
- accessibilityRole="menuitem"
490
- accessibilityState={
491
- Object {
492
- "disabled": undefined,
493
- }
494
- }
495
- accessible={true}
496
- enableFocusRing={true}
497
- focusable={true}
498
- keyDownEvents={
499
- Array [
500
- Object {
501
- "key": " ",
502
- },
503
- Object {
504
- "key": "Enter",
505
- },
506
- ]
507
- }
508
- onAccessibilityTap={[Function]}
509
- onBlur={[Function]}
510
- onClick={[Function]}
511
- onFocus={[Function]}
512
- onKeyDown={[Function]}
513
- onKeyUp={[Function]}
514
- onMouseEnter={[Function]}
515
- onMouseLeave={[Function]}
516
- onResponderGrant={[Function]}
517
- onResponderMove={[Function]}
518
- onResponderRelease={[Function]}
519
- onResponderTerminate={[Function]}
520
- onResponderTerminationRequest={[Function]}
521
- onStartShouldSetResponder={[Function]}
522
- style={
523
- Object {
524
- "alignItems": "center",
525
- "backgroundColor": "#ffffff",
526
- "borderRadius": 0,
527
- "display": "flex",
528
- "flexDirection": "row",
529
- "maxWidth": 300,
530
- "minHeight": 24,
531
- "minWidth": 128,
532
- "padding": 4,
533
- "paddingHorizontal": 8,
534
- }
535
- }
536
- >
537
- <Text
538
- ellipsizeMode="tail"
539
- numberOfLines={0}
540
- onAccessibilityTap={[Function]}
541
- style={
542
- Object {
543
- "color": "#242424",
544
- "flexGrow": 1,
545
- "fontFamily": "Segoe UI",
546
- "fontSize": 12,
547
- "fontWeight": "400",
548
- "margin": 0,
549
- }
550
- }
551
- >
552
- Option 1
553
- </Text>
554
- </View>
555
- </View>
556
- </View>
557
- </RCTCallout>,
558
- ]
265
+ Open
266
+ </Text>
267
+ </View>
559
268
  `;
560
269
 
561
270
  exports[`Menu component tests Menu open checkbox and divider 1`] = `
562
- Array [
563
- <View
564
- accessibilityActions={
565
- Array [
566
- Object {
567
- "name": "Expand",
568
- },
569
- Object {
570
- "name": "Collapse",
571
- },
572
- ]
573
- }
574
- accessibilityLabel="Open"
575
- accessibilityRole="button"
576
- accessibilityState={
271
+ <View
272
+ accessibilityActions={
273
+ Array [
577
274
  Object {
578
- "expanded": true,
579
- }
580
- }
581
- accessible={true}
582
- enableFocusRing={true}
583
- focusable={true}
584
- keyUpEvents={
585
- Array [
586
- Object {
587
- "key": " ",
588
- },
589
- Object {
590
- "key": "Enter",
591
- },
592
- ]
593
- }
594
- onAccessibilityAction={[Function]}
595
- onAccessibilityTap={[Function]}
596
- onBlur={[Function]}
597
- onClick={[Function]}
598
- onFocus={[Function]}
599
- onKeyDown={[Function]}
600
- onKeyUp={[Function]}
601
- onMouseEnter={[Function]}
602
- onMouseLeave={[Function]}
603
- onResponderGrant={[Function]}
604
- onResponderMove={[Function]}
605
- onResponderRelease={[Function]}
606
- onResponderTerminate={[Function]}
607
- onResponderTerminationRequest={[Function]}
608
- onStartShouldSetResponder={[Function]}
609
- style={
275
+ "name": "Expand",
276
+ },
610
277
  Object {
611
- "alignItems": "center",
612
- "alignSelf": "flex-start",
613
- "backgroundColor": "#ffffff",
614
- "borderColor": "#d1d1d1",
615
- "borderRadius": 4,
616
- "borderWidth": 1,
617
- "display": "flex",
618
- "flexDirection": "row",
619
- "justifyContent": "center",
620
- "minHeight": 32,
621
- "minWidth": 64,
622
- "padding": 3,
623
- "paddingHorizontal": 7,
624
- "width": undefined,
625
- }
278
+ "name": "Collapse",
279
+ },
280
+ ]
281
+ }
282
+ accessibilityLabel="Open"
283
+ accessibilityRole="button"
284
+ accessibilityState={
285
+ Object {
286
+ "expanded": true,
626
287
  }
627
- >
628
- <Text
629
- ellipsizeMode="tail"
630
- numberOfLines={0}
631
- onAccessibilityTap={[Function]}
632
- style={
633
- Object {
634
- "color": "#242424",
635
- "fontFamily": "Segoe UI",
636
- "fontSize": 12,
637
- "fontWeight": "400",
638
- "margin": 0,
639
- "marginBottom": 1,
640
- "marginEnd": -2,
641
- "marginStart": 0,
642
- "marginTop": -1,
643
- }
644
- }
645
- >
646
- Open
647
- </Text>
648
- </View>,
649
- <RCTCallout
650
- accessibilityRole="menu"
651
- borderColor="#616161"
652
- borderWidth={1}
653
- dismissBehaviors={
654
- Array [
655
- "preventDismissOnKeyDown",
656
- "preventDismissOnClickOutside",
657
- ]
288
+ }
289
+ accessible={true}
290
+ enableFocusRing={true}
291
+ focusable={true}
292
+ keyUpEvents={
293
+ Array [
294
+ Object {
295
+ "key": " ",
296
+ },
297
+ Object {
298
+ "key": "Enter",
299
+ },
300
+ ]
301
+ }
302
+ onAccessibilityAction={[Function]}
303
+ onAccessibilityTap={[Function]}
304
+ onBlur={[Function]}
305
+ onClick={[Function]}
306
+ onFocus={[Function]}
307
+ onKeyDown={[Function]}
308
+ onKeyUp={[Function]}
309
+ onMouseEnter={[Function]}
310
+ onMouseLeave={[Function]}
311
+ onResponderGrant={[Function]}
312
+ onResponderMove={[Function]}
313
+ onResponderRelease={[Function]}
314
+ onResponderTerminate={[Function]}
315
+ onResponderTerminationRequest={[Function]}
316
+ onStartShouldSetResponder={[Function]}
317
+ style={
318
+ Object {
319
+ "alignItems": "center",
320
+ "alignSelf": "flex-start",
321
+ "backgroundColor": "#ffffff",
322
+ "borderColor": "#d1d1d1",
323
+ "borderRadius": 4,
324
+ "borderWidth": 1,
325
+ "display": "flex",
326
+ "flexDirection": "row",
327
+ "justifyContent": "center",
328
+ "minHeight": 32,
329
+ "minWidth": 64,
330
+ "padding": 3,
331
+ "paddingHorizontal": 7,
332
+ "width": undefined,
658
333
  }
659
- doNotTakePointerCapture={false}
660
- onDismiss={[Function]}
661
- setInitialFocus={true}
334
+ }
335
+ >
336
+ <Text
337
+ ellipsizeMode="tail"
338
+ numberOfLines={0}
339
+ onAccessibilityTap={[Function]}
662
340
  style={
663
341
  Object {
664
- "backgroundColor": "#faf9f8",
665
- "borderColor": "#616161",
666
- "borderWidth": 1,
342
+ "color": "#242424",
343
+ "fontFamily": "Segoe UI",
344
+ "fontSize": 12,
345
+ "fontWeight": "400",
346
+ "margin": 0,
347
+ "marginBottom": 1,
348
+ "marginEnd": -2,
349
+ "marginStart": 0,
350
+ "marginTop": -1,
667
351
  }
668
352
  }
669
353
  >
670
- <View
671
- accessible={false}
672
- focusable={false}
673
- onBlur={[Function]}
674
- onKeyDown={[Function]}
675
- onKeyUp={[Function]}
676
- onMouseEnter={[Function]}
677
- onMouseLeave={[Function]}
678
- style={
679
- Object {
680
- "maxHeight": undefined,
681
- }
682
- }
683
- >
684
- <View
685
- style={
686
- Object {
687
- "backgroundColor": "#ffffff",
688
- "display": "flex",
689
- "maxWidth": 300,
690
- "minWidth": 140,
691
- "paddingVertical": 4,
692
- }
693
- }
694
- >
695
- <View
696
- accessibilityActions={
697
- Array [
698
- Object {
699
- "name": "Toggle",
700
- },
701
- ]
702
- }
703
- accessibilityLabel="Option 1"
704
- accessibilityRole="menuitem"
705
- accessibilityState={
706
- Object {
707
- "checked": undefined,
708
- "disabled": undefined,
709
- }
710
- }
711
- accessible={true}
712
- enableFocusRing={true}
713
- focusable={true}
714
- keyDownEvents={
715
- Array [
716
- Object {
717
- "key": " ",
718
- },
719
- Object {
720
- "key": "Enter",
721
- },
722
- ]
723
- }
724
- onAccessibilityAction={[Function]}
725
- onBlur={[Function]}
726
- onClick={[Function]}
727
- onFocus={[Function]}
728
- onKeyDown={[Function]}
729
- onKeyUp={[Function]}
730
- onMouseEnter={[Function]}
731
- onMouseLeave={[Function]}
732
- onResponderGrant={[Function]}
733
- onResponderMove={[Function]}
734
- onResponderRelease={[Function]}
735
- onResponderTerminate={[Function]}
736
- onResponderTerminationRequest={[Function]}
737
- onStartShouldSetResponder={[Function]}
738
- style={
739
- Object {
740
- "alignItems": "center",
741
- "backgroundColor": "#ffffff",
742
- "borderRadius": 0,
743
- "display": "flex",
744
- "flexDirection": "row",
745
- "maxWidth": 300,
746
- "minHeight": 24,
747
- "minWidth": 160,
748
- "padding": 4,
749
- "paddingHorizontal": 8,
750
- }
751
- }
752
- >
753
- <RNSVGSvgView
754
- align="xMidYMid"
755
- bbHeight={16}
756
- bbWidth={16}
757
- color={4280558628}
758
- focusable={false}
759
- height={16}
760
- meetOrSlice={0}
761
- minX={0}
762
- minY={0}
763
- style={
764
- Array [
765
- Object {
766
- "backgroundColor": "transparent",
767
- "borderWidth": 0,
768
- },
769
- Object {
770
- "marginEnd": 4,
771
- },
772
- Object {
773
- "flex": 0,
774
- "height": 16,
775
- "opacity": 0,
776
- "width": 16,
777
- },
778
- ]
779
- }
780
- tintColor={4280558628}
781
- vbHeight={12}
782
- vbWidth={12}
783
- width={16}
784
- xml="
785
- <svg>
786
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
787
- </svg>"
788
- >
789
- <RNSVGGroup>
790
- <RNSVGPath
791
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
792
- fill={
793
- Array [
794
- 2,
795
- ]
796
- }
797
- propList={
798
- Array [
799
- "fill",
800
- ]
801
- }
802
- />
803
- </RNSVGGroup>
804
- </RNSVGSvgView>
805
- <Text
806
- ellipsizeMode="tail"
807
- numberOfLines={0}
808
- onAccessibilityTap={[Function]}
809
- style={
810
- Object {
811
- "color": "#242424",
812
- "flexGrow": 1,
813
- "fontFamily": "Segoe UI",
814
- "fontSize": 12,
815
- "fontWeight": "400",
816
- "margin": 0,
817
- }
818
- }
819
- >
820
- Option 1
821
- </Text>
822
- </View>
823
- <View
824
- style={
825
- Object {
826
- "backgroundColor": "#d1d1d1",
827
- "display": "flex",
828
- "height": 1,
829
- "margin": 2,
830
- "marginVertical": undefined,
831
- "width": undefined,
832
- }
833
- }
834
- />
835
- <View
836
- accessibilityActions={
837
- Array [
838
- Object {
839
- "name": "Toggle",
840
- },
841
- ]
842
- }
843
- accessibilityLabel="Option 2"
844
- accessibilityRole="menuitem"
845
- accessibilityState={
846
- Object {
847
- "checked": undefined,
848
- "disabled": true,
849
- }
850
- }
851
- accessible={true}
852
- enableFocusRing={true}
853
- focusable={true}
854
- keyDownEvents={Array []}
855
- onAccessibilityAction={[Function]}
856
- onBlur={[Function]}
857
- onClick={[Function]}
858
- onFocus={[Function]}
859
- onKeyDown={[Function]}
860
- onKeyUp={[Function]}
861
- onMouseEnter={[Function]}
862
- onMouseLeave={[Function]}
863
- onResponderGrant={[Function]}
864
- onResponderMove={[Function]}
865
- onResponderRelease={[Function]}
866
- onResponderTerminate={[Function]}
867
- onResponderTerminationRequest={[Function]}
868
- onStartShouldSetResponder={[Function]}
869
- style={
870
- Object {
871
- "alignItems": "center",
872
- "backgroundColor": "#ffffff",
873
- "borderRadius": 0,
874
- "display": "flex",
875
- "flexDirection": "row",
876
- "maxWidth": 300,
877
- "minHeight": 24,
878
- "minWidth": 160,
879
- "padding": 4,
880
- "paddingHorizontal": 8,
881
- }
882
- }
883
- >
884
- <RNSVGSvgView
885
- align="xMidYMid"
886
- bbHeight={16}
887
- bbWidth={16}
888
- color={4290624957}
889
- focusable={false}
890
- height={16}
891
- meetOrSlice={0}
892
- minX={0}
893
- minY={0}
894
- style={
895
- Array [
896
- Object {
897
- "backgroundColor": "transparent",
898
- "borderWidth": 0,
899
- },
900
- Object {
901
- "marginEnd": 4,
902
- },
903
- Object {
904
- "flex": 0,
905
- "height": 16,
906
- "opacity": 0,
907
- "width": 16,
908
- },
909
- ]
910
- }
911
- tintColor={4290624957}
912
- vbHeight={12}
913
- vbWidth={12}
914
- width={16}
915
- xml="
916
- <svg>
917
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
918
- </svg>"
919
- >
920
- <RNSVGGroup>
921
- <RNSVGPath
922
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
923
- fill={
924
- Array [
925
- 2,
926
- ]
927
- }
928
- propList={
929
- Array [
930
- "fill",
931
- ]
932
- }
933
- />
934
- </RNSVGGroup>
935
- </RNSVGSvgView>
936
- <Text
937
- ellipsizeMode="tail"
938
- numberOfLines={0}
939
- onAccessibilityTap={[Function]}
940
- style={
941
- Object {
942
- "color": "#bdbdbd",
943
- "flexGrow": 1,
944
- "fontFamily": "Segoe UI",
945
- "fontSize": 12,
946
- "fontWeight": "400",
947
- "margin": 0,
948
- }
949
- }
950
- >
951
- Option 2
952
- </Text>
953
- </View>
954
- </View>
955
- </View>
956
- </RCTCallout>,
957
- ]
354
+ Open
355
+ </Text>
356
+ </View>
958
357
  `;
959
358
 
960
359
  exports[`Menu component tests Menu open checkbox checked 1`] = `
961
- Array [
962
- <View
963
- accessibilityActions={
964
- Array [
965
- Object {
966
- "name": "Expand",
967
- },
968
- Object {
969
- "name": "Collapse",
970
- },
971
- ]
972
- }
973
- accessibilityLabel="Open"
974
- accessibilityRole="button"
975
- accessibilityState={
360
+ <View
361
+ accessibilityActions={
362
+ Array [
976
363
  Object {
977
- "expanded": true,
978
- }
979
- }
980
- accessible={true}
981
- enableFocusRing={true}
982
- focusable={true}
983
- keyUpEvents={
984
- Array [
985
- Object {
986
- "key": " ",
987
- },
988
- Object {
989
- "key": "Enter",
990
- },
991
- ]
992
- }
993
- onAccessibilityAction={[Function]}
994
- onAccessibilityTap={[Function]}
995
- onBlur={[Function]}
996
- onClick={[Function]}
997
- onFocus={[Function]}
998
- onKeyDown={[Function]}
999
- onKeyUp={[Function]}
1000
- onMouseEnter={[Function]}
1001
- onMouseLeave={[Function]}
1002
- onResponderGrant={[Function]}
1003
- onResponderMove={[Function]}
1004
- onResponderRelease={[Function]}
1005
- onResponderTerminate={[Function]}
1006
- onResponderTerminationRequest={[Function]}
1007
- onStartShouldSetResponder={[Function]}
1008
- style={
364
+ "name": "Expand",
365
+ },
1009
366
  Object {
1010
- "alignItems": "center",
1011
- "alignSelf": "flex-start",
1012
- "backgroundColor": "#ffffff",
1013
- "borderColor": "#d1d1d1",
1014
- "borderRadius": 4,
1015
- "borderWidth": 1,
1016
- "display": "flex",
1017
- "flexDirection": "row",
1018
- "justifyContent": "center",
1019
- "minHeight": 32,
1020
- "minWidth": 64,
1021
- "padding": 3,
1022
- "paddingHorizontal": 7,
1023
- "width": undefined,
1024
- }
367
+ "name": "Collapse",
368
+ },
369
+ ]
370
+ }
371
+ accessibilityLabel="Open"
372
+ accessibilityRole="button"
373
+ accessibilityState={
374
+ Object {
375
+ "expanded": true,
1025
376
  }
1026
- >
1027
- <Text
1028
- ellipsizeMode="tail"
1029
- numberOfLines={0}
1030
- onAccessibilityTap={[Function]}
1031
- style={
1032
- Object {
1033
- "color": "#242424",
1034
- "fontFamily": "Segoe UI",
1035
- "fontSize": 12,
1036
- "fontWeight": "400",
1037
- "margin": 0,
1038
- "marginBottom": 1,
1039
- "marginEnd": -2,
1040
- "marginStart": 0,
1041
- "marginTop": -1,
1042
- }
1043
- }
1044
- >
1045
- Open
1046
- </Text>
1047
- </View>,
1048
- <RCTCallout
1049
- accessibilityRole="menu"
1050
- borderColor="#616161"
1051
- borderWidth={1}
1052
- dismissBehaviors={
1053
- Array [
1054
- "preventDismissOnKeyDown",
1055
- "preventDismissOnClickOutside",
1056
- ]
377
+ }
378
+ accessible={true}
379
+ enableFocusRing={true}
380
+ focusable={true}
381
+ keyUpEvents={
382
+ Array [
383
+ Object {
384
+ "key": " ",
385
+ },
386
+ Object {
387
+ "key": "Enter",
388
+ },
389
+ ]
390
+ }
391
+ onAccessibilityAction={[Function]}
392
+ onAccessibilityTap={[Function]}
393
+ onBlur={[Function]}
394
+ onClick={[Function]}
395
+ onFocus={[Function]}
396
+ onKeyDown={[Function]}
397
+ onKeyUp={[Function]}
398
+ onMouseEnter={[Function]}
399
+ onMouseLeave={[Function]}
400
+ onResponderGrant={[Function]}
401
+ onResponderMove={[Function]}
402
+ onResponderRelease={[Function]}
403
+ onResponderTerminate={[Function]}
404
+ onResponderTerminationRequest={[Function]}
405
+ onStartShouldSetResponder={[Function]}
406
+ style={
407
+ Object {
408
+ "alignItems": "center",
409
+ "alignSelf": "flex-start",
410
+ "backgroundColor": "#ffffff",
411
+ "borderColor": "#d1d1d1",
412
+ "borderRadius": 4,
413
+ "borderWidth": 1,
414
+ "display": "flex",
415
+ "flexDirection": "row",
416
+ "justifyContent": "center",
417
+ "minHeight": 32,
418
+ "minWidth": 64,
419
+ "padding": 3,
420
+ "paddingHorizontal": 7,
421
+ "width": undefined,
1057
422
  }
1058
- doNotTakePointerCapture={false}
1059
- onDismiss={[Function]}
1060
- setInitialFocus={true}
423
+ }
424
+ >
425
+ <Text
426
+ ellipsizeMode="tail"
427
+ numberOfLines={0}
428
+ onAccessibilityTap={[Function]}
1061
429
  style={
1062
430
  Object {
1063
- "backgroundColor": "#faf9f8",
1064
- "borderColor": "#616161",
1065
- "borderWidth": 1,
431
+ "color": "#242424",
432
+ "fontFamily": "Segoe UI",
433
+ "fontSize": 12,
434
+ "fontWeight": "400",
435
+ "margin": 0,
436
+ "marginBottom": 1,
437
+ "marginEnd": -2,
438
+ "marginStart": 0,
439
+ "marginTop": -1,
1066
440
  }
1067
441
  }
1068
442
  >
1069
- <View
1070
- accessible={false}
1071
- focusable={false}
1072
- onBlur={[Function]}
1073
- onKeyDown={[Function]}
1074
- onKeyUp={[Function]}
1075
- onMouseEnter={[Function]}
1076
- onMouseLeave={[Function]}
1077
- style={
1078
- Object {
1079
- "maxHeight": undefined,
1080
- }
1081
- }
1082
- >
1083
- <View
1084
- style={
1085
- Object {
1086
- "backgroundColor": "#ffffff",
1087
- "display": "flex",
1088
- "maxWidth": 300,
1089
- "minWidth": 140,
1090
- "paddingVertical": 4,
1091
- }
1092
- }
1093
- >
1094
- <View
1095
- accessibilityActions={
1096
- Array [
1097
- Object {
1098
- "name": "Toggle",
1099
- },
1100
- ]
1101
- }
1102
- accessibilityLabel="Option 1"
1103
- accessibilityRole="menuitem"
1104
- accessibilityState={
1105
- Object {
1106
- "checked": true,
1107
- "disabled": undefined,
1108
- }
1109
- }
1110
- accessible={true}
1111
- enableFocusRing={true}
1112
- focusable={true}
1113
- keyDownEvents={
1114
- Array [
1115
- Object {
1116
- "key": " ",
1117
- },
1118
- Object {
1119
- "key": "Enter",
1120
- },
1121
- ]
1122
- }
1123
- onAccessibilityAction={[Function]}
1124
- onBlur={[Function]}
1125
- onClick={[Function]}
1126
- onFocus={[Function]}
1127
- onKeyDown={[Function]}
1128
- onKeyUp={[Function]}
1129
- onMouseEnter={[Function]}
1130
- onMouseLeave={[Function]}
1131
- onResponderGrant={[Function]}
1132
- onResponderMove={[Function]}
1133
- onResponderRelease={[Function]}
1134
- onResponderTerminate={[Function]}
1135
- onResponderTerminationRequest={[Function]}
1136
- onStartShouldSetResponder={[Function]}
1137
- style={
1138
- Object {
1139
- "alignItems": "center",
1140
- "backgroundColor": "#ffffff",
1141
- "borderRadius": 0,
1142
- "display": "flex",
1143
- "flexDirection": "row",
1144
- "maxWidth": 300,
1145
- "minHeight": 24,
1146
- "minWidth": 160,
1147
- "padding": 4,
1148
- "paddingHorizontal": 8,
1149
- }
1150
- }
1151
- >
1152
- <RNSVGSvgView
1153
- align="xMidYMid"
1154
- bbHeight={16}
1155
- bbWidth={16}
1156
- color={4280558628}
1157
- focusable={false}
1158
- height={16}
1159
- meetOrSlice={0}
1160
- minX={0}
1161
- minY={0}
1162
- style={
1163
- Array [
1164
- Object {
1165
- "backgroundColor": "transparent",
1166
- "borderWidth": 0,
1167
- },
1168
- Object {
1169
- "marginEnd": 4,
1170
- },
1171
- Object {
1172
- "flex": 0,
1173
- "height": 16,
1174
- "opacity": 1,
1175
- "width": 16,
1176
- },
1177
- ]
1178
- }
1179
- tintColor={4280558628}
1180
- vbHeight={12}
1181
- vbWidth={12}
1182
- width={16}
1183
- xml="
1184
- <svg>
1185
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
1186
- </svg>"
1187
- >
1188
- <RNSVGGroup>
1189
- <RNSVGPath
1190
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
1191
- fill={
1192
- Array [
1193
- 2,
1194
- ]
1195
- }
1196
- propList={
1197
- Array [
1198
- "fill",
1199
- ]
1200
- }
1201
- />
1202
- </RNSVGGroup>
1203
- </RNSVGSvgView>
1204
- <Text
1205
- ellipsizeMode="tail"
1206
- numberOfLines={0}
1207
- onAccessibilityTap={[Function]}
1208
- style={
1209
- Object {
1210
- "color": "#242424",
1211
- "flexGrow": 1,
1212
- "fontFamily": "Segoe UI",
1213
- "fontSize": 12,
1214
- "fontWeight": "400",
1215
- "margin": 0,
1216
- }
1217
- }
1218
- >
1219
- Option 1
1220
- </Text>
1221
- </View>
1222
- <View
1223
- style={
1224
- Object {
1225
- "backgroundColor": "#d1d1d1",
1226
- "display": "flex",
1227
- "height": 1,
1228
- "margin": 2,
1229
- "marginVertical": undefined,
1230
- "width": undefined,
1231
- }
1232
- }
1233
- />
1234
- <View
1235
- accessibilityActions={
1236
- Array [
1237
- Object {
1238
- "name": "Toggle",
1239
- },
1240
- ]
1241
- }
1242
- accessibilityLabel="Option 2"
1243
- accessibilityRole="menuitem"
1244
- accessibilityState={
1245
- Object {
1246
- "checked": undefined,
1247
- "disabled": undefined,
1248
- }
1249
- }
1250
- accessible={true}
1251
- enableFocusRing={true}
1252
- focusable={true}
1253
- keyDownEvents={
1254
- Array [
1255
- Object {
1256
- "key": " ",
1257
- },
1258
- Object {
1259
- "key": "Enter",
1260
- },
1261
- ]
1262
- }
1263
- onAccessibilityAction={[Function]}
1264
- onBlur={[Function]}
1265
- onClick={[Function]}
1266
- onFocus={[Function]}
1267
- onKeyDown={[Function]}
1268
- onKeyUp={[Function]}
1269
- onMouseEnter={[Function]}
1270
- onMouseLeave={[Function]}
1271
- onResponderGrant={[Function]}
1272
- onResponderMove={[Function]}
1273
- onResponderRelease={[Function]}
1274
- onResponderTerminate={[Function]}
1275
- onResponderTerminationRequest={[Function]}
1276
- onStartShouldSetResponder={[Function]}
1277
- style={
1278
- Object {
1279
- "alignItems": "center",
1280
- "backgroundColor": "#ffffff",
1281
- "borderRadius": 0,
1282
- "display": "flex",
1283
- "flexDirection": "row",
1284
- "maxWidth": 300,
1285
- "minHeight": 24,
1286
- "minWidth": 160,
1287
- "padding": 4,
1288
- "paddingHorizontal": 8,
1289
- }
1290
- }
1291
- >
1292
- <RNSVGSvgView
1293
- align="xMidYMid"
1294
- bbHeight={16}
1295
- bbWidth={16}
1296
- color={4280558628}
1297
- focusable={false}
1298
- height={16}
1299
- meetOrSlice={0}
1300
- minX={0}
1301
- minY={0}
1302
- style={
1303
- Array [
1304
- Object {
1305
- "backgroundColor": "transparent",
1306
- "borderWidth": 0,
1307
- },
1308
- Object {
1309
- "marginEnd": 4,
1310
- },
1311
- Object {
1312
- "flex": 0,
1313
- "height": 16,
1314
- "opacity": 0,
1315
- "width": 16,
1316
- },
1317
- ]
1318
- }
1319
- tintColor={4280558628}
1320
- vbHeight={12}
1321
- vbWidth={12}
1322
- width={16}
1323
- xml="
1324
- <svg>
1325
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
1326
- </svg>"
1327
- >
1328
- <RNSVGGroup>
1329
- <RNSVGPath
1330
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
1331
- fill={
1332
- Array [
1333
- 2,
1334
- ]
1335
- }
1336
- propList={
1337
- Array [
1338
- "fill",
1339
- ]
1340
- }
1341
- />
1342
- </RNSVGGroup>
1343
- </RNSVGSvgView>
1344
- <Text
1345
- ellipsizeMode="tail"
1346
- numberOfLines={0}
1347
- onAccessibilityTap={[Function]}
1348
- style={
1349
- Object {
1350
- "color": "#242424",
1351
- "flexGrow": 1,
1352
- "fontFamily": "Segoe UI",
1353
- "fontSize": 12,
1354
- "fontWeight": "400",
1355
- "margin": 0,
1356
- }
1357
- }
1358
- >
1359
- Option 2
1360
- </Text>
1361
- </View>
1362
- </View>
1363
- </View>
1364
- </RCTCallout>,
1365
- ]
443
+ Open
444
+ </Text>
445
+ </View>
1366
446
  `;
1367
447
 
1368
448
  exports[`Menu component tests Menu open checkbox defaultChecked 1`] = `
1369
- Array [
1370
- <View
1371
- accessibilityActions={
1372
- Array [
1373
- Object {
1374
- "name": "Expand",
1375
- },
1376
- Object {
1377
- "name": "Collapse",
1378
- },
1379
- ]
1380
- }
1381
- accessibilityLabel="Open"
1382
- accessibilityRole="button"
1383
- accessibilityState={
449
+ <View
450
+ accessibilityActions={
451
+ Array [
1384
452
  Object {
1385
- "expanded": true,
1386
- }
1387
- }
1388
- accessible={true}
1389
- enableFocusRing={true}
1390
- focusable={true}
1391
- keyUpEvents={
1392
- Array [
1393
- Object {
1394
- "key": " ",
1395
- },
1396
- Object {
1397
- "key": "Enter",
1398
- },
1399
- ]
1400
- }
1401
- onAccessibilityAction={[Function]}
1402
- onAccessibilityTap={[Function]}
1403
- onBlur={[Function]}
1404
- onClick={[Function]}
1405
- onFocus={[Function]}
1406
- onKeyDown={[Function]}
1407
- onKeyUp={[Function]}
1408
- onMouseEnter={[Function]}
1409
- onMouseLeave={[Function]}
1410
- onResponderGrant={[Function]}
1411
- onResponderMove={[Function]}
1412
- onResponderRelease={[Function]}
1413
- onResponderTerminate={[Function]}
1414
- onResponderTerminationRequest={[Function]}
1415
- onStartShouldSetResponder={[Function]}
1416
- style={
453
+ "name": "Expand",
454
+ },
1417
455
  Object {
1418
- "alignItems": "center",
1419
- "alignSelf": "flex-start",
1420
- "backgroundColor": "#ffffff",
1421
- "borderColor": "#d1d1d1",
1422
- "borderRadius": 4,
1423
- "borderWidth": 1,
1424
- "display": "flex",
1425
- "flexDirection": "row",
1426
- "justifyContent": "center",
1427
- "minHeight": 32,
1428
- "minWidth": 64,
1429
- "padding": 3,
1430
- "paddingHorizontal": 7,
1431
- "width": undefined,
1432
- }
456
+ "name": "Collapse",
457
+ },
458
+ ]
459
+ }
460
+ accessibilityLabel="Open"
461
+ accessibilityRole="button"
462
+ accessibilityState={
463
+ Object {
464
+ "expanded": true,
1433
465
  }
1434
- >
1435
- <Text
1436
- ellipsizeMode="tail"
1437
- numberOfLines={0}
1438
- onAccessibilityTap={[Function]}
1439
- style={
1440
- Object {
1441
- "color": "#242424",
1442
- "fontFamily": "Segoe UI",
1443
- "fontSize": 12,
1444
- "fontWeight": "400",
1445
- "margin": 0,
1446
- "marginBottom": 1,
1447
- "marginEnd": -2,
1448
- "marginStart": 0,
1449
- "marginTop": -1,
1450
- }
1451
- }
1452
- >
1453
- Open
1454
- </Text>
1455
- </View>,
1456
- <RCTCallout
1457
- accessibilityRole="menu"
1458
- borderColor="#616161"
1459
- borderWidth={1}
1460
- dismissBehaviors={
1461
- Array [
1462
- "preventDismissOnKeyDown",
1463
- "preventDismissOnClickOutside",
1464
- ]
466
+ }
467
+ accessible={true}
468
+ enableFocusRing={true}
469
+ focusable={true}
470
+ keyUpEvents={
471
+ Array [
472
+ Object {
473
+ "key": " ",
474
+ },
475
+ Object {
476
+ "key": "Enter",
477
+ },
478
+ ]
479
+ }
480
+ onAccessibilityAction={[Function]}
481
+ onAccessibilityTap={[Function]}
482
+ onBlur={[Function]}
483
+ onClick={[Function]}
484
+ onFocus={[Function]}
485
+ onKeyDown={[Function]}
486
+ onKeyUp={[Function]}
487
+ onMouseEnter={[Function]}
488
+ onMouseLeave={[Function]}
489
+ onResponderGrant={[Function]}
490
+ onResponderMove={[Function]}
491
+ onResponderRelease={[Function]}
492
+ onResponderTerminate={[Function]}
493
+ onResponderTerminationRequest={[Function]}
494
+ onStartShouldSetResponder={[Function]}
495
+ style={
496
+ Object {
497
+ "alignItems": "center",
498
+ "alignSelf": "flex-start",
499
+ "backgroundColor": "#ffffff",
500
+ "borderColor": "#d1d1d1",
501
+ "borderRadius": 4,
502
+ "borderWidth": 1,
503
+ "display": "flex",
504
+ "flexDirection": "row",
505
+ "justifyContent": "center",
506
+ "minHeight": 32,
507
+ "minWidth": 64,
508
+ "padding": 3,
509
+ "paddingHorizontal": 7,
510
+ "width": undefined,
1465
511
  }
1466
- doNotTakePointerCapture={false}
1467
- onDismiss={[Function]}
1468
- setInitialFocus={true}
512
+ }
513
+ >
514
+ <Text
515
+ ellipsizeMode="tail"
516
+ numberOfLines={0}
517
+ onAccessibilityTap={[Function]}
1469
518
  style={
1470
519
  Object {
1471
- "backgroundColor": "#faf9f8",
1472
- "borderColor": "#616161",
1473
- "borderWidth": 1,
520
+ "color": "#242424",
521
+ "fontFamily": "Segoe UI",
522
+ "fontSize": 12,
523
+ "fontWeight": "400",
524
+ "margin": 0,
525
+ "marginBottom": 1,
526
+ "marginEnd": -2,
527
+ "marginStart": 0,
528
+ "marginTop": -1,
1474
529
  }
1475
530
  }
1476
531
  >
1477
- <View
1478
- accessible={false}
1479
- focusable={false}
1480
- onBlur={[Function]}
1481
- onKeyDown={[Function]}
1482
- onKeyUp={[Function]}
1483
- onMouseEnter={[Function]}
1484
- onMouseLeave={[Function]}
1485
- style={
1486
- Object {
1487
- "maxHeight": undefined,
1488
- }
1489
- }
1490
- >
1491
- <View
1492
- style={
1493
- Object {
1494
- "backgroundColor": "#ffffff",
1495
- "display": "flex",
1496
- "maxWidth": 300,
1497
- "minWidth": 140,
1498
- "paddingVertical": 4,
1499
- }
1500
- }
1501
- >
1502
- <View
1503
- accessibilityActions={
1504
- Array [
1505
- Object {
1506
- "name": "Toggle",
1507
- },
1508
- ]
1509
- }
1510
- accessibilityLabel="Option 1"
1511
- accessibilityRole="menuitem"
1512
- accessibilityState={
1513
- Object {
1514
- "checked": true,
1515
- "disabled": undefined,
1516
- }
1517
- }
1518
- accessible={true}
1519
- enableFocusRing={true}
1520
- focusable={true}
1521
- keyDownEvents={
1522
- Array [
1523
- Object {
1524
- "key": " ",
1525
- },
1526
- Object {
1527
- "key": "Enter",
1528
- },
1529
- ]
1530
- }
1531
- onAccessibilityAction={[Function]}
1532
- onBlur={[Function]}
1533
- onClick={[Function]}
1534
- onFocus={[Function]}
1535
- onKeyDown={[Function]}
1536
- onKeyUp={[Function]}
1537
- onMouseEnter={[Function]}
1538
- onMouseLeave={[Function]}
1539
- onResponderGrant={[Function]}
1540
- onResponderMove={[Function]}
1541
- onResponderRelease={[Function]}
1542
- onResponderTerminate={[Function]}
1543
- onResponderTerminationRequest={[Function]}
1544
- onStartShouldSetResponder={[Function]}
1545
- style={
1546
- Object {
1547
- "alignItems": "center",
1548
- "backgroundColor": "#ffffff",
1549
- "borderRadius": 0,
1550
- "display": "flex",
1551
- "flexDirection": "row",
1552
- "maxWidth": 300,
1553
- "minHeight": 24,
1554
- "minWidth": 160,
1555
- "padding": 4,
1556
- "paddingHorizontal": 8,
1557
- }
1558
- }
1559
- >
1560
- <RNSVGSvgView
1561
- align="xMidYMid"
1562
- bbHeight={16}
1563
- bbWidth={16}
1564
- color={4280558628}
1565
- focusable={false}
1566
- height={16}
1567
- meetOrSlice={0}
1568
- minX={0}
1569
- minY={0}
1570
- style={
1571
- Array [
1572
- Object {
1573
- "backgroundColor": "transparent",
1574
- "borderWidth": 0,
1575
- },
1576
- Object {
1577
- "marginEnd": 4,
1578
- },
1579
- Object {
1580
- "flex": 0,
1581
- "height": 16,
1582
- "opacity": 1,
1583
- "width": 16,
1584
- },
1585
- ]
1586
- }
1587
- tintColor={4280558628}
1588
- vbHeight={12}
1589
- vbWidth={12}
1590
- width={16}
1591
- xml="
1592
- <svg>
1593
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
1594
- </svg>"
1595
- >
1596
- <RNSVGGroup>
1597
- <RNSVGPath
1598
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
1599
- fill={
1600
- Array [
1601
- 2,
1602
- ]
1603
- }
1604
- propList={
1605
- Array [
1606
- "fill",
1607
- ]
1608
- }
1609
- />
1610
- </RNSVGGroup>
1611
- </RNSVGSvgView>
1612
- <Text
1613
- ellipsizeMode="tail"
1614
- numberOfLines={0}
1615
- onAccessibilityTap={[Function]}
1616
- style={
1617
- Object {
1618
- "color": "#242424",
1619
- "flexGrow": 1,
1620
- "fontFamily": "Segoe UI",
1621
- "fontSize": 12,
1622
- "fontWeight": "400",
1623
- "margin": 0,
1624
- }
1625
- }
1626
- >
1627
- Option 1
1628
- </Text>
1629
- </View>
1630
- <View
1631
- style={
1632
- Object {
1633
- "backgroundColor": "#d1d1d1",
1634
- "display": "flex",
1635
- "height": 1,
1636
- "margin": 2,
1637
- "marginVertical": undefined,
1638
- "width": undefined,
1639
- }
1640
- }
1641
- />
1642
- <View
1643
- accessibilityActions={
1644
- Array [
1645
- Object {
1646
- "name": "Toggle",
1647
- },
1648
- ]
1649
- }
1650
- accessibilityLabel="Option 2"
1651
- accessibilityRole="menuitem"
1652
- accessibilityState={
1653
- Object {
1654
- "checked": undefined,
1655
- "disabled": undefined,
1656
- }
1657
- }
1658
- accessible={true}
1659
- enableFocusRing={true}
1660
- focusable={true}
1661
- keyDownEvents={
1662
- Array [
1663
- Object {
1664
- "key": " ",
1665
- },
1666
- Object {
1667
- "key": "Enter",
1668
- },
1669
- ]
1670
- }
1671
- onAccessibilityAction={[Function]}
1672
- onBlur={[Function]}
1673
- onClick={[Function]}
1674
- onFocus={[Function]}
1675
- onKeyDown={[Function]}
1676
- onKeyUp={[Function]}
1677
- onMouseEnter={[Function]}
1678
- onMouseLeave={[Function]}
1679
- onResponderGrant={[Function]}
1680
- onResponderMove={[Function]}
1681
- onResponderRelease={[Function]}
1682
- onResponderTerminate={[Function]}
1683
- onResponderTerminationRequest={[Function]}
1684
- onStartShouldSetResponder={[Function]}
1685
- style={
1686
- Object {
1687
- "alignItems": "center",
1688
- "backgroundColor": "#ffffff",
1689
- "borderRadius": 0,
1690
- "display": "flex",
1691
- "flexDirection": "row",
1692
- "maxWidth": 300,
1693
- "minHeight": 24,
1694
- "minWidth": 160,
1695
- "padding": 4,
1696
- "paddingHorizontal": 8,
1697
- }
1698
- }
1699
- >
1700
- <RNSVGSvgView
1701
- align="xMidYMid"
1702
- bbHeight={16}
1703
- bbWidth={16}
1704
- color={4280558628}
1705
- focusable={false}
1706
- height={16}
1707
- meetOrSlice={0}
1708
- minX={0}
1709
- minY={0}
1710
- style={
1711
- Array [
1712
- Object {
1713
- "backgroundColor": "transparent",
1714
- "borderWidth": 0,
1715
- },
1716
- Object {
1717
- "marginEnd": 4,
1718
- },
1719
- Object {
1720
- "flex": 0,
1721
- "height": 16,
1722
- "opacity": 0,
1723
- "width": 16,
1724
- },
1725
- ]
1726
- }
1727
- tintColor={4280558628}
1728
- vbHeight={12}
1729
- vbWidth={12}
1730
- width={16}
1731
- xml="
1732
- <svg>
1733
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
1734
- </svg>"
1735
- >
1736
- <RNSVGGroup>
1737
- <RNSVGPath
1738
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
1739
- fill={
1740
- Array [
1741
- 2,
1742
- ]
1743
- }
1744
- propList={
1745
- Array [
1746
- "fill",
1747
- ]
1748
- }
1749
- />
1750
- </RNSVGGroup>
1751
- </RNSVGSvgView>
1752
- <Text
1753
- ellipsizeMode="tail"
1754
- numberOfLines={0}
1755
- onAccessibilityTap={[Function]}
1756
- style={
1757
- Object {
1758
- "color": "#242424",
1759
- "flexGrow": 1,
1760
- "fontFamily": "Segoe UI",
1761
- "fontSize": 12,
1762
- "fontWeight": "400",
1763
- "margin": 0,
1764
- }
1765
- }
1766
- >
1767
- Option 2
1768
- </Text>
1769
- </View>
1770
- </View>
1771
- </View>
1772
- </RCTCallout>,
1773
- ]
532
+ Open
533
+ </Text>
534
+ </View>
1774
535
  `;
1775
536
 
1776
537
  exports[`Menu component tests Menu open radio 1`] = `
1777
- Array [
1778
- <View
1779
- accessibilityActions={
1780
- Array [
1781
- Object {
1782
- "name": "Expand",
1783
- },
1784
- Object {
1785
- "name": "Collapse",
1786
- },
1787
- ]
1788
- }
1789
- accessibilityLabel="Open"
1790
- accessibilityRole="button"
1791
- accessibilityState={
538
+ <View
539
+ accessibilityActions={
540
+ Array [
1792
541
  Object {
1793
- "expanded": true,
1794
- }
1795
- }
1796
- accessible={true}
1797
- enableFocusRing={true}
1798
- focusable={true}
1799
- keyUpEvents={
1800
- Array [
1801
- Object {
1802
- "key": " ",
1803
- },
1804
- Object {
1805
- "key": "Enter",
1806
- },
1807
- ]
1808
- }
1809
- onAccessibilityAction={[Function]}
1810
- onAccessibilityTap={[Function]}
1811
- onBlur={[Function]}
1812
- onClick={[Function]}
1813
- onFocus={[Function]}
1814
- onKeyDown={[Function]}
1815
- onKeyUp={[Function]}
1816
- onMouseEnter={[Function]}
1817
- onMouseLeave={[Function]}
1818
- onResponderGrant={[Function]}
1819
- onResponderMove={[Function]}
1820
- onResponderRelease={[Function]}
1821
- onResponderTerminate={[Function]}
1822
- onResponderTerminationRequest={[Function]}
1823
- onStartShouldSetResponder={[Function]}
1824
- style={
542
+ "name": "Expand",
543
+ },
1825
544
  Object {
1826
- "alignItems": "center",
1827
- "alignSelf": "flex-start",
1828
- "backgroundColor": "#ffffff",
1829
- "borderColor": "#d1d1d1",
1830
- "borderRadius": 4,
1831
- "borderWidth": 1,
1832
- "display": "flex",
1833
- "flexDirection": "row",
1834
- "justifyContent": "center",
1835
- "minHeight": 32,
1836
- "minWidth": 64,
1837
- "padding": 3,
1838
- "paddingHorizontal": 7,
1839
- "width": undefined,
1840
- }
545
+ "name": "Collapse",
546
+ },
547
+ ]
548
+ }
549
+ accessibilityLabel="Open"
550
+ accessibilityRole="button"
551
+ accessibilityState={
552
+ Object {
553
+ "expanded": true,
1841
554
  }
1842
- >
1843
- <Text
1844
- ellipsizeMode="tail"
1845
- numberOfLines={0}
1846
- onAccessibilityTap={[Function]}
1847
- style={
1848
- Object {
1849
- "color": "#242424",
1850
- "fontFamily": "Segoe UI",
1851
- "fontSize": 12,
1852
- "fontWeight": "400",
1853
- "margin": 0,
1854
- "marginBottom": 1,
1855
- "marginEnd": -2,
1856
- "marginStart": 0,
1857
- "marginTop": -1,
1858
- }
1859
- }
1860
- >
1861
- Open
1862
- </Text>
1863
- </View>,
1864
- <RCTCallout
1865
- accessibilityRole="menu"
1866
- borderColor="#616161"
1867
- borderWidth={1}
1868
- dismissBehaviors={
1869
- Array [
1870
- "preventDismissOnKeyDown",
1871
- "preventDismissOnClickOutside",
1872
- ]
555
+ }
556
+ accessible={true}
557
+ enableFocusRing={true}
558
+ focusable={true}
559
+ keyUpEvents={
560
+ Array [
561
+ Object {
562
+ "key": " ",
563
+ },
564
+ Object {
565
+ "key": "Enter",
566
+ },
567
+ ]
568
+ }
569
+ onAccessibilityAction={[Function]}
570
+ onAccessibilityTap={[Function]}
571
+ onBlur={[Function]}
572
+ onClick={[Function]}
573
+ onFocus={[Function]}
574
+ onKeyDown={[Function]}
575
+ onKeyUp={[Function]}
576
+ onMouseEnter={[Function]}
577
+ onMouseLeave={[Function]}
578
+ onResponderGrant={[Function]}
579
+ onResponderMove={[Function]}
580
+ onResponderRelease={[Function]}
581
+ onResponderTerminate={[Function]}
582
+ onResponderTerminationRequest={[Function]}
583
+ onStartShouldSetResponder={[Function]}
584
+ style={
585
+ Object {
586
+ "alignItems": "center",
587
+ "alignSelf": "flex-start",
588
+ "backgroundColor": "#ffffff",
589
+ "borderColor": "#d1d1d1",
590
+ "borderRadius": 4,
591
+ "borderWidth": 1,
592
+ "display": "flex",
593
+ "flexDirection": "row",
594
+ "justifyContent": "center",
595
+ "minHeight": 32,
596
+ "minWidth": 64,
597
+ "padding": 3,
598
+ "paddingHorizontal": 7,
599
+ "width": undefined,
1873
600
  }
1874
- doNotTakePointerCapture={false}
1875
- onDismiss={[Function]}
1876
- setInitialFocus={true}
601
+ }
602
+ >
603
+ <Text
604
+ ellipsizeMode="tail"
605
+ numberOfLines={0}
606
+ onAccessibilityTap={[Function]}
1877
607
  style={
1878
608
  Object {
1879
- "backgroundColor": "#faf9f8",
1880
- "borderColor": "#616161",
1881
- "borderWidth": 1,
609
+ "color": "#242424",
610
+ "fontFamily": "Segoe UI",
611
+ "fontSize": 12,
612
+ "fontWeight": "400",
613
+ "margin": 0,
614
+ "marginBottom": 1,
615
+ "marginEnd": -2,
616
+ "marginStart": 0,
617
+ "marginTop": -1,
1882
618
  }
1883
619
  }
1884
620
  >
1885
- <View
1886
- accessible={false}
1887
- focusable={false}
1888
- onBlur={[Function]}
1889
- onKeyDown={[Function]}
1890
- onKeyUp={[Function]}
1891
- onMouseEnter={[Function]}
1892
- onMouseLeave={[Function]}
1893
- style={
1894
- Object {
1895
- "maxHeight": undefined,
1896
- }
1897
- }
1898
- >
1899
- <View
1900
- style={
1901
- Object {
1902
- "backgroundColor": "#ffffff",
1903
- "display": "flex",
1904
- "maxWidth": 300,
1905
- "minWidth": 140,
1906
- "paddingVertical": 4,
1907
- }
1908
- }
1909
- >
1910
- <View
1911
- accessibilityActions={
1912
- Array [
1913
- Object {
1914
- "name": "Toggle",
1915
- },
1916
- ]
1917
- }
1918
- accessibilityLabel="Option 1"
1919
- accessibilityRole="menuitem"
1920
- accessibilityState={
1921
- Object {
1922
- "checked": undefined,
1923
- "disabled": undefined,
1924
- }
1925
- }
1926
- accessible={true}
1927
- enableFocusRing={true}
1928
- focusable={true}
1929
- keyDownEvents={
1930
- Array [
1931
- Object {
1932
- "key": " ",
1933
- },
1934
- Object {
1935
- "key": "Enter",
1936
- },
1937
- ]
1938
- }
1939
- onAccessibilityAction={[Function]}
1940
- onBlur={[Function]}
1941
- onClick={[Function]}
1942
- onFocus={[Function]}
1943
- onKeyDown={[Function]}
1944
- onKeyUp={[Function]}
1945
- onMouseEnter={[Function]}
1946
- onMouseLeave={[Function]}
1947
- onResponderGrant={[Function]}
1948
- onResponderMove={[Function]}
1949
- onResponderRelease={[Function]}
1950
- onResponderTerminate={[Function]}
1951
- onResponderTerminationRequest={[Function]}
1952
- onStartShouldSetResponder={[Function]}
1953
- style={
1954
- Object {
1955
- "alignItems": "center",
1956
- "backgroundColor": "#ffffff",
1957
- "borderRadius": 0,
1958
- "display": "flex",
1959
- "flexDirection": "row",
1960
- "maxWidth": 300,
1961
- "minHeight": 24,
1962
- "minWidth": 160,
1963
- "padding": 4,
1964
- "paddingHorizontal": 8,
1965
- }
1966
- }
1967
- >
1968
- <RNSVGSvgView
1969
- align="xMidYMid"
1970
- bbHeight={16}
1971
- bbWidth={16}
1972
- color={4280558628}
1973
- focusable={false}
1974
- height={16}
1975
- meetOrSlice={0}
1976
- minX={0}
1977
- minY={0}
1978
- style={
1979
- Array [
1980
- Object {
1981
- "backgroundColor": "transparent",
1982
- "borderWidth": 0,
1983
- },
1984
- Object {
1985
- "marginEnd": 4,
1986
- },
1987
- Object {
1988
- "flex": 0,
1989
- "height": 16,
1990
- "opacity": 0,
1991
- "width": 16,
1992
- },
1993
- ]
1994
- }
1995
- tintColor={4280558628}
1996
- vbHeight={12}
1997
- vbWidth={12}
1998
- width={16}
1999
- xml="
2000
- <svg>
2001
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
2002
- </svg>"
2003
- >
2004
- <RNSVGGroup>
2005
- <RNSVGPath
2006
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
2007
- fill={
2008
- Array [
2009
- 2,
2010
- ]
2011
- }
2012
- propList={
2013
- Array [
2014
- "fill",
2015
- ]
2016
- }
2017
- />
2018
- </RNSVGGroup>
2019
- </RNSVGSvgView>
2020
- <Text
2021
- ellipsizeMode="tail"
2022
- numberOfLines={0}
2023
- onAccessibilityTap={[Function]}
2024
- style={
2025
- Object {
2026
- "color": "#242424",
2027
- "flexGrow": 1,
2028
- "fontFamily": "Segoe UI",
2029
- "fontSize": 12,
2030
- "fontWeight": "400",
2031
- "margin": 0,
2032
- }
2033
- }
2034
- >
2035
- Option 1
2036
- </Text>
2037
- </View>
2038
- <View
2039
- accessibilityActions={
2040
- Array [
2041
- Object {
2042
- "name": "Toggle",
2043
- },
2044
- ]
2045
- }
2046
- accessibilityLabel="Option 2"
2047
- accessibilityRole="menuitem"
2048
- accessibilityState={
2049
- Object {
2050
- "checked": undefined,
2051
- "disabled": undefined,
2052
- }
2053
- }
2054
- accessible={true}
2055
- enableFocusRing={true}
2056
- focusable={true}
2057
- keyDownEvents={
2058
- Array [
2059
- Object {
2060
- "key": " ",
2061
- },
2062
- Object {
2063
- "key": "Enter",
2064
- },
2065
- ]
2066
- }
2067
- onAccessibilityAction={[Function]}
2068
- onBlur={[Function]}
2069
- onClick={[Function]}
2070
- onFocus={[Function]}
2071
- onKeyDown={[Function]}
2072
- onKeyUp={[Function]}
2073
- onMouseEnter={[Function]}
2074
- onMouseLeave={[Function]}
2075
- onResponderGrant={[Function]}
2076
- onResponderMove={[Function]}
2077
- onResponderRelease={[Function]}
2078
- onResponderTerminate={[Function]}
2079
- onResponderTerminationRequest={[Function]}
2080
- onStartShouldSetResponder={[Function]}
2081
- style={
2082
- Object {
2083
- "alignItems": "center",
2084
- "backgroundColor": "#ffffff",
2085
- "borderRadius": 0,
2086
- "display": "flex",
2087
- "flexDirection": "row",
2088
- "maxWidth": 300,
2089
- "minHeight": 24,
2090
- "minWidth": 160,
2091
- "padding": 4,
2092
- "paddingHorizontal": 8,
2093
- }
2094
- }
2095
- >
2096
- <RNSVGSvgView
2097
- align="xMidYMid"
2098
- bbHeight={16}
2099
- bbWidth={16}
2100
- color={4280558628}
2101
- focusable={false}
2102
- height={16}
2103
- meetOrSlice={0}
2104
- minX={0}
2105
- minY={0}
2106
- style={
2107
- Array [
2108
- Object {
2109
- "backgroundColor": "transparent",
2110
- "borderWidth": 0,
2111
- },
2112
- Object {
2113
- "marginEnd": 4,
2114
- },
2115
- Object {
2116
- "flex": 0,
2117
- "height": 16,
2118
- "opacity": 0,
2119
- "width": 16,
2120
- },
2121
- ]
2122
- }
2123
- tintColor={4280558628}
2124
- vbHeight={12}
2125
- vbWidth={12}
2126
- width={16}
2127
- xml="
2128
- <svg>
2129
- <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
2130
- </svg>"
2131
- >
2132
- <RNSVGGroup>
2133
- <RNSVGPath
2134
- d="M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z"
2135
- fill={
2136
- Array [
2137
- 2,
2138
- ]
2139
- }
2140
- propList={
2141
- Array [
2142
- "fill",
2143
- ]
2144
- }
2145
- />
2146
- </RNSVGGroup>
2147
- </RNSVGSvgView>
2148
- <Text
2149
- ellipsizeMode="tail"
2150
- numberOfLines={0}
2151
- onAccessibilityTap={[Function]}
2152
- style={
2153
- Object {
2154
- "color": "#242424",
2155
- "flexGrow": 1,
2156
- "fontFamily": "Segoe UI",
2157
- "fontSize": 12,
2158
- "fontWeight": "400",
2159
- "margin": 0,
2160
- }
2161
- }
2162
- >
2163
- Option 2
2164
- </Text>
2165
- </View>
2166
- </View>
2167
- </View>
2168
- </RCTCallout>,
2169
- ]
621
+ Open
622
+ </Text>
623
+ </View>
2170
624
  `;
2171
625
 
2172
626
  exports[`Menu component tests Menu submenu 1`] = `
2173
- Array [
2174
- <View
2175
- accessibilityActions={
2176
- Array [
2177
- Object {
2178
- "name": "Expand",
2179
- },
2180
- Object {
2181
- "name": "Collapse",
2182
- },
2183
- ]
2184
- }
2185
- accessibilityLabel="Default"
2186
- accessibilityRole="button"
2187
- accessibilityState={
627
+ <View
628
+ accessibilityActions={
629
+ Array [
2188
630
  Object {
2189
- "expanded": true,
2190
- }
2191
- }
2192
- accessible={true}
2193
- enableFocusRing={true}
2194
- focusable={true}
2195
- keyUpEvents={
2196
- Array [
2197
- Object {
2198
- "key": " ",
2199
- },
2200
- Object {
2201
- "key": "Enter",
2202
- },
2203
- ]
2204
- }
2205
- onAccessibilityAction={[Function]}
2206
- onAccessibilityTap={[Function]}
2207
- onBlur={[Function]}
2208
- onClick={[Function]}
2209
- onFocus={[Function]}
2210
- onKeyDown={[Function]}
2211
- onKeyUp={[Function]}
2212
- onMouseEnter={[Function]}
2213
- onMouseLeave={[Function]}
2214
- onResponderGrant={[Function]}
2215
- onResponderMove={[Function]}
2216
- onResponderRelease={[Function]}
2217
- onResponderTerminate={[Function]}
2218
- onResponderTerminationRequest={[Function]}
2219
- onStartShouldSetResponder={[Function]}
2220
- style={
631
+ "name": "Expand",
632
+ },
2221
633
  Object {
2222
- "alignItems": "center",
2223
- "alignSelf": "flex-start",
2224
- "backgroundColor": "#ffffff",
2225
- "borderColor": "#d1d1d1",
2226
- "borderRadius": 4,
2227
- "borderWidth": 1,
2228
- "display": "flex",
2229
- "flexDirection": "row",
2230
- "justifyContent": "center",
2231
- "minHeight": 32,
2232
- "minWidth": 64,
2233
- "padding": 3,
2234
- "paddingHorizontal": 7,
2235
- "width": undefined,
2236
- }
634
+ "name": "Collapse",
635
+ },
636
+ ]
637
+ }
638
+ accessibilityLabel="Default"
639
+ accessibilityRole="button"
640
+ accessibilityState={
641
+ Object {
642
+ "expanded": true,
2237
643
  }
2238
- >
2239
- <Text
2240
- ellipsizeMode="tail"
2241
- numberOfLines={0}
2242
- onAccessibilityTap={[Function]}
2243
- style={
2244
- Object {
2245
- "color": "#242424",
2246
- "fontFamily": "Segoe UI",
2247
- "fontSize": 12,
2248
- "fontWeight": "400",
2249
- "margin": 0,
2250
- "marginBottom": 1,
2251
- "marginEnd": -2,
2252
- "marginStart": 0,
2253
- "marginTop": -1,
2254
- }
2255
- }
2256
- >
2257
- Default
2258
- </Text>
2259
- </View>,
2260
- <RCTCallout
2261
- accessibilityRole="menu"
2262
- borderColor="#616161"
2263
- borderWidth={1}
2264
- dismissBehaviors={
2265
- Array [
2266
- "preventDismissOnKeyDown",
2267
- "preventDismissOnClickOutside",
2268
- ]
644
+ }
645
+ accessible={true}
646
+ enableFocusRing={true}
647
+ focusable={true}
648
+ keyUpEvents={
649
+ Array [
650
+ Object {
651
+ "key": " ",
652
+ },
653
+ Object {
654
+ "key": "Enter",
655
+ },
656
+ ]
657
+ }
658
+ onAccessibilityAction={[Function]}
659
+ onAccessibilityTap={[Function]}
660
+ onBlur={[Function]}
661
+ onClick={[Function]}
662
+ onFocus={[Function]}
663
+ onKeyDown={[Function]}
664
+ onKeyUp={[Function]}
665
+ onMouseEnter={[Function]}
666
+ onMouseLeave={[Function]}
667
+ onResponderGrant={[Function]}
668
+ onResponderMove={[Function]}
669
+ onResponderRelease={[Function]}
670
+ onResponderTerminate={[Function]}
671
+ onResponderTerminationRequest={[Function]}
672
+ onStartShouldSetResponder={[Function]}
673
+ style={
674
+ Object {
675
+ "alignItems": "center",
676
+ "alignSelf": "flex-start",
677
+ "backgroundColor": "#ffffff",
678
+ "borderColor": "#d1d1d1",
679
+ "borderRadius": 4,
680
+ "borderWidth": 1,
681
+ "display": "flex",
682
+ "flexDirection": "row",
683
+ "justifyContent": "center",
684
+ "minHeight": 32,
685
+ "minWidth": 64,
686
+ "padding": 3,
687
+ "paddingHorizontal": 7,
688
+ "width": undefined,
2269
689
  }
2270
- doNotTakePointerCapture={false}
2271
- onDismiss={[Function]}
2272
- setInitialFocus={true}
690
+ }
691
+ >
692
+ <Text
693
+ ellipsizeMode="tail"
694
+ numberOfLines={0}
695
+ onAccessibilityTap={[Function]}
2273
696
  style={
2274
697
  Object {
2275
- "backgroundColor": "#faf9f8",
2276
- "borderColor": "#616161",
2277
- "borderWidth": 1,
698
+ "color": "#242424",
699
+ "fontFamily": "Segoe UI",
700
+ "fontSize": 12,
701
+ "fontWeight": "400",
702
+ "margin": 0,
703
+ "marginBottom": 1,
704
+ "marginEnd": -2,
705
+ "marginStart": 0,
706
+ "marginTop": -1,
2278
707
  }
2279
708
  }
2280
709
  >
2281
- <View
2282
- accessible={false}
2283
- focusable={false}
2284
- onBlur={[Function]}
2285
- onKeyDown={[Function]}
2286
- onKeyUp={[Function]}
2287
- onMouseEnter={[Function]}
2288
- onMouseLeave={[Function]}
2289
- style={
2290
- Object {
2291
- "maxHeight": undefined,
2292
- }
2293
- }
2294
- >
2295
- <View
2296
- style={
2297
- Object {
2298
- "backgroundColor": "#ffffff",
2299
- "display": "flex",
2300
- "maxWidth": 300,
2301
- "minWidth": 140,
2302
- "paddingVertical": 4,
2303
- }
2304
- }
2305
- >
2306
- <View
2307
- accessibilityLabel="Option 1"
2308
- accessibilityRole="menuitem"
2309
- accessibilityState={
2310
- Object {
2311
- "disabled": undefined,
2312
- }
2313
- }
2314
- accessible={true}
2315
- enableFocusRing={true}
2316
- focusable={true}
2317
- keyDownEvents={
2318
- Array [
2319
- Object {
2320
- "key": " ",
2321
- },
2322
- Object {
2323
- "key": "Enter",
2324
- },
2325
- ]
2326
- }
2327
- onAccessibilityTap={[Function]}
2328
- onBlur={[Function]}
2329
- onClick={[Function]}
2330
- onFocus={[Function]}
2331
- onKeyDown={[Function]}
2332
- onKeyUp={[Function]}
2333
- onMouseEnter={[Function]}
2334
- onMouseLeave={[Function]}
2335
- onResponderGrant={[Function]}
2336
- onResponderMove={[Function]}
2337
- onResponderRelease={[Function]}
2338
- onResponderTerminate={[Function]}
2339
- onResponderTerminationRequest={[Function]}
2340
- onStartShouldSetResponder={[Function]}
2341
- style={
2342
- Object {
2343
- "alignItems": "center",
2344
- "backgroundColor": "#ffffff",
2345
- "borderRadius": 0,
2346
- "display": "flex",
2347
- "flexDirection": "row",
2348
- "maxWidth": 300,
2349
- "minHeight": 24,
2350
- "minWidth": 128,
2351
- "padding": 4,
2352
- "paddingHorizontal": 8,
2353
- }
2354
- }
2355
- >
2356
- <Text
2357
- ellipsizeMode="tail"
2358
- numberOfLines={0}
2359
- onAccessibilityTap={[Function]}
2360
- style={
2361
- Object {
2362
- "color": "#242424",
2363
- "flexGrow": 1,
2364
- "fontFamily": "Segoe UI",
2365
- "fontSize": 12,
2366
- "fontWeight": "400",
2367
- "margin": 0,
2368
- }
2369
- }
2370
- >
2371
- Option 1
2372
- </Text>
2373
- </View>
2374
- <View
2375
- accessibilityActions={
2376
- Array [
2377
- Object {
2378
- "name": "Expand",
2379
- },
2380
- Object {
2381
- "name": "Collapse",
2382
- },
2383
- ]
2384
- }
2385
- accessibilityLabel="Option 2"
2386
- accessibilityRole="menuitem"
2387
- accessibilityState={
2388
- Object {
2389
- "disabled": undefined,
2390
- "expanded": false,
2391
- }
2392
- }
2393
- accessible={true}
2394
- enableFocusRing={true}
2395
- focusable={true}
2396
- keyDownEvents={
2397
- Array [
2398
- Object {
2399
- "key": "ArrowLeft",
2400
- },
2401
- Object {
2402
- "key": "ArrowRight",
2403
- },
2404
- Object {
2405
- "key": " ",
2406
- },
2407
- Object {
2408
- "key": "Enter",
2409
- },
2410
- ]
2411
- }
2412
- onAccessibilityAction={[Function]}
2413
- onAccessibilityTap={[Function]}
2414
- onBlur={[Function]}
2415
- onClick={[Function]}
2416
- onFocus={[Function]}
2417
- onKeyDown={[Function]}
2418
- onKeyUp={[Function]}
2419
- onMouseEnter={[Function]}
2420
- onMouseLeave={[Function]}
2421
- onResponderGrant={[Function]}
2422
- onResponderMove={[Function]}
2423
- onResponderRelease={[Function]}
2424
- onResponderTerminate={[Function]}
2425
- onResponderTerminationRequest={[Function]}
2426
- onStartShouldSetResponder={[Function]}
2427
- style={
2428
- Object {
2429
- "alignItems": "center",
2430
- "backgroundColor": "#ffffff",
2431
- "borderRadius": 0,
2432
- "display": "flex",
2433
- "flexDirection": "row",
2434
- "maxWidth": 300,
2435
- "minHeight": 24,
2436
- "minWidth": 128,
2437
- "padding": 4,
2438
- "paddingHorizontal": 8,
2439
- }
2440
- }
2441
- >
2442
- <Text
2443
- ellipsizeMode="tail"
2444
- numberOfLines={0}
2445
- onAccessibilityTap={[Function]}
2446
- style={
2447
- Object {
2448
- "color": "#242424",
2449
- "flexGrow": 1,
2450
- "fontFamily": "Segoe UI",
2451
- "fontSize": 12,
2452
- "fontWeight": "400",
2453
- "margin": 0,
2454
- }
2455
- }
2456
- >
2457
- Option 2
2458
- </Text>
2459
- <RNSVGSvgView
2460
- align="xMidYMid"
2461
- bbHeight={16}
2462
- bbWidth={16}
2463
- color={4280558628}
2464
- focusable={false}
2465
- height={16}
2466
- meetOrSlice={0}
2467
- minX={0}
2468
- minY={0}
2469
- style={
2470
- Array [
2471
- Object {
2472
- "backgroundColor": "transparent",
2473
- "borderWidth": 0,
2474
- },
2475
- Object {
2476
- "flex": 0,
2477
- "height": 16,
2478
- "width": 16,
2479
- },
2480
- ]
2481
- }
2482
- tintColor={4280558628}
2483
- vbHeight={16}
2484
- vbWidth={16}
2485
- width={16}
2486
- xml="
2487
- <svg>
2488
- <path fill='currentColor' d=\\"M5.73966 3.20041C5.43613 3.48226 5.41856 3.95681 5.70041 4.26034L9.22652 8L5.70041 11.7397C5.41856 12.0432 5.43613 12.5177 5.73967 12.7996C6.0432 13.0815 6.51775 13.0639 6.7996 12.7603L10.7996 8.51034C11.0668 8.22258 11.0668 7.77743 10.7996 7.48966L6.7996 3.23966C6.51775 2.93613 6.0432 2.91856 5.73966 3.20041Z\\"/>
2489
- </svg>"
2490
- >
2491
- <RNSVGGroup>
2492
- <RNSVGPath
2493
- d="M5.73966 3.20041C5.43613 3.48226 5.41856 3.95681 5.70041 4.26034L9.22652 8L5.70041 11.7397C5.41856 12.0432 5.43613 12.5177 5.73967 12.7996C6.0432 13.0815 6.51775 13.0639 6.7996 12.7603L10.7996 8.51034C11.0668 8.22258 11.0668 7.77743 10.7996 7.48966L6.7996 3.23966C6.51775 2.93613 6.0432 2.91856 5.73966 3.20041Z"
2494
- fill={
2495
- Array [
2496
- 2,
2497
- ]
2498
- }
2499
- propList={
2500
- Array [
2501
- "fill",
2502
- ]
2503
- }
2504
- />
2505
- </RNSVGGroup>
2506
- </RNSVGSvgView>
2507
- </View>
2508
- </View>
2509
- </View>
2510
- </RCTCallout>,
2511
- ]
710
+ Default
711
+ </Text>
712
+ </View>
2512
713
  `;