@hero-design/rn 8.44.0 → 8.44.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 (25) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +6 -0
  3. package/es/index.js +154 -96
  4. package/lib/index.js +154 -96
  5. package/package.json +1 -1
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +102 -57
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +34 -19
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +34 -19
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +34 -19
  10. package/src/components/RichTextEditor/RichTextEditor.tsx +76 -38
  11. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +126 -102
  12. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +235 -146
  13. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +201 -127
  14. package/src/components/TextInput/StyledTextInput.tsx +8 -31
  15. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -44
  16. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -638
  17. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +1126 -833
  18. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  19. package/src/components/TextInput/index.tsx +113 -57
  20. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +68 -38
  21. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +68 -38
  22. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -2
  23. package/src/theme/components/textInput.ts +2 -2
  24. package/types/components/TextInput/StyledTextInput.d.ts +4 -24
  25. package/types/components/TextInput/index.d.ts +1 -0
package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap CHANGED
@@ -59,6 +59,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
59
59
  }
60
60
  >
61
61
  <View
62
+ onLayout={[Function]}
62
63
  style={
63
64
  [
64
65
  {
@@ -98,24 +99,34 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
98
99
  themeState="filled"
99
100
  />
100
101
  <View
102
+ onLayout={[Function]}
103
+ />
104
+ <View
105
+ collapsable={false}
101
106
  pointerEvents="none"
102
107
  style={
103
- [
104
- {
105
- "backgroundColor": "#ffffff",
106
- "flexDirection": "row",
107
- "left": 16,
108
- "paddingHorizontal": 4,
109
- "position": "absolute",
110
- "top": -4,
111
- "zIndex": 1,
112
- },
113
- {
114
- "backgroundColor": "#ffffff",
115
- },
116
- ]
108
+ {
109
+ "alignItems": "center",
110
+ "flexDirection": "row",
111
+ "left": -32,
112
+ "position": "absolute",
113
+ "right": 0,
114
+ "top": -10.666666666666666,
115
+ "transform": [
116
+ {
117
+ "translateY": 0,
118
+ },
119
+ {
120
+ "translateX": 48,
121
+ },
122
+ {
123
+ "scale": 1,
124
+ },
125
+ ],
126
+ "zIndex": 1,
127
+ }
117
128
  }
118
- testID="label-container"
129
+ themeVariant="text"
119
130
  >
120
131
  <Text
121
132
  allowFontScaling={false}
@@ -124,14 +135,17 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
124
135
  {
125
136
  "color": "#001f23",
126
137
  "fontFamily": "BeVietnamPro-Regular",
127
- "fontSize": 12,
138
+ "fontSize": 16,
128
139
  "letterSpacing": 0.48,
129
- "lineHeight": 16,
140
+ "lineHeight": 24,
130
141
  },
131
142
  [
132
143
  {
144
+ "alignContent": "center",
145
+ "alignItems": "center",
133
146
  "color": "#001f23",
134
- "lineHeight": 12,
147
+ "marginTop": -2,
148
+ "textAlignVertical": "center",
135
149
  },
136
150
  {
137
151
  "backgroundColor": "#ffffff",
@@ -140,9 +154,10 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
140
154
  ]
141
155
  }
142
156
  testID="input-label"
143
- themeFontWeight="regular"
144
157
  themeIntent="body"
145
158
  themeState="filled"
159
+ themeTypeface="neutral"
160
+ themeVariant="regular"
146
161
  >
147
162
  Start date
148
163
  </Text>
@@ -322,6 +337,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
322
337
  }
323
338
  >
324
339
  <View
340
+ onLayout={[Function]}
325
341
  style={
326
342
  [
327
343
  {
@@ -361,24 +377,34 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
361
377
  themeState="filled"
362
378
  />
363
379
  <View
380
+ onLayout={[Function]}
381
+ />
382
+ <View
383
+ collapsable={false}
364
384
  pointerEvents="none"
365
385
  style={
366
- [
367
- {
368
- "backgroundColor": "#ffffff",
369
- "flexDirection": "row",
370
- "left": 16,
371
- "paddingHorizontal": 4,
372
- "position": "absolute",
373
- "top": -4,
374
- "zIndex": 1,
375
- },
376
- {
377
- "backgroundColor": "#ffffff",
378
- },
379
- ]
386
+ {
387
+ "alignItems": "center",
388
+ "flexDirection": "row",
389
+ "left": -32,
390
+ "position": "absolute",
391
+ "right": 0,
392
+ "top": -10.666666666666666,
393
+ "transform": [
394
+ {
395
+ "translateY": 0,
396
+ },
397
+ {
398
+ "translateX": 48,
399
+ },
400
+ {
401
+ "scale": 1,
402
+ },
403
+ ],
404
+ "zIndex": 1,
405
+ }
380
406
  }
381
- testID="label-container"
407
+ themeVariant="text"
382
408
  >
383
409
  <Text
384
410
  allowFontScaling={false}
@@ -387,14 +413,17 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
387
413
  {
388
414
  "color": "#001f23",
389
415
  "fontFamily": "BeVietnamPro-Regular",
390
- "fontSize": 12,
416
+ "fontSize": 16,
391
417
  "letterSpacing": 0.48,
392
- "lineHeight": 16,
418
+ "lineHeight": 24,
393
419
  },
394
420
  [
395
421
  {
422
+ "alignContent": "center",
423
+ "alignItems": "center",
396
424
  "color": "#001f23",
397
- "lineHeight": 12,
425
+ "marginTop": -2,
426
+ "textAlignVertical": "center",
398
427
  },
399
428
  {
400
429
  "backgroundColor": "#ffffff",
@@ -403,9 +432,10 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
403
432
  ]
404
433
  }
405
434
  testID="input-label"
406
- themeFontWeight="regular"
407
435
  themeIntent="body"
408
436
  themeState="filled"
437
+ themeTypeface="neutral"
438
+ themeVariant="regular"
409
439
  >
410
440
  Start date
411
441
  </Text>
@@ -591,6 +621,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
591
621
  }
592
622
  >
593
623
  <View
624
+ onLayout={[Function]}
594
625
  style={
595
626
  [
596
627
  {
@@ -630,24 +661,34 @@ exports[`DatePicker renders variant Calendar 1`] = `
630
661
  themeState="filled"
631
662
  />
632
663
  <View
664
+ onLayout={[Function]}
665
+ />
666
+ <View
667
+ collapsable={false}
633
668
  pointerEvents="none"
634
669
  style={
635
- [
636
- {
637
- "backgroundColor": "#ffffff",
638
- "flexDirection": "row",
639
- "left": 16,
640
- "paddingHorizontal": 4,
641
- "position": "absolute",
642
- "top": -4,
643
- "zIndex": 1,
644
- },
645
- {
646
- "backgroundColor": "#ffffff",
647
- },
648
- ]
670
+ {
671
+ "alignItems": "center",
672
+ "flexDirection": "row",
673
+ "left": -32,
674
+ "position": "absolute",
675
+ "right": 0,
676
+ "top": -10.666666666666666,
677
+ "transform": [
678
+ {
679
+ "translateY": 0,
680
+ },
681
+ {
682
+ "translateX": 48,
683
+ },
684
+ {
685
+ "scale": 1,
686
+ },
687
+ ],
688
+ "zIndex": 1,
689
+ }
649
690
  }
650
- testID="label-container"
691
+ themeVariant="text"
651
692
  >
652
693
  <Text
653
694
  allowFontScaling={false}
@@ -656,14 +697,17 @@ exports[`DatePicker renders variant Calendar 1`] = `
656
697
  {
657
698
  "color": "#001f23",
658
699
  "fontFamily": "BeVietnamPro-Regular",
659
- "fontSize": 12,
700
+ "fontSize": 16,
660
701
  "letterSpacing": 0.48,
661
- "lineHeight": 16,
702
+ "lineHeight": 24,
662
703
  },
663
704
  [
664
705
  {
706
+ "alignContent": "center",
707
+ "alignItems": "center",
665
708
  "color": "#001f23",
666
- "lineHeight": 12,
709
+ "marginTop": -2,
710
+ "textAlignVertical": "center",
667
711
  },
668
712
  {
669
713
  "backgroundColor": "#ffffff",
@@ -672,9 +716,10 @@ exports[`DatePicker renders variant Calendar 1`] = `
672
716
  ]
673
717
  }
674
718
  testID="input-label"
675
- themeFontWeight="regular"
676
719
  themeIntent="body"
677
720
  themeState="filled"
721
+ themeTypeface="neutral"
722
+ themeVariant="regular"
678
723
  >
679
724
  Start date
680
725
  </Text>
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap CHANGED
@@ -59,6 +59,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
59
59
  }
60
60
  >
61
61
  <View
62
+ onLayout={[Function]}
62
63
  style={
63
64
  [
64
65
  {
@@ -98,24 +99,34 @@ exports[`DatePickerAndroid renders correctly 1`] = `
98
99
  themeState="filled"
99
100
  />
100
101
  <View
102
+ onLayout={[Function]}
103
+ />
104
+ <View
105
+ collapsable={false}
101
106
  pointerEvents="none"
102
107
  style={
103
- [
104
- {
105
- "backgroundColor": "#ffffff",
106
- "flexDirection": "row",
107
- "left": 16,
108
- "paddingHorizontal": 4,
109
- "position": "absolute",
110
- "top": -4,
111
- "zIndex": 1,
112
- },
113
- {
114
- "backgroundColor": "#ffffff",
115
- },
116
- ]
108
+ {
109
+ "alignItems": "center",
110
+ "flexDirection": "row",
111
+ "left": -32,
112
+ "position": "absolute",
113
+ "right": 0,
114
+ "top": -10.666666666666666,
115
+ "transform": [
116
+ {
117
+ "translateY": 0,
118
+ },
119
+ {
120
+ "translateX": 48,
121
+ },
122
+ {
123
+ "scale": 1,
124
+ },
125
+ ],
126
+ "zIndex": 1,
127
+ }
117
128
  }
118
- testID="label-container"
129
+ themeVariant="text"
119
130
  >
120
131
  <Text
121
132
  allowFontScaling={false}
@@ -124,14 +135,17 @@ exports[`DatePickerAndroid renders correctly 1`] = `
124
135
  {
125
136
  "color": "#001f23",
126
137
  "fontFamily": "BeVietnamPro-Regular",
127
- "fontSize": 12,
138
+ "fontSize": 16,
128
139
  "letterSpacing": 0.48,
129
- "lineHeight": 16,
140
+ "lineHeight": 24,
130
141
  },
131
142
  [
132
143
  {
144
+ "alignContent": "center",
145
+ "alignItems": "center",
133
146
  "color": "#001f23",
134
- "lineHeight": 12,
147
+ "marginTop": -2,
148
+ "textAlignVertical": "center",
135
149
  },
136
150
  {
137
151
  "backgroundColor": "#ffffff",
@@ -140,9 +154,10 @@ exports[`DatePickerAndroid renders correctly 1`] = `
140
154
  ]
141
155
  }
142
156
  testID="input-label"
143
- themeFontWeight="regular"
144
157
  themeIntent="body"
145
158
  themeState="filled"
159
+ themeTypeface="neutral"
160
+ themeVariant="regular"
146
161
  >
147
162
  Start date
148
163
  </Text>
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap CHANGED
@@ -59,6 +59,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
59
59
  }
60
60
  >
61
61
  <View
62
+ onLayout={[Function]}
62
63
  style={
63
64
  [
64
65
  {
@@ -98,24 +99,34 @@ exports[`DatePickerCalendar renders correctly 1`] = `
98
99
  themeState="filled"
99
100
  />
100
101
  <View
102
+ onLayout={[Function]}
103
+ />
104
+ <View
105
+ collapsable={false}
101
106
  pointerEvents="none"
102
107
  style={
103
- [
104
- {
105
- "backgroundColor": "#ffffff",
106
- "flexDirection": "row",
107
- "left": 16,
108
- "paddingHorizontal": 4,
109
- "position": "absolute",
110
- "top": -4,
111
- "zIndex": 1,
112
- },
113
- {
114
- "backgroundColor": "#ffffff",
115
- },
116
- ]
108
+ {
109
+ "alignItems": "center",
110
+ "flexDirection": "row",
111
+ "left": -32,
112
+ "position": "absolute",
113
+ "right": 0,
114
+ "top": -10.666666666666666,
115
+ "transform": [
116
+ {
117
+ "translateY": 0,
118
+ },
119
+ {
120
+ "translateX": 48,
121
+ },
122
+ {
123
+ "scale": 1,
124
+ },
125
+ ],
126
+ "zIndex": 1,
127
+ }
117
128
  }
118
- testID="label-container"
129
+ themeVariant="text"
119
130
  >
120
131
  <Text
121
132
  allowFontScaling={false}
@@ -124,14 +135,17 @@ exports[`DatePickerCalendar renders correctly 1`] = `
124
135
  {
125
136
  "color": "#001f23",
126
137
  "fontFamily": "BeVietnamPro-Regular",
127
- "fontSize": 12,
138
+ "fontSize": 16,
128
139
  "letterSpacing": 0.48,
129
- "lineHeight": 16,
140
+ "lineHeight": 24,
130
141
  },
131
142
  [
132
143
  {
144
+ "alignContent": "center",
145
+ "alignItems": "center",
133
146
  "color": "#001f23",
134
- "lineHeight": 12,
147
+ "marginTop": -2,
148
+ "textAlignVertical": "center",
135
149
  },
136
150
  {
137
151
  "backgroundColor": "#ffffff",
@@ -140,9 +154,10 @@ exports[`DatePickerCalendar renders correctly 1`] = `
140
154
  ]
141
155
  }
142
156
  testID="input-label"
143
- themeFontWeight="regular"
144
157
  themeIntent="body"
145
158
  themeState="filled"
159
+ themeTypeface="neutral"
160
+ themeVariant="regular"
146
161
  >
147
162
  Start date
148
163
  </Text>
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -59,6 +59,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
59
59
  }
60
60
  >
61
61
  <View
62
+ onLayout={[Function]}
62
63
  style={
63
64
  [
64
65
  {
@@ -98,24 +99,34 @@ exports[`DatePickerIOS renders correctly 1`] = `
98
99
  themeState="filled"
99
100
  />
100
101
  <View
102
+ onLayout={[Function]}
103
+ />
104
+ <View
105
+ collapsable={false}
101
106
  pointerEvents="none"
102
107
  style={
103
- [
104
- {
105
- "backgroundColor": "#ffffff",
106
- "flexDirection": "row",
107
- "left": 16,
108
- "paddingHorizontal": 4,
109
- "position": "absolute",
110
- "top": -4,
111
- "zIndex": 1,
112
- },
113
- {
114
- "backgroundColor": "#ffffff",
115
- },
116
- ]
108
+ {
109
+ "alignItems": "center",
110
+ "flexDirection": "row",
111
+ "left": -32,
112
+ "position": "absolute",
113
+ "right": 0,
114
+ "top": -10.666666666666666,
115
+ "transform": [
116
+ {
117
+ "translateY": 0,
118
+ },
119
+ {
120
+ "translateX": 48,
121
+ },
122
+ {
123
+ "scale": 1,
124
+ },
125
+ ],
126
+ "zIndex": 1,
127
+ }
117
128
  }
118
- testID="label-container"
129
+ themeVariant="text"
119
130
  >
120
131
  <Text
121
132
  allowFontScaling={false}
@@ -124,14 +135,17 @@ exports[`DatePickerIOS renders correctly 1`] = `
124
135
  {
125
136
  "color": "#001f23",
126
137
  "fontFamily": "BeVietnamPro-Regular",
127
- "fontSize": 12,
138
+ "fontSize": 16,
128
139
  "letterSpacing": 0.48,
129
- "lineHeight": 16,
140
+ "lineHeight": 24,
130
141
  },
131
142
  [
132
143
  {
144
+ "alignContent": "center",
145
+ "alignItems": "center",
133
146
  "color": "#001f23",
134
- "lineHeight": 12,
147
+ "marginTop": -2,
148
+ "textAlignVertical": "center",
135
149
  },
136
150
  {
137
151
  "backgroundColor": "#ffffff",
@@ -140,9 +154,10 @@ exports[`DatePickerIOS renders correctly 1`] = `
140
154
  ]
141
155
  }
142
156
  testID="input-label"
143
- themeFontWeight="regular"
144
157
  themeIntent="body"
145
158
  themeState="filled"
159
+ themeTypeface="neutral"
160
+ themeVariant="regular"
146
161
  >
147
162
  Start date
148
163
  </Text>