@hero-design/rn 8.42.0 → 8.42.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 (18) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/es/index.js +684 -684
  3. package/lib/index.js +683 -683
  4. package/package.json +7 -7
  5. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +211 -197
  6. package/src/components/BottomSheet/index.tsx +1 -1
  7. package/src/components/Carousel/__tests__/index.spec.tsx +10 -8
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +0 -12
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +399 -416
  10. package/src/components/Error/__tests__/index.spec.tsx +6 -9
  11. package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx +10 -8
  12. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +451 -363
  13. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +10 -7
  14. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +419 -357
  15. package/src/components/Success/__tests__/index.spec.tsx +6 -9
  16. package/src/components/Tabs/__tests__/SceneView.spec.tsx +23 -19
  17. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +399 -416
  18. package/src/testHelpers/renderWithTheme.tsx +7 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hero-design/rn",
3
- "version": "8.42.0",
3
+ "version": "8.42.1",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -21,14 +21,14 @@
21
21
  "dependencies": {
22
22
  "@emotion/native": "^11.9.3",
23
23
  "@emotion/react": "^11.9.3",
24
- "@hero-design/colors": "8.42.0",
24
+ "@hero-design/colors": "8.42.1",
25
25
  "date-fns": "^2.16.1",
26
26
  "events": "^3.2.0",
27
27
  "hero-editor": "^1.9.21",
28
28
  "nanoid": "^4.0.2"
29
29
  },
30
30
  "peerDependencies": {
31
- "@hero-design/react-native-month-year-picker": "^8.42.0",
31
+ "@hero-design/react-native-month-year-picker": "^8.42.1",
32
32
  "@react-native-community/datetimepicker": "^3.5.2",
33
33
  "@react-native-community/slider": "4.1.12",
34
34
  "react": "18.0.0",
@@ -47,8 +47,8 @@
47
47
  "@babel/preset-typescript": "^7.17.12",
48
48
  "@babel/runtime": "^7.18.9",
49
49
  "@emotion/jest": "^11.11.0",
50
- "@hero-design/eslint-plugin": "8.42.0",
51
- "@hero-design/react-native-month-year-picker": "^8.42.0",
50
+ "@hero-design/eslint-plugin": "8.42.1",
51
+ "@hero-design/react-native-month-year-picker": "^8.42.1",
52
52
  "@react-native-community/datetimepicker": "^3.5.2",
53
53
  "@react-native-community/slider": "4.1.12",
54
54
  "@rollup/plugin-babel": "^5.3.1",
@@ -64,12 +64,12 @@
64
64
  "@types/react-native": "^0.67.7",
65
65
  "@types/react-native-vector-icons": "^6.4.10",
66
66
  "babel-plugin-inline-import": "^3.0.0",
67
- "eslint-config-hd": "8.42.0",
67
+ "eslint-config-hd": "8.42.1",
68
68
  "eslint-plugin-import": "^2.27.5",
69
69
  "jest": "^29.6.2",
70
70
  "jest-environment-jsdom": "^29.6.2",
71
71
  "jest-junit": "^16.0.0",
72
- "prettier-config-hd": "8.42.0",
72
+ "prettier-config-hd": "8.42.1",
73
73
  "react": "18.0.0",
74
74
  "react-native": "0.69.7",
75
75
  "react-native-gesture-handler": "~2.5.0",
package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -1,273 +1,287 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
4
- <Modal
5
- hardwareAccelerated={false}
6
- onRequestClose={[MockFunction]}
7
- transparent={true}
8
- visible={false}
9
- />
10
- `;
3
+ exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `null`;
11
4
 
12
- exports[`BottomSheet renders correctly with close state 1`] = `
13
- <Modal
14
- hardwareAccelerated={false}
15
- onRequestClose={[MockFunction]}
16
- transparent={true}
17
- visible={false}
18
- />
19
- `;
5
+ exports[`BottomSheet renders correctly with close state 1`] = `null`;
20
6
 
21
7
  exports[`BottomSheet renders correctly with open state 1`] = `
22
- <Modal
23
- hardwareAccelerated={false}
24
- onRequestClose={[MockFunction]}
25
- transparent={true}
26
- visible={true}
27
- >
8
+ [
28
9
  <View
29
- pointerEvents="box-none"
10
+ collapsable={false}
30
11
  style={
31
- [
32
- {
33
- "bottom": 0,
34
- "flexDirection": "column-reverse",
35
- "left": 0,
36
- "position": "absolute",
37
- "right": 0,
38
- "top": 0,
39
- },
40
- undefined,
41
- ]
12
+ {
13
+ "backgroundColor": "transparent",
14
+ "bottom": 0,
15
+ "left": 0,
16
+ "opacity": 0.4,
17
+ "position": "absolute",
18
+ "right": 0,
19
+ "top": 0,
20
+ }
21
+ }
22
+ />,
23
+ <View
24
+ collapsable={false}
25
+ style={
26
+ {
27
+ "bottom": 0,
28
+ "left": 0,
29
+ "opacity": 1,
30
+ "position": "absolute",
31
+ "right": 0,
32
+ "top": 0,
33
+ "transform": [
34
+ {
35
+ "translateY": 0,
36
+ },
37
+ ],
38
+ }
42
39
  }
43
40
  >
44
41
  <View
45
- onLayout={[Function]}
42
+ pointerEvents="box-none"
46
43
  style={
47
44
  [
48
- [
49
- {
50
- "flex": 1,
51
- "flexDirection": "column-reverse",
52
- },
53
- undefined,
54
- ],
55
- {
56
- "paddingBottom": 0,
57
- },
58
- ]
59
- }
60
- >
61
- <View
62
- accessible={true}
63
- collapsable={false}
64
- focusable={true}
65
- onBlur={[Function]}
66
- onClick={[Function]}
67
- onFocus={[Function]}
68
- onResponderGrant={[Function]}
69
- onResponderMove={[Function]}
70
- onResponderRelease={[Function]}
71
- onResponderTerminate={[Function]}
72
- onResponderTerminationRequest={[Function]}
73
- onStartShouldSetResponder={[Function]}
74
- style={
75
45
  {
76
- "backgroundColor": "#000000",
77
46
  "bottom": 0,
47
+ "flexDirection": "column-reverse",
78
48
  "left": 0,
79
- "opacity": 0,
80
49
  "position": "absolute",
81
50
  "right": 0,
82
51
  "top": 0,
83
- }
84
- }
85
- />
86
- <RCTSafeAreaView
87
- collapsable={false}
88
- emulateUnlessSupported={true}
52
+ },
53
+ undefined,
54
+ ]
55
+ }
56
+ >
57
+ <View
58
+ onLayout={[Function]}
89
59
  style={
90
- {
91
- "backgroundColor": "#ffffff",
92
- "borderTopLeftRadius": 16,
93
- "borderTopRightRadius": 16,
94
- "elevation": 10,
95
- "maxHeight": "94%",
96
- "shadowColor": "#001f23",
97
- "shadowOffset": {
98
- "height": 3,
99
- "width": 0,
100
- },
101
- "shadowOpacity": 0.4,
102
- "shadowRadius": 16,
103
- "transform": [
104
- {
105
- "scaleY": 1,
106
- },
60
+ [
61
+ [
107
62
  {
108
- "translateY": 1334,
63
+ "flex": 1,
64
+ "flexDirection": "column-reverse",
109
65
  },
66
+ undefined,
110
67
  ],
111
- "width": "100%",
112
- }
68
+ {
69
+ "paddingBottom": 0,
70
+ },
71
+ ]
113
72
  }
114
73
  >
115
74
  <View
75
+ accessible={true}
76
+ collapsable={false}
77
+ focusable={true}
78
+ onBlur={[Function]}
79
+ onClick={[Function]}
80
+ onFocus={[Function]}
81
+ onResponderGrant={[Function]}
82
+ onResponderMove={[Function]}
83
+ onResponderRelease={[Function]}
84
+ onResponderTerminate={[Function]}
85
+ onResponderTerminationRequest={[Function]}
86
+ onStartShouldSetResponder={[Function]}
116
87
  style={
117
- [
118
- {
119
- "flexDirection": "row",
120
- "paddingHorizontal": 16,
121
- "paddingVertical": 8,
88
+ {
89
+ "backgroundColor": "#000000",
90
+ "bottom": 0,
91
+ "left": 0,
92
+ "opacity": 0,
93
+ "position": "absolute",
94
+ "right": 0,
95
+ "top": 0,
96
+ }
97
+ }
98
+ />
99
+ <RCTSafeAreaView
100
+ collapsable={false}
101
+ emulateUnlessSupported={true}
102
+ style={
103
+ {
104
+ "backgroundColor": "#ffffff",
105
+ "borderTopLeftRadius": 16,
106
+ "borderTopRightRadius": 16,
107
+ "elevation": 10,
108
+ "maxHeight": "94%",
109
+ "shadowColor": "#001f23",
110
+ "shadowOffset": {
111
+ "height": 3,
112
+ "width": 0,
122
113
  },
123
- undefined,
124
- ]
114
+ "shadowOpacity": 0.4,
115
+ "shadowRadius": 16,
116
+ "transform": [
117
+ {
118
+ "scaleY": 1,
119
+ },
120
+ {
121
+ "translateY": 1334,
122
+ },
123
+ ],
124
+ "width": "100%",
125
+ }
125
126
  }
126
127
  >
127
128
  <View
128
129
  style={
129
130
  [
130
131
  {
131
- "flex": 1,
132
- "justifyContent": "center",
132
+ "flexDirection": "row",
133
+ "paddingHorizontal": 16,
134
+ "paddingVertical": 8,
133
135
  },
134
136
  undefined,
135
137
  ]
136
138
  }
137
139
  >
138
- <Text
139
- allowFontScaling={false}
140
+ <View
140
141
  style={
141
142
  [
142
143
  {
143
- "color": "#001f23",
144
- "fontFamily": "BeVietnamPro-SemiBold",
145
- "fontSize": 16,
146
- "letterSpacing": 0.24,
147
- "lineHeight": 24,
144
+ "flex": 1,
145
+ "justifyContent": "center",
148
146
  },
149
147
  undefined,
150
148
  ]
151
149
  }
152
- themeIntent="body"
153
- themeTypeface="neutral"
154
- themeVariant="regular-bold"
155
- >
156
- Title
157
- </Text>
158
- </View>
159
- <View
160
- style={
161
- [
162
- {
163
- "alignItems": "center",
164
- "height": 48,
165
- "justifyContent": "center",
166
- "marginLeft": 12,
167
- "width": 48,
168
- },
169
- undefined,
170
- ]
171
- }
172
- >
173
- <View
174
- accessible={true}
175
- collapsable={false}
176
- focusable={true}
177
- onClick={[Function]}
178
- onResponderGrant={[Function]}
179
- onResponderMove={[Function]}
180
- onResponderRelease={[Function]}
181
- onResponderTerminate={[Function]}
182
- onResponderTerminationRequest={[Function]}
183
- onStartShouldSetResponder={[Function]}
184
- style={
185
- {
186
- "opacity": 1,
187
- }
188
- }
189
- testID="bottom-sheet-close-icon"
190
150
  >
191
- <HeroIcon
192
- name="cancel"
151
+ <Text
152
+ allowFontScaling={false}
193
153
  style={
194
154
  [
195
155
  {
196
156
  "color": "#001f23",
157
+ "fontFamily": "BeVietnamPro-SemiBold",
197
158
  "fontSize": 16,
159
+ "letterSpacing": 0.24,
160
+ "lineHeight": 24,
198
161
  },
199
162
  undefined,
200
163
  ]
201
164
  }
202
- themeIntent="text"
203
- themeSize="xsmall"
204
- />
165
+ themeIntent="body"
166
+ themeTypeface="neutral"
167
+ themeVariant="regular-bold"
168
+ >
169
+ Title
170
+ </Text>
205
171
  </View>
206
- </View>
207
- </View>
208
- <Text>
209
- Content
210
- </Text>
211
- <View>
212
- <View
213
- style={
214
- [
215
- {
216
- "alignItems": "center",
217
- "flexDirection": "row",
218
- "justifyContent": "flex-end",
219
- "paddingHorizontal": 12,
220
- "paddingVertical": 2,
221
- },
222
- undefined,
223
- ]
224
- }
225
- >
226
172
  <View
227
- accessibilityRole="button"
228
- accessible={true}
229
- collapsable={false}
230
- focusable={false}
231
- onClick={[Function]}
232
- onResponderGrant={[Function]}
233
- onResponderMove={[Function]}
234
- onResponderRelease={[Function]}
235
- onResponderTerminate={[Function]}
236
- onResponderTerminationRequest={[Function]}
237
- onStartShouldSetResponder={[Function]}
238
173
  style={
239
- {
240
- "opacity": 1,
241
- }
174
+ [
175
+ {
176
+ "alignItems": "center",
177
+ "height": 48,
178
+ "justifyContent": "center",
179
+ "marginLeft": 12,
180
+ "width": 48,
181
+ },
182
+ undefined,
183
+ ]
242
184
  }
243
185
  >
244
186
  <View
187
+ accessible={true}
188
+ collapsable={false}
189
+ focusable={true}
190
+ onClick={[Function]}
191
+ onResponderGrant={[Function]}
192
+ onResponderMove={[Function]}
193
+ onResponderRelease={[Function]}
194
+ onResponderTerminate={[Function]}
195
+ onResponderTerminationRequest={[Function]}
196
+ onStartShouldSetResponder={[Function]}
245
197
  style={
246
- [
247
- {},
248
- ]
198
+ {
199
+ "opacity": 1,
200
+ }
249
201
  }
202
+ testID="bottom-sheet-close-icon"
250
203
  >
251
- <Text
204
+ <HeroIcon
205
+ name="cancel"
252
206
  style={
253
207
  [
254
208
  {
255
- "color": "#007AFF",
256
- "fontSize": 18,
257
- "margin": 8,
258
- "textAlign": "center",
209
+ "color": "#001f23",
210
+ "fontSize": 16,
259
211
  },
212
+ undefined,
213
+ ]
214
+ }
215
+ themeIntent="text"
216
+ themeSize="xsmall"
217
+ />
218
+ </View>
219
+ </View>
220
+ </View>
221
+ <Text>
222
+ Content
223
+ </Text>
224
+ <View>
225
+ <View
226
+ style={
227
+ [
228
+ {
229
+ "alignItems": "center",
230
+ "flexDirection": "row",
231
+ "justifyContent": "flex-end",
232
+ "paddingHorizontal": 12,
233
+ "paddingVertical": 2,
234
+ },
235
+ undefined,
236
+ ]
237
+ }
238
+ >
239
+ <View
240
+ accessibilityRole="button"
241
+ accessible={true}
242
+ collapsable={false}
243
+ focusable={false}
244
+ onClick={[Function]}
245
+ onResponderGrant={[Function]}
246
+ onResponderMove={[Function]}
247
+ onResponderRelease={[Function]}
248
+ onResponderTerminate={[Function]}
249
+ onResponderTerminationRequest={[Function]}
250
+ onStartShouldSetResponder={[Function]}
251
+ style={
252
+ {
253
+ "opacity": 1,
254
+ }
255
+ }
256
+ >
257
+ <View
258
+ style={
259
+ [
260
+ {},
260
261
  ]
261
262
  }
262
263
  >
263
- Footer CTA
264
- </Text>
264
+ <Text
265
+ style={
266
+ [
267
+ {
268
+ "color": "#007AFF",
269
+ "fontSize": 18,
270
+ "margin": 8,
271
+ "textAlign": "center",
272
+ },
273
+ ]
274
+ }
275
+ >
276
+ Footer CTA
277
+ </Text>
278
+ </View>
265
279
  </View>
266
280
  </View>
267
281
  </View>
268
- </View>
269
- </RCTSafeAreaView>
282
+ </RCTSafeAreaView>
283
+ </View>
270
284
  </View>
271
- </View>
272
- </Modal>
285
+ </View>,
286
+ ]
273
287
  `;
package/src/components/BottomSheet/index.tsx CHANGED
@@ -6,7 +6,6 @@ import {
6
6
  Dimensions,
7
7
  Easing,
8
8
  KeyboardAvoidingViewProps,
9
- Modal,
10
9
  Platform,
11
10
  } from 'react-native';
12
11
  import BottomSheetContext from './BottomSheetContext';
@@ -19,6 +18,7 @@ import {
19
18
  StyledWrapper,
20
19
  } from './StyledBottomSheet';
21
20
  import ScrollView from './ScrollView';
21
+ import Modal from '../Modal';
22
22
 
23
23
  interface BottomSheetProps {
24
24
  /**
package/src/components/Carousel/__tests__/index.spec.tsx CHANGED
@@ -4,7 +4,7 @@ import { ImageResizeMode } from 'react-native';
4
4
  import renderWithTheme from '../../../testHelpers/renderWithTheme';
5
5
  import Carousel from '..';
6
6
  import Image from '../../Image';
7
- import { ThemeProvider, theme } from '../../..';
7
+ import { Portal, ThemeProvider, theme } from '../../..';
8
8
  import Button from '../../Button/Button';
9
9
 
10
10
  const carouselData = [
@@ -144,13 +144,15 @@ describe('Carousel', () => {
144
144
  );
145
145
  rerender(
146
146
  <ThemeProvider theme={theme}>
147
- <Carousel
148
- testID="carousel"
149
- items={carouselData}
150
- renderActions={(_) => {
151
- return <Button text="Skip" onPress={onSkip} />;
152
- }}
153
- />
147
+ <Portal.Provider>
148
+ <Carousel
149
+ testID="carousel"
150
+ items={carouselData}
151
+ renderActions={(_) => {
152
+ return <Button text="Skip" onPress={onSkip} />;
153
+ }}
154
+ />
155
+ </Portal.Provider>
154
156
  </ThemeProvider>
155
157
  );
156
158
 
package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap CHANGED
@@ -443,12 +443,6 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
443
443
  </View>
444
444
  </View>
445
445
  </View>
446
- <Modal
447
- hardwareAccelerated={false}
448
- onRequestClose={[Function]}
449
- transparent={true}
450
- visible={false}
451
- />
452
446
  </View>
453
447
  `;
454
448
 
@@ -672,11 +666,5 @@ exports[`DatePicker renders variant Calendar 1`] = `
672
666
  </View>
673
667
  </View>
674
668
  </View>
675
- <Modal
676
- hardwareAccelerated={false}
677
- onRequestClose={[Function]}
678
- transparent={true}
679
- visible={false}
680
- />
681
669
  </View>
682
670
  `;