@hero-design/rn 7.22.0 → 7.22.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 (42) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +62 -62
  3. package/lib/index.js +61 -61
  4. package/package.json +4 -4
  5. package/src/components/BottomSheet/StyledBottomSheet.tsx +10 -0
  6. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +326 -292
  7. package/src/components/BottomSheet/index.tsx +46 -26
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +4 -18
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +180 -177
  10. package/src/components/List/StyledBasicListItem.tsx +1 -0
  11. package/src/components/List/__tests__/BasicListItem.spec.tsx +37 -13
  12. package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap +162 -1
  13. package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap +6 -2
  14. package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap +2 -2
  15. package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap +3 -1
  16. package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap +4 -1
  17. package/src/components/RichTextEditor/RichTextEditor.tsx +1 -3
  18. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -36
  19. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +17 -5
  21. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +4712 -4669
  22. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  23. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +16 -4
  24. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +4285 -4242
  25. package/src/components/TextInput/StyledTextInput.tsx +11 -16
  26. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +3 -3
  27. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +18 -36
  28. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +55 -237
  29. package/src/components/TextInput/index.tsx +27 -27
  30. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +4 -18
  31. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +180 -177
  32. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +4 -2
  33. package/src/theme/components/list.ts +5 -2
  34. package/src/theme/global/colors/swag.ts +1 -0
  35. package/src/theme/global/colors/types.ts +1 -0
  36. package/types/components/BottomSheet/StyledBottomSheet.d.ts +8 -2
  37. package/types/components/BottomSheet/index.d.ts +6 -1
  38. package/types/components/TextInput/StyledTextInput.d.ts +3 -9
  39. package/types/components/TextInput/index.d.ts +4 -4
  40. package/types/theme/components/list.d.ts +1 -0
  41. package/types/theme/global/colors/types.d.ts +1 -0
  42. package/types/theme/global/index.d.ts +1 -0
package/src/components/BottomSheet/index.tsx CHANGED
@@ -1,5 +1,12 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
- import { Animated, Easing, Modal } from 'react-native';
2
+ import {
3
+ Animated,
4
+ Dimensions,
5
+ Easing,
6
+ KeyboardAvoidingViewProps,
7
+ Modal,
8
+ Platform,
9
+ } from 'react-native';
3
10
  import type { ReactElement, ReactNode } from 'react';
4
11
  import type { StyleProp, ViewStyle } from 'react-native';
5
12
  import Footer from './Footer';
@@ -7,6 +14,7 @@ import Header from './Header';
7
14
  import {
8
15
  StyledBackdrop,
9
16
  StyledBottomSheet,
17
+ StyledKeyboardAvoidingView,
10
18
  StyledWrapper,
11
19
  } from './StyledBottomSheet';
12
20
 
@@ -64,6 +72,11 @@ interface BottomSheetProps {
64
72
  * Testing id of the component.
65
73
  */
66
74
  testID?: string;
75
+
76
+ /**
77
+ * keyboardAvoidingView's props
78
+ * */
79
+ keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
67
80
  }
68
81
 
69
82
  const BottomSheet = ({
@@ -80,8 +93,9 @@ const BottomSheet = ({
80
93
  showDivider = true,
81
94
  style,
82
95
  testID,
96
+ keyboardAvoidingViewProps = {},
83
97
  }: BottomSheetProps): JSX.Element => {
84
- const [height, setHeight] = useState<number>(0);
98
+ const { height } = Dimensions.get('window');
85
99
 
86
100
  // Internal state to control modal open/close timing with animation
87
101
  const [visible, setVisibility] = useState<boolean>(open);
@@ -145,31 +159,37 @@ const BottomSheet = ({
145
159
  style={{ opacity: interpolateOpacity }}
146
160
  onPress={onRequestClose}
147
161
  />
148
- <StyledBottomSheet
149
- onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}
150
- style={[
151
- style,
152
- {
153
- transform: [
154
- { scaleY: height > 0 ? 1 : 0 },
155
- {
156
- translateY: interpolateY,
157
- },
158
- ],
159
- },
160
- ]}
162
+ <StyledKeyboardAvoidingView
163
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
164
+ {...keyboardAvoidingViewProps}
161
165
  >
162
- {header !== undefined ? (
163
- <Header
164
- content={header}
165
- showDivider={showDivider}
166
- onRequestClose={onRequestClose}
167
- showCloseButton={showCloseButton}
168
- />
169
- ) : null}
170
- {children}
171
- {footer ? <Footer showDivider={showDivider}>{footer}</Footer> : null}
172
- </StyledBottomSheet>
166
+ <StyledBottomSheet
167
+ style={[
168
+ style,
169
+ {
170
+ transform: [
171
+ { scaleY: height > 0 ? 1 : 0 },
172
+ {
173
+ translateY: interpolateY,
174
+ },
175
+ ],
176
+ },
177
+ ]}
178
+ >
179
+ {header !== undefined ? (
180
+ <Header
181
+ content={header}
182
+ showDivider={showDivider}
183
+ onRequestClose={onRequestClose}
184
+ showCloseButton={showCloseButton}
185
+ />
186
+ ) : null}
187
+ {children}
188
+ {footer ? (
189
+ <Footer showDivider={showDivider}>{footer}</Footer>
190
+ ) : null}
191
+ </StyledBottomSheet>
192
+ </StyledKeyboardAvoidingView>
173
193
  </StyledWrapper>
174
194
  </Modal>
175
195
  );
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap CHANGED
@@ -26,12 +26,16 @@ exports[`DatePickerAndroid renders correctly 1`] = `
26
26
  style={
27
27
  Array [
28
28
  Object {
29
+ "borderColor": "#001f23",
30
+ "borderRadius": 8,
31
+ "borderWidth": 1,
29
32
  "marginVertical": 8,
30
33
  "width": "100%",
31
34
  },
32
35
  undefined,
33
36
  ]
34
37
  }
38
+ themeVariant="filled"
35
39
  >
36
40
  <View
37
41
  style={
@@ -45,24 +49,6 @@ exports[`DatePickerAndroid renders correctly 1`] = `
45
49
  ]
46
50
  }
47
51
  >
48
- <View
49
- style={
50
- Array [
51
- Object {
52
- "borderColor": "#001f23",
53
- "borderRadius": 8,
54
- "borderWidth": 1,
55
- "bottom": 0,
56
- "left": 0,
57
- "position": "absolute",
58
- "right": 0,
59
- "top": 0,
60
- },
61
- undefined,
62
- ]
63
- }
64
- themeVariant="filled"
65
- />
66
52
  <View
67
53
  pointerEvents="none"
68
54
  style={
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -26,12 +26,16 @@ exports[`DatePickerIOS renders correctly 1`] = `
26
26
  style={
27
27
  Array [
28
28
  Object {
29
+ "borderColor": "#001f23",
30
+ "borderRadius": 8,
31
+ "borderWidth": 1,
29
32
  "marginVertical": 8,
30
33
  "width": "100%",
31
34
  },
32
35
  undefined,
33
36
  ]
34
37
  }
38
+ themeVariant="filled"
35
39
  >
36
40
  <View
37
41
  style={
@@ -45,24 +49,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
45
49
  ]
46
50
  }
47
51
  >
48
- <View
49
- style={
50
- Array [
51
- Object {
52
- "borderColor": "#001f23",
53
- "borderRadius": 8,
54
- "borderWidth": 1,
55
- "bottom": 0,
56
- "left": 0,
57
- "position": "absolute",
58
- "right": 0,
59
- "top": 0,
60
- },
61
- undefined,
62
- ]
63
- }
64
- themeVariant="filled"
65
- />
66
52
  <View
67
53
  pointerEvents="none"
68
54
  style={
@@ -277,166 +263,146 @@ exports[`DatePickerIOS renders correctly 1`] = `
277
263
  }
278
264
  }
279
265
  />
280
- <RCTSafeAreaView
281
- collapsable={false}
282
- emulateUnlessSupported={true}
283
- nativeID="animatedComponent"
266
+ <View
284
267
  onLayout={[Function]}
285
268
  style={
286
- Object {
287
- "backgroundColor": "#ffffff",
288
- "borderTopLeftRadius": 16,
289
- "borderTopRightRadius": 16,
290
- "elevation": 10,
291
- "maxHeight": "94%",
292
- "shadowColor": "#001f23",
293
- "shadowOffset": Object {
294
- "height": 3,
295
- "width": 0,
296
- },
297
- "shadowOpacity": 0.27,
298
- "shadowRadius": 4.65,
299
- "transform": Array [
300
- Object {
301
- "scaleY": 0,
302
- },
269
+ Array [
270
+ Array [
303
271
  Object {
304
- "translateY": 0,
272
+ "flex": 1,
273
+ "flexDirection": "column-reverse",
305
274
  },
275
+ undefined,
306
276
  ],
307
- "width": "100%",
308
- }
277
+ Object {
278
+ "paddingBottom": 0,
279
+ },
280
+ ]
309
281
  }
310
282
  >
311
- <View
283
+ <RCTSafeAreaView
284
+ collapsable={false}
285
+ emulateUnlessSupported={true}
286
+ nativeID="animatedComponent"
312
287
  style={
313
- Array [
314
- Object {
315
- "flexDirection": "row",
316
- "paddingHorizontal": 16,
317
- "paddingVertical": 8,
288
+ Object {
289
+ "backgroundColor": "#ffffff",
290
+ "borderTopLeftRadius": 16,
291
+ "borderTopRightRadius": 16,
292
+ "elevation": 10,
293
+ "maxHeight": "94%",
294
+ "shadowColor": "#001f23",
295
+ "shadowOffset": Object {
296
+ "height": 3,
297
+ "width": 0,
318
298
  },
319
- undefined,
320
- ]
299
+ "shadowOpacity": 0.27,
300
+ "shadowRadius": 4.65,
301
+ "transform": Array [
302
+ Object {
303
+ "scaleY": 1,
304
+ },
305
+ Object {
306
+ "translateY": 0,
307
+ },
308
+ ],
309
+ "width": "100%",
310
+ }
321
311
  }
322
312
  >
323
313
  <View
324
314
  style={
325
315
  Array [
326
316
  Object {
327
- "flex": 1,
328
- "justifyContent": "center",
317
+ "flexDirection": "row",
318
+ "paddingHorizontal": 16,
319
+ "paddingVertical": 8,
329
320
  },
330
321
  undefined,
331
322
  ]
332
323
  }
333
324
  >
334
- <Text
325
+ <View
335
326
  style={
336
327
  Array [
337
328
  Object {
338
- "color": "#001f23",
339
- "fontFamily": "BeVietnamPro-SemiBold",
340
- "fontSize": 16,
341
- "letterSpacing": 0.48,
342
- "lineHeight": 24,
329
+ "flex": 1,
330
+ "justifyContent": "center",
343
331
  },
344
332
  undefined,
345
333
  ]
346
334
  }
347
- themeFontSize="large"
348
- themeFontWeight="semi-bold"
349
- themeIntent="body"
350
- >
351
- Start date
352
- </Text>
353
- </View>
354
- <View
355
- style={
356
- Array [
357
- Object {
358
- "alignItems": "center",
359
- "height": 48,
360
- "justifyContent": "center",
361
- "marginLeft": 12,
362
- "width": 48,
363
- },
364
- undefined,
365
- ]
366
- }
367
- >
368
- <View
369
- accessible={true}
370
- collapsable={false}
371
- focusable={true}
372
- nativeID="animatedComponent"
373
- onClick={[Function]}
374
- onResponderGrant={[Function]}
375
- onResponderMove={[Function]}
376
- onResponderRelease={[Function]}
377
- onResponderTerminate={[Function]}
378
- onResponderTerminationRequest={[Function]}
379
- onStartShouldSetResponder={[Function]}
380
- style={
381
- Object {
382
- "opacity": 1,
383
- }
384
- }
385
- testID="bottom-sheet-close-icon"
386
335
  >
387
- <HeroIcon
388
- name="cancel"
336
+ <Text
389
337
  style={
390
338
  Array [
391
339
  Object {
392
340
  "color": "#001f23",
393
- "fontSize": 20,
341
+ "fontFamily": "BeVietnamPro-SemiBold",
342
+ "fontSize": 16,
343
+ "letterSpacing": 0.48,
344
+ "lineHeight": 24,
394
345
  },
395
346
  undefined,
396
347
  ]
397
348
  }
398
- themeIntent="text"
399
- themeSize="small"
400
- />
349
+ themeFontSize="large"
350
+ themeFontWeight="semi-bold"
351
+ themeIntent="body"
352
+ >
353
+ Start date
354
+ </Text>
401
355
  </View>
402
- </View>
403
- </View>
404
- <View
405
- style={
406
- Array [
407
- Object {
408
- "borderBottomColor": "#e8e9ea",
409
- "borderBottomWidth": 1,
410
- "maxWidth": "100%",
411
- },
412
- undefined,
413
- ]
414
- }
415
- />
416
- <View
417
- style={
418
- Array [
419
- Object {
420
- "height": 176,
421
- },
422
- undefined,
423
- ]
424
- }
425
- >
426
- <Picker
427
- display="spinner"
428
- mode="date"
429
- onChange={[Function]}
430
- style={
431
- Object {
432
- "flex": 1,
356
+ <View
357
+ style={
358
+ Array [
359
+ Object {
360
+ "alignItems": "center",
361
+ "height": 48,
362
+ "justifyContent": "center",
363
+ "marginLeft": 12,
364
+ "width": 48,
365
+ },
366
+ undefined,
367
+ ]
433
368
  }
434
- }
435
- testID="datePickerIOS"
436
- value={1995-12-21T00:00:00.000Z}
437
- />
438
- </View>
439
- <View>
369
+ >
370
+ <View
371
+ accessible={true}
372
+ collapsable={false}
373
+ focusable={true}
374
+ nativeID="animatedComponent"
375
+ onClick={[Function]}
376
+ onResponderGrant={[Function]}
377
+ onResponderMove={[Function]}
378
+ onResponderRelease={[Function]}
379
+ onResponderTerminate={[Function]}
380
+ onResponderTerminationRequest={[Function]}
381
+ onStartShouldSetResponder={[Function]}
382
+ style={
383
+ Object {
384
+ "opacity": 1,
385
+ }
386
+ }
387
+ testID="bottom-sheet-close-icon"
388
+ >
389
+ <HeroIcon
390
+ name="cancel"
391
+ style={
392
+ Array [
393
+ Object {
394
+ "color": "#001f23",
395
+ "fontSize": 20,
396
+ },
397
+ undefined,
398
+ ]
399
+ }
400
+ themeIntent="text"
401
+ themeSize="small"
402
+ />
403
+ </View>
404
+ </View>
405
+ </View>
440
406
  <View
441
407
  style={
442
408
  Array [
@@ -453,58 +419,95 @@ exports[`DatePickerIOS renders correctly 1`] = `
453
419
  style={
454
420
  Array [
455
421
  Object {
456
- "alignItems": "center",
457
- "flexDirection": "row",
458
- "justifyContent": "flex-end",
459
- "minHeight": 64,
460
- "paddingHorizontal": 12,
461
- "paddingVertical": 8,
422
+ "height": 176,
462
423
  },
463
424
  undefined,
464
425
  ]
465
426
  }
466
427
  >
467
- <View
468
- accessible={true}
469
- collapsable={false}
470
- focusable={true}
471
- nativeID="animatedComponent"
472
- onClick={[Function]}
473
- onResponderGrant={[Function]}
474
- onResponderMove={[Function]}
475
- onResponderRelease={[Function]}
476
- onResponderTerminate={[Function]}
477
- onResponderTerminationRequest={[Function]}
478
- onStartShouldSetResponder={[Function]}
428
+ <Picker
429
+ display="spinner"
430
+ mode="date"
431
+ onChange={[Function]}
479
432
  style={
480
433
  Object {
481
- "opacity": 1,
434
+ "flex": 1,
482
435
  }
483
436
  }
437
+ testID="datePickerIOS"
438
+ value={1995-12-21T00:00:00.000Z}
439
+ />
440
+ </View>
441
+ <View>
442
+ <View
443
+ style={
444
+ Array [
445
+ Object {
446
+ "borderBottomColor": "#e8e9ea",
447
+ "borderBottomWidth": 1,
448
+ "maxWidth": "100%",
449
+ },
450
+ undefined,
451
+ ]
452
+ }
453
+ />
454
+ <View
455
+ style={
456
+ Array [
457
+ Object {
458
+ "alignItems": "center",
459
+ "flexDirection": "row",
460
+ "justifyContent": "flex-end",
461
+ "minHeight": 64,
462
+ "paddingHorizontal": 12,
463
+ "paddingVertical": 8,
464
+ },
465
+ undefined,
466
+ ]
467
+ }
484
468
  >
485
- <Text
469
+ <View
470
+ accessible={true}
471
+ collapsable={false}
472
+ focusable={true}
473
+ nativeID="animatedComponent"
474
+ onClick={[Function]}
475
+ onResponderGrant={[Function]}
476
+ onResponderMove={[Function]}
477
+ onResponderRelease={[Function]}
478
+ onResponderTerminate={[Function]}
479
+ onResponderTerminationRequest={[Function]}
480
+ onStartShouldSetResponder={[Function]}
486
481
  style={
487
- Array [
488
- Object {
489
- "color": "#8505a2",
490
- "fontFamily": "BeVietnamPro-SemiBold",
491
- "fontSize": 16,
492
- "letterSpacing": 0.48,
493
- "lineHeight": 24,
494
- },
495
- undefined,
496
- ]
482
+ Object {
483
+ "opacity": 1,
484
+ }
497
485
  }
498
- themeFontSize="large"
499
- themeFontWeight="semi-bold"
500
- themeIntent="primary"
501
486
  >
502
- Confirm
503
- </Text>
487
+ <Text
488
+ style={
489
+ Array [
490
+ Object {
491
+ "color": "#8505a2",
492
+ "fontFamily": "BeVietnamPro-SemiBold",
493
+ "fontSize": 16,
494
+ "letterSpacing": 0.48,
495
+ "lineHeight": 24,
496
+ },
497
+ undefined,
498
+ ]
499
+ }
500
+ themeFontSize="large"
501
+ themeFontWeight="semi-bold"
502
+ themeIntent="primary"
503
+ >
504
+ Confirm
505
+ </Text>
506
+ </View>
504
507
  </View>
505
508
  </View>
506
- </View>
507
- </RCTSafeAreaView>
509
+ </RCTSafeAreaView>
510
+ </View>
508
511
  </View>
509
512
  </View>
510
513
  </View>
package/src/components/List/StyledBasicListItem.tsx CHANGED
@@ -24,6 +24,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
24
24
  opacity: themeDisabled
25
25
  ? theme.__hd__.list.opacity.disabled
26
26
  : theme.__hd__.list.opacity.enabled,
27
+ borderRadius: theme.__hd__.list.radii.basicItem,
27
28
  }));
28
29
  export {
29
30
  StyledListItemContainer,
package/src/components/List/__tests__/BasicListItem.spec.tsx CHANGED
@@ -1,22 +1,46 @@
1
1
  import { fireEvent } from '@testing-library/react-native';
2
2
  import React from 'react';
3
3
  import renderWithTheme from '../../../testHelpers/renderWithTheme';
4
+ import Icon from '../../Icon';
4
5
  import BasicListItem from '../BasicListItem';
5
6
 
6
7
  describe('BasicListItem', () => {
7
- it('renders correctly', () => {
8
- const wrapper = renderWithTheme(
9
- <BasicListItem
10
- title="List item"
11
- subtitle="subtitle"
12
- suffix="checkmark"
13
- testID="basic-list-item"
14
- />
15
- );
16
- expect(wrapper.toJSON()).toMatchSnapshot();
17
- expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
18
- expect(wrapper.queryAllByText('List item')).toHaveLength(1);
19
- expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
8
+ describe('when suffix and prefix are icon name', () => {
9
+ it('renders correctly', () => {
10
+ const wrapper = renderWithTheme(
11
+ <BasicListItem
12
+ title="List item"
13
+ subtitle="subtitle"
14
+ suffix="checkmark"
15
+ prefix="circle-question-outlined"
16
+ testID="basic-list-item"
17
+ />
18
+ );
19
+ expect(wrapper.toJSON()).toMatchSnapshot();
20
+ expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
21
+ expect(wrapper.queryAllByText('List item')).toHaveLength(1);
22
+ expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
23
+ });
24
+ });
25
+
26
+ describe('when suffix and prefix are react element', () => {
27
+ it('renders correctly', () => {
28
+ const wrapper = renderWithTheme(
29
+ <BasicListItem
30
+ title="List item"
31
+ subtitle="subtitle"
32
+ suffix={<Icon icon="checkmark" testID="suffix" />}
33
+ prefix={<Icon icon="circle-question-outlined" testID="prefix" />}
34
+ testID="basic-list-item"
35
+ />
36
+ );
37
+ expect(wrapper.toJSON()).toMatchSnapshot();
38
+ expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
39
+ expect(wrapper.queryAllByTestId('suffix')).toHaveLength(1);
40
+ expect(wrapper.queryAllByTestId('prefix')).toHaveLength(1);
41
+ expect(wrapper.queryAllByText('List item')).toHaveLength(1);
42
+ expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
43
+ });
20
44
  });
21
45
 
22
46
  it('onPress', () => {