@hero-design/rn 8.45.0-test.0 → 8.45.1

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 (37) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +23 -2
  3. package/es/index.js +764 -578
  4. package/lib/index.js +764 -578
  5. package/package.json +6 -6
  6. package/src/components/Accordion/index.tsx +1 -1
  7. package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx +63 -9
  8. package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx +71 -9
  9. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap +271 -2
  10. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap +2156 -7
  11. package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx +140 -6
  12. package/src/components/Avatar/AvatarStack/index.tsx +94 -9
  13. package/src/components/Carousel/index.tsx +18 -11
  14. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +108 -57
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +36 -19
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +36 -19
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +36 -19
  18. package/src/components/RichTextEditor/RichTextEditor.tsx +89 -38
  19. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +130 -102
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +247 -146
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +211 -127
  22. package/src/components/TextInput/StyledTextInput.tsx +9 -31
  23. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -44
  24. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -638
  25. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +1159 -833
  26. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  27. package/src/components/TextInput/index.tsx +128 -57
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +72 -38
  29. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +72 -38
  30. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -2
  31. package/src/theme/components/textInput.ts +2 -2
  32. package/types/components/Accordion/index.d.ts +1 -1
  33. package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts +13 -0
  34. package/types/components/Avatar/AvatarStack/index.d.ts +14 -2
  35. package/types/components/Avatar/index.d.ts +1 -1
  36. package/types/components/TextInput/StyledTextInput.d.ts +4 -24
  37. package/types/components/TextInput/index.d.ts +1 -0
package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -61,6 +61,7 @@ exports[`rendering allows custom renderer 1`] = `
61
61
  }
62
62
  >
63
63
  <View
64
+ onLayout={[Function]}
64
65
  style={
65
66
  [
66
67
  {
@@ -99,6 +100,72 @@ exports[`rendering allows custom renderer 1`] = `
99
100
  themeFocused={false}
100
101
  themeState="default"
101
102
  />
103
+ <View
104
+ onLayout={[Function]}
105
+ />
106
+ <View
107
+ collapsable={false}
108
+ pointerEvents="none"
109
+ style={
110
+ {
111
+ "alignItems": "center",
112
+ "flexDirection": "row",
113
+ "justifyContent": "center",
114
+ "left": 0,
115
+ "position": "absolute",
116
+ "right": 0,
117
+ "top": -10.666666666666666,
118
+ "transform": [
119
+ {
120
+ "translateY": 0,
121
+ },
122
+ {
123
+ "translateX": 24,
124
+ },
125
+ {
126
+ "scale": 1,
127
+ },
128
+ ],
129
+ "zIndex": 1,
130
+ }
131
+ }
132
+ themeVariant="text"
133
+ >
134
+ <Text
135
+ allowFontScaling={false}
136
+ onLayout={[Function]}
137
+ style={
138
+ [
139
+ {
140
+ "color": "#001f23",
141
+ "fontFamily": "BeVietnamPro-Regular",
142
+ "fontSize": 16,
143
+ "letterSpacing": 0.48,
144
+ "lineHeight": 24,
145
+ },
146
+ [
147
+ {
148
+ "alignContent": "center",
149
+ "alignItems": "center",
150
+ "color": "#001f23",
151
+ "marginTop": -2,
152
+ "textAlignVertical": "center",
153
+ },
154
+ {
155
+ "backgroundColor": "#ffffff",
156
+ },
157
+ ],
158
+ ]
159
+ }
160
+ testID="input-label"
161
+ themeIntent="body"
162
+ themeState="default"
163
+ themeTypeface="neutral"
164
+ themeVariant="regular"
165
+ >
166
+ Choose collaborators
167
+ </Text>
168
+ </View>
102
169
  <View
103
170
  style={
104
171
  [
@@ -113,57 +180,6 @@ exports[`rendering allows custom renderer 1`] = `
113
180
  ]
114
181
  }
115
182
  >
116
- <View
117
- pointerEvents="none"
118
- style={
119
- [
120
- {
121
- "alignItems": "center",
122
- "bottom": 0,
123
- "flexDirection": "row",
124
- "left": 0,
125
- "position": "absolute",
126
- "right": 0,
127
- "top": 0,
128
- "zIndex": 9999,
129
- },
130
- undefined,
131
- ]
132
- }
133
- themeVariant="text"
134
- >
135
- <Text
136
- allowFontScaling={false}
137
- style={
138
- [
139
- {
140
- "color": "#001f23",
141
- "fontFamily": "BeVietnamPro-Regular",
142
- "fontSize": 16,
143
- "letterSpacing": 0.48,
144
- "lineHeight": 24,
145
- },
146
- [
147
- {
148
- "alignContent": "center",
149
- "alignItems": "center",
150
- "color": "#001f23",
151
- "marginTop": -2,
152
- "textAlignVertical": "center",
153
- },
154
- undefined,
155
- ],
156
- ]
157
- }
158
- testID="input-label"
159
- themeIntent="body"
160
- themeState="default"
161
- themeTypeface="neutral"
162
- themeVariant="regular"
163
- >
164
- Choose collaborators
165
- </Text>
166
- </View>
167
183
  <TextInput
168
184
  accessibilityState={
169
185
  {
@@ -1576,6 +1592,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1576
1592
  }
1577
1593
  >
1578
1594
  <View
1595
+ onLayout={[Function]}
1579
1596
  style={
1580
1597
  [
1581
1598
  {
@@ -1615,40 +1632,55 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1615
1632
  themeState="filled"
1616
1633
  />
1617
1634
  <View
1635
+ onLayout={[Function]}
1636
+ />
1637
+ <View
1638
+ collapsable={false}
1618
1639
  pointerEvents="none"
1619
1640
  style={
1620
- [
1621
- {
1622
- "backgroundColor": "#ffffff",
1623
- "flexDirection": "row",
1624
- "left": 16,
1625
- "paddingHorizontal": 4,
1626
- "position": "absolute",
1627
- "top": -4,
1628
- "zIndex": 1,
1629
- },
1630
- {
1631
- "backgroundColor": "#ffffff",
1632
- },
1633
- ]
1641
+ {
1642
+ "alignItems": "center",
1643
+ "flexDirection": "row",
1644
+ "justifyContent": "center",
1645
+ "left": 0,
1646
+ "position": "absolute",
1647
+ "right": 0,
1648
+ "top": -10.666666666666666,
1649
+ "transform": [
1650
+ {
1651
+ "translateY": 0,
1652
+ },
1653
+ {
1654
+ "translateX": 24,
1655
+ },
1656
+ {
1657
+ "scale": 1,
1658
+ },
1659
+ ],
1660
+ "zIndex": 1,
1661
+ }
1634
1662
  }
1635
- testID="label-container"
1663
+ themeVariant="text"
1636
1664
  >
1637
1665
  <Text
1638
1666
  allowFontScaling={false}
1667
+ onLayout={[Function]}
1639
1668
  style={
1640
1669
  [
1641
1670
  {
1642
1671
  "color": "#001f23",
1643
1672
  "fontFamily": "BeVietnamPro-Regular",
1644
- "fontSize": 12,
1673
+ "fontSize": 16,
1645
1674
  "letterSpacing": 0.48,
1646
- "lineHeight": 16,
1675
+ "lineHeight": 24,
1647
1676
  },
1648
1677
  [
1649
1678
  {
1679
+ "alignContent": "center",
1680
+ "alignItems": "center",
1650
1681
  "color": "#001f23",
1651
- "lineHeight": 12,
1682
+ "marginTop": -2,
1683
+ "textAlignVertical": "center",
1652
1684
  },
1653
1685
  {
1654
1686
  "backgroundColor": "#ffffff",
@@ -1657,9 +1689,10 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1657
1689
  ]
1658
1690
  }
1659
1691
  testID="input-label"
1660
- themeFontWeight="regular"
1661
1692
  themeIntent="body"
1662
1693
  themeState="filled"
1694
+ themeTypeface="neutral"
1695
+ themeVariant="regular"
1663
1696
  >
1664
1697
  Allow notifications
1665
1698
  </Text>
@@ -1850,6 +1883,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1850
1883
  }
1851
1884
  >
1852
1885
  <View
1886
+ onLayout={[Function]}
1853
1887
  style={
1854
1888
  [
1855
1889
  {
@@ -1889,40 +1923,55 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1889
1923
  themeState="filled"
1890
1924
  />
1891
1925
  <View
1926
+ onLayout={[Function]}
1927
+ />
1928
+ <View
1929
+ collapsable={false}
1892
1930
  pointerEvents="none"
1893
1931
  style={
1894
- [
1895
- {
1896
- "backgroundColor": "#ffffff",
1897
- "flexDirection": "row",
1898
- "left": 16,
1899
- "paddingHorizontal": 4,
1900
- "position": "absolute",
1901
- "top": -4,
1902
- "zIndex": 1,
1903
- },
1904
- {
1905
- "backgroundColor": "#ffffff",
1906
- },
1907
- ]
1932
+ {
1933
+ "alignItems": "center",
1934
+ "flexDirection": "row",
1935
+ "justifyContent": "center",
1936
+ "left": 0,
1937
+ "position": "absolute",
1938
+ "right": 0,
1939
+ "top": -10.666666666666666,
1940
+ "transform": [
1941
+ {
1942
+ "translateY": 0,
1943
+ },
1944
+ {
1945
+ "translateX": 24,
1946
+ },
1947
+ {
1948
+ "scale": 1,
1949
+ },
1950
+ ],
1951
+ "zIndex": 1,
1952
+ }
1908
1953
  }
1909
- testID="label-container"
1954
+ themeVariant="text"
1910
1955
  >
1911
1956
  <Text
1912
1957
  allowFontScaling={false}
1958
+ onLayout={[Function]}
1913
1959
  style={
1914
1960
  [
1915
1961
  {
1916
1962
  "color": "#001f23",
1917
1963
  "fontFamily": "BeVietnamPro-Regular",
1918
- "fontSize": 12,
1964
+ "fontSize": 16,
1919
1965
  "letterSpacing": 0.48,
1920
- "lineHeight": 16,
1966
+ "lineHeight": 24,
1921
1967
  },
1922
1968
  [
1923
1969
  {
1970
+ "alignContent": "center",
1971
+ "alignItems": "center",
1924
1972
  "color": "#001f23",
1925
- "lineHeight": 12,
1973
+ "marginTop": -2,
1974
+ "textAlignVertical": "center",
1926
1975
  },
1927
1976
  {
1928
1977
  "backgroundColor": "#ffffff",
@@ -1931,9 +1980,10 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1931
1980
  ]
1932
1981
  }
1933
1982
  testID="input-label"
1934
- themeFontWeight="regular"
1935
1983
  themeIntent="body"
1936
1984
  themeState="filled"
1985
+ themeTypeface="neutral"
1986
+ themeVariant="regular"
1937
1987
  >
1938
1988
  Allow notifications
1939
1989
  </Text>
@@ -3570,6 +3620,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
3570
3620
  }
3571
3621
  >
3572
3622
  <View
3623
+ onLayout={[Function]}
3573
3624
  style={
3574
3625
  [
3575
3626
  {
@@ -3609,40 +3660,55 @@ exports[`rendering renders correctly when input is loading 1`] = `
3609
3660
  themeState="readonly"
3610
3661
  />
3611
3662
  <View
3663
+ onLayout={[Function]}
3664
+ />
3665
+ <View
3666
+ collapsable={false}
3612
3667
  pointerEvents="none"
3613
3668
  style={
3614
- [
3615
- {
3616
- "backgroundColor": "#ffffff",
3617
- "flexDirection": "row",
3618
- "left": 16,
3619
- "paddingHorizontal": 4,
3620
- "position": "absolute",
3621
- "top": -4,
3622
- "zIndex": 1,
3623
- },
3624
- {
3625
- "backgroundColor": "#ffffff",
3626
- },
3627
- ]
3669
+ {
3670
+ "alignItems": "center",
3671
+ "flexDirection": "row",
3672
+ "justifyContent": "center",
3673
+ "left": 0,
3674
+ "position": "absolute",
3675
+ "right": 0,
3676
+ "top": -10.666666666666666,
3677
+ "transform": [
3678
+ {
3679
+ "translateY": 0,
3680
+ },
3681
+ {
3682
+ "translateX": 24,
3683
+ },
3684
+ {
3685
+ "scale": 1,
3686
+ },
3687
+ ],
3688
+ "zIndex": 1,
3689
+ }
3628
3690
  }
3629
- testID="label-container"
3691
+ themeVariant="text"
3630
3692
  >
3631
3693
  <Text
3632
3694
  allowFontScaling={false}
3695
+ onLayout={[Function]}
3633
3696
  style={
3634
3697
  [
3635
3698
  {
3636
3699
  "color": "#001f23",
3637
3700
  "fontFamily": "BeVietnamPro-Regular",
3638
- "fontSize": 12,
3701
+ "fontSize": 16,
3639
3702
  "letterSpacing": 0.48,
3640
- "lineHeight": 16,
3703
+ "lineHeight": 24,
3641
3704
  },
3642
3705
  [
3643
3706
  {
3707
+ "alignContent": "center",
3708
+ "alignItems": "center",
3644
3709
  "color": "#808f91",
3645
- "lineHeight": 12,
3710
+ "marginTop": -2,
3711
+ "textAlignVertical": "center",
3646
3712
  },
3647
3713
  {
3648
3714
  "backgroundColor": "#ffffff",
@@ -3651,9 +3717,10 @@ exports[`rendering renders correctly when input is loading 1`] = `
3651
3717
  ]
3652
3718
  }
3653
3719
  testID="input-label"
3654
- themeFontWeight="regular"
3655
3720
  themeIntent="body"
3656
3721
  themeState="readonly"
3722
+ themeTypeface="neutral"
3723
+ themeVariant="regular"
3657
3724
  >
3658
3725
  Allow notifications
3659
3726
  </Text>
@@ -3857,6 +3924,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
3857
3924
  }
3858
3925
  >
3859
3926
  <View
3927
+ onLayout={[Function]}
3860
3928
  style={
3861
3929
  [
3862
3930
  {
@@ -3896,40 +3964,55 @@ exports[`rendering renders correctly when receives sections 1`] = `
3896
3964
  themeState="filled"
3897
3965
  />
3898
3966
  <View
3967
+ onLayout={[Function]}
3968
+ />
3969
+ <View
3970
+ collapsable={false}
3899
3971
  pointerEvents="none"
3900
3972
  style={
3901
- [
3902
- {
3903
- "backgroundColor": "#ffffff",
3904
- "flexDirection": "row",
3905
- "left": 16,
3906
- "paddingHorizontal": 4,
3907
- "position": "absolute",
3908
- "top": -4,
3909
- "zIndex": 1,
3910
- },
3911
- {
3912
- "backgroundColor": "#ffffff",
3913
- },
3914
- ]
3973
+ {
3974
+ "alignItems": "center",
3975
+ "flexDirection": "row",
3976
+ "justifyContent": "center",
3977
+ "left": 0,
3978
+ "position": "absolute",
3979
+ "right": 0,
3980
+ "top": -10.666666666666666,
3981
+ "transform": [
3982
+ {
3983
+ "translateY": 0,
3984
+ },
3985
+ {
3986
+ "translateX": 24,
3987
+ },
3988
+ {
3989
+ "scale": 1,
3990
+ },
3991
+ ],
3992
+ "zIndex": 1,
3993
+ }
3915
3994
  }
3916
- testID="label-container"
3995
+ themeVariant="text"
3917
3996
  >
3918
3997
  <Text
3919
3998
  allowFontScaling={false}
3999
+ onLayout={[Function]}
3920
4000
  style={
3921
4001
  [
3922
4002
  {
3923
4003
  "color": "#001f23",
3924
4004
  "fontFamily": "BeVietnamPro-Regular",
3925
- "fontSize": 12,
4005
+ "fontSize": 16,
3926
4006
  "letterSpacing": 0.48,
3927
- "lineHeight": 16,
4007
+ "lineHeight": 24,
3928
4008
  },
3929
4009
  [
3930
4010
  {
4011
+ "alignContent": "center",
4012
+ "alignItems": "center",
3931
4013
  "color": "#001f23",
3932
- "lineHeight": 12,
4014
+ "marginTop": -2,
4015
+ "textAlignVertical": "center",
3933
4016
  },
3934
4017
  {
3935
4018
  "backgroundColor": "#ffffff",
@@ -3938,9 +4021,10 @@ exports[`rendering renders correctly when receives sections 1`] = `
3938
4021
  ]
3939
4022
  }
3940
4023
  testID="input-label"
3941
- themeFontWeight="regular"
3942
4024
  themeIntent="body"
3943
4025
  themeState="filled"
4026
+ themeTypeface="neutral"
4027
+ themeVariant="regular"
3944
4028
  >
3945
4029
  Allow notifications
3946
4030
  </Text>
@@ -5157,6 +5241,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
5157
5241
  }
5158
5242
  >
5159
5243
  <View
5244
+ onLayout={[Function]}
5160
5245
  style={
5161
5246
  [
5162
5247
  {
@@ -5196,40 +5281,55 @@ exports[`rendering renders correctly when receives sections 2`] = `
5196
5281
  themeState="filled"
5197
5282
  />
5198
5283
  <View
5284
+ onLayout={[Function]}
5285
+ />
5286
+ <View
5287
+ collapsable={false}
5199
5288
  pointerEvents="none"
5200
5289
  style={
5201
- [
5202
- {
5203
- "backgroundColor": "#ffffff",
5204
- "flexDirection": "row",
5205
- "left": 16,
5206
- "paddingHorizontal": 4,
5207
- "position": "absolute",
5208
- "top": -4,
5209
- "zIndex": 1,
5210
- },
5211
- {
5212
- "backgroundColor": "#ffffff",
5213
- },
5214
- ]
5290
+ {
5291
+ "alignItems": "center",
5292
+ "flexDirection": "row",
5293
+ "justifyContent": "center",
5294
+ "left": 0,
5295
+ "position": "absolute",
5296
+ "right": 0,
5297
+ "top": -10.666666666666666,
5298
+ "transform": [
5299
+ {
5300
+ "translateY": 0,
5301
+ },
5302
+ {
5303
+ "translateX": 24,
5304
+ },
5305
+ {
5306
+ "scale": 1,
5307
+ },
5308
+ ],
5309
+ "zIndex": 1,
5310
+ }
5215
5311
  }
5216
- testID="label-container"
5312
+ themeVariant="text"
5217
5313
  >
5218
5314
  <Text
5219
5315
  allowFontScaling={false}
5316
+ onLayout={[Function]}
5220
5317
  style={
5221
5318
  [
5222
5319
  {
5223
5320
  "color": "#001f23",
5224
5321
  "fontFamily": "BeVietnamPro-Regular",
5225
- "fontSize": 12,
5322
+ "fontSize": 16,
5226
5323
  "letterSpacing": 0.48,
5227
- "lineHeight": 16,
5324
+ "lineHeight": 24,
5228
5325
  },
5229
5326
  [
5230
5327
  {
5328
+ "alignContent": "center",
5329
+ "alignItems": "center",
5231
5330
  "color": "#001f23",
5232
- "lineHeight": 12,
5331
+ "marginTop": -2,
5332
+ "textAlignVertical": "center",
5233
5333
  },
5234
5334
  {
5235
5335
  "backgroundColor": "#ffffff",
@@ -5238,9 +5338,10 @@ exports[`rendering renders correctly when receives sections 2`] = `
5238
5338
  ]
5239
5339
  }
5240
5340
  testID="input-label"
5241
- themeFontWeight="regular"
5242
5341
  themeIntent="body"
5243
5342
  themeState="filled"
5343
+ themeTypeface="neutral"
5344
+ themeVariant="regular"
5244
5345
  >
5245
5346
  Allow notifications
5246
5347
  </Text>