@hero-design/rn 8.44.0 → 8.44.1

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ rollup -c
 
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 26.5s
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 30s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.44.1
+
+### Patch Changes
+
+- [#2341](https://github.com/Thinkei/hero-design/pull/2341) [`68a91bfc1`](https://github.com/Thinkei/hero-design/commit/68a91bfc1c2a0cd6b46d6c35e59aeaa2ae86160d) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput][richtexteditor] Add animation for label
+
 ## 8.44.0
 
 ### Minor Changes

package/es/index.js

@@ -3333,8 +3333,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   };
   var space = {
     containerPadding: theme.space.medium,
-    labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -4,
+    labelLeft: theme.space.xlarge,
+    labelTop: theme.space.xlarge / 3,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
@@ -6761,7 +6761,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$2 = index$a(Text$1)(function (_ref) {
+var StyledLabel$1 = index$a(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -6780,7 +6780,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$y);
-  return /*#__PURE__*/React.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -12429,7 +12429,7 @@ var StyledIconWrapper$3 = index$a(Box)(function (_ref2) {
     marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
   };
 });
-var StyledLabel$1 = index$a(Typography.Body)(function (_ref3) {
+var StyledLabel = index$a(Typography.Body)(function (_ref3) {
   var themeSelected = _ref3.themeSelected,
     themeVariant = _ref3.themeVariant,
     theme = _ref3.theme;
@@ -12475,7 +12475,7 @@ var Chip = function Chip(_ref) {
     themeSelected: selected,
     themeVariant: variant,
     testID: "chip-icon-".concat(internalIcon)
-  })), /*#__PURE__*/React.createElement(StyledLabel$1, {
+  })), /*#__PURE__*/React.createElement(StyledLabel, {
     variant: "small",
     themeVariant: variant,
     themeSelected: selected
@@ -12581,45 +12581,22 @@ var StyledContainer$4 = index$a(View)(function (_ref) {
     marginTop: theme.__hd__.textInput.space.containerMarginTop
   };
 });
-var StyledLabelContainer = index$a(View)(function (_ref2) {
-  var theme = _ref2.theme;
+var StyledLabelContainerInsideTextInput = index$a(Animated.View)(function (_ref2) {
+  var themeVariant = _ref2.themeVariant,
+    theme = _ref2.theme;
   return {
-    position: 'absolute',
     flexDirection: 'row',
-    left: theme.__hd__.textInput.space.labelLeft,
-    top: theme.__hd__.textInput.space.labelTop,
-    backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+    alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+    position: 'absolute',
     zIndex: 1,
-    paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
+    left: -theme.__hd__.textInput.space.labelLeft,
+    right: 0,
+    top: -theme.__hd__.textInput.space.labelTop
   };
 });
-var StyledLabel = index$a(Typography.Caption)(function (_ref3) {
+var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
-  return {
-    color: theme.__hd__.textInput.colors.labels[themeState],
-    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
-  };
-});
-var StyledAsteriskLabel = index$a(Typography.Caption)(function (_ref4) {
-  var theme = _ref4.theme,
-    themeState = _ref4.themeState;
-  return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState],
-    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
-  };
-});
-var StyledLabelContainerInsideTextInput = index$a(View)(function (_ref5) {
-  var themeVariant = _ref5.themeVariant;
-  return _objectSpread2({
-    flexDirection: 'row',
-    zIndex: 9999,
-    alignItems: themeVariant === 'text' ? 'center' : 'flex-start'
-  }, StyleSheet$1.absoluteFillObject);
-});
-var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref6) {
-  var theme = _ref6.theme,
-    themeState = _ref6.themeState;
   return {
     textAlignVertical: 'center',
     alignContent: 'center',
@@ -12628,15 +12605,15 @@ var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref6) {
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref7) {
-  var theme = _ref7.theme,
-    themeState = _ref7.themeState;
+var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref4) {
+  var theme = _ref4.theme,
+    themeState = _ref4.themeState;
   return {
     color: theme.__hd__.textInput.colors.asterisks[themeState]
   };
 });
-var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorContainer$2 = index$a(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
@@ -12645,16 +12622,16 @@ var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
     flexGrow: 4
   };
 });
-var StyledError = index$a(Typography.Caption)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledError = index$a(Typography.Caption)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref10) {
-  var theme = _ref10.theme,
-    themeState = _ref10.themeState;
+var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeState = _ref7.themeState;
   return {
     color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
     marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
@@ -12665,9 +12642,9 @@ var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref10) {
   };
 });
 var StyledHelperText = Typography.Caption;
-var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
-  var theme = _ref11.theme,
-    themeVariant = _ref11.themeVariant;
+var StyledTextInput = index$a(TextInput$1)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeVariant = _ref8.themeVariant;
   return {
     textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
     fontSize: theme.__hd__.textInput.fontSizes.text,
@@ -12680,19 +12657,19 @@ var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
     fontFamily: theme.__hd__.textInput.fonts.text
   };
 });
-var StyledBorderBackDrop = index$a(View)(function (_ref12) {
+var StyledBorderBackDrop = index$a(View)(function (_ref9) {
   var _theme$__hd__$textInp;
-  var theme = _ref12.theme,
-    themeFocused = _ref12.themeFocused,
-    themeState = _ref12.themeState;
+  var theme = _ref9.theme,
+    themeFocused = _ref9.themeFocused,
+    themeState = _ref9.themeState;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
     borderRadius: theme.__hd__.textInput.radii.container,
     borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$a(View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$a(View)(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -12710,8 +12687,8 @@ var StyledTextInputAndLabelContainer = index$a(View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
     minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
@@ -12749,6 +12726,7 @@ var getState$1 = function getState(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
+var LABEL_ANIMATION_DURATION = 150;
 var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
@@ -12781,10 +12759,18 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setIsFocused = _React$useState2[1];
+    inputHeight = _React$useState2[0],
+    setInputHeight = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    prefixWidth = _React$useState4[0],
+    setPrefixWidth = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isFocused = _React$useState6[0],
+    setIsFocused = _React$useState6[1];
   var state = getState$1({
     disabled: disabled,
     error: error,
@@ -12795,6 +12781,23 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
   var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
+  var focusAnimation = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = useCallback(function (event) {
+    var height = event.nativeEvent.layout.height;
+    setInputHeight(height);
+  }, []);
+  var onPrefixLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setPrefixWidth(width);
+  }, []);
   var innerTextInput = React.useRef();
   React.useImperativeHandle(ref, function () {
     return {
@@ -12892,43 +12895,59 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, {
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeState: state,
     testID: "text-input-border",
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    pointerEvents: "none",
-    testID: "label-container",
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state
-  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    themeState: state,
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(View, {
+    onLayout: onPrefixLayout
+  }, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
-  }) : prefix, /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+  }) : prefix), /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
-    pointerEvents: "none"
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute'
+    }, {
+      transform: [{
+        translateY: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [variant !== 'textarea' ? inputHeight / 2 : theme.space.large, 0]
+        })
+      }, {
+        translateX: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [prefix ? prefixWidth * 4 : theme.space.xxxlarge, 0]
+        })
+      }, {
+        scale: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0.75]
+        })
+      }]
+    }]
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
-    themeState: state
+    style: {
+      backgroundColor: backgroundColor
+    },
+    themeState: state,
+    testID: "input-label-asterisk"
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+    style: {
+      backgroundColor: backgroundColor
+    },
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     themeState: state
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeProps.multiline,
     ref: function ref(reference) {
@@ -33923,6 +33942,23 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputHeight = _React$useState2[0],
+    setInputHeight = _React$useState2[1];
+  var focusAnimation = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = useCallback(function (event) {
+    var height = event.nativeEvent.layout.height;
+    setInputHeight(height);
+  }, []);
   useEffect(function () {
     var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
       return setIsFocused(true);
@@ -34012,25 +34048,47 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(StyledContainer$4, {
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
-    themeState: state,
-    themeFocused: isFocused
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    pointerEvents: "none"
-  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state
-  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
-    testID: "input-label",
-    themeState: state
-  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+  }, /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: "text",
-    pointerEvents: "none"
+    pointerEvents: "none",
+    testID: "input-label-container",
+    style: [{
+      position: 'absolute'
+    }, {
+      transform: [{
+        translateY: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [inputHeight / 2, 0]
+        })
+      }, {
+        translateX: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [theme.space.xxxlarge, 0]
+        })
+      }, {
+        scale: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0.75]
+        })
+      }]
+    }]
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
+    style: {
+      backgroundColor: theme.__hd__.textInput.colors.labelBackground
+    },
     themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+    style: {
+      backgroundColor: theme.__hd__.textInput.colors.labelBackground
+    },
     testID: "input-label",
     themeState: state
-  }, label)), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInputContainer, {
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+    themeState: state,
+    themeFocused: isFocused
+  }), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }