@hero-design/rn 8.87.1 → 8.88.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 (32) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +18 -0
  3. package/es/index.js +119 -59
  4. package/lib/index.js +119 -59
  5. package/package.json +2 -2
  6. package/src/components/AppCue/StyledAppCue.tsx +27 -1
  7. package/src/components/AppCue/__tests__/StyledAppCue.tsx +4 -0
  8. package/src/components/AppCue/__tests__/__snapshots__/StyledAppCue.tsx.snap +194 -0
  9. package/src/components/AppCue/__tests__/__snapshots__/index.spec.tsx.snap +260 -0
  10. package/src/components/AppCue/__tests__/index.spec.tsx +4 -0
  11. package/src/components/AppCue/__tests__/utils.spec.ts +57 -4
  12. package/src/components/AppCue/index.tsx +7 -4
  13. package/src/components/AppCue/utils.ts +60 -9
  14. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +18 -15
  15. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +6 -5
  16. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +6 -5
  17. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +12 -10
  18. package/src/components/Empty/__tests__/__snapshots__/index.spec.tsx.snap +12 -12
  19. package/src/components/Empty/index.tsx +1 -1
  20. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -0
  21. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +42 -35
  22. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +36 -30
  23. package/src/components/TextInput/StyledTextInput.tsx +4 -0
  24. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +20 -0
  25. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +446 -432
  26. package/src/components/TextInput/index.tsx +13 -32
  27. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +12 -10
  28. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +12 -10
  29. package/stats/8.87.2/rn-stats.html +4844 -0
  30. package/stats/8.88.0/rn-stats.html +4844 -0
  31. package/types/components/AppCue/StyledAppCue.d.ts +1 -1
  32. package/types/components/AppCue/utils.d.ts +6 -3
package/src/components/TextInput/index.tsx CHANGED
@@ -311,8 +311,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
311
311
  height: number;
312
312
  width: number;
313
313
  }>({ height: 0, width: 0 });
314
- const [labelWidth, setLabelWidth] = React.useState<number>(0);
315
- const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
316
314
 
317
315
  const [isFocused, setIsFocused] = React.useState(false);
318
316
 
@@ -343,15 +341,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
343
341
  setInputSize((prev) => ({ ...prev, height, width }));
344
342
  }, []);
345
343
 
346
- const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
347
- const { width } = event.nativeEvent.layout;
348
- setPrefixWidth(width);
349
- }, []);
350
- const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
351
- const { width } = event.nativeEvent.layout;
352
- setLabelWidth(width);
353
- }, []);
354
-
355
344
  const innerTextInput = React.useRef<RNTextInput | undefined | null>();
356
345
  React.useImperativeHandle(
357
346
  ref,
@@ -458,9 +447,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
458
447
  style={[{ backgroundColor }, borderStyle]}
459
448
  />
460
449
 
461
- <View onLayout={onPrefixLayout}>
462
- {renderPrefix({ state, prefix })}
463
- </View>
450
+ <View>{renderPrefix({ state, prefix })}</View>
464
451
  <StyledLabelContainerInsideTextInput
465
452
  themeVariant={variant}
466
453
  pointerEvents="none"
@@ -477,7 +464,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
477
464
  variant !== 'textarea'
478
465
  ? inputSize.height / 2
479
466
  : theme.space.large,
480
- 0,
467
+ theme.space.xsmall,
481
468
  ],
482
469
  }),
483
470
  },
@@ -485,13 +472,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
485
472
  translateX: focusAnimation.interpolate({
486
473
  inputRange: [0, 1],
487
474
  outputRange: [
488
- -inputSize.width / 2 +
489
- labelWidth / 2 +
490
- prefixWidth +
491
- theme.space.large,
492
- -inputSize.width / 2 +
493
- labelWidth / 2 +
494
- theme.space.small,
475
+ prefix ? theme.space.xxlarge : theme.space.medium,
476
+ -theme.space.xlarge + theme.space.xsmall,
495
477
  ],
496
478
  }),
497
479
  },
@@ -505,23 +487,22 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
505
487
  },
506
488
  ]}
507
489
  >
508
- {required && (
509
- <StyledAsteriskLabelInsideTextInput
510
- style={{ backgroundColor }}
511
- themeState={state}
512
- testID="input-label-asterisk"
513
- >
514
- *
515
- </StyledAsteriskLabelInsideTextInput>
516
- )}
517
490
  {!!label && (
518
491
  <StyledLabelInsideTextInput
519
492
  style={{ backgroundColor }}
520
493
  nativeID={accessibilityLabelledBy}
521
494
  testID="input-label"
522
495
  themeState={state}
523
- onLayout={onLabelLayout}
524
496
  >
497
+ {required && (
498
+ <StyledAsteriskLabelInsideTextInput
499
+ style={{ backgroundColor }}
500
+ themeState={state}
501
+ testID="input-label-asterisk"
502
+ >
503
+ *
504
+ </StyledAsteriskLabelInsideTextInput>
505
+ )}
525
506
  {label}
526
507
  </StyledLabelInsideTextInput>
527
508
  )}
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap CHANGED
@@ -98,9 +98,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
98
98
  themeFocused={false}
99
99
  themeState="filled"
100
100
  />
101
- <View
102
- onLayout={[Function]}
103
- />
101
+ <View />
104
102
  <View
105
103
  collapsable={false}
106
104
  pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
118
116
  "translateY": 0,
119
117
  },
120
118
  {
121
- "translateX": 24,
119
+ "translateX": 16,
122
120
  },
123
121
  {
124
122
  "scale": 1,
@@ -131,7 +129,6 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
131
129
  >
132
130
  <Text
133
131
  allowFontScaling={false}
134
- onLayout={[Function]}
135
132
  style={
136
133
  [
137
134
  {
@@ -146,8 +143,12 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
146
143
  "alignContent": "center",
147
144
  "alignItems": "center",
148
145
  "color": "#001f23",
146
+ "left": 0,
149
147
  "marginTop": -2,
148
+ "position": "absolute",
150
149
  "textAlignVertical": "center",
150
+ "top": "50%",
151
+ "zIndex": 1,
151
152
  },
152
153
  {
153
154
  "backgroundColor": "#ffffff",
@@ -384,9 +385,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
384
385
  themeFocused={false}
385
386
  themeState="filled"
386
387
  />
387
- <View
388
- onLayout={[Function]}
389
- />
388
+ <View />
390
389
  <View
391
390
  collapsable={false}
392
391
  pointerEvents="none"
@@ -404,7 +403,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
404
403
  "translateY": 0,
405
404
  },
406
405
  {
407
- "translateX": 24,
406
+ "translateX": 16,
408
407
  },
409
408
  {
410
409
  "scale": 1,
@@ -417,7 +416,6 @@ exports[`TimePickerAndroid renders correctly 1`] = `
417
416
  >
418
417
  <Text
419
418
  allowFontScaling={false}
420
- onLayout={[Function]}
421
419
  style={
422
420
  [
423
421
  {
@@ -432,8 +430,12 @@ exports[`TimePickerAndroid renders correctly 1`] = `
432
430
  "alignContent": "center",
433
431
  "alignItems": "center",
434
432
  "color": "#001f23",
433
+ "left": 0,
435
434
  "marginTop": -2,
435
+ "position": "absolute",
436
436
  "textAlignVertical": "center",
437
+ "top": "50%",
438
+ "zIndex": 1,
437
439
  },
438
440
  {
439
441
  "backgroundColor": "#ffffff",
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -98,9 +98,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
98
98
  themeFocused={false}
99
99
  themeState="filled"
100
100
  />
101
- <View
102
- onLayout={[Function]}
103
- />
101
+ <View />
104
102
  <View
105
103
  collapsable={false}
106
104
  pointerEvents="none"
@@ -118,7 +116,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
118
116
  "translateY": 0,
119
117
  },
120
118
  {
121
- "translateX": 24,
119
+ "translateX": 16,
122
120
  },
123
121
  {
124
122
  "scale": 1,
@@ -131,7 +129,6 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
131
129
  >
132
130
  <Text
133
131
  allowFontScaling={false}
134
- onLayout={[Function]}
135
132
  style={
136
133
  [
137
134
  {
@@ -146,8 +143,12 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
146
143
  "alignContent": "center",
147
144
  "alignItems": "center",
148
145
  "color": "#001f23",
146
+ "left": 0,
149
147
  "marginTop": -2,
148
+ "position": "absolute",
150
149
  "textAlignVertical": "center",
150
+ "top": "50%",
151
+ "zIndex": 1,
151
152
  },
152
153
  {
153
154
  "backgroundColor": "#ffffff",
@@ -384,9 +385,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
384
385
  themeFocused={false}
385
386
  themeState="filled"
386
387
  />
387
- <View
388
- onLayout={[Function]}
389
- />
388
+ <View />
390
389
  <View
391
390
  collapsable={false}
392
391
  pointerEvents="none"
@@ -404,7 +403,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
404
403
  "translateY": 0,
405
404
  },
406
405
  {
407
- "translateX": 24,
406
+ "translateX": 16,
408
407
  },
409
408
  {
410
409
  "scale": 1,
@@ -417,7 +416,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
417
416
  >
418
417
  <Text
419
418
  allowFontScaling={false}
420
- onLayout={[Function]}
421
419
  style={
422
420
  [
423
421
  {
@@ -432,8 +430,12 @@ exports[`TimePickerIOS renders correctly 1`] = `
432
430
  "alignContent": "center",
433
431
  "alignItems": "center",
434
432
  "color": "#001f23",
433
+ "left": 0,
435
434
  "marginTop": -2,
435
+ "position": "absolute",
436
436
  "textAlignVertical": "center",
437
+ "top": "50%",
438
+ "zIndex": 1,
437
439
  },
438
440
  {
439
441
  "backgroundColor": "#ffffff",