@hero-design/rn 8.99.2 → 8.99.4-alpha.0

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:4110) 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 55.1s
 
 /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 19.6s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.99.4-alpha.0
+
+### Patch Changes
+
+- [`53585546fb22f193a31fb7c9eaf48039cfe85061`](https://github.com/Thinkei/hero-design/commit/53585546fb22f193a31fb7c9eaf48039cfe85061) Thanks [@ttkien](https://github.com/ttkien)! - [Tab.Scroll] change the logic to workround fix android layout issue <= 27
+
+## 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,
@@ -20911,7 +20906,9 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
-var isAndroid8 = Platform.OS === 'android' && (Platform.Version === 26 || Platform.Version === 27);
+// Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
+// which may require special handling due to known platform-specific issues with layout or styling.
+var isAndroid8 = Platform.OS === 'android' && 24 <= Platform.Version && Platform.Version <= 27;
 var TabScreen = index$b(View)({
   flex: 1
 });
@@ -41101,22 +41098,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 +41128,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,
@@ -20940,7 +20935,9 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
-var isAndroid8 = reactNative.Platform.OS === 'android' && (reactNative.Platform.Version === 26 || reactNative.Platform.Version === 27);
+// Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
+// which may require special handling due to known platform-specific issues with layout or styling.
+var isAndroid8 = reactNative.Platform.OS === 'android' && 24 <= reactNative.Platform.Version && reactNative.Platform.Version <= 27;
 var TabScreen = index$b(reactNative.View)({
   flex: 1
 });
@@ -41130,22 +41127,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 +41157,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.4-alpha.0",
   "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={