@hero-design/rn 8.45.0-test.0 → 8.45.0

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 (37) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -2
  3. package/es/index.js +731 -584
  4. package/lib/index.js +731 -584
  5. package/package.json +1 -1
  6. package/src/components/Accordion/index.tsx +1 -1
  7. package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx +63 -9
  8. package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx +71 -9
  9. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap +271 -2
  10. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap +2156 -7
  11. package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx +140 -6
  12. package/src/components/Avatar/AvatarStack/index.tsx +94 -9
  13. package/src/components/Carousel/index.tsx +18 -11
  14. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +102 -57
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +34 -19
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +34 -19
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +34 -19
  18. package/src/components/RichTextEditor/RichTextEditor.tsx +76 -38
  19. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +126 -102
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +235 -146
  21. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +201 -127
  22. package/src/components/TextInput/StyledTextInput.tsx +8 -31
  23. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +0 -44
  24. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -638
  25. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +1126 -833
  26. package/src/components/TextInput/__tests__/index.spec.tsx +2 -2
  27. package/src/components/TextInput/index.tsx +113 -57
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +68 -38
  29. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +68 -38
  30. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -2
  31. package/src/theme/components/textInput.ts +2 -2
  32. package/types/components/Accordion/index.d.ts +1 -1
  33. package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts +13 -0
  34. package/types/components/Avatar/AvatarStack/index.d.ts +14 -2
  35. package/types/components/Avatar/index.d.ts +1 -1
  36. package/types/components/TextInput/StyledTextInput.d.ts +4 -24
  37. package/types/components/TextInput/index.d.ts +1 -0
package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap CHANGED
@@ -1,399 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Label renders correctly with themeState default 1`] = `
4
- <View
5
- style={
6
- {
7
- "flex": 1,
8
- }
9
- }
10
- >
11
- <Text
12
- allowFontScaling={false}
13
- style={
14
- [
15
- {
16
- "color": "#001f23",
17
- "fontFamily": "BeVietnamPro-Regular",
18
- "fontSize": 12,
19
- "letterSpacing": 0.48,
20
- "lineHeight": 16,
21
- },
22
- [
23
- {
24
- "color": "#001f23",
25
- "lineHeight": 12,
26
- },
27
- undefined,
28
- ],
29
- ]
30
- }
31
- themeFontWeight="regular"
32
- themeIntent="body"
33
- themeState="default"
34
- >
35
- Label
36
- </Text>
37
- <View
38
- pointerEvents="box-none"
39
- position="bottom"
40
- style={
41
- [
42
- {
43
- "bottom": 0,
44
- "elevation": 9999,
45
- "flexDirection": "column-reverse",
46
- "left": 0,
47
- "paddingHorizontal": 24,
48
- "paddingVertical": 16,
49
- "position": "absolute",
50
- "right": 0,
51
- "top": 0,
52
- },
53
- undefined,
54
- ]
55
- }
56
- />
57
- </View>
58
- `;
59
-
60
- exports[`Label renders correctly with themeState disabled 1`] = `
61
- <View
62
- style={
63
- {
64
- "flex": 1,
65
- }
66
- }
67
- >
68
- <Text
69
- allowFontScaling={false}
70
- style={
71
- [
72
- {
73
- "color": "#001f23",
74
- "fontFamily": "BeVietnamPro-Regular",
75
- "fontSize": 12,
76
- "letterSpacing": 0.48,
77
- "lineHeight": 16,
78
- },
79
- [
80
- {
81
- "color": "#bfc1c5",
82
- "lineHeight": 12,
83
- },
84
- undefined,
85
- ],
86
- ]
87
- }
88
- themeFontWeight="regular"
89
- themeIntent="body"
90
- themeState="disabled"
91
- >
92
- Label
93
- </Text>
94
- <View
95
- pointerEvents="box-none"
96
- position="bottom"
97
- style={
98
- [
99
- {
100
- "bottom": 0,
101
- "elevation": 9999,
102
- "flexDirection": "column-reverse",
103
- "left": 0,
104
- "paddingHorizontal": 24,
105
- "paddingVertical": 16,
106
- "position": "absolute",
107
- "right": 0,
108
- "top": 0,
109
- },
110
- undefined,
111
- ]
112
- }
113
- />
114
- </View>
115
- `;
116
-
117
- exports[`Label renders correctly with themeState error 1`] = `
118
- <View
119
- style={
120
- {
121
- "flex": 1,
122
- }
123
- }
124
- >
125
- <Text
126
- allowFontScaling={false}
127
- style={
128
- [
129
- {
130
- "color": "#001f23",
131
- "fontFamily": "BeVietnamPro-Regular",
132
- "fontSize": 12,
133
- "letterSpacing": 0.48,
134
- "lineHeight": 16,
135
- },
136
- [
137
- {
138
- "color": "#001f23",
139
- "lineHeight": 12,
140
- },
141
- undefined,
142
- ],
143
- ]
144
- }
145
- themeFontWeight="regular"
146
- themeIntent="body"
147
- themeState="error"
148
- >
149
- Label
150
- </Text>
151
- <View
152
- pointerEvents="box-none"
153
- position="bottom"
154
- style={
155
- [
156
- {
157
- "bottom": 0,
158
- "elevation": 9999,
159
- "flexDirection": "column-reverse",
160
- "left": 0,
161
- "paddingHorizontal": 24,
162
- "paddingVertical": 16,
163
- "position": "absolute",
164
- "right": 0,
165
- "top": 0,
166
- },
167
- undefined,
168
- ]
169
- }
170
- />
171
- </View>
172
- `;
173
-
174
- exports[`Label renders correctly with themeState filled 1`] = `
175
- <View
176
- style={
177
- {
178
- "flex": 1,
179
- }
180
- }
181
- >
182
- <Text
183
- allowFontScaling={false}
184
- style={
185
- [
186
- {
187
- "color": "#001f23",
188
- "fontFamily": "BeVietnamPro-Regular",
189
- "fontSize": 12,
190
- "letterSpacing": 0.48,
191
- "lineHeight": 16,
192
- },
193
- [
194
- {
195
- "color": "#001f23",
196
- "lineHeight": 12,
197
- },
198
- undefined,
199
- ],
200
- ]
201
- }
202
- themeFontWeight="regular"
203
- themeIntent="body"
204
- themeState="filled"
205
- >
206
- Label
207
- </Text>
208
- <View
209
- pointerEvents="box-none"
210
- position="bottom"
211
- style={
212
- [
213
- {
214
- "bottom": 0,
215
- "elevation": 9999,
216
- "flexDirection": "column-reverse",
217
- "left": 0,
218
- "paddingHorizontal": 24,
219
- "paddingVertical": 16,
220
- "position": "absolute",
221
- "right": 0,
222
- "top": 0,
223
- },
224
- undefined,
225
- ]
226
- }
227
- />
228
- </View>
229
- `;
230
-
231
- exports[`Label renders correctly with themeState readonly 1`] = `
232
- <View
233
- style={
234
- {
235
- "flex": 1,
236
- }
237
- }
238
- >
239
- <Text
240
- allowFontScaling={false}
241
- style={
242
- [
243
- {
244
- "color": "#001f23",
245
- "fontFamily": "BeVietnamPro-Regular",
246
- "fontSize": 12,
247
- "letterSpacing": 0.48,
248
- "lineHeight": 16,
249
- },
250
- [
251
- {
252
- "color": "#808f91",
253
- "lineHeight": 12,
254
- },
255
- undefined,
256
- ],
257
- ]
258
- }
259
- themeFontWeight="regular"
260
- themeIntent="body"
261
- themeState="readonly"
262
- >
263
- Label
264
- </Text>
265
- <View
266
- pointerEvents="box-none"
267
- position="bottom"
268
- style={
269
- [
270
- {
271
- "bottom": 0,
272
- "elevation": 9999,
273
- "flexDirection": "column-reverse",
274
- "left": 0,
275
- "paddingHorizontal": 24,
276
- "paddingVertical": 16,
277
- "position": "absolute",
278
- "right": 0,
279
- "top": 0,
280
- },
281
- undefined,
282
- ]
283
- }
284
- />
285
- </View>
286
- `;
287
-
288
- exports[`LabelContainer renders correctly 1`] = `
289
- <View
290
- style={
291
- {
292
- "flex": 1,
293
- }
294
- }
295
- >
296
- <View
297
- style={
298
- [
299
- {
300
- "backgroundColor": "#ffffff",
301
- "flexDirection": "row",
302
- "left": 16,
303
- "paddingHorizontal": 4,
304
- "position": "absolute",
305
- "top": -4,
306
- "zIndex": 1,
307
- },
308
- undefined,
309
- ]
310
- }
311
- />
312
- <View
313
- pointerEvents="box-none"
314
- position="bottom"
315
- style={
316
- [
317
- {
318
- "bottom": 0,
319
- "elevation": 9999,
320
- "flexDirection": "column-reverse",
321
- "left": 0,
322
- "paddingHorizontal": 24,
323
- "paddingVertical": 16,
324
- "position": "absolute",
325
- "right": 0,
326
- "top": 0,
327
- },
328
- undefined,
329
- ]
330
- }
331
- />
332
- </View>
333
- `;
334
-
335
- exports[`LabelInsideTextInput renders correctly with themeState default 1`] = `
336
- <View
337
- style={
338
- {
339
- "flex": 1,
340
- }
341
- }
342
- >
343
- <Text
344
- allowFontScaling={false}
345
- style={
346
- [
347
- {
348
- "color": "#001f23",
349
- "fontFamily": "BeVietnamPro-Regular",
350
- "fontSize": 16,
351
- "letterSpacing": 0.48,
352
- "lineHeight": 24,
353
- },
354
- [
355
- {
356
- "alignContent": "center",
357
- "alignItems": "center",
358
- "color": "#001f23",
359
- "marginTop": -2,
360
- "textAlignVertical": "center",
361
- },
362
- undefined,
363
- ],
364
- ]
365
- }
366
- themeIntent="body"
367
- themeState="default"
368
- themeTypeface="neutral"
369
- themeVariant="regular"
370
- >
371
- Label
372
- </Text>
373
- <View
374
- pointerEvents="box-none"
375
- position="bottom"
376
- style={
377
- [
378
- {
379
- "bottom": 0,
380
- "elevation": 9999,
381
- "flexDirection": "column-reverse",
382
- "left": 0,
383
- "paddingHorizontal": 24,
384
- "paddingVertical": 16,
385
- "position": "absolute",
386
- "right": 0,
387
- "top": 0,
388
- },
389
- undefined,
390
- ]
391
- }
392
- />
393
- </View>
394
- `;
395
-
396
- exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
3
+ exports[`LabelInsideTextInput renders correctly with themeState default 1`] = `
397
4
  <View
398
5
  style={
399
6
  {
@@ -416,7 +23,7 @@ exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
416
23
  {
417
24
  "alignContent": "center",
418
25
  "alignItems": "center",
419
- "color": "#bfc1c5",
26
+ "color": "#001f23",
420
27
  "marginTop": -2,
421
28
  "textAlignVertical": "center",
422
29
  },
@@ -425,7 +32,7 @@ exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
425
32
  ]
426
33
  }
427
34
  themeIntent="body"
428
- themeState="disabled"
35
+ themeState="default"
429
36
  themeTypeface="neutral"
430
37
  themeVariant="regular"
431
38
  >
@@ -454,7 +61,7 @@ exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
454
61
  </View>
455
62
  `;
456
63
 
457
- exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
64
+ exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
458
65
  <View
459
66
  style={
460
67
  {
@@ -477,7 +84,7 @@ exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
477
84
  {
478
85
  "alignContent": "center",
479
86
  "alignItems": "center",
480
- "color": "#001f23",
87
+ "color": "#bfc1c5",
481
88
  "marginTop": -2,
482
89
  "textAlignVertical": "center",
483
90
  },
@@ -486,7 +93,7 @@ exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
486
93
  ]
487
94
  }
488
95
  themeIntent="body"
489
- themeState="error"
96
+ themeState="disabled"
490
97
  themeTypeface="neutral"
491
98
  themeVariant="regular"
492
99
  >
@@ -515,7 +122,7 @@ exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
515
122
  </View>
516
123
  `;
517
124
 
518
- exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
125
+ exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
519
126
  <View
520
127
  style={
521
128
  {
@@ -547,7 +154,7 @@ exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
547
154
  ]
548
155
  }
549
156
  themeIntent="body"
550
- themeState="filled"
157
+ themeState="error"
551
158
  themeTypeface="neutral"
552
159
  themeVariant="regular"
553
160
  >
@@ -576,7 +183,7 @@ exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
576
183
  </View>
577
184
  `;
578
185
 
579
- exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
186
+ exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
580
187
  <View
581
188
  style={
582
189
  {
@@ -599,7 +206,7 @@ exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
599
206
  {
600
207
  "alignContent": "center",
601
208
  "alignItems": "center",
602
- "color": "#808f91",
209
+ "color": "#001f23",
603
210
  "marginTop": -2,
604
211
  "textAlignVertical": "center",
605
212
  },
@@ -608,7 +215,7 @@ exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
608
215
  ]
609
216
  }
610
217
  themeIntent="body"
611
- themeState="readonly"
218
+ themeState="filled"
612
219
  themeTypeface="neutral"
613
220
  themeVariant="regular"
614
221
  >
@@ -637,235 +244,7 @@ exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
637
244
  </View>
638
245
  `;
639
246
 
640
- exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
641
- <View
642
- style={
643
- {
644
- "flex": 1,
645
- }
646
- }
647
- >
648
- <Text
649
- allowFontScaling={false}
650
- style={
651
- [
652
- {
653
- "color": "#001f23",
654
- "fontFamily": "BeVietnamPro-Regular",
655
- "fontSize": 12,
656
- "letterSpacing": 0.48,
657
- "lineHeight": 16,
658
- },
659
- [
660
- {
661
- "color": "#cb300a",
662
- "lineHeight": 12,
663
- },
664
- undefined,
665
- ],
666
- ]
667
- }
668
- themeFontWeight="regular"
669
- themeIntent="body"
670
- themeState="default"
671
- >
672
- *
673
- </Text>
674
- <View
675
- pointerEvents="box-none"
676
- position="bottom"
677
- style={
678
- [
679
- {
680
- "bottom": 0,
681
- "elevation": 9999,
682
- "flexDirection": "column-reverse",
683
- "left": 0,
684
- "paddingHorizontal": 24,
685
- "paddingVertical": 16,
686
- "position": "absolute",
687
- "right": 0,
688
- "top": 0,
689
- },
690
- undefined,
691
- ]
692
- }
693
- />
694
- </View>
695
- `;
696
-
697
- exports[`StyledAsteriskLabel renders correctly with themeState disabled 1`] = `
698
- <View
699
- style={
700
- {
701
- "flex": 1,
702
- }
703
- }
704
- >
705
- <Text
706
- allowFontScaling={false}
707
- style={
708
- [
709
- {
710
- "color": "#001f23",
711
- "fontFamily": "BeVietnamPro-Regular",
712
- "fontSize": 12,
713
- "letterSpacing": 0.48,
714
- "lineHeight": 16,
715
- },
716
- [
717
- {
718
- "color": "#bfc1c5",
719
- "lineHeight": 12,
720
- },
721
- undefined,
722
- ],
723
- ]
724
- }
725
- themeFontWeight="regular"
726
- themeIntent="body"
727
- themeState="disabled"
728
- >
729
- *
730
- </Text>
731
- <View
732
- pointerEvents="box-none"
733
- position="bottom"
734
- style={
735
- [
736
- {
737
- "bottom": 0,
738
- "elevation": 9999,
739
- "flexDirection": "column-reverse",
740
- "left": 0,
741
- "paddingHorizontal": 24,
742
- "paddingVertical": 16,
743
- "position": "absolute",
744
- "right": 0,
745
- "top": 0,
746
- },
747
- undefined,
748
- ]
749
- }
750
- />
751
- </View>
752
- `;
753
-
754
- exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
755
- <View
756
- style={
757
- {
758
- "flex": 1,
759
- }
760
- }
761
- >
762
- <Text
763
- allowFontScaling={false}
764
- style={
765
- [
766
- {
767
- "color": "#001f23",
768
- "fontFamily": "BeVietnamPro-Regular",
769
- "fontSize": 12,
770
- "letterSpacing": 0.48,
771
- "lineHeight": 16,
772
- },
773
- [
774
- {
775
- "color": "#cb300a",
776
- "lineHeight": 12,
777
- },
778
- undefined,
779
- ],
780
- ]
781
- }
782
- themeFontWeight="regular"
783
- themeIntent="body"
784
- themeState="error"
785
- >
786
- *
787
- </Text>
788
- <View
789
- pointerEvents="box-none"
790
- position="bottom"
791
- style={
792
- [
793
- {
794
- "bottom": 0,
795
- "elevation": 9999,
796
- "flexDirection": "column-reverse",
797
- "left": 0,
798
- "paddingHorizontal": 24,
799
- "paddingVertical": 16,
800
- "position": "absolute",
801
- "right": 0,
802
- "top": 0,
803
- },
804
- undefined,
805
- ]
806
- }
807
- />
808
- </View>
809
- `;
810
-
811
- exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
812
- <View
813
- style={
814
- {
815
- "flex": 1,
816
- }
817
- }
818
- >
819
- <Text
820
- allowFontScaling={false}
821
- style={
822
- [
823
- {
824
- "color": "#001f23",
825
- "fontFamily": "BeVietnamPro-Regular",
826
- "fontSize": 12,
827
- "letterSpacing": 0.48,
828
- "lineHeight": 16,
829
- },
830
- [
831
- {
832
- "color": "#cb300a",
833
- "lineHeight": 12,
834
- },
835
- undefined,
836
- ],
837
- ]
838
- }
839
- themeFontWeight="regular"
840
- themeIntent="body"
841
- themeState="filled"
842
- >
843
- *
844
- </Text>
845
- <View
846
- pointerEvents="box-none"
847
- position="bottom"
848
- style={
849
- [
850
- {
851
- "bottom": 0,
852
- "elevation": 9999,
853
- "flexDirection": "column-reverse",
854
- "left": 0,
855
- "paddingHorizontal": 24,
856
- "paddingVertical": 16,
857
- "position": "absolute",
858
- "right": 0,
859
- "top": 0,
860
- },
861
- undefined,
862
- ]
863
- }
864
- />
865
- </View>
866
- `;
867
-
868
- exports[`StyledAsteriskLabel renders correctly with themeState readonly 1`] = `
247
+ exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
869
248
  <View
870
249
  style={
871
250
  {
@@ -880,24 +259,28 @@ exports[`StyledAsteriskLabel renders correctly with themeState readonly 1`] = `
880
259
  {
881
260
  "color": "#001f23",
882
261
  "fontFamily": "BeVietnamPro-Regular",
883
- "fontSize": 12,
262
+ "fontSize": 16,
884
263
  "letterSpacing": 0.48,
885
- "lineHeight": 16,
264
+ "lineHeight": 24,
886
265
  },
887
266
  [
888
267
  {
268
+ "alignContent": "center",
269
+ "alignItems": "center",
889
270
  "color": "#808f91",
890
- "lineHeight": 12,
271
+ "marginTop": -2,
272
+ "textAlignVertical": "center",
891
273
  },
892
274
  undefined,
893
275
  ],
894
276
  ]
895
277
  }
896
- themeFontWeight="regular"
897
278
  themeIntent="body"
898
279
  themeState="readonly"
280
+ themeTypeface="neutral"
281
+ themeVariant="regular"
899
282
  >
900
- *
283
+ Label
901
284
  </Text>
902
285
  <View
903
286
  pointerEvents="box-none"