@hero-design/rn 8.99.2 → 8.99.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3078) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3141) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,9 +10,9 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/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.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 55.4s
+created lib/index.js, es/index.js in 54.3s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 20.7s
+created ., . in 18.6s

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.99.3
+
+### Patch Changes
+
+- [#3840](https://github.com/Thinkei/hero-design/pull/3840) [`f8dbfb708ce36d07d618f9488c1245b562047e14`](https://github.com/Thinkei/hero-design/commit/f8dbfb708ce36d07d618f9488c1245b562047e14) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] fix label's position when the textinput's width scales up
+
+- [#3844](https://github.com/Thinkei/hero-design/pull/3844) [`695ef1e857c452b98541c71c3f1c8c6cbab2d290`](https://github.com/Thinkei/hero-design/commit/695ef1e857c452b98541c71c3f1c8c6cbab2d290) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] fix Label overflow issue
+
 ## 8.99.2
 
 ### Patch Changes

package/es/index.js

@@ -14562,19 +14562,19 @@ var StyledContainer$6 = index$b(View)(function (_ref) {
 });
 var StyledLabelContainerInsideTextInput = index$b(Animated.View)(function (_ref2) {
   var themeVariant = _ref2.themeVariant,
+    themeHasPrefix = _ref2.themeHasPrefix,
     theme = _ref2.theme;
   return {
     flexDirection: 'row',
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
-    justifyContent: 'center',
     position: 'absolute',
     zIndex: 1,
-    left: 0,
-    right: 0,
+    left: themeHasPrefix ? theme.space.xxlarge : theme.space.medium + theme.space.small,
+    right: theme.space.medium,
     top: -theme.__hd__.textInput.space.labelTop
   };
 });
-var StyledLabelInsideTextInput = index$b(Typography.Body)(function (_ref3) {
+var StyledLabelInsideTextInput = index$b(View)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
@@ -14583,10 +14583,7 @@ var StyledLabelInsideTextInput = index$b(Typography.Body)(function (_ref3) {
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
-    position: 'absolute',
-    zIndex: 1,
-    left: 0,
-    top: '50%'
+    flexDirection: 'row'
   };
 });
 var StyledAsteriskLabelInsideTextInput = index$b(Typography.Body)(function (_ref4) {
@@ -14952,21 +14949,17 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
+    themeHasPrefix: !!prefix,
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
-      position: 'absolute'
+      transformOrigin: 'left top'
     }, {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
           outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
         })
-      }, {
-        translateX: focusAnimation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [prefix ? theme.space.xxlarge : theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
-        })
       }, {
         scale: focusAnimation.interpolate({
           inputRange: [0, 1],
@@ -14987,7 +14980,9 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, {
+    numberOfLines: 1
+  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -41101,22 +41096,18 @@ var RichTextEditor = function RichTextEditor(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
+    themeHasPrefix: false,
     themeVariant: "text",
     pointerEvents: "none",
     testID: "input-label-container",
     style: [{
-      position: 'absolute'
+      transformOrigin: 'top left'
     }, {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
           outputRange: [inputSize.height / 2, theme.space.xsmall]
         })
-      }, {
-        translateX: focusAnimation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
-        })
       }, {
         scale: focusAnimation.interpolate({
           inputRange: [0, 1],
@@ -41135,7 +41126,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, {
+    numberOfLines: 1
+  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,

package/lib/index.js

@@ -14591,19 +14591,19 @@ var StyledContainer$6 = index$b(reactNative.View)(function (_ref) {
 });
 var StyledLabelContainerInsideTextInput = index$b(reactNative.Animated.View)(function (_ref2) {
   var themeVariant = _ref2.themeVariant,
+    themeHasPrefix = _ref2.themeHasPrefix,
     theme = _ref2.theme;
   return {
     flexDirection: 'row',
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
-    justifyContent: 'center',
     position: 'absolute',
     zIndex: 1,
-    left: 0,
-    right: 0,
+    left: themeHasPrefix ? theme.space.xxlarge : theme.space.medium + theme.space.small,
+    right: theme.space.medium,
     top: -theme.__hd__.textInput.space.labelTop
   };
 });
-var StyledLabelInsideTextInput = index$b(Typography.Body)(function (_ref3) {
+var StyledLabelInsideTextInput = index$b(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
@@ -14612,10 +14612,7 @@ var StyledLabelInsideTextInput = index$b(Typography.Body)(function (_ref3) {
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
-    position: 'absolute',
-    zIndex: 1,
-    left: 0,
-    top: '50%'
+    flexDirection: 'row'
   };
 });
 var StyledAsteriskLabelInsideTextInput = index$b(Typography.Body)(function (_ref4) {
@@ -14981,21 +14978,17 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
+    themeHasPrefix: !!prefix,
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
-      position: 'absolute'
+      transformOrigin: 'left top'
     }, {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
           outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
         })
-      }, {
-        translateX: focusAnimation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [prefix ? theme.space.xxlarge : theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
-        })
       }, {
         scale: focusAnimation.interpolate({
           inputRange: [0, 1],
@@ -15016,7 +15009,9 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+    numberOfLines: 1
+  }, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -41130,22 +41125,18 @@ var RichTextEditor = function RichTextEditor(_ref) {
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
+    themeHasPrefix: false,
     themeVariant: "text",
     pointerEvents: "none",
     testID: "input-label-container",
     style: [{
-      position: 'absolute'
+      transformOrigin: 'top left'
     }, {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
           outputRange: [inputSize.height / 2, theme.space.xsmall]
         })
-      }, {
-        translateX: focusAnimation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
-        })
       }, {
         scale: focusAnimation.interpolate({
           inputRange: [0, 1],
@@ -41164,7 +41155,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+    numberOfLines: 1
+  }, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.99.2",
+  "version": "8.99.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -106,64 +106,47 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "justifyContent": "center",
-                "left": 0,
+                "left": 24,
                 "position": "absolute",
-                "right": 0,
+                "right": 16,
                 "top": -10.666666666666666,
                 "transform": [
                   {
                     "translateY": 0,
                   },
-                  {
-                    "translateX": 16,
-                  },
                   {
                     "scale": 1,
                   },
                 ],
+                "transformOrigin": "left top",
                 "zIndex": 1,
               }
             }
+            themeHasPrefix={false}
             themeVariant="text"
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
+                    "alignContent": "center",
+                    "alignItems": "center",
                     "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "flexDirection": "row",
+                    "marginTop": -2,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
                   },
-                  [
-                    {
-                      "alignContent": "center",
-                      "alignItems": "center",
-                      "color": "#001f23",
-                      "left": 0,
-                      "marginTop": -2,
-                      "position": "absolute",
-                      "textAlignVertical": "center",
-                      "top": "50%",
-                      "zIndex": 1,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
                 ]
               }
               testID="input-label"
-              themeIntent="body"
               themeState="filled"
-              themeTypeface="neutral"
-              themeVariant="regular"
             >
               <Text
                 allowFontScaling={false}
+                numberOfLines={1}
                 style={
                   [
                     {
@@ -182,7 +165,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               >
                 Start date
               </Text>
-            </Text>
+            </View>
           </View>
           <View
             style={
@@ -408,64 +391,47 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "justifyContent": "center",
-                "left": 0,
+                "left": 24,
                 "position": "absolute",
-                "right": 0,
+                "right": 16,
                 "top": -10.666666666666666,
                 "transform": [
                   {
                     "translateY": 0,
                   },
-                  {
-                    "translateX": 16,
-                  },
                   {
                     "scale": 1,
                   },
                 ],
+                "transformOrigin": "left top",
                 "zIndex": 1,
               }
             }
+            themeHasPrefix={false}
             themeVariant="text"
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
+                    "alignContent": "center",
+                    "alignItems": "center",
                     "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "flexDirection": "row",
+                    "marginTop": -2,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
                   },
-                  [
-                    {
-                      "alignContent": "center",
-                      "alignItems": "center",
-                      "color": "#001f23",
-                      "left": 0,
-                      "marginTop": -2,
-                      "position": "absolute",
-                      "textAlignVertical": "center",
-                      "top": "50%",
-                      "zIndex": 1,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
                 ]
               }
               testID="input-label"
-              themeIntent="body"
               themeState="filled"
-              themeTypeface="neutral"
-              themeVariant="regular"
             >
               <Text
                 allowFontScaling={false}
+                numberOfLines={1}
                 style={
                   [
                     {
@@ -484,7 +450,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               >
                 Start date
               </Text>
-            </Text>
+            </View>
           </View>
           <View
             style={
@@ -710,64 +676,47 @@ exports[`DatePicker renders variant Calendar 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "justifyContent": "center",
-                "left": 0,
+                "left": 24,
                 "position": "absolute",
-                "right": 0,
+                "right": 16,
                 "top": -10.666666666666666,
                 "transform": [
                   {
                     "translateY": 0,
                   },
-                  {
-                    "translateX": 16,
-                  },
                   {
                     "scale": 1,
                   },
                 ],
+                "transformOrigin": "left top",
                 "zIndex": 1,
               }
             }
+            themeHasPrefix={false}
             themeVariant="text"
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
+                    "alignContent": "center",
+                    "alignItems": "center",
                     "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "flexDirection": "row",
+                    "marginTop": -2,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
                   },
-                  [
-                    {
-                      "alignContent": "center",
-                      "alignItems": "center",
-                      "color": "#001f23",
-                      "left": 0,
-                      "marginTop": -2,
-                      "position": "absolute",
-                      "textAlignVertical": "center",
-                      "top": "50%",
-                      "zIndex": 1,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
                 ]
               }
               testID="input-label"
-              themeIntent="body"
               themeState="filled"
-              themeTypeface="neutral"
-              themeVariant="regular"
             >
               <Text
                 allowFontScaling={false}
+                numberOfLines={1}
                 style={
                   [
                     {
@@ -786,7 +735,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               >
                 Start date
               </Text>
-            </Text>
+            </View>
           </View>
           <View
             style={

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -106,64 +106,47 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "justifyContent": "center",
-                "left": 0,
+                "left": 24,
                 "position": "absolute",
-                "right": 0,
+                "right": 16,
                 "top": -10.666666666666666,
                 "transform": [
                   {
                     "translateY": 0,
                   },
-                  {
-                    "translateX": 16,
-                  },
                   {
                     "scale": 1,
                   },
                 ],
+                "transformOrigin": "left top",
                 "zIndex": 1,
               }
             }
+            themeHasPrefix={false}
             themeVariant="text"
           >
-            <Text
-              allowFontScaling={false}
+            <View
               style={
                 [
                   {
+                    "alignContent": "center",
+                    "alignItems": "center",
                     "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-Regular",
-                    "fontSize": 16,
-                    "letterSpacing": 0.48,
-                    "lineHeight": 24,
+                    "flexDirection": "row",
+                    "marginTop": -2,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
                   },
-                  [
-                    {
-                      "alignContent": "center",
-                      "alignItems": "center",
-                      "color": "#001f23",
-                      "left": 0,
-                      "marginTop": -2,
-                      "position": "absolute",
-                      "textAlignVertical": "center",
-                      "top": "50%",
-                      "zIndex": 1,
-                    },
-                    {
-                      "backgroundColor": "#ffffff",
-                    },
-                  ],
                 ]
               }
               testID="input-label"
-              themeIntent="body"
               themeState="filled"
-              themeTypeface="neutral"
-              themeVariant="regular"
             >
               <Text
                 allowFontScaling={false}
+                numberOfLines={1}
                 style={
                   [
                     {
@@ -182,7 +165,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               >
                 Start date
               </Text>
-            </Text>
+            </View>
           </View>
           <View
             style={