@hero-design/rn 8.45.0-test.0 → 8.45.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 (37) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -2
  3. package/es/index.js +731 -584
  4. package/lib/index.js +731 -584
  5. package/package.json +1 -1
  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 +102 -57
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +34 -19
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +34 -19
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +34 -19
  18. package/src/components/RichTextEditor/RichTextEditor.tsx +76 -38
  19. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +126 -102
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +235 -146
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +201 -127
  22. package/src/components/TextInput/StyledTextInput.tsx +8 -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 +1126 -833
  26. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  27. package/src/components/TextInput/index.tsx +113 -57
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +68 -38
  29. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +68 -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,70 @@ 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
+ "left": -32,
114
+ "position": "absolute",
115
+ "right": 0,
116
+ "top": -10.666666666666666,
117
+ "transform": [
118
+ {
119
+ "translateY": 0,
120
+ },
121
+ {
122
+ "translateX": 48,
123
+ },
124
+ {
125
+ "scale": 1,
126
+ },
127
+ ],
128
+ "zIndex": 1,
129
+ }
130
+ }
131
+ themeVariant="text"
132
+ >
133
+ <Text
134
+ allowFontScaling={false}
135
+ style={
136
+ [
137
+ {
138
+ "color": "#001f23",
139
+ "fontFamily": "BeVietnamPro-Regular",
140
+ "fontSize": 16,
141
+ "letterSpacing": 0.48,
142
+ "lineHeight": 24,
143
+ },
144
+ [
145
+ {
146
+ "alignContent": "center",
147
+ "alignItems": "center",
148
+ "color": "#001f23",
149
+ "marginTop": -2,
150
+ "textAlignVertical": "center",
151
+ },
152
+ {
153
+ "backgroundColor": "#ffffff",
154
+ },
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>
102
167
  <View
103
168
  style={
104
169
  [
@@ -113,57 +178,6 @@ exports[`rendering allows custom renderer 1`] = `
113
178
  ]
114
179
  }
115
180
  >
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
181
  <TextInput
168
182
  accessibilityState={
169
183
  {
@@ -1491,6 +1505,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1491
1505
  }
1492
1506
  >
1493
1507
  <View
1508
+ onLayout={[Function]}
1494
1509
  style={
1495
1510
  [
1496
1511
  {
@@ -1530,24 +1545,34 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1530
1545
  themeState="filled"
1531
1546
  />
1532
1547
  <View
1548
+ onLayout={[Function]}
1549
+ />
1550
+ <View
1551
+ collapsable={false}
1533
1552
  pointerEvents="none"
1534
1553
  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
- ]
1554
+ {
1555
+ "alignItems": "center",
1556
+ "flexDirection": "row",
1557
+ "left": -32,
1558
+ "position": "absolute",
1559
+ "right": 0,
1560
+ "top": -10.666666666666666,
1561
+ "transform": [
1562
+ {
1563
+ "translateY": 0,
1564
+ },
1565
+ {
1566
+ "translateX": 48,
1567
+ },
1568
+ {
1569
+ "scale": 1,
1570
+ },
1571
+ ],
1572
+ "zIndex": 1,
1573
+ }
1549
1574
  }
1550
- testID="label-container"
1575
+ themeVariant="text"
1551
1576
  >
1552
1577
  <Text
1553
1578
  allowFontScaling={false}
@@ -1556,14 +1581,17 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1556
1581
  {
1557
1582
  "color": "#001f23",
1558
1583
  "fontFamily": "BeVietnamPro-Regular",
1559
- "fontSize": 12,
1584
+ "fontSize": 16,
1560
1585
  "letterSpacing": 0.48,
1561
- "lineHeight": 16,
1586
+ "lineHeight": 24,
1562
1587
  },
1563
1588
  [
1564
1589
  {
1590
+ "alignContent": "center",
1591
+ "alignItems": "center",
1565
1592
  "color": "#001f23",
1566
- "lineHeight": 12,
1593
+ "marginTop": -2,
1594
+ "textAlignVertical": "center",
1567
1595
  },
1568
1596
  {
1569
1597
  "backgroundColor": "#ffffff",
@@ -1572,9 +1600,10 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
1572
1600
  ]
1573
1601
  }
1574
1602
  testID="input-label"
1575
- themeFontWeight="regular"
1576
1603
  themeIntent="body"
1577
1604
  themeState="filled"
1605
+ themeTypeface="neutral"
1606
+ themeVariant="regular"
1578
1607
  >
1579
1608
  Allow notifications
1580
1609
  </Text>
@@ -1765,6 +1794,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1765
1794
  }
1766
1795
  >
1767
1796
  <View
1797
+ onLayout={[Function]}
1768
1798
  style={
1769
1799
  [
1770
1800
  {
@@ -1804,24 +1834,34 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1804
1834
  themeState="filled"
1805
1835
  />
1806
1836
  <View
1837
+ onLayout={[Function]}
1838
+ />
1839
+ <View
1840
+ collapsable={false}
1807
1841
  pointerEvents="none"
1808
1842
  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
- ]
1843
+ {
1844
+ "alignItems": "center",
1845
+ "flexDirection": "row",
1846
+ "left": -32,
1847
+ "position": "absolute",
1848
+ "right": 0,
1849
+ "top": -10.666666666666666,
1850
+ "transform": [
1851
+ {
1852
+ "translateY": 0,
1853
+ },
1854
+ {
1855
+ "translateX": 48,
1856
+ },
1857
+ {
1858
+ "scale": 1,
1859
+ },
1860
+ ],
1861
+ "zIndex": 1,
1862
+ }
1823
1863
  }
1824
- testID="label-container"
1864
+ themeVariant="text"
1825
1865
  >
1826
1866
  <Text
1827
1867
  allowFontScaling={false}
@@ -1830,14 +1870,17 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1830
1870
  {
1831
1871
  "color": "#001f23",
1832
1872
  "fontFamily": "BeVietnamPro-Regular",
1833
- "fontSize": 12,
1873
+ "fontSize": 16,
1834
1874
  "letterSpacing": 0.48,
1835
- "lineHeight": 16,
1875
+ "lineHeight": 24,
1836
1876
  },
1837
1877
  [
1838
1878
  {
1879
+ "alignContent": "center",
1880
+ "alignItems": "center",
1839
1881
  "color": "#001f23",
1840
- "lineHeight": 12,
1882
+ "marginTop": -2,
1883
+ "textAlignVertical": "center",
1841
1884
  },
1842
1885
  {
1843
1886
  "backgroundColor": "#ffffff",
@@ -1846,9 +1889,10 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
1846
1889
  ]
1847
1890
  }
1848
1891
  testID="input-label"
1849
- themeFontWeight="regular"
1850
1892
  themeIntent="body"
1851
1893
  themeState="filled"
1894
+ themeTypeface="neutral"
1895
+ themeVariant="regular"
1852
1896
  >
1853
1897
  Allow notifications
1854
1898
  </Text>
@@ -3345,6 +3389,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
3345
3389
  }
3346
3390
  >
3347
3391
  <View
3392
+ onLayout={[Function]}
3348
3393
  style={
3349
3394
  [
3350
3395
  {
@@ -3384,24 +3429,34 @@ exports[`rendering renders correctly when input is loading 1`] = `
3384
3429
  themeState="readonly"
3385
3430
  />
3386
3431
  <View
3432
+ onLayout={[Function]}
3433
+ />
3434
+ <View
3435
+ collapsable={false}
3387
3436
  pointerEvents="none"
3388
3437
  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
- ]
3438
+ {
3439
+ "alignItems": "center",
3440
+ "flexDirection": "row",
3441
+ "left": -32,
3442
+ "position": "absolute",
3443
+ "right": 0,
3444
+ "top": -10.666666666666666,
3445
+ "transform": [
3446
+ {
3447
+ "translateY": 0,
3448
+ },
3449
+ {
3450
+ "translateX": 48,
3451
+ },
3452
+ {
3453
+ "scale": 1,
3454
+ },
3455
+ ],
3456
+ "zIndex": 1,
3457
+ }
3403
3458
  }
3404
- testID="label-container"
3459
+ themeVariant="text"
3405
3460
  >
3406
3461
  <Text
3407
3462
  allowFontScaling={false}
@@ -3410,14 +3465,17 @@ exports[`rendering renders correctly when input is loading 1`] = `
3410
3465
  {
3411
3466
  "color": "#001f23",
3412
3467
  "fontFamily": "BeVietnamPro-Regular",
3413
- "fontSize": 12,
3468
+ "fontSize": 16,
3414
3469
  "letterSpacing": 0.48,
3415
- "lineHeight": 16,
3470
+ "lineHeight": 24,
3416
3471
  },
3417
3472
  [
3418
3473
  {
3474
+ "alignContent": "center",
3475
+ "alignItems": "center",
3419
3476
  "color": "#808f91",
3420
- "lineHeight": 12,
3477
+ "marginTop": -2,
3478
+ "textAlignVertical": "center",
3421
3479
  },
3422
3480
  {
3423
3481
  "backgroundColor": "#ffffff",
@@ -3426,9 +3484,10 @@ exports[`rendering renders correctly when input is loading 1`] = `
3426
3484
  ]
3427
3485
  }
3428
3486
  testID="input-label"
3429
- themeFontWeight="regular"
3430
3487
  themeIntent="body"
3431
3488
  themeState="readonly"
3489
+ themeTypeface="neutral"
3490
+ themeVariant="regular"
3432
3491
  >
3433
3492
  Allow notifications
3434
3493
  </Text>
@@ -3632,6 +3691,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
3632
3691
  }
3633
3692
  >
3634
3693
  <View
3694
+ onLayout={[Function]}
3635
3695
  style={
3636
3696
  [
3637
3697
  {
@@ -3671,24 +3731,34 @@ exports[`rendering renders correctly when receives sections 1`] = `
3671
3731
  themeState="filled"
3672
3732
  />
3673
3733
  <View
3734
+ onLayout={[Function]}
3735
+ />
3736
+ <View
3737
+ collapsable={false}
3674
3738
  pointerEvents="none"
3675
3739
  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
- ]
3740
+ {
3741
+ "alignItems": "center",
3742
+ "flexDirection": "row",
3743
+ "left": -32,
3744
+ "position": "absolute",
3745
+ "right": 0,
3746
+ "top": -10.666666666666666,
3747
+ "transform": [
3748
+ {
3749
+ "translateY": 0,
3750
+ },
3751
+ {
3752
+ "translateX": 48,
3753
+ },
3754
+ {
3755
+ "scale": 1,
3756
+ },
3757
+ ],
3758
+ "zIndex": 1,
3759
+ }
3690
3760
  }
3691
- testID="label-container"
3761
+ themeVariant="text"
3692
3762
  >
3693
3763
  <Text
3694
3764
  allowFontScaling={false}
@@ -3697,14 +3767,17 @@ exports[`rendering renders correctly when receives sections 1`] = `
3697
3767
  {
3698
3768
  "color": "#001f23",
3699
3769
  "fontFamily": "BeVietnamPro-Regular",
3700
- "fontSize": 12,
3770
+ "fontSize": 16,
3701
3771
  "letterSpacing": 0.48,
3702
- "lineHeight": 16,
3772
+ "lineHeight": 24,
3703
3773
  },
3704
3774
  [
3705
3775
  {
3776
+ "alignContent": "center",
3777
+ "alignItems": "center",
3706
3778
  "color": "#001f23",
3707
- "lineHeight": 12,
3779
+ "marginTop": -2,
3780
+ "textAlignVertical": "center",
3708
3781
  },
3709
3782
  {
3710
3783
  "backgroundColor": "#ffffff",
@@ -3713,9 +3786,10 @@ exports[`rendering renders correctly when receives sections 1`] = `
3713
3786
  ]
3714
3787
  }
3715
3788
  testID="input-label"
3716
- themeFontWeight="regular"
3717
3789
  themeIntent="body"
3718
3790
  themeState="filled"
3791
+ themeTypeface="neutral"
3792
+ themeVariant="regular"
3719
3793
  >
3720
3794
  Allow notifications
3721
3795
  </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,16 @@ 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
+ position: 'absolute',
19
+ zIndex: 1,
20
+ left: -theme.__hd__.textInput.space.labelLeft,
21
+ right: 0,
22
+ top: -theme.__hd__.textInput.space.labelTop,
43
23
  }));
44
24
 
45
25
  const StyledLabelInsideTextInput = styled(Typography.Body)<{
@@ -144,9 +124,6 @@ const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
144
124
 
145
125
  export {
146
126
  StyledTextInputContainer,
147
- StyledLabel,
148
- StyledLabelContainer,
149
- StyledAsteriskLabel,
150
127
  StyledAsteriskLabelInsideTextInput,
151
128
  StyledTextInput,
152
129
  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 />);