@hero-design/rn 8.57.0 → 8.58.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 (28) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +25 -0
  3. package/es/index.js +172 -94
  4. package/lib/index.js +172 -94
  5. package/package.json +6 -6
  6. package/src/components/Calendar/__tests__/index.spec.tsx +5 -5
  7. package/src/components/Carousel/CardCarousel.tsx +7 -9
  8. package/src/components/Carousel/CarouselItem.tsx +26 -14
  9. package/src/components/Carousel/StyledCarousel.tsx +2 -3
  10. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +494 -48
  11. package/src/components/Carousel/__tests__/index.spec.tsx +34 -1
  12. package/src/components/Carousel/types.ts +3 -3
  13. package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx +32 -29
  14. package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx +10 -12
  15. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap +18 -6
  16. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap +12 -4
  17. package/src/components/TextInput/__tests__/index.spec.tsx +148 -1
  18. package/src/components/TextInput/index.tsx +135 -57
  19. package/src/components/Toast/ToastContext.ts +20 -2
  20. package/src/components/Toast/ToastProvider.tsx +7 -4
  21. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +0 -1
  22. package/src/theme/components/carousel.ts +0 -1
  23. package/types/components/Carousel/CardCarousel.d.ts +1 -0
  24. package/types/components/Carousel/StyledCarousel.d.ts +2 -2
  25. package/types/components/Carousel/types.d.ts +3 -3
  26. package/types/components/TextInput/index.d.ts +29 -1
  27. package/types/components/Toast/ToastContext.d.ts +1 -0
  28. package/types/theme/components/carousel.d.ts +0 -1
package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -93,6 +93,10 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
93
93
  "width": 30,
94
94
  },
95
95
  },
96
+ {
97
+ "background": "#ccd2d3",
98
+ "heading": "Test slide 5",
99
+ },
96
100
  ]
97
101
  }
98
102
  getItem={[Function]}
@@ -169,19 +173,19 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
169
173
  "resizeMode": "contain",
170
174
  "width": "100%",
171
175
  },
172
- undefined,
176
+ {
177
+ "marginBottom": 16,
178
+ },
173
179
  ],
174
180
  ]
175
181
  }
176
182
  />
177
183
  <View
178
- marginTop="large"
179
- paddingHorizontal="large"
184
+ paddingHorizontal="medium"
180
185
  style={
181
186
  [
182
187
  {
183
- "marginTop": 24,
184
- "paddingHorizontal": 24,
188
+ "paddingHorizontal": 16,
185
189
  },
186
190
  [
187
191
  {
@@ -207,7 +211,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
207
211
  [
208
212
  {
209
213
  "marginBottom": 16,
210
- "marginTop": 8,
211
214
  },
212
215
  undefined,
213
216
  ],
@@ -283,19 +286,19 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
283
286
  "resizeMode": "contain",
284
287
  "width": "100%",
285
288
  },
286
- undefined,
289
+ {
290
+ "marginBottom": 16,
291
+ },
287
292
  ],
288
293
  ]
289
294
  }
290
295
  />
291
296
  <View
292
- marginTop="large"
293
- paddingHorizontal="large"
297
+ paddingHorizontal="medium"
294
298
  style={
295
299
  [
296
300
  {
297
- "marginTop": 24,
298
- "paddingHorizontal": 24,
301
+ "paddingHorizontal": 16,
299
302
  },
300
303
  [
301
304
  {
@@ -338,7 +341,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
338
341
  [
339
342
  {
340
343
  "marginBottom": 16,
341
- "marginTop": 8,
342
344
  },
343
345
  undefined,
344
346
  ],
@@ -419,20 +421,20 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
419
421
  "resizeMode": "cover",
420
422
  "width": 30,
421
423
  },
422
- undefined,
424
+ {
425
+ "marginBottom": 16,
426
+ },
423
427
  ],
424
428
  ]
425
429
  }
426
430
  width={30}
427
431
  />
428
432
  <View
429
- marginTop="large"
430
- paddingHorizontal="large"
433
+ paddingHorizontal="medium"
431
434
  style={
432
435
  [
433
436
  {
434
- "marginTop": 24,
435
- "paddingHorizontal": 24,
437
+ "paddingHorizontal": 16,
436
438
  },
437
439
  [
438
440
  {
@@ -458,7 +460,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
458
460
  [
459
461
  {
460
462
  "marginBottom": 16,
461
- "marginTop": 8,
462
463
  },
463
464
  undefined,
464
465
  ],
@@ -537,20 +538,20 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
537
538
  "resizeMode": "contain",
538
539
  "width": 30,
539
540
  },
540
- undefined,
541
+ {
542
+ "marginBottom": 16,
543
+ },
541
544
  ],
542
545
  ]
543
546
  }
544
547
  width={30}
545
548
  />
546
549
  <View
547
- marginTop="large"
548
- paddingHorizontal="large"
550
+ paddingHorizontal="medium"
549
551
  style={
550
552
  [
551
553
  {
552
- "marginTop": 24,
553
- "paddingHorizontal": 24,
554
+ "paddingHorizontal": 16,
554
555
  },
555
556
  [
556
557
  {
@@ -576,7 +577,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
576
577
  [
577
578
  {
578
579
  "marginBottom": 16,
579
- "marginTop": 8,
580
580
  },
581
581
  undefined,
582
582
  ],
@@ -591,6 +591,72 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
591
591
  </View>
592
592
  </View>
593
593
  </View>
594
+ <View
595
+ onFocusCapture={[Function]}
596
+ style={
597
+ [
598
+ {
599
+ "flexDirection": "row",
600
+ },
601
+ null,
602
+ ]
603
+ }
604
+ >
605
+ <View
606
+ style={
607
+ [
608
+ {},
609
+ {
610
+ "width": 300,
611
+ },
612
+ ]
613
+ }
614
+ >
615
+ <View
616
+ paddingHorizontal="medium"
617
+ style={
618
+ [
619
+ {
620
+ "paddingHorizontal": 16,
621
+ },
622
+ [
623
+ {
624
+ "width": 300,
625
+ },
626
+ undefined,
627
+ ],
628
+ ]
629
+ }
630
+ width={300}
631
+ >
632
+ <Text
633
+ allowFontScaling={false}
634
+ style={
635
+ [
636
+ {
637
+ "color": "#001f23",
638
+ "fontFamily": "RebondGrotesque-SemiBold",
639
+ "fontSize": 36,
640
+ "letterSpacing": 1.5,
641
+ "lineHeight": 44,
642
+ },
643
+ [
644
+ {
645
+ "marginBottom": 16,
646
+ },
647
+ undefined,
648
+ ],
649
+ ]
650
+ }
651
+ themeIntent="body"
652
+ themeLevel="h1"
653
+ themeTypeface="playful"
654
+ >
655
+ Test slide 5
656
+ </Text>
657
+ </View>
658
+ </View>
659
+ </View>
594
660
  </View>
595
661
  </RCTScrollView>
596
662
  <View
@@ -770,6 +836,25 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
770
836
  }
771
837
  testID="page-control-indicator3"
772
838
  />
839
+ <View
840
+ accessibilityState={
841
+ {
842
+ "selected": false,
843
+ }
844
+ }
845
+ collapsable={false}
846
+ style={
847
+ {
848
+ "backgroundColor": "#401960",
849
+ "borderRadius": 999,
850
+ "height": 8,
851
+ "marginHorizontal": 8,
852
+ "opacity": 0.5,
853
+ "width": 8,
854
+ }
855
+ }
856
+ testID="page-control-indicator4"
857
+ />
773
858
  </View>
774
859
  </View>
775
860
  </View>
@@ -928,6 +1013,25 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
928
1013
  }
929
1014
  testID="page-control-indicator3"
930
1015
  />
1016
+ <View
1017
+ accessibilityState={
1018
+ {
1019
+ "selected": false,
1020
+ }
1021
+ }
1022
+ collapsable={false}
1023
+ style={
1024
+ {
1025
+ "backgroundColor": "#401960",
1026
+ "borderRadius": 999,
1027
+ "height": 8,
1028
+ "marginHorizontal": 8,
1029
+ "opacity": 0.5,
1030
+ "width": 8,
1031
+ }
1032
+ }
1033
+ testID="page-control-indicator4"
1034
+ />
931
1035
  </View>
932
1036
  </View>
933
1037
  <View
@@ -984,6 +1088,10 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
984
1088
  "width": 30,
985
1089
  },
986
1090
  },
1091
+ {
1092
+ "background": "#ccd2d3",
1093
+ "heading": "Test slide 5",
1094
+ },
987
1095
  ]
988
1096
  }
989
1097
  getItem={[Function]}
@@ -1060,19 +1168,19 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1060
1168
  "resizeMode": "contain",
1061
1169
  "width": "100%",
1062
1170
  },
1063
- undefined,
1171
+ {
1172
+ "marginBottom": 16,
1173
+ },
1064
1174
  ],
1065
1175
  ]
1066
1176
  }
1067
1177
  />
1068
1178
  <View
1069
- marginTop="large"
1070
- paddingHorizontal="large"
1179
+ paddingHorizontal="medium"
1071
1180
  style={
1072
1181
  [
1073
1182
  {
1074
- "marginTop": 24,
1075
- "paddingHorizontal": 24,
1183
+ "paddingHorizontal": 16,
1076
1184
  },
1077
1185
  [
1078
1186
  {
@@ -1098,7 +1206,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1098
1206
  [
1099
1207
  {
1100
1208
  "marginBottom": 16,
1101
- "marginTop": 8,
1102
1209
  },
1103
1210
  undefined,
1104
1211
  ],
@@ -1174,19 +1281,19 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1174
1281
  "resizeMode": "contain",
1175
1282
  "width": "100%",
1176
1283
  },
1177
- undefined,
1284
+ {
1285
+ "marginBottom": 16,
1286
+ },
1178
1287
  ],
1179
1288
  ]
1180
1289
  }
1181
1290
  />
1182
1291
  <View
1183
- marginTop="large"
1184
- paddingHorizontal="large"
1292
+ paddingHorizontal="medium"
1185
1293
  style={
1186
1294
  [
1187
1295
  {
1188
- "marginTop": 24,
1189
- "paddingHorizontal": 24,
1296
+ "paddingHorizontal": 16,
1190
1297
  },
1191
1298
  [
1192
1299
  {
@@ -1229,7 +1336,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1229
1336
  [
1230
1337
  {
1231
1338
  "marginBottom": 16,
1232
- "marginTop": 8,
1233
1339
  },
1234
1340
  undefined,
1235
1341
  ],
@@ -1310,20 +1416,20 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1310
1416
  "resizeMode": "cover",
1311
1417
  "width": 30,
1312
1418
  },
1313
- undefined,
1419
+ {
1420
+ "marginBottom": 16,
1421
+ },
1314
1422
  ],
1315
1423
  ]
1316
1424
  }
1317
1425
  width={30}
1318
1426
  />
1319
1427
  <View
1320
- marginTop="large"
1321
- paddingHorizontal="large"
1428
+ paddingHorizontal="medium"
1322
1429
  style={
1323
1430
  [
1324
1431
  {
1325
- "marginTop": 24,
1326
- "paddingHorizontal": 24,
1432
+ "paddingHorizontal": 16,
1327
1433
  },
1328
1434
  [
1329
1435
  {
@@ -1349,7 +1455,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1349
1455
  [
1350
1456
  {
1351
1457
  "marginBottom": 16,
1352
- "marginTop": 8,
1353
1458
  },
1354
1459
  undefined,
1355
1460
  ],
@@ -1428,20 +1533,20 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1428
1533
  "resizeMode": "contain",
1429
1534
  "width": 30,
1430
1535
  },
1431
- undefined,
1536
+ {
1537
+ "marginBottom": 16,
1538
+ },
1432
1539
  ],
1433
1540
  ]
1434
1541
  }
1435
1542
  width={30}
1436
1543
  />
1437
1544
  <View
1438
- marginTop="large"
1439
- paddingHorizontal="large"
1545
+ paddingHorizontal="medium"
1440
1546
  style={
1441
1547
  [
1442
1548
  {
1443
- "marginTop": 24,
1444
- "paddingHorizontal": 24,
1549
+ "paddingHorizontal": 16,
1445
1550
  },
1446
1551
  [
1447
1552
  {
@@ -1467,7 +1572,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1467
1572
  [
1468
1573
  {
1469
1574
  "marginBottom": 16,
1470
- "marginTop": 8,
1471
1575
  },
1472
1576
  undefined,
1473
1577
  ],
@@ -1482,6 +1586,348 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1482
1586
  </View>
1483
1587
  </View>
1484
1588
  </View>
1589
+ <View
1590
+ onFocusCapture={[Function]}
1591
+ style={
1592
+ [
1593
+ {
1594
+ "flexDirection": "row",
1595
+ },
1596
+ null,
1597
+ ]
1598
+ }
1599
+ >
1600
+ <View
1601
+ style={
1602
+ [
1603
+ {},
1604
+ {
1605
+ "width": 300,
1606
+ },
1607
+ ]
1608
+ }
1609
+ >
1610
+ <View
1611
+ paddingHorizontal="medium"
1612
+ style={
1613
+ [
1614
+ {
1615
+ "paddingHorizontal": 16,
1616
+ },
1617
+ [
1618
+ {
1619
+ "width": 300,
1620
+ },
1621
+ undefined,
1622
+ ],
1623
+ ]
1624
+ }
1625
+ width={300}
1626
+ >
1627
+ <Text
1628
+ allowFontScaling={false}
1629
+ style={
1630
+ [
1631
+ {
1632
+ "color": "#001f23",
1633
+ "fontFamily": "RebondGrotesque-SemiBold",
1634
+ "fontSize": 36,
1635
+ "letterSpacing": 1.5,
1636
+ "lineHeight": 44,
1637
+ },
1638
+ [
1639
+ {
1640
+ "marginBottom": 16,
1641
+ },
1642
+ undefined,
1643
+ ],
1644
+ ]
1645
+ }
1646
+ themeIntent="body"
1647
+ themeLevel="h1"
1648
+ themeTypeface="playful"
1649
+ >
1650
+ Test slide 5
1651
+ </Text>
1652
+ </View>
1653
+ </View>
1654
+ </View>
1655
+ </View>
1656
+ </RCTScrollView>
1657
+ <View
1658
+ style={
1659
+ [
1660
+ {
1661
+ "flexDirection": "row",
1662
+ "justifyContent": "space-between",
1663
+ "marginBottom": 24,
1664
+ "paddingHorizontal": 24,
1665
+ "paddingVertical": 16,
1666
+ },
1667
+ undefined,
1668
+ ]
1669
+ }
1670
+ >
1671
+ <View
1672
+ accessibilityState={
1673
+ {
1674
+ "disabled": false,
1675
+ }
1676
+ }
1677
+ accessibilityValue={
1678
+ {
1679
+ "max": undefined,
1680
+ "min": undefined,
1681
+ "now": undefined,
1682
+ "text": undefined,
1683
+ }
1684
+ }
1685
+ accessible={true}
1686
+ focusable={true}
1687
+ onClick={[Function]}
1688
+ onResponderGrant={[Function]}
1689
+ onResponderMove={[Function]}
1690
+ onResponderRelease={[Function]}
1691
+ onResponderTerminate={[Function]}
1692
+ onResponderTerminationRequest={[Function]}
1693
+ onStartShouldSetResponder={[Function]}
1694
+ style={
1695
+ [
1696
+ {
1697
+ "alignItems": "center",
1698
+ "alignSelf": "stretch",
1699
+ "backgroundColor": "#401960",
1700
+ "borderRadius": 32,
1701
+ "flexDirection": "row",
1702
+ "height": 60,
1703
+ "justifyContent": "center",
1704
+ "padding": 16,
1705
+ },
1706
+ undefined,
1707
+ ]
1708
+ }
1709
+ >
1710
+ <Text
1711
+ allowFontScaling={false}
1712
+ disabled={false}
1713
+ ellipsizeMode="tail"
1714
+ numberOfLines={1}
1715
+ style={
1716
+ [
1717
+ {
1718
+ "color": "#001f23",
1719
+ "fontFamily": "BeVietnamPro-SemiBold",
1720
+ "fontSize": 18,
1721
+ "letterSpacing": 0.24,
1722
+ "lineHeight": 28,
1723
+ },
1724
+ [
1725
+ {
1726
+ "color": "#ffffff",
1727
+ "flexShrink": 1,
1728
+ "textAlign": "center",
1729
+ },
1730
+ undefined,
1731
+ ],
1732
+ ]
1733
+ }
1734
+ themeButtonVariant="filled-primary"
1735
+ themeIntent="body"
1736
+ themeLevel="h5"
1737
+ themeTypeface="neutral"
1738
+ >
1739
+ Skip
1740
+ </Text>
1741
+ </View>
1742
+ </View>
1743
+ </View>
1744
+ </View>
1745
+ <View
1746
+ pointerEvents="box-none"
1747
+ position="bottom"
1748
+ style={
1749
+ [
1750
+ {
1751
+ "bottom": 0,
1752
+ "elevation": 9999,
1753
+ "flexDirection": "column-reverse",
1754
+ "left": 0,
1755
+ "paddingHorizontal": 24,
1756
+ "paddingVertical": 16,
1757
+ "position": "absolute",
1758
+ "right": 0,
1759
+ "top": 0,
1760
+ },
1761
+ undefined,
1762
+ ]
1763
+ }
1764
+ />
1765
+ </View>
1766
+ `;
1767
+
1768
+ exports[`Carousel should render correctly when image is undefined 1`] = `
1769
+ <View
1770
+ style={
1771
+ {
1772
+ "flex": 1,
1773
+ }
1774
+ }
1775
+ >
1776
+ <View
1777
+ testID="carousel"
1778
+ >
1779
+ <View
1780
+ style={
1781
+ [
1782
+ {
1783
+ "backgroundColor": "#ccd2d3",
1784
+ "bottom": 0,
1785
+ "left": 0,
1786
+ "position": "absolute",
1787
+ "right": 0,
1788
+ "top": 0,
1789
+ },
1790
+ undefined,
1791
+ ]
1792
+ }
1793
+ themeSlideBackground="#ccd2d3"
1794
+ />
1795
+ <View
1796
+ style={
1797
+ [
1798
+ {
1799
+ "alignItems": "center",
1800
+ "height": 48,
1801
+ "justifyContent": "center",
1802
+ },
1803
+ undefined,
1804
+ ]
1805
+ }
1806
+ />
1807
+ <View
1808
+ style={
1809
+ [
1810
+ {
1811
+ "flexGrow": 2,
1812
+ "justifyContent": "space-between",
1813
+ },
1814
+ undefined,
1815
+ ]
1816
+ }
1817
+ >
1818
+ <RCTScrollView
1819
+ bounces={false}
1820
+ data={
1821
+ [
1822
+ {
1823
+ "background": "#ccd2d3",
1824
+ "heading": "Test slide 5",
1825
+ },
1826
+ ]
1827
+ }
1828
+ getItem={[Function]}
1829
+ getItemCount={[Function]}
1830
+ getItemLayout={[Function]}
1831
+ horizontal={true}
1832
+ keyExtractor={[Function]}
1833
+ onContentSizeChange={[Function]}
1834
+ onLayout={[Function]}
1835
+ onMomentumScrollBegin={[Function]}
1836
+ onMomentumScrollEnd={[Function]}
1837
+ onScroll={[Function]}
1838
+ onScrollBeginDrag={[Function]}
1839
+ onScrollEndDrag={[Function]}
1840
+ onViewableItemsChanged={[Function]}
1841
+ pagingEnabled={true}
1842
+ removeClippedSubviews={false}
1843
+ renderItem={[Function]}
1844
+ scrollEventThrottle={32}
1845
+ showsHorizontalScrollIndicator={false}
1846
+ stickyHeaderIndices={[]}
1847
+ testID="carousel_flatlist"
1848
+ viewabilityConfig={
1849
+ {
1850
+ "viewAreaCoveragePercentThreshold": 50,
1851
+ }
1852
+ }
1853
+ viewabilityConfigCallbackPairs={
1854
+ [
1855
+ {
1856
+ "onViewableItemsChanged": [Function],
1857
+ "viewabilityConfig": {
1858
+ "viewAreaCoveragePercentThreshold": 50,
1859
+ },
1860
+ },
1861
+ ]
1862
+ }
1863
+ >
1864
+ <View>
1865
+ <View
1866
+ onFocusCapture={[Function]}
1867
+ style={
1868
+ [
1869
+ {
1870
+ "flexDirection": "row",
1871
+ },
1872
+ null,
1873
+ ]
1874
+ }
1875
+ >
1876
+ <View
1877
+ style={
1878
+ [
1879
+ {},
1880
+ {
1881
+ "width": 0,
1882
+ },
1883
+ ]
1884
+ }
1885
+ >
1886
+ <View
1887
+ paddingHorizontal="medium"
1888
+ style={
1889
+ [
1890
+ {
1891
+ "paddingHorizontal": 16,
1892
+ },
1893
+ [
1894
+ {
1895
+ "width": 0,
1896
+ },
1897
+ undefined,
1898
+ ],
1899
+ ]
1900
+ }
1901
+ width={0}
1902
+ >
1903
+ <Text
1904
+ allowFontScaling={false}
1905
+ style={
1906
+ [
1907
+ {
1908
+ "color": "#001f23",
1909
+ "fontFamily": "RebondGrotesque-SemiBold",
1910
+ "fontSize": 36,
1911
+ "letterSpacing": 1.5,
1912
+ "lineHeight": 44,
1913
+ },
1914
+ [
1915
+ {
1916
+ "marginBottom": 16,
1917
+ },
1918
+ undefined,
1919
+ ],
1920
+ ]
1921
+ }
1922
+ themeIntent="body"
1923
+ themeLevel="h1"
1924
+ themeTypeface="playful"
1925
+ >
1926
+ Test slide 5
1927
+ </Text>
1928
+ </View>
1929
+ </View>
1930
+ </View>
1485
1931
  </View>
1486
1932
  </RCTScrollView>
1487
1933
  <View