@hero-design/rn 8.74.0 → 8.75.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  3. package/es/index.js +800 -529
  4. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  5. package/lib/index.js +800 -528
  6. package/package.json +4 -4
  7. package/src/components/BottomSheet/__tests__/index.spec.tsx +17 -153
  8. package/src/components/BottomSheet/index.tsx +14 -13
  9. package/src/components/Collapse/__tests__/index.spec.tsx +2 -5
  10. package/src/components/FloatingIsland/StyledFloatingIsland.tsx +32 -0
  11. package/src/components/FloatingIsland/__tests__/__snapshots__/index.spec.tsx.snap +561 -0
  12. package/src/components/FloatingIsland/__tests__/index.spec.tsx +67 -0
  13. package/src/components/FloatingIsland/index.tsx +94 -0
  14. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  15. package/src/components/Icon/IconList.ts +4 -0
  16. package/src/components/Toolbar/StyledToolbar.tsx +50 -1
  17. package/src/components/Toolbar/ToolbarMessage.tsx +169 -0
  18. package/src/components/Toolbar/__tests__/ToolbarMessage.spec.tsx +161 -0
  19. package/src/components/Toolbar/__tests__/__snapshots__/ToolbarMessage.spec.tsx.snap +382 -0
  20. package/src/components/Toolbar/index.tsx +2 -0
  21. package/src/index.ts +2 -0
  22. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +46 -0
  23. package/src/theme/components/floatingIsland.ts +31 -0
  24. package/src/theme/components/toolbar.ts +19 -1
  25. package/src/theme/getTheme.ts +3 -0
  26. package/stats/8.74.1/rn-stats.html +4842 -0
  27. package/stats/8.75.0/rn-stats.html +4844 -0
  28. package/types/components/CompoundSearch/CompoundSearchHandler.d.ts +31 -0
  29. package/types/components/CompoundSearch/CompoundSearchTextInput.d.ts +60 -0
  30. package/types/components/CompoundSearch/StyledCompoundSearch.d.ts +40 -0
  31. package/types/components/CompoundSearch/index.d.ts +8 -0
  32. package/types/components/CompoundSearch/utils.d.ts +8 -0
  33. package/types/components/FloatingIsland/SingleLine/StyledSingleLine.d.ts +15 -0
  34. package/types/components/FloatingIsland/SingleLine/index.d.ts +24 -0
  35. package/types/components/FloatingIsland/StyledFloatingIsland.d.ts +19 -0
  36. package/types/components/FloatingIsland/index.d.ts +23 -0
  37. package/types/components/Icon/IconList.d.ts +1 -1
  38. package/types/components/Icon/index.d.ts +1 -1
  39. package/types/components/Icon/utils.d.ts +1 -1
  40. package/types/components/Search/utils.d.ts +2 -2
  41. package/types/components/TextInput/index.d.ts +3 -3
  42. package/types/components/Toolbar/StyledToolbar.d.ts +33 -2
  43. package/types/components/Toolbar/ToolbarMessage.d.ts +59 -0
  44. package/types/components/Toolbar/index.d.ts +1 -0
  45. package/types/index.d.ts +2 -1
  46. package/types/theme/components/compoundSearch.d.ts +36 -0
  47. package/types/theme/components/floatingIsland.d.ts +32 -0
  48. package/types/theme/components/toolbar.d.ts +16 -0
  49. package/types/theme/getTheme.d.ts +2 -0
  50. package/.turbo/turbo-build.log +0 -8
  51. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +0 -751
package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap DELETED
@@ -1,751 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
4
- <View
5
- style={
6
- {
7
- "flex": 1,
8
- }
9
- }
10
- >
11
- <View
12
- pointerEvents="box-none"
13
- position="bottom"
14
- style={
15
- [
16
- {
17
- "bottom": 0,
18
- "elevation": 9999,
19
- "flexDirection": "column-reverse",
20
- "left": 0,
21
- "paddingHorizontal": 24,
22
- "paddingVertical": 16,
23
- "position": "absolute",
24
- "right": 0,
25
- "top": 0,
26
- },
27
- undefined,
28
- ]
29
- }
30
- />
31
- </View>
32
- `;
33
-
34
- exports[`BottomSheet renders correctly with close state 1`] = `
35
- <View
36
- style={
37
- {
38
- "flex": 1,
39
- }
40
- }
41
- >
42
- <View
43
- pointerEvents="box-none"
44
- position="bottom"
45
- style={
46
- [
47
- {
48
- "bottom": 0,
49
- "elevation": 9999,
50
- "flexDirection": "column-reverse",
51
- "left": 0,
52
- "paddingHorizontal": 24,
53
- "paddingVertical": 16,
54
- "position": "absolute",
55
- "right": 0,
56
- "top": 0,
57
- },
58
- undefined,
59
- ]
60
- }
61
- />
62
- </View>
63
- `;
64
-
65
- exports[`BottomSheet renders correctly with open state 1`] = `
66
- <View
67
- style={
68
- {
69
- "flex": 1,
70
- }
71
- }
72
- >
73
- <Modal
74
- hardwareAccelerated={false}
75
- onRequestClose={[MockFunction]}
76
- supportedOrientations={
77
- [
78
- "portrait",
79
- ]
80
- }
81
- transparent={true}
82
- visible={true}
83
- >
84
- <View
85
- pointerEvents="box-none"
86
- style={
87
- [
88
- {
89
- "bottom": 0,
90
- "flexDirection": "column-reverse",
91
- "left": 0,
92
- "position": "absolute",
93
- "right": 0,
94
- "top": 0,
95
- },
96
- undefined,
97
- ]
98
- }
99
- >
100
- <View
101
- onLayout={[Function]}
102
- style={
103
- [
104
- [
105
- {
106
- "flex": 1,
107
- "flexDirection": "column-reverse",
108
- },
109
- undefined,
110
- ],
111
- {
112
- "paddingBottom": 0,
113
- },
114
- ]
115
- }
116
- >
117
- <View
118
- accessibilityState={
119
- {
120
- "busy": undefined,
121
- "checked": undefined,
122
- "disabled": undefined,
123
- "expanded": undefined,
124
- "selected": undefined,
125
- }
126
- }
127
- accessibilityValue={
128
- {
129
- "max": undefined,
130
- "min": undefined,
131
- "now": undefined,
132
- "text": undefined,
133
- }
134
- }
135
- accessible={true}
136
- collapsable={false}
137
- focusable={true}
138
- onBlur={[Function]}
139
- onClick={[Function]}
140
- onFocus={[Function]}
141
- onResponderGrant={[Function]}
142
- onResponderMove={[Function]}
143
- onResponderRelease={[Function]}
144
- onResponderTerminate={[Function]}
145
- onResponderTerminationRequest={[Function]}
146
- onStartShouldSetResponder={[Function]}
147
- style={
148
- {
149
- "backgroundColor": "#000000",
150
- "bottom": 0,
151
- "left": 0,
152
- "opacity": 0,
153
- "position": "absolute",
154
- "right": 0,
155
- "top": 0,
156
- }
157
- }
158
- />
159
- <RCTSafeAreaView
160
- collapsable={false}
161
- style={
162
- {
163
- "backgroundColor": "#ffffff",
164
- "borderTopLeftRadius": 16,
165
- "borderTopRightRadius": 16,
166
- "elevation": 10,
167
- "maxHeight": "94%",
168
- "shadowColor": "#001f23",
169
- "shadowOffset": {
170
- "height": 3,
171
- "width": 0,
172
- },
173
- "shadowOpacity": 0.4,
174
- "shadowRadius": 16,
175
- "transform": [
176
- {
177
- "scaleY": 1,
178
- },
179
- {
180
- "translateY": 1334,
181
- },
182
- ],
183
- "width": "100%",
184
- }
185
- }
186
- >
187
- <View
188
- style={
189
- [
190
- {
191
- "flexDirection": "row",
192
- "paddingHorizontal": 16,
193
- "paddingVertical": 8,
194
- },
195
- undefined,
196
- ]
197
- }
198
- >
199
- <View
200
- style={
201
- [
202
- {
203
- "flex": 1,
204
- "justifyContent": "center",
205
- },
206
- undefined,
207
- ]
208
- }
209
- >
210
- <Text
211
- allowFontScaling={false}
212
- style={
213
- [
214
- {
215
- "color": "#001f23",
216
- "fontFamily": "BeVietnamPro-SemiBold",
217
- "fontSize": 16,
218
- "letterSpacing": 0.24,
219
- "lineHeight": 24,
220
- },
221
- undefined,
222
- ]
223
- }
224
- themeIntent="body"
225
- themeTypeface="neutral"
226
- themeVariant="regular-bold"
227
- >
228
- Title
229
- </Text>
230
- </View>
231
- <View
232
- style={
233
- [
234
- {
235
- "alignItems": "flex-end",
236
- "height": 48,
237
- "justifyContent": "center",
238
- "marginLeft": 12,
239
- "width": 48,
240
- },
241
- undefined,
242
- ]
243
- }
244
- >
245
- <View
246
- accessibilityState={
247
- {
248
- "busy": undefined,
249
- "checked": undefined,
250
- "disabled": undefined,
251
- "expanded": undefined,
252
- "selected": undefined,
253
- }
254
- }
255
- accessibilityValue={
256
- {
257
- "max": undefined,
258
- "min": undefined,
259
- "now": undefined,
260
- "text": undefined,
261
- }
262
- }
263
- accessible={true}
264
- collapsable={false}
265
- focusable={true}
266
- onClick={[Function]}
267
- onResponderGrant={[Function]}
268
- onResponderMove={[Function]}
269
- onResponderRelease={[Function]}
270
- onResponderTerminate={[Function]}
271
- onResponderTerminationRequest={[Function]}
272
- onStartShouldSetResponder={[Function]}
273
- style={
274
- {
275
- "opacity": 1,
276
- }
277
- }
278
- testID="bottom-sheet-close-icon"
279
- >
280
- <HeroIcon
281
- name="cancel"
282
- style={
283
- [
284
- {
285
- "color": "#001f23",
286
- "fontSize": 16,
287
- },
288
- undefined,
289
- ]
290
- }
291
- themeIntent="text"
292
- themeSize="xsmall"
293
- />
294
- </View>
295
- </View>
296
- </View>
297
- <Text>
298
- Content
299
- </Text>
300
- <View>
301
- <View
302
- style={
303
- [
304
- {
305
- "alignItems": "center",
306
- "flexDirection": "row",
307
- "justifyContent": "flex-end",
308
- "paddingHorizontal": 12,
309
- "paddingVertical": 2,
310
- },
311
- undefined,
312
- ]
313
- }
314
- >
315
- <View
316
- accessibilityRole="button"
317
- accessibilityState={
318
- {
319
- "busy": undefined,
320
- "checked": undefined,
321
- "disabled": undefined,
322
- "expanded": undefined,
323
- "selected": undefined,
324
- }
325
- }
326
- accessibilityValue={
327
- {
328
- "max": undefined,
329
- "min": undefined,
330
- "now": undefined,
331
- "text": undefined,
332
- }
333
- }
334
- accessible={true}
335
- collapsable={false}
336
- focusable={false}
337
- onClick={[Function]}
338
- onResponderGrant={[Function]}
339
- onResponderMove={[Function]}
340
- onResponderRelease={[Function]}
341
- onResponderTerminate={[Function]}
342
- onResponderTerminationRequest={[Function]}
343
- onStartShouldSetResponder={[Function]}
344
- style={
345
- {
346
- "opacity": 1,
347
- }
348
- }
349
- >
350
- <View
351
- style={
352
- [
353
- {},
354
- ]
355
- }
356
- >
357
- <Text
358
- style={
359
- [
360
- {
361
- "color": "#007AFF",
362
- "fontSize": 18,
363
- "margin": 8,
364
- "textAlign": "center",
365
- },
366
- ]
367
- }
368
- >
369
- Footer CTA
370
- </Text>
371
- </View>
372
- </View>
373
- </View>
374
- </View>
375
- </RCTSafeAreaView>
376
- </View>
377
- </View>
378
- </Modal>
379
- <View
380
- pointerEvents="box-none"
381
- position="bottom"
382
- style={
383
- [
384
- {
385
- "bottom": 0,
386
- "elevation": 9999,
387
- "flexDirection": "column-reverse",
388
- "left": 0,
389
- "paddingHorizontal": 24,
390
- "paddingVertical": 16,
391
- "position": "absolute",
392
- "right": 0,
393
- "top": 0,
394
- },
395
- undefined,
396
- ]
397
- }
398
- />
399
- </View>
400
- `;
401
-
402
- exports[`BottomSheet renders floating BottomSheet correctly 1`] = `
403
- <View
404
- style={
405
- {
406
- "flex": 1,
407
- }
408
- }
409
- >
410
- <Modal
411
- hardwareAccelerated={false}
412
- onRequestClose={[MockFunction]}
413
- supportedOrientations={
414
- [
415
- "portrait",
416
- ]
417
- }
418
- transparent={true}
419
- visible={true}
420
- >
421
- <View
422
- pointerEvents="box-none"
423
- style={
424
- [
425
- {
426
- "bottom": 0,
427
- "flexDirection": "column-reverse",
428
- "left": 0,
429
- "position": "absolute",
430
- "right": 0,
431
- "top": 0,
432
- },
433
- undefined,
434
- ]
435
- }
436
- >
437
- <View
438
- onLayout={[Function]}
439
- style={
440
- [
441
- [
442
- {
443
- "flex": 1,
444
- "flexDirection": "column-reverse",
445
- },
446
- undefined,
447
- ],
448
- {
449
- "paddingBottom": 0,
450
- },
451
- ]
452
- }
453
- >
454
- <View
455
- accessibilityState={
456
- {
457
- "busy": undefined,
458
- "checked": undefined,
459
- "disabled": undefined,
460
- "expanded": undefined,
461
- "selected": undefined,
462
- }
463
- }
464
- accessibilityValue={
465
- {
466
- "max": undefined,
467
- "min": undefined,
468
- "now": undefined,
469
- "text": undefined,
470
- }
471
- }
472
- accessible={true}
473
- collapsable={false}
474
- focusable={true}
475
- onBlur={[Function]}
476
- onClick={[Function]}
477
- onFocus={[Function]}
478
- onResponderGrant={[Function]}
479
- onResponderMove={[Function]}
480
- onResponderRelease={[Function]}
481
- onResponderTerminate={[Function]}
482
- onResponderTerminationRequest={[Function]}
483
- onStartShouldSetResponder={[Function]}
484
- style={
485
- {
486
- "backgroundColor": "#000000",
487
- "bottom": 0,
488
- "left": 0,
489
- "opacity": 0,
490
- "position": "absolute",
491
- "right": 0,
492
- "top": 0,
493
- }
494
- }
495
- />
496
- <RCTSafeAreaView
497
- collapsable={false}
498
- style={
499
- {
500
- "margin": 16,
501
- }
502
- }
503
- >
504
- <View
505
- collapsable={false}
506
- style={
507
- {
508
- "backgroundColor": "#ffffff",
509
- "borderRadius": 32,
510
- "elevation": 10,
511
- "maxHeight": "100%",
512
- "padding": 8,
513
- "shadowColor": "#001f23",
514
- "shadowOffset": {
515
- "height": 3,
516
- "width": 0,
517
- },
518
- "shadowOpacity": 0.4,
519
- "shadowRadius": 16,
520
- "transform": [
521
- {
522
- "scaleY": 1,
523
- },
524
- {
525
- "translateY": 1334,
526
- },
527
- ],
528
- "width": "100%",
529
- }
530
- }
531
- >
532
- <View
533
- style={
534
- [
535
- {
536
- "flexDirection": "row",
537
- "paddingHorizontal": 16,
538
- "paddingVertical": 8,
539
- },
540
- undefined,
541
- ]
542
- }
543
- >
544
- <View
545
- style={
546
- [
547
- {
548
- "flex": 1,
549
- "justifyContent": "center",
550
- },
551
- undefined,
552
- ]
553
- }
554
- >
555
- <Text
556
- allowFontScaling={false}
557
- style={
558
- [
559
- {
560
- "color": "#001f23",
561
- "fontFamily": "BeVietnamPro-SemiBold",
562
- "fontSize": 16,
563
- "letterSpacing": 0.24,
564
- "lineHeight": 24,
565
- },
566
- undefined,
567
- ]
568
- }
569
- themeIntent="body"
570
- themeTypeface="neutral"
571
- themeVariant="regular-bold"
572
- >
573
- Title
574
- </Text>
575
- </View>
576
- <View
577
- style={
578
- [
579
- {
580
- "alignItems": "flex-end",
581
- "height": 48,
582
- "justifyContent": "center",
583
- "marginLeft": 12,
584
- "width": 48,
585
- },
586
- undefined,
587
- ]
588
- }
589
- >
590
- <View
591
- accessibilityState={
592
- {
593
- "busy": undefined,
594
- "checked": undefined,
595
- "disabled": undefined,
596
- "expanded": undefined,
597
- "selected": undefined,
598
- }
599
- }
600
- accessibilityValue={
601
- {
602
- "max": undefined,
603
- "min": undefined,
604
- "now": undefined,
605
- "text": undefined,
606
- }
607
- }
608
- accessible={true}
609
- collapsable={false}
610
- focusable={true}
611
- onClick={[Function]}
612
- onResponderGrant={[Function]}
613
- onResponderMove={[Function]}
614
- onResponderRelease={[Function]}
615
- onResponderTerminate={[Function]}
616
- onResponderTerminationRequest={[Function]}
617
- onStartShouldSetResponder={[Function]}
618
- style={
619
- {
620
- "backgroundColor": "#dadbde",
621
- "borderRadius": 999,
622
- "opacity": 1,
623
- "padding": 8,
624
- }
625
- }
626
- testID="bottom-sheet-close-icon"
627
- >
628
- <HeroIcon
629
- name="cancel"
630
- style={
631
- [
632
- {
633
- "color": "#001f23",
634
- "fontSize": 24,
635
- },
636
- {
637
- "fontSize": 12,
638
- },
639
- ]
640
- }
641
- themeIntent="text"
642
- themeSize="medium"
643
- />
644
- </View>
645
- </View>
646
- </View>
647
- <Text>
648
- Content
649
- </Text>
650
- <View>
651
- <View
652
- style={
653
- [
654
- {
655
- "alignItems": "center",
656
- "flexDirection": "row",
657
- "justifyContent": "flex-end",
658
- "paddingHorizontal": 12,
659
- "paddingVertical": 2,
660
- },
661
- undefined,
662
- ]
663
- }
664
- >
665
- <View
666
- accessibilityRole="button"
667
- accessibilityState={
668
- {
669
- "busy": undefined,
670
- "checked": undefined,
671
- "disabled": undefined,
672
- "expanded": undefined,
673
- "selected": undefined,
674
- }
675
- }
676
- accessibilityValue={
677
- {
678
- "max": undefined,
679
- "min": undefined,
680
- "now": undefined,
681
- "text": undefined,
682
- }
683
- }
684
- accessible={true}
685
- collapsable={false}
686
- focusable={false}
687
- onClick={[Function]}
688
- onResponderGrant={[Function]}
689
- onResponderMove={[Function]}
690
- onResponderRelease={[Function]}
691
- onResponderTerminate={[Function]}
692
- onResponderTerminationRequest={[Function]}
693
- onStartShouldSetResponder={[Function]}
694
- style={
695
- {
696
- "opacity": 1,
697
- }
698
- }
699
- >
700
- <View
701
- style={
702
- [
703
- {},
704
- ]
705
- }
706
- >
707
- <Text
708
- style={
709
- [
710
- {
711
- "color": "#007AFF",
712
- "fontSize": 18,
713
- "margin": 8,
714
- "textAlign": "center",
715
- },
716
- ]
717
- }
718
- >
719
- Footer CTA
720
- </Text>
721
- </View>
722
- </View>
723
- </View>
724
- </View>
725
- </View>
726
- </RCTSafeAreaView>
727
- </View>
728
- </View>
729
- </Modal>
730
- <View
731
- pointerEvents="box-none"
732
- position="bottom"
733
- style={
734
- [
735
- {
736
- "bottom": 0,
737
- "elevation": 9999,
738
- "flexDirection": "column-reverse",
739
- "left": 0,
740
- "paddingHorizontal": 24,
741
- "paddingVertical": 16,
742
- "position": "absolute",
743
- "right": 0,
744
- "top": 0,
745
- },
746
- undefined,
747
- ]
748
- }
749
- />
750
- </View>
751
- `;