@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__/utils.spec.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { isOptionSelected } from '../utils';
2
+
3
+ describe('isOptionSelected', () => {
4
+ it('should return true when string value is selected', () => {
5
+ const selectedValues = ['option1', 'option2'];
6
+ const option = { value: 'option1', text: 'Option 1' };
7
+
8
+ expect(isOptionSelected(selectedValues, option)).toBe(true);
9
+ });
10
+
11
+ it('should return false when string value is not selected', () => {
12
+ const selectedValues = ['option1', 'option2'];
13
+ const option = { value: 'option3', text: 'Option 3' };
14
+
15
+ expect(isOptionSelected(selectedValues, option)).toBe(false);
16
+ });
17
+
18
+ it('should return true when object value is selected', () => {
19
+ const selectedValues = [{ id: 1 }, { id: 2 }];
20
+ const option = { value: { id: 1 }, text: 'Option 1' };
21
+
22
+ expect(isOptionSelected(selectedValues, option)).toBe(true);
23
+ });
24
+
25
+ it('should return false when object value is not selected', () => {
26
+ const selectedValues = [{ id: 1 }, { id: 2 }];
27
+ const option = { value: { id: 3 }, text: 'Option 3' };
28
+
29
+ expect(isOptionSelected(selectedValues, option)).toBe(false);
30
+ });
31
+ });
package/src/components/Select/MultiSelect/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
2
  import type {
3
- SectionList,
4
3
  TextInputProps as NativeTextInputProps,
4
+ SectionList,
5
5
  } from 'react-native';
6
6
  import { TouchableOpacity, View } from 'react-native';
7
7
  import BottomSheet from '../../BottomSheet';
@@ -17,6 +17,7 @@ import {
17
17
  import { StyledSearchBar } from '../StyledSelect';
18
18
  import type { OptionType, SectionType, SelectProps } from '../types';
19
19
  import OptionList from './OptionList';
20
+ import { isOptionSelected } from './utils';
20
21
 
21
22
  export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>>
22
23
  extends SelectProps<V, T> {
@@ -83,7 +84,7 @@ function MultiSelect<V, T extends OptionType<V>>({
83
84
  const sections = toSections(options);
84
85
  const flatOptions = toFlatOptions(options);
85
86
  const displayedValue = flatOptions
86
- .filter((opt) => value.includes(opt.value))
87
+ .filter((opt) => isOptionSelected(value, opt))
87
88
  .map((opt) => opt.text)
88
89
  .join(', ');
89
90
  const rawValue = value.length > 0 ? value.join(', ') : '';
package/src/components/Select/MultiSelect/utils.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { deepCompareValue } from '../helpers';
2
+ import { OptionType } from '../types';
3
+
4
+ export const isOptionSelected = <V, T extends OptionType<V>>(
5
+ value: V[],
6
+ option: T
7
+ ): boolean => {
8
+ if (typeof option.value === 'string') {
9
+ return value.includes(option.value);
10
+ }
11
+ return value.some((v) => deepCompareValue(v, option.value));
12
+ };
package/src/components/Select/SingleSelect/__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={
@@ -1565,64 +1548,47 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
1565
1548
  {
1566
1549
  "alignItems": "center",
1567
1550
  "flexDirection": "row",
1568
- "justifyContent": "center",
1569
- "left": 0,
1551
+ "left": 24,
1570
1552
  "position": "absolute",
1571
- "right": 0,
1553
+ "right": 16,
1572
1554
  "top": -10.666666666666666,
1573
1555
  "transform": [
1574
1556
  {
1575
1557
  "translateY": 0,
1576
1558
  },
1577
- {
1578
- "translateX": 16,
1579
- },
1580
1559
  {
1581
1560
  "scale": 1,
1582
1561
  },
1583
1562
  ],
1563
+ "transformOrigin": "left top",
1584
1564
  "zIndex": 1,
1585
1565
  }
1586
1566
  }
1567
+ themeHasPrefix={false}
1587
1568
  themeVariant="text"
1588
1569
  >
1589
- <Text
1590
- allowFontScaling={false}
1570
+ <View
1591
1571
  style={
1592
1572
  [
1593
1573
  {
1574
+ "alignContent": "center",
1575
+ "alignItems": "center",
1594
1576
  "color": "#001f23",
1595
- "fontFamily": "BeVietnamPro-Regular",
1596
- "fontSize": 16,
1597
- "letterSpacing": 0.48,
1598
- "lineHeight": 24,
1577
+ "flexDirection": "row",
1578
+ "marginTop": -2,
1579
+ "textAlignVertical": "center",
1580
+ },
1581
+ {
1582
+ "backgroundColor": "#ffffff",
1599
1583
  },
1600
- [
1601
- {
1602
- "alignContent": "center",
1603
- "alignItems": "center",
1604
- "color": "#001f23",
1605
- "left": 0,
1606
- "marginTop": -2,
1607
- "position": "absolute",
1608
- "textAlignVertical": "center",
1609
- "top": "50%",
1610
- "zIndex": 1,
1611
- },
1612
- {
1613
- "backgroundColor": "#ffffff",
1614
- },
1615
- ],
1616
1584
  ]
1617
1585
  }
1618
1586
  testID="input-label"
1619
- themeIntent="body"
1620
1587
  themeState="filled"
1621
- themeTypeface="neutral"
1622
- themeVariant="regular"
1623
1588
  >
1624
1589
  <Text
1625
1590
  allowFontScaling={false}
1591
+ numberOfLines={1}
1626
1592
  style={
1627
1593
  [
1628
1594
  {
@@ -1641,7 +1607,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
1641
1607
  >
1642
1608
  Allow notifications
1643
1609
  </Text>
1644
- </Text>
1610
+ </View>
1645
1611
  </View>
1646
1612
  <View
1647
1613
  style={
@@ -3181,64 +3147,47 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
3181
3147
  {
3182
3148
  "alignItems": "center",
3183
3149
  "flexDirection": "row",
3184
- "justifyContent": "center",
3185
- "left": 0,
3150
+ "left": 24,
3186
3151
  "position": "absolute",
3187
- "right": 0,
3152
+ "right": 16,
3188
3153
  "top": -10.666666666666666,
3189
3154
  "transform": [
3190
3155
  {
3191
3156
  "translateY": 0,
3192
3157
  },
3193
- {
3194
- "translateX": 16,
3195
- },
3196
3158
  {
3197
3159
  "scale": 1,
3198
3160
  },
3199
3161
  ],
3162
+ "transformOrigin": "left top",
3200
3163
  "zIndex": 1,
3201
3164
  }
3202
3165
  }
3166
+ themeHasPrefix={false}
3203
3167
  themeVariant="text"
3204
3168
  >
3205
- <Text
3206
- allowFontScaling={false}
3169
+ <View
3207
3170
  style={
3208
3171
  [
3209
3172
  {
3173
+ "alignContent": "center",
3174
+ "alignItems": "center",
3210
3175
  "color": "#001f23",
3211
- "fontFamily": "BeVietnamPro-Regular",
3212
- "fontSize": 16,
3213
- "letterSpacing": 0.48,
3214
- "lineHeight": 24,
3176
+ "flexDirection": "row",
3177
+ "marginTop": -2,
3178
+ "textAlignVertical": "center",
3179
+ },
3180
+ {
3181
+ "backgroundColor": "#ffffff",
3215
3182
  },
3216
- [
3217
- {
3218
- "alignContent": "center",
3219
- "alignItems": "center",
3220
- "color": "#001f23",
3221
- "left": 0,
3222
- "marginTop": -2,
3223
- "position": "absolute",
3224
- "textAlignVertical": "center",
3225
- "top": "50%",
3226
- "zIndex": 1,
3227
- },
3228
- {
3229
- "backgroundColor": "#ffffff",
3230
- },
3231
- ],
3232
3183
  ]
3233
3184
  }
3234
3185
  testID="input-label"
3235
- themeIntent="body"
3236
3186
  themeState="filled"
3237
- themeTypeface="neutral"
3238
- themeVariant="regular"
3239
3187
  >
3240
3188
  <Text
3241
3189
  allowFontScaling={false}
3190
+ numberOfLines={1}
3242
3191
  style={
3243
3192
  [
3244
3193
  {
@@ -3257,7 +3206,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
3257
3206
  >
3258
3207
  Allow notifications
3259
3208
  </Text>
3260
- </Text>
3209
+ </View>
3261
3210
  </View>
3262
3211
  <View
3263
3212
  style={
@@ -3488,64 +3437,47 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3488
3437
  {
3489
3438
  "alignItems": "center",
3490
3439
  "flexDirection": "row",
3491
- "justifyContent": "center",
3492
- "left": 0,
3440
+ "left": 24,
3493
3441
  "position": "absolute",
3494
- "right": 0,
3442
+ "right": 16,
3495
3443
  "top": -10.666666666666666,
3496
3444
  "transform": [
3497
3445
  {
3498
3446
  "translateY": 0,
3499
3447
  },
3500
- {
3501
- "translateX": 16,
3502
- },
3503
3448
  {
3504
3449
  "scale": 1,
3505
3450
  },
3506
3451
  ],
3452
+ "transformOrigin": "left top",
3507
3453
  "zIndex": 1,
3508
3454
  }
3509
3455
  }
3456
+ themeHasPrefix={false}
3510
3457
  themeVariant="text"
3511
3458
  >
3512
- <Text
3513
- allowFontScaling={false}
3459
+ <View
3514
3460
  style={
3515
3461
  [
3516
3462
  {
3463
+ "alignContent": "center",
3464
+ "alignItems": "center",
3517
3465
  "color": "#001f23",
3518
- "fontFamily": "BeVietnamPro-Regular",
3519
- "fontSize": 16,
3520
- "letterSpacing": 0.48,
3521
- "lineHeight": 24,
3466
+ "flexDirection": "row",
3467
+ "marginTop": -2,
3468
+ "textAlignVertical": "center",
3469
+ },
3470
+ {
3471
+ "backgroundColor": "#ffffff",
3522
3472
  },
3523
- [
3524
- {
3525
- "alignContent": "center",
3526
- "alignItems": "center",
3527
- "color": "#001f23",
3528
- "left": 0,
3529
- "marginTop": -2,
3530
- "position": "absolute",
3531
- "textAlignVertical": "center",
3532
- "top": "50%",
3533
- "zIndex": 1,
3534
- },
3535
- {
3536
- "backgroundColor": "#ffffff",
3537
- },
3538
- ],
3539
3473
  ]
3540
3474
  }
3541
3475
  testID="input-label"
3542
- themeIntent="body"
3543
3476
  themeState="filled"
3544
- themeTypeface="neutral"
3545
- themeVariant="regular"
3546
3477
  >
3547
3478
  <Text
3548
3479
  allowFontScaling={false}
3480
+ numberOfLines={1}
3549
3481
  style={
3550
3482
  [
3551
3483
  {
@@ -3564,7 +3496,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
3564
3496
  >
3565
3497
  Allow notifications
3566
3498
  </Text>
3567
- </Text>
3499
+ </View>
3568
3500
  </View>
3569
3501
  <View
3570
3502
  style={
@@ -5090,64 +5022,47 @@ exports[`rendering renders correctly when input is loading 1`] = `
5090
5022
  {
5091
5023
  "alignItems": "center",
5092
5024
  "flexDirection": "row",
5093
- "justifyContent": "center",
5094
- "left": 0,
5025
+ "left": 24,
5095
5026
  "position": "absolute",
5096
- "right": 0,
5027
+ "right": 16,
5097
5028
  "top": -10.666666666666666,
5098
5029
  "transform": [
5099
5030
  {
5100
5031
  "translateY": 0,
5101
5032
  },
5102
- {
5103
- "translateX": 16,
5104
- },
5105
5033
  {
5106
5034
  "scale": 1,
5107
5035
  },
5108
5036
  ],
5037
+ "transformOrigin": "left top",
5109
5038
  "zIndex": 1,
5110
5039
  }
5111
5040
  }
5041
+ themeHasPrefix={false}
5112
5042
  themeVariant="text"
5113
5043
  >
5114
- <Text
5115
- allowFontScaling={false}
5044
+ <View
5116
5045
  style={
5117
5046
  [
5118
5047
  {
5119
- "color": "#001f23",
5120
- "fontFamily": "BeVietnamPro-Regular",
5121
- "fontSize": 16,
5122
- "letterSpacing": 0.48,
5123
- "lineHeight": 24,
5048
+ "alignContent": "center",
5049
+ "alignItems": "center",
5050
+ "color": "#808f91",
5051
+ "flexDirection": "row",
5052
+ "marginTop": -2,
5053
+ "textAlignVertical": "center",
5054
+ },
5055
+ {
5056
+ "backgroundColor": "#ffffff",
5124
5057
  },
5125
- [
5126
- {
5127
- "alignContent": "center",
5128
- "alignItems": "center",
5129
- "color": "#808f91",
5130
- "left": 0,
5131
- "marginTop": -2,
5132
- "position": "absolute",
5133
- "textAlignVertical": "center",
5134
- "top": "50%",
5135
- "zIndex": 1,
5136
- },
5137
- {
5138
- "backgroundColor": "#ffffff",
5139
- },
5140
- ],
5141
5058
  ]
5142
5059
  }
5143
5060
  testID="input-label"
5144
- themeIntent="body"
5145
5061
  themeState="readonly"
5146
- themeTypeface="neutral"
5147
- themeVariant="regular"
5148
5062
  >
5149
5063
  <Text
5150
5064
  allowFontScaling={false}
5065
+ numberOfLines={1}
5151
5066
  style={
5152
5067
  [
5153
5068
  {
@@ -5166,7 +5081,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
5166
5081
  >
5167
5082
  Allow notifications
5168
5083
  </Text>
5169
- </Text>
5084
+ </View>
5170
5085
  </View>
5171
5086
  <View
5172
5087
  style={
@@ -5410,64 +5325,47 @@ exports[`rendering renders correctly when receives sections 1`] = `
5410
5325
  {
5411
5326
  "alignItems": "center",
5412
5327
  "flexDirection": "row",
5413
- "justifyContent": "center",
5414
- "left": 0,
5328
+ "left": 24,
5415
5329
  "position": "absolute",
5416
- "right": 0,
5330
+ "right": 16,
5417
5331
  "top": -10.666666666666666,
5418
5332
  "transform": [
5419
5333
  {
5420
5334
  "translateY": 0,
5421
5335
  },
5422
- {
5423
- "translateX": 16,
5424
- },
5425
5336
  {
5426
5337
  "scale": 1,
5427
5338
  },
5428
5339
  ],
5340
+ "transformOrigin": "left top",
5429
5341
  "zIndex": 1,
5430
5342
  }
5431
5343
  }
5344
+ themeHasPrefix={false}
5432
5345
  themeVariant="text"
5433
5346
  >
5434
- <Text
5435
- allowFontScaling={false}
5347
+ <View
5436
5348
  style={
5437
5349
  [
5438
5350
  {
5351
+ "alignContent": "center",
5352
+ "alignItems": "center",
5439
5353
  "color": "#001f23",
5440
- "fontFamily": "BeVietnamPro-Regular",
5441
- "fontSize": 16,
5442
- "letterSpacing": 0.48,
5443
- "lineHeight": 24,
5354
+ "flexDirection": "row",
5355
+ "marginTop": -2,
5356
+ "textAlignVertical": "center",
5357
+ },
5358
+ {
5359
+ "backgroundColor": "#ffffff",
5444
5360
  },
5445
- [
5446
- {
5447
- "alignContent": "center",
5448
- "alignItems": "center",
5449
- "color": "#001f23",
5450
- "left": 0,
5451
- "marginTop": -2,
5452
- "position": "absolute",
5453
- "textAlignVertical": "center",
5454
- "top": "50%",
5455
- "zIndex": 1,
5456
- },
5457
- {
5458
- "backgroundColor": "#ffffff",
5459
- },
5460
- ],
5461
5361
  ]
5462
5362
  }
5463
5363
  testID="input-label"
5464
- themeIntent="body"
5465
5364
  themeState="filled"
5466
- themeTypeface="neutral"
5467
- themeVariant="regular"
5468
5365
  >
5469
5366
  <Text
5470
5367
  allowFontScaling={false}
5368
+ numberOfLines={1}
5471
5369
  style={
5472
5370
  [
5473
5371
  {
@@ -5486,7 +5384,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
5486
5384
  >
5487
5385
  Allow notifications
5488
5386
  </Text>
5489
- </Text>
5387
+ </View>
5490
5388
  </View>
5491
5389
  <View
5492
5390
  style={
package/src/components/TextInput/StyledTextInput.tsx CHANGED
@@ -12,18 +12,20 @@ const StyledContainer = styled(View)(({ theme }) => ({
12
12
 
13
13
  const StyledLabelContainerInsideTextInput = styled(Animated.View)<{
14
14
  themeVariant: Variant;
15
- }>(({ themeVariant, theme }) => ({
15
+ themeHasPrefix: boolean;
16
+ }>(({ themeVariant, themeHasPrefix, theme }) => ({
16
17
  flexDirection: 'row',
17
18
  alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
18
- justifyContent: 'center',
19
19
  position: 'absolute',
20
20
  zIndex: 1,
21
- left: 0,
22
- right: 0,
21
+ left: themeHasPrefix
22
+ ? theme.space.xxlarge
23
+ : theme.space.medium + theme.space.small,
24
+ right: theme.space.medium,
23
25
  top: -theme.__hd__.textInput.space.labelTop,
24
26
  }));
25
27
 
26
- const StyledLabelInsideTextInput = styled(Typography.Body)<{
28
+ const StyledLabelInsideTextInput = styled(View)<{
27
29
  themeState: State;
28
30
  }>(({ theme, themeState }) => ({
29
31
  textAlignVertical: 'center',
@@ -31,10 +33,7 @@ const StyledLabelInsideTextInput = styled(Typography.Body)<{
31
33
  alignItems: 'center',
32
34
  color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
33
35
  marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
34
- position: 'absolute',
35
- zIndex: 1,
36
- left: 0,
37
- top: '50%',
36
+ flexDirection: 'row',
38
37
  }));
39
38
 
40
39
  const StyledAsteriskLabelInsideTextInput = styled(Typography.Body)<{