@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/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -108,64 +108,47 @@ exports[`rendering allows custom renderer 1`] = `
108
108
  {
109
109
  "alignItems": "center",
110
110
  "flexDirection": "row",
111
- "justifyContent": "center",
112
- "left": 0,
111
+ "left": 24,
113
112
  "position": "absolute",
114
- "right": 0,
113
+ "right": 16,
115
114
  "top": -10.666666666666666,
116
115
  "transform": [
117
116
  {
118
117
  "translateY": 0,
119
118
  },
120
- {
121
- "translateX": 16,
122
- },
123
119
  {
124
120
  "scale": 1,
125
121
  },
126
122
  ],
123
+ "transformOrigin": "left top",
127
124
  "zIndex": 1,
128
125
  }
129
126
  }
127
+ themeHasPrefix={false}
130
128
  themeVariant="text"
131
129
  >
132
- <Text
133
- allowFontScaling={false}
130
+ <View
134
131
  style={
135
132
  [
136
133
  {
134
+ "alignContent": "center",
135
+ "alignItems": "center",
137
136
  "color": "#001f23",
138
- "fontFamily": "BeVietnamPro-Regular",
139
- "fontSize": 16,
140
- "letterSpacing": 0.48,
141
- "lineHeight": 24,
137
+ "flexDirection": "row",
138
+ "marginTop": -2,
139
+ "textAlignVertical": "center",
140
+ },
141
+ {
142
+ "backgroundColor": "#ffffff",
142
143
  },
143
- [
144
- {
145
- "alignContent": "center",
146
- "alignItems": "center",
147
- "color": "#001f23",
148
- "left": 0,
149
- "marginTop": -2,
150
- "position": "absolute",
151
- "textAlignVertical": "center",
152
- "top": "50%",
153
- "zIndex": 1,
154
- },
155
- {
156
- "backgroundColor": "#ffffff",
157
- },
158
- ],
159
144
  ]
160
145
  }
161
146
  testID="input-label"
162
- themeIntent="body"
163
147
  themeState="default"
164
- themeTypeface="neutral"
165
- themeVariant="regular"
166
148
  >
167
149
  <Text
168
150
  allowFontScaling={false}
151
+ numberOfLines={1}
169
152
  style={
170
153
  [
171
154
  {
@@ -184,7 +167,7 @@ exports[`rendering allows custom renderer 1`] = `
184
167
  >
185
168
  Choose collaborators
186
169
  </Text>
187
- </Text>
170
+ </View>
188
171
  </View>
189
172
  <View
190
173
  style={
@@ -1653,64 +1636,47 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
1653
1636
  {
1654
1637
  "alignItems": "center",
1655
1638
  "flexDirection": "row",
1656
- "justifyContent": "center",
1657
- "left": 0,
1639
+ "left": 24,
1658
1640
  "position": "absolute",
1659
- "right": 0,
1641
+ "right": 16,
1660
1642
  "top": -10.666666666666666,
1661
1643
  "transform": [
1662
1644
  {
1663
1645
  "translateY": 0,
1664
1646
  },
1665
- {
1666
- "translateX": 16,
1667
- },
1668
1647
  {
1669
1648
  "scale": 1,
1670
1649
  },
1671
1650
  ],
1651
+ "transformOrigin": "left top",
1672
1652
  "zIndex": 1,
1673
1653
  }
1674
1654
  }
1655
+ themeHasPrefix={false}
1675
1656
  themeVariant="text"
1676
1657
  >
1677
- <Text
1678
- allowFontScaling={false}
1658
+ <View
1679
1659
  style={
1680
1660
  [
1681
1661
  {
1662
+ "alignContent": "center",
1663
+ "alignItems": "center",
1682
1664
  "color": "#001f23",
1683
- "fontFamily": "BeVietnamPro-Regular",
1684
- "fontSize": 16,
1685
- "letterSpacing": 0.48,
1686
- "lineHeight": 24,
1665
+ "flexDirection": "row",
1666
+ "marginTop": -2,
1667
+ "textAlignVertical": "center",
1668
+ },
1669
+ {
1670
+ "backgroundColor": "#ffffff",
1687
1671
  },
1688
- [
1689
- {
1690
- "alignContent": "center",
1691
- "alignItems": "center",
1692
- "color": "#001f23",
1693
- "left": 0,
1694
- "marginTop": -2,
1695
- "position": "absolute",
1696
- "textAlignVertical": "center",
1697
- "top": "50%",
1698
- "zIndex": 1,
1699
- },
1700
- {
1701
- "backgroundColor": "#ffffff",
1702
- },
1703
- ],
1704
1672
  ]
1705
1673
  }
1706
1674
  testID="input-label"
1707
- themeIntent="body"
1708
1675
  themeState="filled"
1709
- themeTypeface="neutral"
1710
- themeVariant="regular"
1711
1676
  >
1712
1677
  <Text
1713
1678
  allowFontScaling={false}
1679
+ numberOfLines={1}
1714
1680
  style={
1715
1681
  [
1716
1682
  {
@@ -1729,7 +1695,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
1729
1695
  >
1730
1696
  Allow notifications
1731
1697
  </Text>
1732
- </Text>
1698
+ </View>
1733
1699
  </View>
1734
1700
  <View
1735
1701
  style={
@@ -3384,64 +3350,47 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
3384
3350
  {
3385
3351
  "alignItems": "center",
3386
3352
  "flexDirection": "row",
3387
- "justifyContent": "center",
3388
- "left": 0,
3353
+ "left": 24,
3389
3354
  "position": "absolute",
3390
- "right": 0,
3355
+ "right": 16,
3391
3356
  "top": -10.666666666666666,
3392
3357
  "transform": [
3393
3358
  {
3394
3359
  "translateY": 0,
3395
3360
  },
3396
- {
3397
- "translateX": 16,
3398
- },
3399
3361
  {
3400
3362
  "scale": 1,
3401
3363
  },
3402
3364
  ],
3365
+ "transformOrigin": "left top",
3403
3366
  "zIndex": 1,
3404
3367
  }
3405
3368
  }
3369
+ themeHasPrefix={false}
3406
3370
  themeVariant="text"
3407
3371
  >
3408
- <Text
3409
- allowFontScaling={false}
3372
+ <View
3410
3373
  style={
3411
3374
  [
3412
3375
  {
3376
+ "alignContent": "center",
3377
+ "alignItems": "center",
3413
3378
  "color": "#001f23",
3414
- "fontFamily": "BeVietnamPro-Regular",
3415
- "fontSize": 16,
3416
- "letterSpacing": 0.48,
3417
- "lineHeight": 24,
3379
+ "flexDirection": "row",
3380
+ "marginTop": -2,
3381
+ "textAlignVertical": "center",
3382
+ },
3383
+ {
3384
+ "backgroundColor": "#ffffff",
3418
3385
  },
3419
- [
3420
- {
3421
- "alignContent": "center",
3422
- "alignItems": "center",
3423
- "color": "#001f23",
3424
- "left": 0,
3425
- "marginTop": -2,
3426
- "position": "absolute",
3427
- "textAlignVertical": "center",
3428
- "top": "50%",
3429
- "zIndex": 1,
3430
- },
3431
- {
3432
- "backgroundColor": "#ffffff",
3433
- },
3434
- ],
3435
3386
  ]
3436
3387
  }
3437
3388
  testID="input-label"
3438
- themeIntent="body"
3439
3389
  themeState="filled"
3440
- themeTypeface="neutral"
3441
- themeVariant="regular"
3442
3390
  >
3443
3391
  <Text
3444
3392
  allowFontScaling={false}
3393
+ numberOfLines={1}
3445
3394
  style={
3446
3395
  [
3447
3396
  {
@@ -3460,7 +3409,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
3460
3409
  >
3461
3410
  Allow notifications
3462
3411
  </Text>
3463
- </Text>
3412
+ </View>
3464
3413
  </View>
3465
3414
  <View
3466
3415
  style={
@@ -3691,64 +3640,47 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3691
3640
  {
3692
3641
  "alignItems": "center",
3693
3642
  "flexDirection": "row",
3694
- "justifyContent": "center",
3695
- "left": 0,
3643
+ "left": 24,
3696
3644
  "position": "absolute",
3697
- "right": 0,
3645
+ "right": 16,
3698
3646
  "top": -10.666666666666666,
3699
3647
  "transform": [
3700
3648
  {
3701
3649
  "translateY": 0,
3702
3650
  },
3703
- {
3704
- "translateX": 16,
3705
- },
3706
3651
  {
3707
3652
  "scale": 1,
3708
3653
  },
3709
3654
  ],
3655
+ "transformOrigin": "left top",
3710
3656
  "zIndex": 1,
3711
3657
  }
3712
3658
  }
3659
+ themeHasPrefix={false}
3713
3660
  themeVariant="text"
3714
3661
  >
3715
- <Text
3716
- allowFontScaling={false}
3662
+ <View
3717
3663
  style={
3718
3664
  [
3719
3665
  {
3666
+ "alignContent": "center",
3667
+ "alignItems": "center",
3720
3668
  "color": "#001f23",
3721
- "fontFamily": "BeVietnamPro-Regular",
3722
- "fontSize": 16,
3723
- "letterSpacing": 0.48,
3724
- "lineHeight": 24,
3669
+ "flexDirection": "row",
3670
+ "marginTop": -2,
3671
+ "textAlignVertical": "center",
3672
+ },
3673
+ {
3674
+ "backgroundColor": "#ffffff",
3725
3675
  },
3726
- [
3727
- {
3728
- "alignContent": "center",
3729
- "alignItems": "center",
3730
- "color": "#001f23",
3731
- "left": 0,
3732
- "marginTop": -2,
3733
- "position": "absolute",
3734
- "textAlignVertical": "center",
3735
- "top": "50%",
3736
- "zIndex": 1,
3737
- },
3738
- {
3739
- "backgroundColor": "#ffffff",
3740
- },
3741
- ],
3742
3676
  ]
3743
3677
  }
3744
3678
  testID="input-label"
3745
- themeIntent="body"
3746
3679
  themeState="filled"
3747
- themeTypeface="neutral"
3748
- themeVariant="regular"
3749
3680
  >
3750
3681
  <Text
3751
3682
  allowFontScaling={false}
3683
+ numberOfLines={1}
3752
3684
  style={
3753
3685
  [
3754
3686
  {
@@ -3767,7 +3699,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3767
3699
  >
3768
3700
  Allow notifications
3769
3701
  </Text>
3770
- </Text>
3702
+ </View>
3771
3703
  </View>
3772
3704
  <View
3773
3705
  style={
@@ -5436,64 +5368,47 @@ exports[`rendering renders correctly when input is loading 1`] = `
5436
5368
  {
5437
5369
  "alignItems": "center",
5438
5370
  "flexDirection": "row",
5439
- "justifyContent": "center",
5440
- "left": 0,
5371
+ "left": 24,
5441
5372
  "position": "absolute",
5442
- "right": 0,
5373
+ "right": 16,
5443
5374
  "top": -10.666666666666666,
5444
5375
  "transform": [
5445
5376
  {
5446
5377
  "translateY": 0,
5447
5378
  },
5448
- {
5449
- "translateX": 16,
5450
- },
5451
5379
  {
5452
5380
  "scale": 1,
5453
5381
  },
5454
5382
  ],
5383
+ "transformOrigin": "left top",
5455
5384
  "zIndex": 1,
5456
5385
  }
5457
5386
  }
5387
+ themeHasPrefix={false}
5458
5388
  themeVariant="text"
5459
5389
  >
5460
- <Text
5461
- allowFontScaling={false}
5390
+ <View
5462
5391
  style={
5463
5392
  [
5464
5393
  {
5465
- "color": "#001f23",
5466
- "fontFamily": "BeVietnamPro-Regular",
5467
- "fontSize": 16,
5468
- "letterSpacing": 0.48,
5469
- "lineHeight": 24,
5394
+ "alignContent": "center",
5395
+ "alignItems": "center",
5396
+ "color": "#808f91",
5397
+ "flexDirection": "row",
5398
+ "marginTop": -2,
5399
+ "textAlignVertical": "center",
5400
+ },
5401
+ {
5402
+ "backgroundColor": "#ffffff",
5470
5403
  },
5471
- [
5472
- {
5473
- "alignContent": "center",
5474
- "alignItems": "center",
5475
- "color": "#808f91",
5476
- "left": 0,
5477
- "marginTop": -2,
5478
- "position": "absolute",
5479
- "textAlignVertical": "center",
5480
- "top": "50%",
5481
- "zIndex": 1,
5482
- },
5483
- {
5484
- "backgroundColor": "#ffffff",
5485
- },
5486
- ],
5487
5404
  ]
5488
5405
  }
5489
5406
  testID="input-label"
5490
- themeIntent="body"
5491
5407
  themeState="readonly"
5492
- themeTypeface="neutral"
5493
- themeVariant="regular"
5494
5408
  >
5495
5409
  <Text
5496
5410
  allowFontScaling={false}
5411
+ numberOfLines={1}
5497
5412
  style={
5498
5413
  [
5499
5414
  {
@@ -5512,7 +5427,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
5512
5427
  >
5513
5428
  Allow notifications
5514
5429
  </Text>
5515
- </Text>
5430
+ </View>
5516
5431
  </View>
5517
5432
  <View
5518
5433
  style={
@@ -5756,64 +5671,47 @@ exports[`rendering renders correctly when receives sections 1`] = `
5756
5671
  {
5757
5672
  "alignItems": "center",
5758
5673
  "flexDirection": "row",
5759
- "justifyContent": "center",
5760
- "left": 0,
5674
+ "left": 24,
5761
5675
  "position": "absolute",
5762
- "right": 0,
5676
+ "right": 16,
5763
5677
  "top": -10.666666666666666,
5764
5678
  "transform": [
5765
5679
  {
5766
5680
  "translateY": 0,
5767
5681
  },
5768
- {
5769
- "translateX": 16,
5770
- },
5771
5682
  {
5772
5683
  "scale": 1,
5773
5684
  },
5774
5685
  ],
5686
+ "transformOrigin": "left top",
5775
5687
  "zIndex": 1,
5776
5688
  }
5777
5689
  }
5690
+ themeHasPrefix={false}
5778
5691
  themeVariant="text"
5779
5692
  >
5780
- <Text
5781
- allowFontScaling={false}
5693
+ <View
5782
5694
  style={
5783
5695
  [
5784
5696
  {
5697
+ "alignContent": "center",
5698
+ "alignItems": "center",
5785
5699
  "color": "#001f23",
5786
- "fontFamily": "BeVietnamPro-Regular",
5787
- "fontSize": 16,
5788
- "letterSpacing": 0.48,
5789
- "lineHeight": 24,
5700
+ "flexDirection": "row",
5701
+ "marginTop": -2,
5702
+ "textAlignVertical": "center",
5703
+ },
5704
+ {
5705
+ "backgroundColor": "#ffffff",
5790
5706
  },
5791
- [
5792
- {
5793
- "alignContent": "center",
5794
- "alignItems": "center",
5795
- "color": "#001f23",
5796
- "left": 0,
5797
- "marginTop": -2,
5798
- "position": "absolute",
5799
- "textAlignVertical": "center",
5800
- "top": "50%",
5801
- "zIndex": 1,
5802
- },
5803
- {
5804
- "backgroundColor": "#ffffff",
5805
- },
5806
- ],
5807
5707
  ]
5808
5708
  }
5809
5709
  testID="input-label"
5810
- themeIntent="body"
5811
5710
  themeState="filled"
5812
- themeTypeface="neutral"
5813
- themeVariant="regular"
5814
5711
  >
5815
5712
  <Text
5816
5713
  allowFontScaling={false}
5714
+ numberOfLines={1}
5817
5715
  style={
5818
5716
  [
5819
5717
  {
@@ -5832,7 +5730,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
5832
5730
  >
5833
5731
  Allow notifications
5834
5732
  </Text>
5835
- </Text>
5733
+ </View>
5836
5734
  </View>
5837
5735
  <View
5838
5736
  style={
@@ -7089,64 +6987,47 @@ exports[`rendering renders correctly when receives sections 2`] = `
7089
6987
  {
7090
6988
  "alignItems": "center",
7091
6989
  "flexDirection": "row",
7092
- "justifyContent": "center",
7093
- "left": 0,
6990
+ "left": 24,
7094
6991
  "position": "absolute",
7095
- "right": 0,
6992
+ "right": 16,
7096
6993
  "top": -10.666666666666666,
7097
6994
  "transform": [
7098
6995
  {
7099
6996
  "translateY": 0,
7100
6997
  },
7101
- {
7102
- "translateX": 16,
7103
- },
7104
6998
  {
7105
6999
  "scale": 1,
7106
7000
  },
7107
7001
  ],
7002
+ "transformOrigin": "left top",
7108
7003
  "zIndex": 1,
7109
7004
  }
7110
7005
  }
7006
+ themeHasPrefix={false}
7111
7007
  themeVariant="text"
7112
7008
  >
7113
- <Text
7114
- allowFontScaling={false}
7009
+ <View
7115
7010
  style={
7116
7011
  [
7117
7012
  {
7013
+ "alignContent": "center",
7014
+ "alignItems": "center",
7118
7015
  "color": "#001f23",
7119
- "fontFamily": "BeVietnamPro-Regular",
7120
- "fontSize": 16,
7121
- "letterSpacing": 0.48,
7122
- "lineHeight": 24,
7016
+ "flexDirection": "row",
7017
+ "marginTop": -2,
7018
+ "textAlignVertical": "center",
7019
+ },
7020
+ {
7021
+ "backgroundColor": "#ffffff",
7123
7022
  },
7124
- [
7125
- {
7126
- "alignContent": "center",
7127
- "alignItems": "center",
7128
- "color": "#001f23",
7129
- "left": 0,
7130
- "marginTop": -2,
7131
- "position": "absolute",
7132
- "textAlignVertical": "center",
7133
- "top": "50%",
7134
- "zIndex": 1,
7135
- },
7136
- {
7137
- "backgroundColor": "#ffffff",
7138
- },
7139
- ],
7140
7023
  ]
7141
7024
  }
7142
7025
  testID="input-label"
7143
- themeIntent="body"
7144
7026
  themeState="filled"
7145
- themeTypeface="neutral"
7146
- themeVariant="regular"
7147
7027
  >
7148
7028
  <Text
7149
7029
  allowFontScaling={false}
7030
+ numberOfLines={1}
7150
7031
  style={
7151
7032
  [
7152
7033
  {
@@ -7165,7 +7046,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
7165
7046
  >
7166
7047
  Allow notifications
7167
7048
  </Text>
7168
- </Text>
7049
+ </View>
7169
7050
  </View>
7170
7051
  <View
7171
7052
  style={
package/src/components/Select/MultiSelect/__tests__/index.spec.tsx CHANGED
@@ -32,6 +32,11 @@ const sections = [
32
32
  },
33
33
  ];
34
34
 
35
+ const objectOptions = [
36
+ { text: 'Monday', value: { id: 'mon' } },
37
+ { text: 'Tuesday', value: { id: 'tue' } },
38
+ ];
39
+
35
40
  type CustomOptionType = {
36
41
  text: string;
37
42
  value: string;
@@ -341,6 +346,22 @@ describe('rendering', () => {
341
346
  expect(getByText('Monday')).toBeTruthy();
342
347
  expect(toJSON()).toMatchSnapshot();
343
348
  });
349
+
350
+ it('renders correctly when receives object value', () => {
351
+ const { getByText, getByTestId } = renderWithTheme(
352
+ <MultiSelect
353
+ value={[{ id: 'mon' }]}
354
+ options={objectOptions}
355
+ onConfirm={jest.fn()}
356
+ footerLabel="Confirm"
357
+ label="Allow notifications"
358
+ />
359
+ );
360
+
361
+ fireEvent.press(getByTestId('text-input'));
362
+ expect(getByText('Monday')).toBeVisible();
363
+ expect(getByText('Tuesday')).toBeVisible();
364
+ });
344
365
  });
345
366
 
346
367
  describe('behavior', () => {
@@ -379,4 +400,23 @@ describe('behavior', () => {
379
400
 
380
401
  expect(onPress).toBeCalledTimes(0);
381
402
  });
403
+
404
+ it('calls confirm with correct value when receives object value', () => {
405
+ const onPress = jest.fn();
406
+ const { getByText, getByTestId } = renderWithTheme(
407
+ <MultiSelect
408
+ value={[{ id: 'mon' }]}
409
+ options={objectOptions}
410
+ onConfirm={onPress}
411
+ footerLabel="Confirm"
412
+ label="Allow notifications"
413
+ />
414
+ );
415
+
416
+ fireEvent.press(getByTestId('text-input'));
417
+ fireEvent.press(getByText('Tuesday'));
418
+ fireEvent.press(getByText('Confirm'));
419
+
420
+ expect(onPress).toBeCalledWith([{ id: 'mon' }, { id: 'tue' }]);
421
+ });
382
422
  });