@hero-design/rn 7.22.0 → 7.22.2

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 (42) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +62 -62
  3. package/lib/index.js +61 -61
  4. package/package.json +4 -4
  5. package/src/components/BottomSheet/StyledBottomSheet.tsx +10 -0
  6. package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap +326 -292
  7. package/src/components/BottomSheet/index.tsx +46 -26
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +4 -18
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +180 -177
  10. package/src/components/List/StyledBasicListItem.tsx +1 -0
  11. package/src/components/List/__tests__/BasicListItem.spec.tsx +37 -13
  12. package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap +162 -1
  13. package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap +6 -2
  14. package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap +2 -2
  15. package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap +3 -1
  16. package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap +4 -1
  17. package/src/components/RichTextEditor/RichTextEditor.tsx +1 -3
  18. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -36
  19. package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  20. package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +17 -5
  21. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +4712 -4669
  22. package/src/components/Select/SingleSelect/__tests__/__snapshots__/Option.spec.tsx.snap +2 -1
  23. package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap +16 -4
  24. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +4285 -4242
  25. package/src/components/TextInput/StyledTextInput.tsx +11 -16
  26. package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx +3 -3
  27. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +18 -36
  28. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +55 -237
  29. package/src/components/TextInput/index.tsx +27 -27
  30. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +4 -18
  31. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +180 -177
  32. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +4 -2
  33. package/src/theme/components/list.ts +5 -2
  34. package/src/theme/global/colors/swag.ts +1 -0
  35. package/src/theme/global/colors/types.ts +1 -0
  36. package/types/components/BottomSheet/StyledBottomSheet.d.ts +8 -2
  37. package/types/components/BottomSheet/index.d.ts +6 -1
  38. package/types/components/TextInput/StyledTextInput.d.ts +3 -9
  39. package/types/components/TextInput/index.d.ts +4 -4
  40. package/types/theme/components/list.d.ts +1 -0
  41. package/types/theme/global/colors/types.d.ts +1 -0
  42. package/types/theme/global/index.d.ts +1 -0
package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -49,146 +49,146 @@ exports[`BottomSheet renders correctly with close state 1`] = `
49
49
  }
50
50
  }
51
51
  />
52
- <RCTSafeAreaView
53
- collapsable={false}
54
- emulateUnlessSupported={true}
55
- nativeID="animatedComponent"
52
+ <View
56
53
  onLayout={[Function]}
57
54
  style={
58
- Object {
59
- "backgroundColor": "#ffffff",
60
- "borderTopLeftRadius": 16,
61
- "borderTopRightRadius": 16,
62
- "elevation": 10,
63
- "maxHeight": "94%",
64
- "shadowColor": "#001f23",
65
- "shadowOffset": Object {
66
- "height": 3,
67
- "width": 0,
68
- },
69
- "shadowOpacity": 0.27,
70
- "shadowRadius": 4.65,
71
- "transform": Array [
72
- Object {
73
- "scaleY": 0,
74
- },
55
+ Array [
56
+ Array [
75
57
  Object {
76
- "translateY": 0,
58
+ "flex": 1,
59
+ "flexDirection": "column-reverse",
77
60
  },
61
+ undefined,
78
62
  ],
79
- "width": "100%",
80
- }
63
+ Object {
64
+ "paddingBottom": 0,
65
+ },
66
+ ]
81
67
  }
82
68
  >
83
- <View
69
+ <RCTSafeAreaView
70
+ collapsable={false}
71
+ emulateUnlessSupported={true}
72
+ nativeID="animatedComponent"
84
73
  style={
85
- Array [
86
- Object {
87
- "flexDirection": "row",
88
- "paddingHorizontal": 16,
89
- "paddingVertical": 8,
74
+ Object {
75
+ "backgroundColor": "#ffffff",
76
+ "borderTopLeftRadius": 16,
77
+ "borderTopRightRadius": 16,
78
+ "elevation": 10,
79
+ "maxHeight": "94%",
80
+ "shadowColor": "#001f23",
81
+ "shadowOffset": Object {
82
+ "height": 3,
83
+ "width": 0,
90
84
  },
91
- undefined,
92
- ]
85
+ "shadowOpacity": 0.27,
86
+ "shadowRadius": 4.65,
87
+ "transform": Array [
88
+ Object {
89
+ "scaleY": 1,
90
+ },
91
+ Object {
92
+ "translateY": 0,
93
+ },
94
+ ],
95
+ "width": "100%",
96
+ }
93
97
  }
94
98
  >
95
99
  <View
96
100
  style={
97
101
  Array [
98
102
  Object {
99
- "flex": 1,
100
- "justifyContent": "center",
103
+ "flexDirection": "row",
104
+ "paddingHorizontal": 16,
105
+ "paddingVertical": 8,
101
106
  },
102
107
  undefined,
103
108
  ]
104
109
  }
105
110
  >
106
- <Text
111
+ <View
107
112
  style={
108
113
  Array [
109
114
  Object {
110
- "color": "#001f23",
111
- "fontFamily": "BeVietnamPro-SemiBold",
112
- "fontSize": 16,
113
- "letterSpacing": 0.48,
114
- "lineHeight": 24,
115
+ "flex": 1,
116
+ "justifyContent": "center",
115
117
  },
116
118
  undefined,
117
119
  ]
118
120
  }
119
- themeFontSize="large"
120
- themeFontWeight="semi-bold"
121
- themeIntent="body"
122
- >
123
- Title
124
- </Text>
125
- </View>
126
- <View
127
- style={
128
- Array [
129
- Object {
130
- "alignItems": "center",
131
- "height": 48,
132
- "justifyContent": "center",
133
- "marginLeft": 12,
134
- "width": 48,
135
- },
136
- undefined,
137
- ]
138
- }
139
- >
140
- <View
141
- accessible={true}
142
- collapsable={false}
143
- focusable={true}
144
- nativeID="animatedComponent"
145
- onClick={[Function]}
146
- onResponderGrant={[Function]}
147
- onResponderMove={[Function]}
148
- onResponderRelease={[Function]}
149
- onResponderTerminate={[Function]}
150
- onResponderTerminationRequest={[Function]}
151
- onStartShouldSetResponder={[Function]}
152
- style={
153
- Object {
154
- "opacity": 1,
155
- }
156
- }
157
- testID="bottom-sheet-close-icon"
158
121
  >
159
- <HeroIcon
160
- name="cancel"
122
+ <Text
161
123
  style={
162
124
  Array [
163
125
  Object {
164
126
  "color": "#001f23",
165
- "fontSize": 20,
127
+ "fontFamily": "BeVietnamPro-SemiBold",
128
+ "fontSize": 16,
129
+ "letterSpacing": 0.48,
130
+ "lineHeight": 24,
166
131
  },
167
132
  undefined,
168
133
  ]
169
134
  }
170
- themeIntent="text"
171
- themeSize="small"
172
- />
135
+ themeFontSize="large"
136
+ themeFontWeight="semi-bold"
137
+ themeIntent="body"
138
+ >
139
+ Title
140
+ </Text>
141
+ </View>
142
+ <View
143
+ style={
144
+ Array [
145
+ Object {
146
+ "alignItems": "center",
147
+ "height": 48,
148
+ "justifyContent": "center",
149
+ "marginLeft": 12,
150
+ "width": 48,
151
+ },
152
+ undefined,
153
+ ]
154
+ }
155
+ >
156
+ <View
157
+ accessible={true}
158
+ collapsable={false}
159
+ focusable={true}
160
+ nativeID="animatedComponent"
161
+ onClick={[Function]}
162
+ onResponderGrant={[Function]}
163
+ onResponderMove={[Function]}
164
+ onResponderRelease={[Function]}
165
+ onResponderTerminate={[Function]}
166
+ onResponderTerminationRequest={[Function]}
167
+ onStartShouldSetResponder={[Function]}
168
+ style={
169
+ Object {
170
+ "opacity": 1,
171
+ }
172
+ }
173
+ testID="bottom-sheet-close-icon"
174
+ >
175
+ <HeroIcon
176
+ name="cancel"
177
+ style={
178
+ Array [
179
+ Object {
180
+ "color": "#001f23",
181
+ "fontSize": 20,
182
+ },
183
+ undefined,
184
+ ]
185
+ }
186
+ themeIntent="text"
187
+ themeSize="small"
188
+ />
189
+ </View>
173
190
  </View>
174
191
  </View>
175
- </View>
176
- <View
177
- style={
178
- Array [
179
- Object {
180
- "borderBottomColor": "#e8e9ea",
181
- "borderBottomWidth": 1,
182
- "maxWidth": "100%",
183
- },
184
- undefined,
185
- ]
186
- }
187
- />
188
- <Text>
189
- Content
190
- </Text>
191
- <View>
192
192
  <View
193
193
  style={
194
194
  Array [
@@ -201,66 +201,83 @@ exports[`BottomSheet renders correctly with close state 1`] = `
201
201
  ]
202
202
  }
203
203
  />
204
- <View
205
- style={
206
- Array [
207
- Object {
208
- "alignItems": "center",
209
- "flexDirection": "row",
210
- "justifyContent": "flex-end",
211
- "minHeight": 64,
212
- "paddingHorizontal": 12,
213
- "paddingVertical": 8,
214
- },
215
- undefined,
216
- ]
217
- }
218
- >
204
+ <Text>
205
+ Content
206
+ </Text>
207
+ <View>
219
208
  <View
220
- accessibilityRole="button"
221
- accessible={true}
222
- collapsable={false}
223
- focusable={false}
224
- nativeID="animatedComponent"
225
- onClick={[Function]}
226
- onResponderGrant={[Function]}
227
- onResponderMove={[Function]}
228
- onResponderRelease={[Function]}
229
- onResponderTerminate={[Function]}
230
- onResponderTerminationRequest={[Function]}
231
- onStartShouldSetResponder={[Function]}
232
209
  style={
233
- Object {
234
- "opacity": 1,
235
- }
210
+ Array [
211
+ Object {
212
+ "borderBottomColor": "#e8e9ea",
213
+ "borderBottomWidth": 1,
214
+ "maxWidth": "100%",
215
+ },
216
+ undefined,
217
+ ]
218
+ }
219
+ />
220
+ <View
221
+ style={
222
+ Array [
223
+ Object {
224
+ "alignItems": "center",
225
+ "flexDirection": "row",
226
+ "justifyContent": "flex-end",
227
+ "minHeight": 64,
228
+ "paddingHorizontal": 12,
229
+ "paddingVertical": 8,
230
+ },
231
+ undefined,
232
+ ]
236
233
  }
237
234
  >
238
235
  <View
236
+ accessibilityRole="button"
237
+ accessible={true}
238
+ collapsable={false}
239
+ focusable={false}
240
+ nativeID="animatedComponent"
241
+ onClick={[Function]}
242
+ onResponderGrant={[Function]}
243
+ onResponderMove={[Function]}
244
+ onResponderRelease={[Function]}
245
+ onResponderTerminate={[Function]}
246
+ onResponderTerminationRequest={[Function]}
247
+ onStartShouldSetResponder={[Function]}
239
248
  style={
240
- Array [
241
- Object {},
242
- ]
249
+ Object {
250
+ "opacity": 1,
251
+ }
243
252
  }
244
253
  >
245
- <Text
254
+ <View
246
255
  style={
247
256
  Array [
248
- Object {
249
- "color": "#007AFF",
250
- "fontSize": 18,
251
- "margin": 8,
252
- "textAlign": "center",
253
- },
257
+ Object {},
254
258
  ]
255
259
  }
256
260
  >
257
- Footer CTA
258
- </Text>
261
+ <Text
262
+ style={
263
+ Array [
264
+ Object {
265
+ "color": "#007AFF",
266
+ "fontSize": 18,
267
+ "margin": 8,
268
+ "textAlign": "center",
269
+ },
270
+ ]
271
+ }
272
+ >
273
+ Footer CTA
274
+ </Text>
275
+ </View>
259
276
  </View>
260
277
  </View>
261
278
  </View>
262
- </View>
263
- </RCTSafeAreaView>
279
+ </RCTSafeAreaView>
280
+ </View>
264
281
  </View>
265
282
  </Modal>
266
283
  `;
@@ -314,146 +331,146 @@ exports[`BottomSheet renders correctly with open state 1`] = `
314
331
  }
315
332
  }
316
333
  />
317
- <RCTSafeAreaView
318
- collapsable={false}
319
- emulateUnlessSupported={true}
320
- nativeID="animatedComponent"
334
+ <View
321
335
  onLayout={[Function]}
322
336
  style={
323
- Object {
324
- "backgroundColor": "#ffffff",
325
- "borderTopLeftRadius": 16,
326
- "borderTopRightRadius": 16,
327
- "elevation": 10,
328
- "maxHeight": "94%",
329
- "shadowColor": "#001f23",
330
- "shadowOffset": Object {
331
- "height": 3,
332
- "width": 0,
333
- },
334
- "shadowOpacity": 0.27,
335
- "shadowRadius": 4.65,
336
- "transform": Array [
337
- Object {
338
- "scaleY": 0,
339
- },
337
+ Array [
338
+ Array [
340
339
  Object {
341
- "translateY": 0,
340
+ "flex": 1,
341
+ "flexDirection": "column-reverse",
342
342
  },
343
+ undefined,
343
344
  ],
344
- "width": "100%",
345
- }
345
+ Object {
346
+ "paddingBottom": 0,
347
+ },
348
+ ]
346
349
  }
347
350
  >
348
- <View
351
+ <RCTSafeAreaView
352
+ collapsable={false}
353
+ emulateUnlessSupported={true}
354
+ nativeID="animatedComponent"
349
355
  style={
350
- Array [
351
- Object {
352
- "flexDirection": "row",
353
- "paddingHorizontal": 16,
354
- "paddingVertical": 8,
356
+ Object {
357
+ "backgroundColor": "#ffffff",
358
+ "borderTopLeftRadius": 16,
359
+ "borderTopRightRadius": 16,
360
+ "elevation": 10,
361
+ "maxHeight": "94%",
362
+ "shadowColor": "#001f23",
363
+ "shadowOffset": Object {
364
+ "height": 3,
365
+ "width": 0,
355
366
  },
356
- undefined,
357
- ]
367
+ "shadowOpacity": 0.27,
368
+ "shadowRadius": 4.65,
369
+ "transform": Array [
370
+ Object {
371
+ "scaleY": 1,
372
+ },
373
+ Object {
374
+ "translateY": 1334,
375
+ },
376
+ ],
377
+ "width": "100%",
378
+ }
358
379
  }
359
380
  >
360
381
  <View
361
382
  style={
362
383
  Array [
363
384
  Object {
364
- "flex": 1,
365
- "justifyContent": "center",
385
+ "flexDirection": "row",
386
+ "paddingHorizontal": 16,
387
+ "paddingVertical": 8,
366
388
  },
367
389
  undefined,
368
390
  ]
369
391
  }
370
392
  >
371
- <Text
393
+ <View
372
394
  style={
373
395
  Array [
374
396
  Object {
375
- "color": "#001f23",
376
- "fontFamily": "BeVietnamPro-SemiBold",
377
- "fontSize": 16,
378
- "letterSpacing": 0.48,
379
- "lineHeight": 24,
397
+ "flex": 1,
398
+ "justifyContent": "center",
380
399
  },
381
400
  undefined,
382
401
  ]
383
402
  }
384
- themeFontSize="large"
385
- themeFontWeight="semi-bold"
386
- themeIntent="body"
387
- >
388
- Title
389
- </Text>
390
- </View>
391
- <View
392
- style={
393
- Array [
394
- Object {
395
- "alignItems": "center",
396
- "height": 48,
397
- "justifyContent": "center",
398
- "marginLeft": 12,
399
- "width": 48,
400
- },
401
- undefined,
402
- ]
403
- }
404
- >
405
- <View
406
- accessible={true}
407
- collapsable={false}
408
- focusable={true}
409
- nativeID="animatedComponent"
410
- onClick={[Function]}
411
- onResponderGrant={[Function]}
412
- onResponderMove={[Function]}
413
- onResponderRelease={[Function]}
414
- onResponderTerminate={[Function]}
415
- onResponderTerminationRequest={[Function]}
416
- onStartShouldSetResponder={[Function]}
417
- style={
418
- Object {
419
- "opacity": 1,
420
- }
421
- }
422
- testID="bottom-sheet-close-icon"
423
403
  >
424
- <HeroIcon
425
- name="cancel"
404
+ <Text
426
405
  style={
427
406
  Array [
428
407
  Object {
429
408
  "color": "#001f23",
430
- "fontSize": 20,
409
+ "fontFamily": "BeVietnamPro-SemiBold",
410
+ "fontSize": 16,
411
+ "letterSpacing": 0.48,
412
+ "lineHeight": 24,
431
413
  },
432
414
  undefined,
433
415
  ]
434
416
  }
435
- themeIntent="text"
436
- themeSize="small"
437
- />
417
+ themeFontSize="large"
418
+ themeFontWeight="semi-bold"
419
+ themeIntent="body"
420
+ >
421
+ Title
422
+ </Text>
423
+ </View>
424
+ <View
425
+ style={
426
+ Array [
427
+ Object {
428
+ "alignItems": "center",
429
+ "height": 48,
430
+ "justifyContent": "center",
431
+ "marginLeft": 12,
432
+ "width": 48,
433
+ },
434
+ undefined,
435
+ ]
436
+ }
437
+ >
438
+ <View
439
+ accessible={true}
440
+ collapsable={false}
441
+ focusable={true}
442
+ nativeID="animatedComponent"
443
+ onClick={[Function]}
444
+ onResponderGrant={[Function]}
445
+ onResponderMove={[Function]}
446
+ onResponderRelease={[Function]}
447
+ onResponderTerminate={[Function]}
448
+ onResponderTerminationRequest={[Function]}
449
+ onStartShouldSetResponder={[Function]}
450
+ style={
451
+ Object {
452
+ "opacity": 1,
453
+ }
454
+ }
455
+ testID="bottom-sheet-close-icon"
456
+ >
457
+ <HeroIcon
458
+ name="cancel"
459
+ style={
460
+ Array [
461
+ Object {
462
+ "color": "#001f23",
463
+ "fontSize": 20,
464
+ },
465
+ undefined,
466
+ ]
467
+ }
468
+ themeIntent="text"
469
+ themeSize="small"
470
+ />
471
+ </View>
438
472
  </View>
439
473
  </View>
440
- </View>
441
- <View
442
- style={
443
- Array [
444
- Object {
445
- "borderBottomColor": "#e8e9ea",
446
- "borderBottomWidth": 1,
447
- "maxWidth": "100%",
448
- },
449
- undefined,
450
- ]
451
- }
452
- />
453
- <Text>
454
- Content
455
- </Text>
456
- <View>
457
474
  <View
458
475
  style={
459
476
  Array [
@@ -466,66 +483,83 @@ exports[`BottomSheet renders correctly with open state 1`] = `
466
483
  ]
467
484
  }
468
485
  />
469
- <View
470
- style={
471
- Array [
472
- Object {
473
- "alignItems": "center",
474
- "flexDirection": "row",
475
- "justifyContent": "flex-end",
476
- "minHeight": 64,
477
- "paddingHorizontal": 12,
478
- "paddingVertical": 8,
479
- },
480
- undefined,
481
- ]
482
- }
483
- >
486
+ <Text>
487
+ Content
488
+ </Text>
489
+ <View>
484
490
  <View
485
- accessibilityRole="button"
486
- accessible={true}
487
- collapsable={false}
488
- focusable={false}
489
- nativeID="animatedComponent"
490
- onClick={[Function]}
491
- onResponderGrant={[Function]}
492
- onResponderMove={[Function]}
493
- onResponderRelease={[Function]}
494
- onResponderTerminate={[Function]}
495
- onResponderTerminationRequest={[Function]}
496
- onStartShouldSetResponder={[Function]}
497
491
  style={
498
- Object {
499
- "opacity": 1,
500
- }
492
+ Array [
493
+ Object {
494
+ "borderBottomColor": "#e8e9ea",
495
+ "borderBottomWidth": 1,
496
+ "maxWidth": "100%",
497
+ },
498
+ undefined,
499
+ ]
500
+ }
501
+ />
502
+ <View
503
+ style={
504
+ Array [
505
+ Object {
506
+ "alignItems": "center",
507
+ "flexDirection": "row",
508
+ "justifyContent": "flex-end",
509
+ "minHeight": 64,
510
+ "paddingHorizontal": 12,
511
+ "paddingVertical": 8,
512
+ },
513
+ undefined,
514
+ ]
501
515
  }
502
516
  >
503
517
  <View
518
+ accessibilityRole="button"
519
+ accessible={true}
520
+ collapsable={false}
521
+ focusable={false}
522
+ nativeID="animatedComponent"
523
+ onClick={[Function]}
524
+ onResponderGrant={[Function]}
525
+ onResponderMove={[Function]}
526
+ onResponderRelease={[Function]}
527
+ onResponderTerminate={[Function]}
528
+ onResponderTerminationRequest={[Function]}
529
+ onStartShouldSetResponder={[Function]}
504
530
  style={
505
- Array [
506
- Object {},
507
- ]
531
+ Object {
532
+ "opacity": 1,
533
+ }
508
534
  }
509
535
  >
510
- <Text
536
+ <View
511
537
  style={
512
538
  Array [
513
- Object {
514
- "color": "#007AFF",
515
- "fontSize": 18,
516
- "margin": 8,
517
- "textAlign": "center",
518
- },
539
+ Object {},
519
540
  ]
520
541
  }
521
542
  >
522
- Footer CTA
523
- </Text>
543
+ <Text
544
+ style={
545
+ Array [
546
+ Object {
547
+ "color": "#007AFF",
548
+ "fontSize": 18,
549
+ "margin": 8,
550
+ "textAlign": "center",
551
+ },
552
+ ]
553
+ }
554
+ >
555
+ Footer CTA
556
+ </Text>
557
+ </View>
524
558
  </View>
525
559
  </View>
526
560
  </View>
527
- </View>
528
- </RCTSafeAreaView>
561
+ </RCTSafeAreaView>
562
+ </View>
529
563
  </View>
530
564
  </Modal>
531
565
  `;