@hero-design/rn 7.22.0 → 7.22.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 (13) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +20 -16
  3. package/lib/index.js +19 -15
  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__/DatePickerIOS.spec.tsx.snap +176 -159
  9. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +4691 -4606
  10. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +4245 -4160
  11. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +176 -159
  12. package/types/components/BottomSheet/StyledBottomSheet.d.ts +8 -2
  13. package/types/components/BottomSheet/index.d.ts +6 -1
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -277,166 +277,146 @@ exports[`TimePickerIOS renders correctly 1`] = `
277
277
  }
278
278
  }
279
279
  />
280
- <RCTSafeAreaView
281
- collapsable={false}
282
- emulateUnlessSupported={true}
283
- nativeID="animatedComponent"
280
+ <View
284
281
  onLayout={[Function]}
285
282
  style={
286
- Object {
287
- "backgroundColor": "#ffffff",
288
- "borderTopLeftRadius": 16,
289
- "borderTopRightRadius": 16,
290
- "elevation": 10,
291
- "maxHeight": "94%",
292
- "shadowColor": "#001f23",
293
- "shadowOffset": Object {
294
- "height": 3,
295
- "width": 0,
296
- },
297
- "shadowOpacity": 0.27,
298
- "shadowRadius": 4.65,
299
- "transform": Array [
300
- Object {
301
- "scaleY": 0,
302
- },
283
+ Array [
284
+ Array [
303
285
  Object {
304
- "translateY": 0,
286
+ "flex": 1,
287
+ "flexDirection": "column-reverse",
305
288
  },
289
+ undefined,
306
290
  ],
307
- "width": "100%",
308
- }
291
+ Object {
292
+ "paddingBottom": 0,
293
+ },
294
+ ]
309
295
  }
310
296
  >
311
- <View
297
+ <RCTSafeAreaView
298
+ collapsable={false}
299
+ emulateUnlessSupported={true}
300
+ nativeID="animatedComponent"
312
301
  style={
313
- Array [
314
- Object {
315
- "flexDirection": "row",
316
- "paddingHorizontal": 16,
317
- "paddingVertical": 8,
302
+ Object {
303
+ "backgroundColor": "#ffffff",
304
+ "borderTopLeftRadius": 16,
305
+ "borderTopRightRadius": 16,
306
+ "elevation": 10,
307
+ "maxHeight": "94%",
308
+ "shadowColor": "#001f23",
309
+ "shadowOffset": Object {
310
+ "height": 3,
311
+ "width": 0,
318
312
  },
319
- undefined,
320
- ]
313
+ "shadowOpacity": 0.27,
314
+ "shadowRadius": 4.65,
315
+ "transform": Array [
316
+ Object {
317
+ "scaleY": 1,
318
+ },
319
+ Object {
320
+ "translateY": 0,
321
+ },
322
+ ],
323
+ "width": "100%",
324
+ }
321
325
  }
322
326
  >
323
327
  <View
324
328
  style={
325
329
  Array [
326
330
  Object {
327
- "flex": 1,
328
- "justifyContent": "center",
331
+ "flexDirection": "row",
332
+ "paddingHorizontal": 16,
333
+ "paddingVertical": 8,
329
334
  },
330
335
  undefined,
331
336
  ]
332
337
  }
333
338
  >
334
- <Text
339
+ <View
335
340
  style={
336
341
  Array [
337
342
  Object {
338
- "color": "#001f23",
339
- "fontFamily": "BeVietnamPro-SemiBold",
340
- "fontSize": 16,
341
- "letterSpacing": 0.48,
342
- "lineHeight": 24,
343
+ "flex": 1,
344
+ "justifyContent": "center",
343
345
  },
344
346
  undefined,
345
347
  ]
346
348
  }
347
- themeFontSize="large"
348
- themeFontWeight="semi-bold"
349
- themeIntent="body"
350
- >
351
- Break time
352
- </Text>
353
- </View>
354
- <View
355
- style={
356
- Array [
357
- Object {
358
- "alignItems": "center",
359
- "height": 48,
360
- "justifyContent": "center",
361
- "marginLeft": 12,
362
- "width": 48,
363
- },
364
- undefined,
365
- ]
366
- }
367
- >
368
- <View
369
- accessible={true}
370
- collapsable={false}
371
- focusable={true}
372
- nativeID="animatedComponent"
373
- onClick={[Function]}
374
- onResponderGrant={[Function]}
375
- onResponderMove={[Function]}
376
- onResponderRelease={[Function]}
377
- onResponderTerminate={[Function]}
378
- onResponderTerminationRequest={[Function]}
379
- onStartShouldSetResponder={[Function]}
380
- style={
381
- Object {
382
- "opacity": 1,
383
- }
384
- }
385
- testID="bottom-sheet-close-icon"
386
349
  >
387
- <HeroIcon
388
- name="cancel"
350
+ <Text
389
351
  style={
390
352
  Array [
391
353
  Object {
392
354
  "color": "#001f23",
393
- "fontSize": 20,
355
+ "fontFamily": "BeVietnamPro-SemiBold",
356
+ "fontSize": 16,
357
+ "letterSpacing": 0.48,
358
+ "lineHeight": 24,
394
359
  },
395
360
  undefined,
396
361
  ]
397
362
  }
398
- themeIntent="text"
399
- themeSize="small"
400
- />
363
+ themeFontSize="large"
364
+ themeFontWeight="semi-bold"
365
+ themeIntent="body"
366
+ >
367
+ Break time
368
+ </Text>
401
369
  </View>
402
- </View>
403
- </View>
404
- <View
405
- style={
406
- Array [
407
- Object {
408
- "borderBottomColor": "#e8e9ea",
409
- "borderBottomWidth": 1,
410
- "maxWidth": "100%",
411
- },
412
- undefined,
413
- ]
414
- }
415
- />
416
- <View
417
- style={
418
- Array [
419
- Object {
420
- "height": 176,
421
- },
422
- undefined,
423
- ]
424
- }
425
- >
426
- <Picker
427
- display="spinner"
428
- mode="time"
429
- onChange={[Function]}
430
- style={
431
- Object {
432
- "flex": 1,
370
+ <View
371
+ style={
372
+ Array [
373
+ Object {
374
+ "alignItems": "center",
375
+ "height": 48,
376
+ "justifyContent": "center",
377
+ "marginLeft": 12,
378
+ "width": 48,
379
+ },
380
+ undefined,
381
+ ]
433
382
  }
434
- }
435
- testID="timePickerIOS"
436
- value={1995-12-17T03:24:00.000Z}
437
- />
438
- </View>
439
- <View>
383
+ >
384
+ <View
385
+ accessible={true}
386
+ collapsable={false}
387
+ focusable={true}
388
+ nativeID="animatedComponent"
389
+ onClick={[Function]}
390
+ onResponderGrant={[Function]}
391
+ onResponderMove={[Function]}
392
+ onResponderRelease={[Function]}
393
+ onResponderTerminate={[Function]}
394
+ onResponderTerminationRequest={[Function]}
395
+ onStartShouldSetResponder={[Function]}
396
+ style={
397
+ Object {
398
+ "opacity": 1,
399
+ }
400
+ }
401
+ testID="bottom-sheet-close-icon"
402
+ >
403
+ <HeroIcon
404
+ name="cancel"
405
+ style={
406
+ Array [
407
+ Object {
408
+ "color": "#001f23",
409
+ "fontSize": 20,
410
+ },
411
+ undefined,
412
+ ]
413
+ }
414
+ themeIntent="text"
415
+ themeSize="small"
416
+ />
417
+ </View>
418
+ </View>
419
+ </View>
440
420
  <View
441
421
  style={
442
422
  Array [
@@ -453,58 +433,95 @@ exports[`TimePickerIOS renders correctly 1`] = `
453
433
  style={
454
434
  Array [
455
435
  Object {
456
- "alignItems": "center",
457
- "flexDirection": "row",
458
- "justifyContent": "flex-end",
459
- "minHeight": 64,
460
- "paddingHorizontal": 12,
461
- "paddingVertical": 8,
436
+ "height": 176,
462
437
  },
463
438
  undefined,
464
439
  ]
465
440
  }
466
441
  >
467
- <View
468
- accessible={true}
469
- collapsable={false}
470
- focusable={true}
471
- nativeID="animatedComponent"
472
- onClick={[Function]}
473
- onResponderGrant={[Function]}
474
- onResponderMove={[Function]}
475
- onResponderRelease={[Function]}
476
- onResponderTerminate={[Function]}
477
- onResponderTerminationRequest={[Function]}
478
- onStartShouldSetResponder={[Function]}
442
+ <Picker
443
+ display="spinner"
444
+ mode="time"
445
+ onChange={[Function]}
479
446
  style={
480
447
  Object {
481
- "opacity": 1,
448
+ "flex": 1,
482
449
  }
483
450
  }
451
+ testID="timePickerIOS"
452
+ value={1995-12-17T03:24:00.000Z}
453
+ />
454
+ </View>
455
+ <View>
456
+ <View
457
+ style={
458
+ Array [
459
+ Object {
460
+ "borderBottomColor": "#e8e9ea",
461
+ "borderBottomWidth": 1,
462
+ "maxWidth": "100%",
463
+ },
464
+ undefined,
465
+ ]
466
+ }
467
+ />
468
+ <View
469
+ style={
470
+ Array [
471
+ Object {
472
+ "alignItems": "center",
473
+ "flexDirection": "row",
474
+ "justifyContent": "flex-end",
475
+ "minHeight": 64,
476
+ "paddingHorizontal": 12,
477
+ "paddingVertical": 8,
478
+ },
479
+ undefined,
480
+ ]
481
+ }
484
482
  >
485
- <Text
483
+ <View
484
+ accessible={true}
485
+ collapsable={false}
486
+ focusable={true}
487
+ nativeID="animatedComponent"
488
+ onClick={[Function]}
489
+ onResponderGrant={[Function]}
490
+ onResponderMove={[Function]}
491
+ onResponderRelease={[Function]}
492
+ onResponderTerminate={[Function]}
493
+ onResponderTerminationRequest={[Function]}
494
+ onStartShouldSetResponder={[Function]}
486
495
  style={
487
- Array [
488
- Object {
489
- "color": "#8505a2",
490
- "fontFamily": "BeVietnamPro-SemiBold",
491
- "fontSize": 16,
492
- "letterSpacing": 0.48,
493
- "lineHeight": 24,
494
- },
495
- undefined,
496
- ]
496
+ Object {
497
+ "opacity": 1,
498
+ }
497
499
  }
498
- themeFontSize="large"
499
- themeFontWeight="semi-bold"
500
- themeIntent="primary"
501
500
  >
502
- Confirm
503
- </Text>
501
+ <Text
502
+ style={
503
+ Array [
504
+ Object {
505
+ "color": "#8505a2",
506
+ "fontFamily": "BeVietnamPro-SemiBold",
507
+ "fontSize": 16,
508
+ "letterSpacing": 0.48,
509
+ "lineHeight": 24,
510
+ },
511
+ undefined,
512
+ ]
513
+ }
514
+ themeFontSize="large"
515
+ themeFontWeight="semi-bold"
516
+ themeIntent="primary"
517
+ >
518
+ Confirm
519
+ </Text>
520
+ </View>
504
521
  </View>
505
522
  </View>
506
- </View>
507
- </RCTSafeAreaView>
523
+ </RCTSafeAreaView>
524
+ </View>
508
525
  </View>
509
526
  </View>
510
527
  </View>
package/types/components/BottomSheet/StyledBottomSheet.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Animated, SafeAreaView, View } from 'react-native';
1
+ import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
2
2
  import type { ViewProps } from 'react-native';
3
3
  declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
4
4
  theme?: import("@emotion/react").Theme;
@@ -6,6 +6,12 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps
6
6
  }, {}, {
7
7
  ref?: import("react").Ref<View>;
8
8
  }>;
9
+ declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<KeyboardAvoidingViewProps & {
10
+ theme?: import("@emotion/react").Theme;
11
+ as?: import("react").ElementType<any>;
12
+ }, {}, {
13
+ ref?: import("react").Ref<KeyboardAvoidingView>;
14
+ }>;
9
15
  declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
10
16
  children?: import("react").ReactNode;
11
17
  } & {
@@ -42,4 +48,4 @@ declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewP
42
48
  }, {}, {
43
49
  ref?: import("react").Ref<View>;
44
50
  }>;
45
- export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, };
51
+ export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, StyledKeyboardAvoidingView, };
package/types/components/BottomSheet/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { KeyboardAvoidingViewProps } from 'react-native';
1
2
  import type { ReactElement, ReactNode } from 'react';
2
3
  import type { StyleProp, ViewStyle } from 'react-native';
3
4
  interface BottomSheetProps {
@@ -54,6 +55,10 @@ interface BottomSheetProps {
54
55
  * Testing id of the component.
55
56
  */
56
57
  testID?: string;
58
+ /**
59
+ * keyboardAvoidingView's props
60
+ * */
61
+ keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
57
62
  }
58
- declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
63
+ declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element;
59
64
  export default BottomSheet;