@hero-design/rn 7.10.2-rc.0 → 7.10.2

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 (17) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/es/index.js +21 -32
  3. package/lib/index.js +21 -32
  4. package/package.json +2 -2
  5. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +240 -214
  6. package/src/components/Select/MultiSelect/index.tsx +11 -16
  7. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +240 -214
  8. package/src/components/Select/SingleSelect/index.tsx +11 -16
  9. package/src/components/TextInput/StyledTextInput.tsx +7 -4
  10. package/src/components/TextInput/__tests__/.log/tsserver.log +8601 -0
  11. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +0 -1
  12. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +294 -182
  13. package/src/components/TextInput/index.tsx +20 -18
  14. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +1 -1
  15. package/src/theme/components/textInput.ts +1 -1
  16. package/types/components/TextInput/StyledTextInput.d.ts +7 -1
  17. package/types/theme/components/textInput.d.ts +1 -1
package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -174,47 +174,57 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
174
174
  style={
175
175
  Array [
176
176
  Object {
177
- "flex": 1,
178
- "flexDirection": "row",
179
- "justifyContent": "space-between",
177
+ "paddingLeft": 16,
180
178
  },
181
179
  undefined,
182
180
  ]
183
181
  }
184
182
  >
185
- <Text
183
+ <View
186
184
  style={
187
185
  Array [
188
186
  Object {
189
- "color": "#292a2b",
190
- "fontFamily": "BeVietnamPro-Regular",
191
- "fontSize": 12,
192
- "letterSpacing": 0.36,
193
- "lineHeight": 20,
187
+ "flexDirection": "row",
188
+ "justifyContent": "space-between",
194
189
  },
190
+ undefined,
191
+ ]
192
+ }
193
+ >
194
+ <Text
195
+ style={
195
196
  Array [
196
197
  Object {
197
- "alignSelf": "flex-end",
198
198
  "color": "#292a2b",
199
- "flex": 1,
200
- "flexGrow": 1,
199
+ "fontFamily": "BeVietnamPro-Regular",
201
200
  "fontSize": 12,
202
- "marginRight": 4,
203
- "textAlign": "right",
201
+ "letterSpacing": 0.36,
202
+ "lineHeight": 20,
204
203
  },
205
- undefined,
206
- ],
207
- ]
208
- }
209
- themeFontSize="small"
210
- themeFontWeight="regular"
211
- themeIntent="body"
212
- themeVariant="filled"
213
- >
214
- 4
215
- /
216
- 255
217
- </Text>
204
+ Array [
205
+ Object {
206
+ "alignSelf": "flex-end",
207
+ "color": "#292a2b",
208
+ "flex": 1,
209
+ "flexGrow": 1,
210
+ "fontSize": 12,
211
+ "marginRight": 4,
212
+ "textAlign": "right",
213
+ },
214
+ undefined,
215
+ ],
216
+ ]
217
+ }
218
+ themeFontSize="small"
219
+ themeFontWeight="regular"
220
+ themeIntent="body"
221
+ themeVariant="filled"
222
+ >
223
+ 4
224
+ /
225
+ 255
226
+ </Text>
227
+ </View>
218
228
  <Text
219
229
  style={
220
230
  Array [
@@ -228,7 +238,6 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
228
238
  Array [
229
239
  Object {
230
240
  "fontSize": 12,
231
- "marginLeft": 4,
232
241
  },
233
242
  undefined,
234
243
  ],
@@ -419,47 +428,57 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
419
428
  style={
420
429
  Array [
421
430
  Object {
422
- "flex": 1,
423
- "flexDirection": "row",
424
- "justifyContent": "space-between",
431
+ "paddingLeft": 16,
425
432
  },
426
433
  undefined,
427
434
  ]
428
435
  }
429
436
  >
430
- <Text
437
+ <View
431
438
  style={
432
439
  Array [
433
440
  Object {
434
- "color": "#292a2b",
435
- "fontFamily": "BeVietnamPro-Regular",
436
- "fontSize": 12,
437
- "letterSpacing": 0.36,
438
- "lineHeight": 20,
441
+ "flexDirection": "row",
442
+ "justifyContent": "space-between",
439
443
  },
444
+ undefined,
445
+ ]
446
+ }
447
+ >
448
+ <Text
449
+ style={
440
450
  Array [
441
451
  Object {
442
- "alignSelf": "flex-end",
443
452
  "color": "#292a2b",
444
- "flex": 1,
445
- "flexGrow": 1,
453
+ "fontFamily": "BeVietnamPro-Regular",
446
454
  "fontSize": 12,
447
- "marginRight": 4,
448
- "textAlign": "right",
455
+ "letterSpacing": 0.36,
456
+ "lineHeight": 20,
449
457
  },
450
- undefined,
451
- ],
452
- ]
453
- }
454
- themeFontSize="small"
455
- themeFontWeight="regular"
456
- themeIntent="body"
457
- themeVariant="filled"
458
- >
459
- 4
460
- /
461
- 255
462
- </Text>
458
+ Array [
459
+ Object {
460
+ "alignSelf": "flex-end",
461
+ "color": "#292a2b",
462
+ "flex": 1,
463
+ "flexGrow": 1,
464
+ "fontSize": 12,
465
+ "marginRight": 4,
466
+ "textAlign": "right",
467
+ },
468
+ undefined,
469
+ ],
470
+ ]
471
+ }
472
+ themeFontSize="small"
473
+ themeFontWeight="regular"
474
+ themeIntent="body"
475
+ themeVariant="filled"
476
+ >
477
+ 4
478
+ /
479
+ 255
480
+ </Text>
481
+ </View>
463
482
  <Text
464
483
  style={
465
484
  Array [
@@ -473,7 +492,6 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
473
492
  Array [
474
493
  Object {
475
494
  "fontSize": 12,
476
- "marginLeft": 4,
477
495
  },
478
496
  undefined,
479
497
  ],
@@ -648,14 +666,24 @@ exports[`TextInput disabled renders correctly 1`] = `
648
666
  style={
649
667
  Array [
650
668
  Object {
651
- "flex": 1,
652
- "flexDirection": "row",
653
- "justifyContent": "space-between",
669
+ "paddingLeft": 16,
654
670
  },
655
671
  undefined,
656
672
  ]
657
673
  }
658
- />
674
+ >
675
+ <View
676
+ style={
677
+ Array [
678
+ Object {
679
+ "flexDirection": "row",
680
+ "justifyContent": "space-between",
681
+ },
682
+ undefined,
683
+ ]
684
+ }
685
+ />
686
+ </View>
659
687
  </View>
660
688
  `;
661
689
 
@@ -837,9 +865,7 @@ exports[`TextInput error renders correctly 1`] = `
837
865
  style={
838
866
  Array [
839
867
  Object {
840
- "flex": 1,
841
- "flexDirection": "row",
842
- "justifyContent": "space-between",
868
+ "paddingLeft": 16,
843
869
  },
844
870
  undefined,
845
871
  ]
@@ -849,59 +875,70 @@ exports[`TextInput error renders correctly 1`] = `
849
875
  style={
850
876
  Array [
851
877
  Object {
852
- "alignItems": "center",
853
- "flex": 1,
854
878
  "flexDirection": "row",
855
- "flexGrow": 4,
856
- "marginLeft": 16,
857
- "marginRight": 4,
879
+ "justifyContent": "space-between",
858
880
  },
859
881
  undefined,
860
882
  ]
861
883
  }
862
884
  >
863
- <HeroIcon
864
- name="circle-info"
885
+ <View
865
886
  style={
866
887
  Array [
867
888
  Object {
868
- "color": "#de350b",
869
- "fontSize": 16,
889
+ "alignItems": "center",
890
+ "flex": 1,
891
+ "flexDirection": "row",
892
+ "flexGrow": 4,
893
+ "marginRight": 4,
870
894
  },
871
895
  undefined,
872
896
  ]
873
897
  }
874
- testID="input-error-icon"
875
- themeIntent="danger"
876
- themeSize="xsmall"
877
- />
878
- <Text
879
- style={
880
- Array [
881
- Object {
882
- "color": "#292a2b",
883
- "fontFamily": "BeVietnamPro-Regular",
884
- "fontSize": 14,
885
- "letterSpacing": 0.42,
886
- "lineHeight": 22,
887
- },
898
+ >
899
+ <HeroIcon
900
+ name="circle-info"
901
+ style={
888
902
  Array [
889
903
  Object {
890
904
  "color": "#de350b",
891
- "fontSize": 12,
892
- "marginLeft": 4,
905
+ "fontSize": 16,
893
906
  },
894
907
  undefined,
895
- ],
896
- ]
897
- }
898
- testID="input-error-message"
899
- themeFontSize="medium"
900
- themeFontWeight="regular"
901
- themeIntent="body"
902
- >
903
- This field is required
904
- </Text>
908
+ ]
909
+ }
910
+ testID="input-error-icon"
911
+ themeIntent="danger"
912
+ themeSize="xsmall"
913
+ />
914
+ <Text
915
+ style={
916
+ Array [
917
+ Object {
918
+ "color": "#292a2b",
919
+ "fontFamily": "BeVietnamPro-Regular",
920
+ "fontSize": 14,
921
+ "letterSpacing": 0.42,
922
+ "lineHeight": 22,
923
+ },
924
+ Array [
925
+ Object {
926
+ "color": "#de350b",
927
+ "fontSize": 12,
928
+ "marginLeft": 4,
929
+ },
930
+ undefined,
931
+ ],
932
+ ]
933
+ }
934
+ testID="input-error-message"
935
+ themeFontSize="medium"
936
+ themeFontWeight="regular"
937
+ themeIntent="body"
938
+ >
939
+ This field is required
940
+ </Text>
941
+ </View>
905
942
  </View>
906
943
  </View>
907
944
  </View>
@@ -1070,14 +1107,24 @@ exports[`TextInput filled renders correctly 1`] = `
1070
1107
  style={
1071
1108
  Array [
1072
1109
  Object {
1073
- "flex": 1,
1074
- "flexDirection": "row",
1075
- "justifyContent": "space-between",
1110
+ "paddingLeft": 16,
1076
1111
  },
1077
1112
  undefined,
1078
1113
  ]
1079
1114
  }
1080
- />
1115
+ >
1116
+ <View
1117
+ style={
1118
+ Array [
1119
+ Object {
1120
+ "flexDirection": "row",
1121
+ "justifyContent": "space-between",
1122
+ },
1123
+ undefined,
1124
+ ]
1125
+ }
1126
+ />
1127
+ </View>
1081
1128
  </View>
1082
1129
  `;
1083
1130
 
@@ -1259,14 +1306,23 @@ exports[`TextInput helper text renders correctly 1`] = `
1259
1306
  style={
1260
1307
  Array [
1261
1308
  Object {
1262
- "flex": 1,
1263
- "flexDirection": "row",
1264
- "justifyContent": "space-between",
1309
+ "paddingLeft": 16,
1265
1310
  },
1266
1311
  undefined,
1267
1312
  ]
1268
1313
  }
1269
1314
  >
1315
+ <View
1316
+ style={
1317
+ Array [
1318
+ Object {
1319
+ "flexDirection": "row",
1320
+ "justifyContent": "space-between",
1321
+ },
1322
+ undefined,
1323
+ ]
1324
+ }
1325
+ />
1270
1326
  <Text
1271
1327
  style={
1272
1328
  Array [
@@ -1280,7 +1336,6 @@ exports[`TextInput helper text renders correctly 1`] = `
1280
1336
  Array [
1281
1337
  Object {
1282
1338
  "fontSize": 12,
1283
- "marginLeft": 4,
1284
1339
  },
1285
1340
  undefined,
1286
1341
  ],
@@ -1464,14 +1519,24 @@ exports[`TextInput idle renders correctly 1`] = `
1464
1519
  style={
1465
1520
  Array [
1466
1521
  Object {
1467
- "flex": 1,
1468
- "flexDirection": "row",
1469
- "justifyContent": "space-between",
1522
+ "paddingLeft": 16,
1470
1523
  },
1471
1524
  undefined,
1472
1525
  ]
1473
1526
  }
1474
- />
1527
+ >
1528
+ <View
1529
+ style={
1530
+ Array [
1531
+ Object {
1532
+ "flexDirection": "row",
1533
+ "justifyContent": "space-between",
1534
+ },
1535
+ undefined,
1536
+ ]
1537
+ }
1538
+ />
1539
+ </View>
1475
1540
  </View>
1476
1541
  `;
1477
1542
 
@@ -1668,14 +1733,24 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
1668
1733
  style={
1669
1734
  Array [
1670
1735
  Object {
1671
- "flex": 1,
1672
- "flexDirection": "row",
1673
- "justifyContent": "space-between",
1736
+ "paddingLeft": 16,
1674
1737
  },
1675
1738
  undefined,
1676
1739
  ]
1677
1740
  }
1678
- />
1741
+ >
1742
+ <View
1743
+ style={
1744
+ Array [
1745
+ Object {
1746
+ "flexDirection": "row",
1747
+ "justifyContent": "space-between",
1748
+ },
1749
+ undefined,
1750
+ ]
1751
+ }
1752
+ />
1753
+ </View>
1679
1754
  </View>
1680
1755
  `;
1681
1756
 
@@ -1839,9 +1914,7 @@ exports[`TextInput max length renders correctly 1`] = `
1839
1914
  style={
1840
1915
  Array [
1841
1916
  Object {
1842
- "flex": 1,
1843
- "flexDirection": "row",
1844
- "justifyContent": "space-between",
1917
+ "paddingLeft": 16,
1845
1918
  },
1846
1919
  undefined,
1847
1920
  ]
@@ -1851,93 +1924,104 @@ exports[`TextInput max length renders correctly 1`] = `
1851
1924
  style={
1852
1925
  Array [
1853
1926
  Object {
1854
- "alignItems": "center",
1855
- "flex": 1,
1856
1927
  "flexDirection": "row",
1857
- "flexGrow": 4,
1858
- "marginLeft": 16,
1859
- "marginRight": 4,
1928
+ "justifyContent": "space-between",
1860
1929
  },
1861
1930
  undefined,
1862
1931
  ]
1863
1932
  }
1864
1933
  >
1865
- <HeroIcon
1866
- name="circle-info"
1934
+ <View
1867
1935
  style={
1868
1936
  Array [
1869
1937
  Object {
1870
- "color": "#de350b",
1871
- "fontSize": 16,
1938
+ "alignItems": "center",
1939
+ "flex": 1,
1940
+ "flexDirection": "row",
1941
+ "flexGrow": 4,
1942
+ "marginRight": 4,
1872
1943
  },
1873
1944
  undefined,
1874
1945
  ]
1875
1946
  }
1876
- testID="input-error-icon"
1877
- themeIntent="danger"
1878
- themeSize="xsmall"
1879
- />
1947
+ >
1948
+ <HeroIcon
1949
+ name="circle-info"
1950
+ style={
1951
+ Array [
1952
+ Object {
1953
+ "color": "#de350b",
1954
+ "fontSize": 16,
1955
+ },
1956
+ undefined,
1957
+ ]
1958
+ }
1959
+ testID="input-error-icon"
1960
+ themeIntent="danger"
1961
+ themeSize="xsmall"
1962
+ />
1963
+ <Text
1964
+ style={
1965
+ Array [
1966
+ Object {
1967
+ "color": "#292a2b",
1968
+ "fontFamily": "BeVietnamPro-Regular",
1969
+ "fontSize": 14,
1970
+ "letterSpacing": 0.42,
1971
+ "lineHeight": 22,
1972
+ },
1973
+ Array [
1974
+ Object {
1975
+ "color": "#de350b",
1976
+ "fontSize": 12,
1977
+ "marginLeft": 4,
1978
+ },
1979
+ undefined,
1980
+ ],
1981
+ ]
1982
+ }
1983
+ testID="input-error-message"
1984
+ themeFontSize="medium"
1985
+ themeFontWeight="regular"
1986
+ themeIntent="body"
1987
+ >
1988
+ must not exceed character limit
1989
+ </Text>
1990
+ </View>
1880
1991
  <Text
1881
1992
  style={
1882
1993
  Array [
1883
1994
  Object {
1884
1995
  "color": "#292a2b",
1885
1996
  "fontFamily": "BeVietnamPro-Regular",
1886
- "fontSize": 14,
1887
- "letterSpacing": 0.42,
1888
- "lineHeight": 22,
1997
+ "fontSize": 12,
1998
+ "letterSpacing": 0.36,
1999
+ "lineHeight": 20,
1889
2000
  },
1890
2001
  Array [
1891
2002
  Object {
2003
+ "alignSelf": "flex-end",
1892
2004
  "color": "#de350b",
2005
+ "flex": 1,
2006
+ "flexGrow": 1,
1893
2007
  "fontSize": 12,
1894
- "marginLeft": 4,
2008
+ "marginRight": 4,
2009
+ "textAlign": "right",
1895
2010
  },
1896
2011
  undefined,
1897
2012
  ],
1898
2013
  ]
1899
2014
  }
1900
- testID="input-error-message"
1901
- themeFontSize="medium"
2015
+ themeFontSize="small"
1902
2016
  themeFontWeight="regular"
1903
2017
  themeIntent="body"
2018
+ themeVariant="error"
1904
2019
  >
1905
- must not exceed character limit
2020
+ 18
2021
+ /
2022
+ 255
1906
2023
  </Text>
1907
2024
  </View>
1908
- <Text
1909
- style={
1910
- Array [
1911
- Object {
1912
- "color": "#292a2b",
1913
- "fontFamily": "BeVietnamPro-Regular",
1914
- "fontSize": 12,
1915
- "letterSpacing": 0.36,
1916
- "lineHeight": 20,
1917
- },
1918
- Array [
1919
- Object {
1920
- "alignSelf": "flex-end",
1921
- "color": "#de350b",
1922
- "flex": 1,
1923
- "flexGrow": 1,
1924
- "fontSize": 12,
1925
- "marginRight": 4,
1926
- "textAlign": "right",
1927
- },
1928
- undefined,
1929
- ],
1930
- ]
1931
- }
1932
- themeFontSize="small"
1933
- themeFontWeight="regular"
1934
- themeIntent="body"
1935
- themeVariant="error"
1936
- >
1937
- 18
1938
- /
1939
- 255
1940
- </Text>
1941
2025
  </View>
1942
2026
  </View>
1943
2027
  `;
@@ -2120,14 +2204,23 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
2120
2204
  style={
2121
2205
  Array [
2122
2206
  Object {
2123
- "flex": 1,
2124
- "flexDirection": "row",
2125
- "justifyContent": "space-between",
2207
+ "paddingLeft": 16,
2126
2208
  },
2127
2209
  undefined,
2128
2210
  ]
2129
2211
  }
2130
2212
  >
2213
+ <View
2214
+ style={
2215
+ Array [
2216
+ Object {
2217
+ "flexDirection": "row",
2218
+ "justifyContent": "space-between",
2219
+ },
2220
+ undefined,
2221
+ ]
2222
+ }
2223
+ />
2131
2224
  <Text
2132
2225
  style={
2133
2226
  Array [
@@ -2141,7 +2234,6 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
2141
2234
  Array [
2142
2235
  Object {
2143
2236
  "fontSize": 12,
2144
- "marginLeft": 4,
2145
2237
  },
2146
2238
  undefined,
2147
2239
  ],
@@ -2345,14 +2437,24 @@ exports[`TextInput readonly renders correctly 1`] = `
2345
2437
  style={
2346
2438
  Array [
2347
2439
  Object {
2348
- "flex": 1,
2349
- "flexDirection": "row",
2350
- "justifyContent": "space-between",
2440
+ "paddingLeft": 16,
2351
2441
  },
2352
2442
  undefined,
2353
2443
  ]
2354
2444
  }
2355
- />
2445
+ >
2446
+ <View
2447
+ style={
2448
+ Array [
2449
+ Object {
2450
+ "flexDirection": "row",
2451
+ "justifyContent": "space-between",
2452
+ },
2453
+ undefined,
2454
+ ]
2455
+ }
2456
+ />
2457
+ </View>
2356
2458
  </View>
2357
2459
  `;
2358
2460
 
@@ -2549,13 +2651,23 @@ exports[`TextInput required renders correctly 1`] = `
2549
2651
  style={
2550
2652
  Array [
2551
2653
  Object {
2552
- "flex": 1,
2553
- "flexDirection": "row",
2554
- "justifyContent": "space-between",
2654
+ "paddingLeft": 16,
2555
2655
  },
2556
2656
  undefined,
2557
2657
  ]
2558
2658
  }
2559
- />
2659
+ >
2660
+ <View
2661
+ style={
2662
+ Array [
2663
+ Object {
2664
+ "flexDirection": "row",
2665
+ "justifyContent": "space-between",
2666
+ },
2667
+ undefined,
2668
+ ]
2669
+ }
2670
+ />
2671
+ </View>
2560
2672
  </View>
2561
2673
  `;