@hero-design/rn 8.99.1 → 8.99.3

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 (29) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/CHANGELOG.md +14 -0
  3. package/es/index.js +29 -27
  4. package/lib/index.js +29 -27
  5. package/package.json +1 -1
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +45 -96
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +15 -32
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +15 -32
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +30 -64
  10. package/src/components/RichTextEditor/RichTextEditor.tsx +3 -11
  11. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +30 -64
  12. package/src/components/Select/MultiSelect/OptionList.tsx +6 -4
  13. package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx +45 -0
  14. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +106 -225
  15. package/src/components/Select/MultiSelect/__tests__/index.spec.tsx +40 -0
  16. package/src/components/Select/MultiSelect/__tests__/utils.spec.ts +31 -0
  17. package/src/components/Select/MultiSelect/index.tsx +3 -2
  18. package/src/components/Select/MultiSelect/utils.ts +12 -0
  19. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +91 -193
  20. package/src/components/TextInput/StyledTextInput.tsx +8 -9
  21. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +42 -122
  22. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +246 -520
  23. package/src/components/TextInput/index.tsx +3 -11
  24. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +30 -64
  25. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +30 -64
  26. package/stats/8.99.2/rn-stats.html +4842 -0
  27. package/stats/8.99.3/rn-stats.html +4844 -0
  28. package/types/components/Select/MultiSelect/utils.d.ts +2 -0
  29. package/types/components/TextInput/StyledTextInput.d.ts +5 -2
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap CHANGED
@@ -106,64 +106,47 @@ exports[`DatePickerAndroid renders correctly 1`] = `
106
106
  {
107
107
  "alignItems": "center",
108
108
  "flexDirection": "row",
109
- "justifyContent": "center",
110
- "left": 0,
109
+ "left": 24,
111
110
  "position": "absolute",
112
- "right": 0,
111
+ "right": 16,
113
112
  "top": -10.666666666666666,
114
113
  "transform": [
115
114
  {
116
115
  "translateY": 0,
117
116
  },
118
- {
119
- "translateX": 16,
120
- },
121
117
  {
122
118
  "scale": 1,
123
119
  },
124
120
  ],
121
+ "transformOrigin": "left top",
125
122
  "zIndex": 1,
126
123
  }
127
124
  }
125
+ themeHasPrefix={false}
128
126
  themeVariant="text"
129
127
  >
130
- <Text
131
- allowFontScaling={false}
128
+ <View
132
129
  style={
133
130
  [
134
131
  {
132
+ "alignContent": "center",
133
+ "alignItems": "center",
135
134
  "color": "#001f23",
136
- "fontFamily": "BeVietnamPro-Regular",
137
- "fontSize": 16,
138
- "letterSpacing": 0.48,
139
- "lineHeight": 24,
135
+ "flexDirection": "row",
136
+ "marginTop": -2,
137
+ "textAlignVertical": "center",
138
+ },
139
+ {
140
+ "backgroundColor": "#ffffff",
140
141
  },
141
- [
142
- {
143
- "alignContent": "center",
144
- "alignItems": "center",
145
- "color": "#001f23",
146
- "left": 0,
147
- "marginTop": -2,
148
- "position": "absolute",
149
- "textAlignVertical": "center",
150
- "top": "50%",
151
- "zIndex": 1,
152
- },
153
- {
154
- "backgroundColor": "#ffffff",
155
- },
156
- ],
157
142
  ]
158
143
  }
159
144
  testID="input-label"
160
- themeIntent="body"
161
145
  themeState="filled"
162
- themeTypeface="neutral"
163
- themeVariant="regular"
164
146
  >
165
147
  <Text
166
148
  allowFontScaling={false}
149
+ numberOfLines={1}
167
150
  style={
168
151
  [
169
152
  {
@@ -182,7 +165,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
182
165
  >
183
166
  Start date
184
167
  </Text>
185
- </Text>
168
+ </View>
186
169
  </View>
187
170
  <View
188
171
  style={
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap CHANGED
@@ -106,64 +106,47 @@ exports[`DatePickerCalendar renders correctly 1`] = `
106
106
  {
107
107
  "alignItems": "center",
108
108
  "flexDirection": "row",
109
- "justifyContent": "center",
110
- "left": 0,
109
+ "left": 24,
111
110
  "position": "absolute",
112
- "right": 0,
111
+ "right": 16,
113
112
  "top": -10.666666666666666,
114
113
  "transform": [
115
114
  {
116
115
  "translateY": 0,
117
116
  },
118
- {
119
- "translateX": 16,
120
- },
121
117
  {
122
118
  "scale": 1,
123
119
  },
124
120
  ],
121
+ "transformOrigin": "left top",
125
122
  "zIndex": 1,
126
123
  }
127
124
  }
125
+ themeHasPrefix={false}
128
126
  themeVariant="text"
129
127
  >
130
- <Text
131
- allowFontScaling={false}
128
+ <View
132
129
  style={
133
130
  [
134
131
  {
132
+ "alignContent": "center",
133
+ "alignItems": "center",
135
134
  "color": "#001f23",
136
- "fontFamily": "BeVietnamPro-Regular",
137
- "fontSize": 16,
138
- "letterSpacing": 0.48,
139
- "lineHeight": 24,
135
+ "flexDirection": "row",
136
+ "marginTop": -2,
137
+ "textAlignVertical": "center",
138
+ },
139
+ {
140
+ "backgroundColor": "#ffffff",
140
141
  },
141
- [
142
- {
143
- "alignContent": "center",
144
- "alignItems": "center",
145
- "color": "#001f23",
146
- "left": 0,
147
- "marginTop": -2,
148
- "position": "absolute",
149
- "textAlignVertical": "center",
150
- "top": "50%",
151
- "zIndex": 1,
152
- },
153
- {
154
- "backgroundColor": "#ffffff",
155
- },
156
- ],
157
142
  ]
158
143
  }
159
144
  testID="input-label"
160
- themeIntent="body"
161
145
  themeState="filled"
162
- themeTypeface="neutral"
163
- themeVariant="regular"
164
146
  >
165
147
  <Text
166
148
  allowFontScaling={false}
149
+ numberOfLines={1}
167
150
  style={
168
151
  [
169
152
  {
@@ -182,7 +165,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
182
165
  >
183
166
  Start date
184
167
  </Text>
185
- </Text>
168
+ </View>
186
169
  </View>
187
170
  <View
188
171
  style={
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -106,64 +106,47 @@ exports[`DatePickerIOS renders correctly 1`] = `
106
106
  {
107
107
  "alignItems": "center",
108
108
  "flexDirection": "row",
109
- "justifyContent": "center",
110
- "left": 0,
109
+ "left": 24,
111
110
  "position": "absolute",
112
- "right": 0,
111
+ "right": 16,
113
112
  "top": -10.666666666666666,
114
113
  "transform": [
115
114
  {
116
115
  "translateY": 0,
117
116
  },
118
- {
119
- "translateX": 16,
120
- },
121
117
  {
122
118
  "scale": 1,
123
119
  },
124
120
  ],
121
+ "transformOrigin": "left top",
125
122
  "zIndex": 1,
126
123
  }
127
124
  }
125
+ themeHasPrefix={false}
128
126
  themeVariant="text"
129
127
  >
130
- <Text
131
- allowFontScaling={false}
128
+ <View
132
129
  style={
133
130
  [
134
131
  {
132
+ "alignContent": "center",
133
+ "alignItems": "center",
135
134
  "color": "#001f23",
136
- "fontFamily": "BeVietnamPro-Regular",
137
- "fontSize": 16,
138
- "letterSpacing": 0.48,
139
- "lineHeight": 24,
135
+ "flexDirection": "row",
136
+ "marginTop": -2,
137
+ "textAlignVertical": "center",
138
+ },
139
+ {
140
+ "backgroundColor": "#ffffff",
140
141
  },
141
- [
142
- {
143
- "alignContent": "center",
144
- "alignItems": "center",
145
- "color": "#001f23",
146
- "left": 0,
147
- "marginTop": -2,
148
- "position": "absolute",
149
- "textAlignVertical": "center",
150
- "top": "50%",
151
- "zIndex": 1,
152
- },
153
- {
154
- "backgroundColor": "#ffffff",
155
- },
156
- ],
157
142
  ]
158
143
  }
159
144
  testID="input-label"
160
- themeIntent="body"
161
145
  themeState="filled"
162
- themeTypeface="neutral"
163
- themeVariant="regular"
164
146
  >
165
147
  <Text
166
148
  allowFontScaling={false}
149
+ numberOfLines={1}
167
150
  style={
168
151
  [
169
152
  {
@@ -182,7 +165,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
182
165
  >
183
166
  Start date
184
167
  </Text>
185
- </Text>
168
+ </View>
186
169
  </View>
187
170
  <View
188
171
  style={
@@ -790,64 +773,47 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
790
773
  {
791
774
  "alignItems": "center",
792
775
  "flexDirection": "row",
793
- "justifyContent": "center",
794
- "left": 0,
776
+ "left": 24,
795
777
  "position": "absolute",
796
- "right": 0,
778
+ "right": 16,
797
779
  "top": -10.666666666666666,
798
780
  "transform": [
799
781
  {
800
782
  "translateY": 0,
801
783
  },
802
- {
803
- "translateX": 16,
804
- },
805
784
  {
806
785
  "scale": 1,
807
786
  },
808
787
  ],
788
+ "transformOrigin": "left top",
809
789
  "zIndex": 1,
810
790
  }
811
791
  }
792
+ themeHasPrefix={false}
812
793
  themeVariant="text"
813
794
  >
814
- <Text
815
- allowFontScaling={false}
795
+ <View
816
796
  style={
817
797
  [
818
798
  {
799
+ "alignContent": "center",
800
+ "alignItems": "center",
819
801
  "color": "#001f23",
820
- "fontFamily": "BeVietnamPro-Regular",
821
- "fontSize": 16,
822
- "letterSpacing": 0.48,
823
- "lineHeight": 24,
802
+ "flexDirection": "row",
803
+ "marginTop": -2,
804
+ "textAlignVertical": "center",
805
+ },
806
+ {
807
+ "backgroundColor": "#ffffff",
824
808
  },
825
- [
826
- {
827
- "alignContent": "center",
828
- "alignItems": "center",
829
- "color": "#001f23",
830
- "left": 0,
831
- "marginTop": -2,
832
- "position": "absolute",
833
- "textAlignVertical": "center",
834
- "top": "50%",
835
- "zIndex": 1,
836
- },
837
- {
838
- "backgroundColor": "#ffffff",
839
- },
840
- ],
841
809
  ]
842
810
  }
843
811
  testID="input-label"
844
- themeIntent="body"
845
812
  themeState="filled"
846
- themeTypeface="neutral"
847
- themeVariant="regular"
848
813
  >
849
814
  <Text
850
815
  allowFontScaling={false}
816
+ numberOfLines={1}
851
817
  style={
852
818
  [
853
819
  {
@@ -866,7 +832,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
866
832
  >
867
833
  Start date
868
834
  </Text>
869
- </Text>
835
+ </View>
870
836
  </View>
871
837
  <View
872
838
  style={
package/src/components/RichTextEditor/RichTextEditor.tsx CHANGED
@@ -356,12 +356,13 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
356
356
  return (
357
357
  <StyledContainer testID={testID}>
358
358
  <StyledLabelContainerInsideTextInput
359
+ themeHasPrefix={false}
359
360
  themeVariant="text"
360
361
  pointerEvents="none"
361
362
  testID="input-label-container"
362
363
  style={[
363
364
  {
364
- position: 'absolute',
365
+ transformOrigin: 'top left',
365
366
  },
366
367
  {
367
368
  transform: [
@@ -371,15 +372,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
371
372
  outputRange: [inputSize.height / 2, theme.space.xsmall],
372
373
  }),
373
374
  },
374
- {
375
- translateX: focusAnimation.interpolate({
376
- inputRange: [0, 1],
377
- outputRange: [
378
- theme.space.medium,
379
- -theme.space.xlarge + theme.space.xsmall,
380
- ],
381
- }),
382
- },
383
375
  {
384
376
  scale: focusAnimation.interpolate({
385
377
  inputRange: [0, 1],
@@ -409,7 +401,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
409
401
  *
410
402
  </StyledAsteriskLabelInsideTextInput>
411
403
  )}
412
- <Typography.Body>{label}</Typography.Body>
404
+ <Typography.Body numberOfLines={1}>{label}</Typography.Body>
413
405
  </StyledLabelInsideTextInput>
414
406
  )}
415
407
  </StyledLabelContainerInsideTextInput>
package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap CHANGED
@@ -26,65 +26,48 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
26
26
  {
27
27
  "alignItems": "center",
28
28
  "flexDirection": "row",
29
- "justifyContent": "center",
30
- "left": 0,
29
+ "left": 24,
31
30
  "position": "absolute",
32
- "right": 0,
31
+ "right": 16,
33
32
  "top": -10.666666666666666,
34
33
  "transform": [
35
34
  {
36
35
  "translateY": 0,
37
36
  },
38
- {
39
- "translateX": 16,
40
- },
41
37
  {
42
38
  "scale": 1,
43
39
  },
44
40
  ],
41
+ "transformOrigin": "top left",
45
42
  "zIndex": 1,
46
43
  }
47
44
  }
48
45
  testID="input-label-container"
46
+ themeHasPrefix={false}
49
47
  themeVariant="text"
50
48
  >
51
- <Text
52
- allowFontScaling={false}
49
+ <View
53
50
  style={
54
51
  [
55
52
  {
53
+ "alignContent": "center",
54
+ "alignItems": "center",
56
55
  "color": "#001f23",
57
- "fontFamily": "BeVietnamPro-Regular",
58
- "fontSize": 16,
59
- "letterSpacing": 0.48,
60
- "lineHeight": 24,
56
+ "flexDirection": "row",
57
+ "marginTop": -2,
58
+ "textAlignVertical": "center",
59
+ },
60
+ {
61
+ "backgroundColor": "#ffffff",
61
62
  },
62
- [
63
- {
64
- "alignContent": "center",
65
- "alignItems": "center",
66
- "color": "#001f23",
67
- "left": 0,
68
- "marginTop": -2,
69
- "position": "absolute",
70
- "textAlignVertical": "center",
71
- "top": "50%",
72
- "zIndex": 1,
73
- },
74
- {
75
- "backgroundColor": "#ffffff",
76
- },
77
- ],
78
63
  ]
79
64
  }
80
65
  testID="input-label"
81
- themeIntent="body"
82
66
  themeState="error"
83
- themeTypeface="neutral"
84
- themeVariant="regular"
85
67
  >
86
68
  <Text
87
69
  allowFontScaling={false}
70
+ numberOfLines={1}
88
71
  style={
89
72
  [
90
73
  {
@@ -103,7 +86,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
103
86
  >
104
87
  Rich Text Editor
105
88
  </Text>
106
- </Text>
89
+ </View>
107
90
  </View>
108
91
  <View
109
92
  onLayout={[Function]}
@@ -367,65 +350,48 @@ exports[`RichTextEditor should render correctly 1`] = `
367
350
  {
368
351
  "alignItems": "center",
369
352
  "flexDirection": "row",
370
- "justifyContent": "center",
371
- "left": 0,
353
+ "left": 24,
372
354
  "position": "absolute",
373
- "right": 0,
355
+ "right": 16,
374
356
  "top": -10.666666666666666,
375
357
  "transform": [
376
358
  {
377
359
  "translateY": 0,
378
360
  },
379
- {
380
- "translateX": 16,
381
- },
382
361
  {
383
362
  "scale": 1,
384
363
  },
385
364
  ],
365
+ "transformOrigin": "top left",
386
366
  "zIndex": 1,
387
367
  }
388
368
  }
389
369
  testID="input-label-container"
370
+ themeHasPrefix={false}
390
371
  themeVariant="text"
391
372
  >
392
- <Text
393
- allowFontScaling={false}
373
+ <View
394
374
  style={
395
375
  [
396
376
  {
377
+ "alignContent": "center",
378
+ "alignItems": "center",
397
379
  "color": "#001f23",
398
- "fontFamily": "BeVietnamPro-Regular",
399
- "fontSize": 16,
400
- "letterSpacing": 0.48,
401
- "lineHeight": 24,
380
+ "flexDirection": "row",
381
+ "marginTop": -2,
382
+ "textAlignVertical": "center",
383
+ },
384
+ {
385
+ "backgroundColor": "#ffffff",
402
386
  },
403
- [
404
- {
405
- "alignContent": "center",
406
- "alignItems": "center",
407
- "color": "#001f23",
408
- "left": 0,
409
- "marginTop": -2,
410
- "position": "absolute",
411
- "textAlignVertical": "center",
412
- "top": "50%",
413
- "zIndex": 1,
414
- },
415
- {
416
- "backgroundColor": "#ffffff",
417
- },
418
- ],
419
387
  ]
420
388
  }
421
389
  testID="input-label"
422
- themeIntent="body"
423
390
  themeState="error"
424
- themeTypeface="neutral"
425
- themeVariant="regular"
426
391
  >
427
392
  <Text
428
393
  allowFontScaling={false}
394
+ numberOfLines={1}
429
395
  style={
430
396
  [
431
397
  {
@@ -444,7 +410,7 @@ exports[`RichTextEditor should render correctly 1`] = `
444
410
  >
445
411
  Rich Text Editor
446
412
  </Text>
447
- </Text>
413
+ </View>
448
414
  </View>
449
415
  <View
450
416
  onLayout={[Function]}
package/src/components/Select/MultiSelect/OptionList.tsx CHANGED
@@ -4,6 +4,8 @@ import BaseOptionList, { BaseOptionListProps } from '../BaseOptionList';
4
4
  import Option from './Option';
5
5
  import type { MultiSelectProps } from '.';
6
6
  import type { OptionType, SectionType } from '../types';
7
+ import { deepCompareValue } from '../helpers';
8
+ import { isOptionSelected } from './utils';
7
9
 
8
10
  type OptionListProps<V, T extends OptionType<V>> = Pick<
9
11
  MultiSelectProps<V, T>,
@@ -31,12 +33,12 @@ const OptionList = <V, T extends OptionType<V>>({
31
33
  }: OptionListProps<V, T>) => {
32
34
  const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
33
35
  const { item } = info;
34
- const selected = value.includes(info.item.value);
36
+ const selected = isOptionSelected(value, item);
35
37
  const onItemPress = () => {
36
- if (value.includes(info.item.value)) {
37
- onPress(value.filter((val) => val !== info.item.value));
38
+ if (isOptionSelected(value, item)) {
39
+ onPress(value.filter((val) => !deepCompareValue(val, item.value)));
38
40
  } else {
39
- onPress([...value, info.item.value]);
41
+ onPress([...value, item.value]);
40
42
  }
41
43
  };
42
44
 
package/src/components/Select/MultiSelect/__tests__/OptionList.spec.tsx CHANGED
@@ -14,6 +14,16 @@ const sections = [
14
14
  },
15
15
  ];
16
16
 
17
+ const sectionsWithObjectValue = [
18
+ { category: 'A', data: [{ text: 'A1', value: { id: 'a1' } }] },
19
+ {
20
+ category: 'B',
21
+ data: [
22
+ { text: 'B1', value: { id: 'b1' } },
23
+ { text: 'B2', value: { id: 'b2' } },
24
+ ],
25
+ },
26
+ ];
17
27
  describe('OptionList', () => {
18
28
  it('renders correctly', () => {
19
29
  const pressFn = jest.fn();
@@ -64,3 +74,38 @@ describe('OptionList', () => {
64
74
  expect(toJSON()).toMatchSnapshot();
65
75
  });
66
76
  });
77
+
78
+ describe('OptionList with object value', () => {
79
+ it('renders correctly', () => {
80
+ const pressFn = jest.fn();
81
+ const { getByText } = renderWithTheme(
82
+ <OptionList
83
+ value={[{ id: 'a1' }]}
84
+ sections={sectionsWithObjectValue}
85
+ onPress={pressFn}
86
+ keyExtractor={(opt) => opt.value.id}
87
+ />
88
+ );
89
+
90
+ expect(getByText('A1')).toBeVisible();
91
+ expect(getByText('B1')).toBeVisible();
92
+ expect(getByText('B2')).toBeVisible();
93
+ });
94
+
95
+ it('trigger onPress correctly on select value', () => {
96
+ const pressFn = jest.fn();
97
+ const { getByText } = renderWithTheme(
98
+ <OptionList
99
+ value={[{ id: 'a1' }]}
100
+ sections={sectionsWithObjectValue}
101
+ onPress={pressFn}
102
+ />
103
+ );
104
+
105
+ fireEvent.press(getByText('B1'));
106
+ expect(pressFn).toHaveBeenCalledWith([{ id: 'a1' }, { id: 'b1' }]);
107
+
108
+ fireEvent.press(getByText('A1'));
109
+ expect(pressFn).toHaveBeenCalledWith([]);
110
+ });
111
+ });