@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/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -20,24 +20,15 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
20
20
  }
21
21
  >
22
22
  <View
23
- pointerEvents="auto"
24
- style={
25
- Array [
26
- Object {
27
- "marginVertical": 8,
28
- "width": "100%",
29
- },
30
- undefined,
31
- ]
32
- }
23
+ pointerEvents="none"
33
24
  >
34
25
  <View
26
+ pointerEvents="auto"
35
27
  style={
36
28
  Array [
37
29
  Object {
38
- "alignItems": "center",
39
- "flexDirection": "row",
40
- "padding": 16,
30
+ "marginVertical": 8,
31
+ "width": "100%",
41
32
  },
42
33
  undefined,
43
34
  ]
@@ -47,135 +38,157 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
47
38
  style={
48
39
  Array [
49
40
  Object {
50
- "borderColor": "#8b8d92",
51
- "borderRadius": 8,
52
- "borderWidth": 1,
53
- "bottom": 0,
54
- "left": 0,
55
- "position": "absolute",
56
- "right": 0,
57
- "top": 0,
58
- },
59
- undefined,
60
- ]
61
- }
62
- themeVariant="readonly"
63
- />
64
- <View
65
- pointerEvents="none"
66
- style={
67
- Array [
68
- Object {
69
- "backgroundColor": "#ffffff",
41
+ "alignItems": "center",
70
42
  "flexDirection": "row",
71
- "left": 16,
72
- "paddingHorizontal": 4,
73
- "position": "absolute",
74
- "top": -10,
75
- "zIndex": 1,
43
+ "padding": 16,
76
44
  },
77
45
  undefined,
78
46
  ]
79
47
  }
80
48
  >
81
- <Text
49
+ <View
82
50
  style={
83
51
  Array [
84
52
  Object {
85
- "color": "#292a2b",
86
- "fontFamily": "BeVietnamPro-Regular",
87
- "fontSize": 12,
88
- "letterSpacing": 0.36,
89
- "lineHeight": 20,
53
+ "borderColor": "#292a2b",
54
+ "borderRadius": 8,
55
+ "borderWidth": 1,
56
+ "bottom": 0,
57
+ "left": 0,
58
+ "position": "absolute",
59
+ "right": 0,
60
+ "top": 0,
90
61
  },
91
- Array [
92
- Object {
93
- "color": "#8b8d92",
94
- },
95
- undefined,
96
- ],
62
+ undefined,
63
+ ]
64
+ }
65
+ themeVariant="filled"
66
+ />
67
+ <View
68
+ pointerEvents="none"
69
+ style={
70
+ Array [
71
+ Object {
72
+ "backgroundColor": "#ffffff",
73
+ "flexDirection": "row",
74
+ "left": 16,
75
+ "paddingHorizontal": 4,
76
+ "position": "absolute",
77
+ "top": -10,
78
+ "zIndex": 1,
79
+ },
80
+ undefined,
97
81
  ]
98
82
  }
99
- testID="input-label"
100
- themeFontSize="small"
101
- themeFontWeight="regular"
102
- themeIntent="body"
103
- themeVariant="readonly"
104
83
  >
105
- Allow notifications
106
- </Text>
107
- </View>
108
- <View
109
- style={
110
- Array [
111
- Object {
112
- "alignItems": "center",
113
- "alignSelf": "stretch",
114
- "flexDirection": "row",
115
- "flexGrow": 2,
116
- },
117
- undefined,
118
- ]
119
- }
120
- >
121
- <TextInput
122
- accessibilityState={
123
- Object {
124
- "disabled": false,
84
+ <Text
85
+ style={
86
+ Array [
87
+ Object {
88
+ "color": "#292a2b",
89
+ "fontFamily": "BeVietnamPro-Regular",
90
+ "fontSize": 12,
91
+ "letterSpacing": 0.36,
92
+ "lineHeight": 20,
93
+ },
94
+ Array [
95
+ Object {
96
+ "color": "#292a2b",
97
+ },
98
+ undefined,
99
+ ],
100
+ ]
125
101
  }
126
- }
127
- editable={false}
128
- multiline={true}
129
- onBlur={[Function]}
130
- onChangeText={[Function]}
131
- onFocus={[Function]}
132
- onPressIn={[Function]}
102
+ testID="input-label"
103
+ themeFontSize="small"
104
+ themeFontWeight="regular"
105
+ themeIntent="body"
106
+ themeVariant="filled"
107
+ >
108
+ Allow notifications
109
+ </Text>
110
+ </View>
111
+ <View
133
112
  style={
134
113
  Array [
135
114
  Object {
115
+ "alignItems": "center",
136
116
  "alignSelf": "stretch",
117
+ "flexDirection": "row",
137
118
  "flexGrow": 2,
138
- "fontSize": 14,
139
- "marginHorizontal": 8,
140
- "textAlignVertical": "center",
141
119
  },
120
+ undefined,
121
+ ]
122
+ }
123
+ >
124
+ <TextInput
125
+ accessibilityState={
126
+ Object {
127
+ "disabled": false,
128
+ }
129
+ }
130
+ editable={true}
131
+ multiline={true}
132
+ onBlur={[Function]}
133
+ onChangeText={[Function]}
134
+ onFocus={[Function]}
135
+ style={
136
+ Array [
137
+ Object {
138
+ "alignSelf": "stretch",
139
+ "flexGrow": 2,
140
+ "fontSize": 14,
141
+ "marginHorizontal": 8,
142
+ "textAlignVertical": "center",
143
+ },
144
+ Object {
145
+ "color": "#292a2b",
146
+ },
147
+ ]
148
+ }
149
+ testID="text-input"
150
+ value="Monday"
151
+ />
152
+ </View>
153
+ <HeroIcon
154
+ name="arrow-down"
155
+ style={
156
+ Array [
142
157
  Object {
143
158
  "color": "#292a2b",
159
+ "fontSize": 16,
144
160
  },
161
+ undefined,
145
162
  ]
146
163
  }
147
- testID="text-input"
148
- value="Monday"
164
+ testID="input-suffix"
165
+ themeIntent="text"
166
+ themeSize="xsmall"
149
167
  />
150
168
  </View>
151
- <HeroIcon
152
- name="arrow-down"
169
+ <View
153
170
  style={
154
171
  Array [
155
172
  Object {
156
- "color": "#292a2b",
157
- "fontSize": 16,
173
+ "paddingLeft": 16,
158
174
  },
159
175
  undefined,
160
176
  ]
161
177
  }
162
- testID="input-suffix"
163
- themeIntent="text"
164
- themeSize="xsmall"
165
- />
178
+ >
179
+ <View
180
+ style={
181
+ Array [
182
+ Object {
183
+ "flexDirection": "row",
184
+ "justifyContent": "space-between",
185
+ },
186
+ undefined,
187
+ ]
188
+ }
189
+ />
190
+ </View>
166
191
  </View>
167
- <View
168
- style={
169
- Array [
170
- Object {
171
- "flex": 1,
172
- "flexDirection": "row",
173
- "justifyContent": "space-between",
174
- },
175
- undefined,
176
- ]
177
- }
178
- />
179
192
  </View>
180
193
  <Modal
181
194
  hardwareAccelerated={false}
@@ -820,24 +833,15 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
820
833
  }
821
834
  >
822
835
  <View
823
- pointerEvents="auto"
824
- style={
825
- Array [
826
- Object {
827
- "marginVertical": 8,
828
- "width": "100%",
829
- },
830
- undefined,
831
- ]
832
- }
836
+ pointerEvents="none"
833
837
  >
834
838
  <View
839
+ pointerEvents="auto"
835
840
  style={
836
841
  Array [
837
842
  Object {
838
- "alignItems": "center",
839
- "flexDirection": "row",
840
- "padding": 16,
843
+ "marginVertical": 8,
844
+ "width": "100%",
841
845
  },
842
846
  undefined,
843
847
  ]
@@ -847,135 +851,157 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
847
851
  style={
848
852
  Array [
849
853
  Object {
850
- "borderColor": "#8b8d92",
851
- "borderRadius": 8,
852
- "borderWidth": 1,
853
- "bottom": 0,
854
- "left": 0,
855
- "position": "absolute",
856
- "right": 0,
857
- "top": 0,
858
- },
859
- undefined,
860
- ]
861
- }
862
- themeVariant="readonly"
863
- />
864
- <View
865
- pointerEvents="none"
866
- style={
867
- Array [
868
- Object {
869
- "backgroundColor": "#ffffff",
854
+ "alignItems": "center",
870
855
  "flexDirection": "row",
871
- "left": 16,
872
- "paddingHorizontal": 4,
873
- "position": "absolute",
874
- "top": -10,
875
- "zIndex": 1,
856
+ "padding": 16,
876
857
  },
877
858
  undefined,
878
859
  ]
879
860
  }
880
861
  >
881
- <Text
862
+ <View
882
863
  style={
883
864
  Array [
884
865
  Object {
885
- "color": "#292a2b",
886
- "fontFamily": "BeVietnamPro-Regular",
887
- "fontSize": 12,
888
- "letterSpacing": 0.36,
889
- "lineHeight": 20,
866
+ "borderColor": "#292a2b",
867
+ "borderRadius": 8,
868
+ "borderWidth": 1,
869
+ "bottom": 0,
870
+ "left": 0,
871
+ "position": "absolute",
872
+ "right": 0,
873
+ "top": 0,
890
874
  },
891
- Array [
892
- Object {
893
- "color": "#8b8d92",
894
- },
895
- undefined,
896
- ],
875
+ undefined,
876
+ ]
877
+ }
878
+ themeVariant="filled"
879
+ />
880
+ <View
881
+ pointerEvents="none"
882
+ style={
883
+ Array [
884
+ Object {
885
+ "backgroundColor": "#ffffff",
886
+ "flexDirection": "row",
887
+ "left": 16,
888
+ "paddingHorizontal": 4,
889
+ "position": "absolute",
890
+ "top": -10,
891
+ "zIndex": 1,
892
+ },
893
+ undefined,
897
894
  ]
898
895
  }
899
- testID="input-label"
900
- themeFontSize="small"
901
- themeFontWeight="regular"
902
- themeIntent="body"
903
- themeVariant="readonly"
904
896
  >
905
- Allow notifications
906
- </Text>
907
- </View>
908
- <View
909
- style={
910
- Array [
911
- Object {
912
- "alignItems": "center",
913
- "alignSelf": "stretch",
914
- "flexDirection": "row",
915
- "flexGrow": 2,
916
- },
917
- undefined,
918
- ]
919
- }
920
- >
921
- <TextInput
922
- accessibilityState={
923
- Object {
924
- "disabled": false,
897
+ <Text
898
+ style={
899
+ Array [
900
+ Object {
901
+ "color": "#292a2b",
902
+ "fontFamily": "BeVietnamPro-Regular",
903
+ "fontSize": 12,
904
+ "letterSpacing": 0.36,
905
+ "lineHeight": 20,
906
+ },
907
+ Array [
908
+ Object {
909
+ "color": "#292a2b",
910
+ },
911
+ undefined,
912
+ ],
913
+ ]
925
914
  }
926
- }
927
- editable={false}
928
- multiline={true}
929
- onBlur={[Function]}
930
- onChangeText={[Function]}
931
- onFocus={[Function]}
932
- onPressIn={[Function]}
915
+ testID="input-label"
916
+ themeFontSize="small"
917
+ themeFontWeight="regular"
918
+ themeIntent="body"
919
+ themeVariant="filled"
920
+ >
921
+ Allow notifications
922
+ </Text>
923
+ </View>
924
+ <View
933
925
  style={
934
926
  Array [
935
927
  Object {
928
+ "alignItems": "center",
936
929
  "alignSelf": "stretch",
930
+ "flexDirection": "row",
937
931
  "flexGrow": 2,
938
- "fontSize": 14,
939
- "marginHorizontal": 8,
940
- "textAlignVertical": "center",
941
932
  },
933
+ undefined,
934
+ ]
935
+ }
936
+ >
937
+ <TextInput
938
+ accessibilityState={
939
+ Object {
940
+ "disabled": false,
941
+ }
942
+ }
943
+ editable={true}
944
+ multiline={true}
945
+ onBlur={[Function]}
946
+ onChangeText={[Function]}
947
+ onFocus={[Function]}
948
+ style={
949
+ Array [
950
+ Object {
951
+ "alignSelf": "stretch",
952
+ "flexGrow": 2,
953
+ "fontSize": 14,
954
+ "marginHorizontal": 8,
955
+ "textAlignVertical": "center",
956
+ },
957
+ Object {
958
+ "color": "#292a2b",
959
+ },
960
+ ]
961
+ }
962
+ testID="text-input"
963
+ value="Monday"
964
+ />
965
+ </View>
966
+ <HeroIcon
967
+ name="arrow-down"
968
+ style={
969
+ Array [
942
970
  Object {
943
971
  "color": "#292a2b",
972
+ "fontSize": 16,
944
973
  },
974
+ undefined,
945
975
  ]
946
976
  }
947
- testID="text-input"
948
- value="Monday"
977
+ testID="input-suffix"
978
+ themeIntent="text"
979
+ themeSize="xsmall"
949
980
  />
950
981
  </View>
951
- <HeroIcon
952
- name="arrow-down"
982
+ <View
953
983
  style={
954
984
  Array [
955
985
  Object {
956
- "color": "#292a2b",
957
- "fontSize": 16,
986
+ "paddingLeft": 16,
958
987
  },
959
988
  undefined,
960
989
  ]
961
990
  }
962
- testID="input-suffix"
963
- themeIntent="text"
964
- themeSize="xsmall"
965
- />
991
+ >
992
+ <View
993
+ style={
994
+ Array [
995
+ Object {
996
+ "flexDirection": "row",
997
+ "justifyContent": "space-between",
998
+ },
999
+ undefined,
1000
+ ]
1001
+ }
1002
+ />
1003
+ </View>
966
1004
  </View>
967
- <View
968
- style={
969
- Array [
970
- Object {
971
- "flex": 1,
972
- "flexDirection": "row",
973
- "justifyContent": "space-between",
974
- },
975
- undefined,
976
- ]
977
- }
978
- />
979
1005
  </View>
980
1006
  <Modal
981
1007
  hardwareAccelerated={false}
package/src/components/Select/SingleSelect/index.tsx CHANGED
@@ -1,6 +1,5 @@
1
- import { useTheme } from '@emotion/react';
2
1
  import React, { useState } from 'react';
3
- import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
2
+ import { StyleProp, ViewStyle, TouchableOpacity, View } from 'react-native';
4
3
 
5
4
  import { OptionType } from '../types';
6
5
  import BottomSheet from '../../BottomSheet';
@@ -47,26 +46,22 @@ const SingleSelect = <T,>({
47
46
  label,
48
47
  onConfirm,
49
48
  }: SingleSelectProps<T>) => {
50
- const theme = useTheme();
51
49
  const [open, setOpen] = useState(false);
52
50
  const [selectingValue, setSelectingValue] = useState<T | null>(value);
53
51
  const displayedValue = options.find(opt => value === opt.value)?.text;
54
52
 
55
53
  return (
56
54
  <TouchableOpacity onPress={() => setOpen(true)}>
57
- <TextInput
58
- label={label}
59
- value={displayedValue}
60
- onPressIn={() => setOpen(true)}
61
- editable={false}
62
- // when input is not editable on Android, the text color is gray
63
- // hence, adding this to make the text color the same as iOS
64
- textStyle={{ color: theme.colors.text }}
65
- suffix="arrow-down"
66
- multiline
67
- style={style}
68
- testID={testID}
69
- />
55
+ <View pointerEvents="none">
56
+ <TextInput
57
+ label={label}
58
+ value={displayedValue}
59
+ suffix="arrow-down"
60
+ multiline
61
+ style={style}
62
+ testID={testID}
63
+ />
64
+ </View>
70
65
  <BottomSheet
71
66
  open={open}
72
67
  onRequestClose={() => setOpen(false)}
package/src/components/TextInput/StyledTextInput.tsx CHANGED
@@ -60,7 +60,6 @@ const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
60
60
  fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
61
61
  }));
62
62
  const StyledErrorContainer = styled(View)(({ theme }) => ({
63
- marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
64
63
  marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
65
64
  flexDirection: 'row',
66
65
  alignItems: 'center',
@@ -88,7 +87,6 @@ const StyledMaxLengthMessage = styled(Typography.Text)<{
88
87
 
89
88
  const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
90
89
  fontSize: theme.__hd__.textInput.fontSizes.error,
91
- marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
92
90
  }));
93
91
 
94
92
  const StyledTextInput = styled(TextInput)(({ theme }) => ({
@@ -126,8 +124,12 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
126
124
  flexGrow: 2,
127
125
  }));
128
126
 
129
- const StyledErrorAndHelpTextContainer = styled(View)(() => ({
130
- flex: 1,
127
+ const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
128
+ paddingLeft:
129
+ theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
130
+ }));
131
+
132
+ const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
131
133
  flexDirection: 'row',
132
134
  justifyContent: 'space-between',
133
135
  }));
@@ -149,4 +151,5 @@ export {
149
151
  StyledLabelContainerInsideTextInput,
150
152
  StyledErrorAndHelpTextContainer,
151
153
  StyledBorderBackDrop,
154
+ StyledErrorAndMaxLengthContainer,
152
155
  };