@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/SingleSelect/__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
  {
@@ -1491,6 +1507,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1491
1507
  }
1492
1508
  >
1493
1509
  <View
1510
+ onLayout={[Function]}
1494
1511
  style={
1495
1512
  [
1496
1513
  {
@@ -1530,40 +1547,55 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1530
1547
  themeState="filled"
1531
1548
  />
1532
1549
  <View
1550
+ onLayout={[Function]}
1551
+ />
1552
+ <View
1553
+ collapsable={false}
1533
1554
  pointerEvents="none"
1534
1555
  style={
1535
- [
1536
- {
1537
- "backgroundColor": "#ffffff",
1538
- "flexDirection": "row",
1539
- "left": 16,
1540
- "paddingHorizontal": 4,
1541
- "position": "absolute",
1542
- "top": -4,
1543
- "zIndex": 1,
1544
- },
1545
- {
1546
- "backgroundColor": "#ffffff",
1547
- },
1548
- ]
1556
+ {
1557
+ "alignItems": "center",
1558
+ "flexDirection": "row",
1559
+ "justifyContent": "center",
1560
+ "left": 0,
1561
+ "position": "absolute",
1562
+ "right": 0,
1563
+ "top": -10.666666666666666,
1564
+ "transform": [
1565
+ {
1566
+ "translateY": 0,
1567
+ },
1568
+ {
1569
+ "translateX": 24,
1570
+ },
1571
+ {
1572
+ "scale": 1,
1573
+ },
1574
+ ],
1575
+ "zIndex": 1,
1576
+ }
1549
1577
  }
1550
- testID="label-container"
1578
+ themeVariant="text"
1551
1579
  >
1552
1580
  <Text
1553
1581
  allowFontScaling={false}
1582
+ onLayout={[Function]}
1554
1583
  style={
1555
1584
  [
1556
1585
  {
1557
1586
  "color": "#001f23",
1558
1587
  "fontFamily": "BeVietnamPro-Regular",
1559
- "fontSize": 12,
1588
+ "fontSize": 16,
1560
1589
  "letterSpacing": 0.48,
1561
- "lineHeight": 16,
1590
+ "lineHeight": 24,
1562
1591
  },
1563
1592
  [
1564
1593
  {
1594
+ "alignContent": "center",
1595
+ "alignItems": "center",
1565
1596
  "color": "#001f23",
1566
- "lineHeight": 12,
1597
+ "marginTop": -2,
1598
+ "textAlignVertical": "center",
1567
1599
  },
1568
1600
  {
1569
1601
  "backgroundColor": "#ffffff",
@@ -1572,9 +1604,10 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1572
1604
  ]
1573
1605
  }
1574
1606
  testID="input-label"
1575
- themeFontWeight="regular"
1576
1607
  themeIntent="body"
1577
1608
  themeState="filled"
1609
+ themeTypeface="neutral"
1610
+ themeVariant="regular"
1578
1611
  >
1579
1612
  Allow notifications
1580
1613
  </Text>
@@ -1765,6 +1798,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1765
1798
  }
1766
1799
  >
1767
1800
  <View
1801
+ onLayout={[Function]}
1768
1802
  style={
1769
1803
  [
1770
1804
  {
@@ -1804,40 +1838,55 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1804
1838
  themeState="filled"
1805
1839
  />
1806
1840
  <View
1841
+ onLayout={[Function]}
1842
+ />
1843
+ <View
1844
+ collapsable={false}
1807
1845
  pointerEvents="none"
1808
1846
  style={
1809
- [
1810
- {
1811
- "backgroundColor": "#ffffff",
1812
- "flexDirection": "row",
1813
- "left": 16,
1814
- "paddingHorizontal": 4,
1815
- "position": "absolute",
1816
- "top": -4,
1817
- "zIndex": 1,
1818
- },
1819
- {
1820
- "backgroundColor": "#ffffff",
1821
- },
1822
- ]
1847
+ {
1848
+ "alignItems": "center",
1849
+ "flexDirection": "row",
1850
+ "justifyContent": "center",
1851
+ "left": 0,
1852
+ "position": "absolute",
1853
+ "right": 0,
1854
+ "top": -10.666666666666666,
1855
+ "transform": [
1856
+ {
1857
+ "translateY": 0,
1858
+ },
1859
+ {
1860
+ "translateX": 24,
1861
+ },
1862
+ {
1863
+ "scale": 1,
1864
+ },
1865
+ ],
1866
+ "zIndex": 1,
1867
+ }
1823
1868
  }
1824
- testID="label-container"
1869
+ themeVariant="text"
1825
1870
  >
1826
1871
  <Text
1827
1872
  allowFontScaling={false}
1873
+ onLayout={[Function]}
1828
1874
  style={
1829
1875
  [
1830
1876
  {
1831
1877
  "color": "#001f23",
1832
1878
  "fontFamily": "BeVietnamPro-Regular",
1833
- "fontSize": 12,
1879
+ "fontSize": 16,
1834
1880
  "letterSpacing": 0.48,
1835
- "lineHeight": 16,
1881
+ "lineHeight": 24,
1836
1882
  },
1837
1883
  [
1838
1884
  {
1885
+ "alignContent": "center",
1886
+ "alignItems": "center",
1839
1887
  "color": "#001f23",
1840
- "lineHeight": 12,
1888
+ "marginTop": -2,
1889
+ "textAlignVertical": "center",
1841
1890
  },
1842
1891
  {
1843
1892
  "backgroundColor": "#ffffff",
@@ -1846,9 +1895,10 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1846
1895
  ]
1847
1896
  }
1848
1897
  testID="input-label"
1849
- themeFontWeight="regular"
1850
1898
  themeIntent="body"
1851
1899
  themeState="filled"
1900
+ themeTypeface="neutral"
1901
+ themeVariant="regular"
1852
1902
  >
1853
1903
  Allow notifications
1854
1904
  </Text>
@@ -3345,6 +3395,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
3345
3395
  }
3346
3396
  >
3347
3397
  <View
3398
+ onLayout={[Function]}
3348
3399
  style={
3349
3400
  [
3350
3401
  {
@@ -3384,40 +3435,55 @@ exports[`rendering renders correctly when input is loading 1`] = `
3384
3435
  themeState="readonly"
3385
3436
  />
3386
3437
  <View
3438
+ onLayout={[Function]}
3439
+ />
3440
+ <View
3441
+ collapsable={false}
3387
3442
  pointerEvents="none"
3388
3443
  style={
3389
- [
3390
- {
3391
- "backgroundColor": "#ffffff",
3392
- "flexDirection": "row",
3393
- "left": 16,
3394
- "paddingHorizontal": 4,
3395
- "position": "absolute",
3396
- "top": -4,
3397
- "zIndex": 1,
3398
- },
3399
- {
3400
- "backgroundColor": "#ffffff",
3401
- },
3402
- ]
3444
+ {
3445
+ "alignItems": "center",
3446
+ "flexDirection": "row",
3447
+ "justifyContent": "center",
3448
+ "left": 0,
3449
+ "position": "absolute",
3450
+ "right": 0,
3451
+ "top": -10.666666666666666,
3452
+ "transform": [
3453
+ {
3454
+ "translateY": 0,
3455
+ },
3456
+ {
3457
+ "translateX": 24,
3458
+ },
3459
+ {
3460
+ "scale": 1,
3461
+ },
3462
+ ],
3463
+ "zIndex": 1,
3464
+ }
3403
3465
  }
3404
- testID="label-container"
3466
+ themeVariant="text"
3405
3467
  >
3406
3468
  <Text
3407
3469
  allowFontScaling={false}
3470
+ onLayout={[Function]}
3408
3471
  style={
3409
3472
  [
3410
3473
  {
3411
3474
  "color": "#001f23",
3412
3475
  "fontFamily": "BeVietnamPro-Regular",
3413
- "fontSize": 12,
3476
+ "fontSize": 16,
3414
3477
  "letterSpacing": 0.48,
3415
- "lineHeight": 16,
3478
+ "lineHeight": 24,
3416
3479
  },
3417
3480
  [
3418
3481
  {
3482
+ "alignContent": "center",
3483
+ "alignItems": "center",
3419
3484
  "color": "#808f91",
3420
- "lineHeight": 12,
3485
+ "marginTop": -2,
3486
+ "textAlignVertical": "center",
3421
3487
  },
3422
3488
  {
3423
3489
  "backgroundColor": "#ffffff",
@@ -3426,9 +3492,10 @@ exports[`rendering renders correctly when input is loading 1`] = `
3426
3492
  ]
3427
3493
  }
3428
3494
  testID="input-label"
3429
- themeFontWeight="regular"
3430
3495
  themeIntent="body"
3431
3496
  themeState="readonly"
3497
+ themeTypeface="neutral"
3498
+ themeVariant="regular"
3432
3499
  >
3433
3500
  Allow notifications
3434
3501
  </Text>
@@ -3632,6 +3699,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
3632
3699
  }
3633
3700
  >
3634
3701
  <View
3702
+ onLayout={[Function]}
3635
3703
  style={
3636
3704
  [
3637
3705
  {
@@ -3671,40 +3739,55 @@ exports[`rendering renders correctly when receives sections 1`] = `
3671
3739
  themeState="filled"
3672
3740
  />
3673
3741
  <View
3742
+ onLayout={[Function]}
3743
+ />
3744
+ <View
3745
+ collapsable={false}
3674
3746
  pointerEvents="none"
3675
3747
  style={
3676
- [
3677
- {
3678
- "backgroundColor": "#ffffff",
3679
- "flexDirection": "row",
3680
- "left": 16,
3681
- "paddingHorizontal": 4,
3682
- "position": "absolute",
3683
- "top": -4,
3684
- "zIndex": 1,
3685
- },
3686
- {
3687
- "backgroundColor": "#ffffff",
3688
- },
3689
- ]
3748
+ {
3749
+ "alignItems": "center",
3750
+ "flexDirection": "row",
3751
+ "justifyContent": "center",
3752
+ "left": 0,
3753
+ "position": "absolute",
3754
+ "right": 0,
3755
+ "top": -10.666666666666666,
3756
+ "transform": [
3757
+ {
3758
+ "translateY": 0,
3759
+ },
3760
+ {
3761
+ "translateX": 24,
3762
+ },
3763
+ {
3764
+ "scale": 1,
3765
+ },
3766
+ ],
3767
+ "zIndex": 1,
3768
+ }
3690
3769
  }
3691
- testID="label-container"
3770
+ themeVariant="text"
3692
3771
  >
3693
3772
  <Text
3694
3773
  allowFontScaling={false}
3774
+ onLayout={[Function]}
3695
3775
  style={
3696
3776
  [
3697
3777
  {
3698
3778
  "color": "#001f23",
3699
3779
  "fontFamily": "BeVietnamPro-Regular",
3700
- "fontSize": 12,
3780
+ "fontSize": 16,
3701
3781
  "letterSpacing": 0.48,
3702
- "lineHeight": 16,
3782
+ "lineHeight": 24,
3703
3783
  },
3704
3784
  [
3705
3785
  {
3786
+ "alignContent": "center",
3787
+ "alignItems": "center",
3706
3788
  "color": "#001f23",
3707
- "lineHeight": 12,
3789
+ "marginTop": -2,
3790
+ "textAlignVertical": "center",
3708
3791
  },
3709
3792
  {
3710
3793
  "backgroundColor": "#ffffff",
@@ -3713,9 +3796,10 @@ exports[`rendering renders correctly when receives sections 1`] = `
3713
3796
  ]
3714
3797
  }
3715
3798
  testID="input-label"
3716
- themeFontWeight="regular"
3717
3799
  themeIntent="body"
3718
3800
  themeState="filled"
3801
+ themeTypeface="neutral"
3802
+ themeVariant="regular"
3719
3803
  >
3720
3804
  Allow notifications
3721
3805
  </Text>
package/src/components/TextInput/StyledTextInput.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { TextInput, View, StyleSheet } from 'react-native';
1
+ import { TextInput, View, StyleSheet, Animated } from 'react-native';
2
2
  import styled from '@emotion/native';
3
3
  import Typography from '../Typography';
4
4
 
@@ -10,36 +10,17 @@ const StyledContainer = styled(View)(({ theme }) => ({
10
10
  marginTop: theme.__hd__.textInput.space.containerMarginTop,
11
11
  }));
12
12
 
13
- const StyledLabelContainer = styled(View)(({ theme }) => ({
14
- position: 'absolute',
15
- flexDirection: 'row',
16
- left: theme.__hd__.textInput.space.labelLeft,
17
- top: theme.__hd__.textInput.space.labelTop,
18
- backgroundColor: theme.__hd__.textInput.colors.labelBackground,
19
- zIndex: 1,
20
- paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
21
- }));
22
- const StyledLabel = styled(Typography.Caption)<{
23
- themeState: State;
24
- }>(({ theme, themeState }) => ({
25
- color: theme.__hd__.textInput.colors.labels[themeState],
26
- lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
27
- }));
28
-
29
- const StyledAsteriskLabel = styled(Typography.Caption)<{
30
- themeState: State;
31
- }>(({ theme, themeState }) => ({
32
- color: theme.__hd__.textInput.colors.asterisks[themeState],
33
- lineHeight: theme.__hd__.textInput.lineHeights.topLabel,
34
- }));
35
-
36
- const StyledLabelContainerInsideTextInput = styled(View)<{
13
+ const StyledLabelContainerInsideTextInput = styled(Animated.View)<{
37
14
  themeVariant: Variant;
38
- }>(({ themeVariant }) => ({
15
+ }>(({ themeVariant, theme }) => ({
39
16
  flexDirection: 'row',
40
- zIndex: 9999,
41
17
  alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
42
- ...StyleSheet.absoluteFillObject,
18
+ justifyContent: 'center',
19
+ position: 'absolute',
20
+ zIndex: 1,
21
+ left: 0,
22
+ right: 0,
23
+ top: -theme.__hd__.textInput.space.labelTop,
43
24
  }));
44
25
 
45
26
  const StyledLabelInsideTextInput = styled(Typography.Body)<{
@@ -144,9 +125,6 @@ const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
144
125
 
145
126
  export {
146
127
  StyledTextInputContainer,
147
- StyledLabel,
148
- StyledLabelContainer,
149
- StyledAsteriskLabel,
150
128
  StyledAsteriskLabelInsideTextInput,
151
129
  StyledTextInput,
152
130
  StyledError,
package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx CHANGED
@@ -2,33 +2,14 @@ import React from 'react';
2
2
  import renderWithTheme from '../../../testHelpers/renderWithTheme';
3
3
  import {
4
4
  StyledHelperText,
5
- StyledLabel,
6
5
  StyledTextInput,
7
6
  StyledMaxLengthMessage,
8
7
  StyledError,
9
8
  StyledErrorContainer,
10
- StyledAsteriskLabel,
11
- StyledLabelContainer,
12
9
  StyledLabelInsideTextInput,
13
10
  StyledBorderBackDrop,
14
11
  } from '../StyledTextInput';
15
12
 
16
- describe('Label', () => {
17
- it.each`
18
- themeState
19
- ${'default'}
20
- ${'filled'}
21
- ${'error'}
22
- ${'disabled'}
23
- ${'readonly'}
24
- `('renders correctly with themeState $themeState', ({ themeState }) => {
25
- const { toJSON } = renderWithTheme(
26
- <StyledLabel themeState={themeState}>Label</StyledLabel>
27
- );
28
-
29
- expect(toJSON()).toMatchSnapshot();
30
- });
31
- });
32
13
  describe('LabelInsideTextInput', () => {
33
14
  it.each`
34
15
  themeState
@@ -48,31 +29,6 @@ describe('LabelInsideTextInput', () => {
48
29
  });
49
30
  });
50
31
 
51
- describe('LabelContainer', () => {
52
- it('renders correctly', (): void => {
53
- const { toJSON } = renderWithTheme(<StyledLabelContainer />);
54
-
55
- expect(toJSON()).toMatchSnapshot();
56
- });
57
- });
58
-
59
- describe('StyledAsteriskLabel', () => {
60
- it.each`
61
- themeState
62
- ${'default'}
63
- ${'filled'}
64
- ${'error'}
65
- ${'disabled'}
66
- ${'readonly'}
67
- `('renders correctly with themeState $themeState', ({ themeState }): void => {
68
- const { toJSON } = renderWithTheme(
69
- <StyledAsteriskLabel themeState={themeState}>*</StyledAsteriskLabel>
70
- );
71
-
72
- expect(toJSON()).toMatchSnapshot();
73
- });
74
- });
75
-
76
32
  describe('StyledErrorMessageContainer', () => {
77
33
  it('renders correctly', (): void => {
78
34
  const { toJSON } = renderWithTheme(<StyledErrorContainer />);