@hero-design/rn 7.10.2-rc.0 → 7.11.2

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -20,24 +20,15 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
   }
 >
   <View
-    pointerEvents="auto"
-    style={
-      Array [
-        Object {
-          "marginVertical": 8,
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
+    pointerEvents="none"
   >
     <View
+      pointerEvents="auto"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "padding": 16,
+            "marginVertical": 8,
+            "width": "100%",
           },
           undefined,
         ]
@@ -47,135 +38,157 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#8b8d92",
-              "borderRadius": 8,
-              "borderWidth": 1,
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            undefined,
-          ]
-        }
-        themeVariant="readonly"
-      />
-      <View
-        pointerEvents="none"
-        style={
-          Array [
-            Object {
-              "backgroundColor": "#ffffff",
+              "alignItems": "center",
               "flexDirection": "row",
-              "left": 16,
-              "paddingHorizontal": 4,
-              "position": "absolute",
-              "top": -10,
-              "zIndex": 1,
+              "padding": 16,
             },
             undefined,
           ]
         }
       >
-        <Text
+        <View
           style={
             Array [
               Object {
-                "color": "#292a2b",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 12,
-                "letterSpacing": 0.36,
-                "lineHeight": 20,
+                "borderColor": "#292a2b",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
               },
-              Array [
-                Object {
-                  "color": "#8b8d92",
-                },
-                undefined,
-              ],
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              undefined,
             ]
           }
-          testID="input-label"
-          themeFontSize="small"
-          themeFontWeight="regular"
-          themeIntent="body"
-          themeVariant="readonly"
         >
-          Allow notifications
-        </Text>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "alignSelf": "stretch",
-              "flexDirection": "row",
-              "flexGrow": 2,
-            },
-            undefined,
-          ]
-        }
-      >
-        <TextInput
-          accessibilityState={
-            Object {
-              "disabled": false,
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                  },
+                  undefined,
+                ],
+              ]
             }
-          }
-          editable={false}
-          multiline={true}
-          onBlur={[Function]}
-          onChangeText={[Function]}
-          onFocus={[Function]}
-          onPressIn={[Function]}
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeVariant="filled"
+          >
+            Allow notifications
+          </Text>
+        </View>
+        <View
           style={
             Array [
               Object {
+                "alignItems": "center",
                 "alignSelf": "stretch",
+                "flexDirection": "row",
                 "flexGrow": 2,
-                "fontSize": 14,
-                "marginHorizontal": 8,
-                "textAlignVertical": "center",
               },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            editable={true}
+            multiline={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "#292a2b",
+                },
+              ]
+            }
+            testID="text-input"
+            value="Monday"
+          />
+        </View>
+        <HeroIcon
+          name="arrow-down"
+          style={
+            Array [
               Object {
                 "color": "#292a2b",
+                "fontSize": 16,
               },
+              undefined,
             ]
           }
-          testID="text-input"
-          value="Monday"
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
         />
       </View>
-      <HeroIcon
-        name="arrow-down"
+      <View
         style={
           Array [
             Object {
-              "color": "#292a2b",
-              "fontSize": 16,
+              "paddingLeft": 16,
             },
             undefined,
           ]
         }
-        testID="input-suffix"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
     </View>
-    <View
-      style={
-        Array [
-          Object {
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          undefined,
-        ]
-      }
-    />
   </View>
   <Modal
     hardwareAccelerated={false}
@@ -820,24 +833,15 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   }
 >
   <View
-    pointerEvents="auto"
-    style={
-      Array [
-        Object {
-          "marginVertical": 8,
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
+    pointerEvents="none"
   >
     <View
+      pointerEvents="auto"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "padding": 16,
+            "marginVertical": 8,
+            "width": "100%",
           },
           undefined,
         ]
@@ -847,135 +851,157 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#8b8d92",
-              "borderRadius": 8,
-              "borderWidth": 1,
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            undefined,
-          ]
-        }
-        themeVariant="readonly"
-      />
-      <View
-        pointerEvents="none"
-        style={
-          Array [
-            Object {
-              "backgroundColor": "#ffffff",
+              "alignItems": "center",
               "flexDirection": "row",
-              "left": 16,
-              "paddingHorizontal": 4,
-              "position": "absolute",
-              "top": -10,
-              "zIndex": 1,
+              "padding": 16,
             },
             undefined,
           ]
         }
       >
-        <Text
+        <View
           style={
             Array [
               Object {
-                "color": "#292a2b",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 12,
-                "letterSpacing": 0.36,
-                "lineHeight": 20,
+                "borderColor": "#292a2b",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
               },
-              Array [
-                Object {
-                  "color": "#8b8d92",
-                },
-                undefined,
-              ],
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              undefined,
             ]
           }
-          testID="input-label"
-          themeFontSize="small"
-          themeFontWeight="regular"
-          themeIntent="body"
-          themeVariant="readonly"
         >
-          Allow notifications
-        </Text>
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "alignSelf": "stretch",
-              "flexDirection": "row",
-              "flexGrow": 2,
-            },
-            undefined,
-          ]
-        }
-      >
-        <TextInput
-          accessibilityState={
-            Object {
-              "disabled": false,
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                  },
+                  undefined,
+                ],
+              ]
             }
-          }
-          editable={false}
-          multiline={true}
-          onBlur={[Function]}
-          onChangeText={[Function]}
-          onFocus={[Function]}
-          onPressIn={[Function]}
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeVariant="filled"
+          >
+            Allow notifications
+          </Text>
+        </View>
+        <View
           style={
             Array [
               Object {
+                "alignItems": "center",
                 "alignSelf": "stretch",
+                "flexDirection": "row",
                 "flexGrow": 2,
-                "fontSize": 14,
-                "marginHorizontal": 8,
-                "textAlignVertical": "center",
               },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            editable={true}
+            multiline={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "#292a2b",
+                },
+              ]
+            }
+            testID="text-input"
+            value="Monday"
+          />
+        </View>
+        <HeroIcon
+          name="arrow-down"
+          style={
+            Array [
               Object {
                 "color": "#292a2b",
+                "fontSize": 16,
               },
+              undefined,
             ]
           }
-          testID="text-input"
-          value="Monday"
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
         />
       </View>
-      <HeroIcon
-        name="arrow-down"
+      <View
         style={
           Array [
             Object {
-              "color": "#292a2b",
-              "fontSize": 16,
+              "paddingLeft": 16,
             },
             undefined,
           ]
         }
-        testID="input-suffix"
-        themeIntent="text"
-        themeSize="xsmall"
-      />
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
     </View>
-    <View
-      style={
-        Array [
-          Object {
-            "flex": 1,
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          undefined,
-        ]
-      }
-    />
   </View>
   <Modal
     hardwareAccelerated={false}

package/src/components/Select/SingleSelect/index.tsx

@@ -1,6 +1,5 @@
-import { useTheme } from '@emotion/react';
 import React, { useState } from 'react';
-import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
+import { StyleProp, ViewStyle, TouchableOpacity, View } from 'react-native';
 
 import { OptionType } from '../types';
 import BottomSheet from '../../BottomSheet';
@@ -47,26 +46,22 @@ const SingleSelect = <T,>({
   label,
   onConfirm,
 }: SingleSelectProps<T>) => {
-  const theme = useTheme();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState<T | null>(value);
   const displayedValue = options.find(opt => value === opt.value)?.text;
 
   return (
     <TouchableOpacity onPress={() => setOpen(true)}>
-      <TextInput
-        label={label}
-        value={displayedValue}
-        onPressIn={() => setOpen(true)}
-        editable={false}
-        // when input is not editable on Android, the text color is gray
-        // hence, adding this to make the text color the same as iOS
-        textStyle={{ color: theme.colors.text }}
-        suffix="arrow-down"
-        multiline
-        style={style}
-        testID={testID}
-      />
+      <View pointerEvents="none">
+        <TextInput
+          label={label}
+          value={displayedValue}
+          suffix="arrow-down"
+          multiline
+          style={style}
+          testID={testID}
+        />
+      </View>
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}

package/src/components/TextInput/StyledTextInput.tsx

@@ -60,7 +60,6 @@ const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
   fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
 }));
 const StyledErrorContainer = styled(View)(({ theme }) => ({
-  marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
   marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
   flexDirection: 'row',
   alignItems: 'center',
@@ -88,7 +87,6 @@ const StyledMaxLengthMessage = styled(Typography.Text)<{
 
 const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
   fontSize: theme.__hd__.textInput.fontSizes.error,
-  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
 }));
 
 const StyledTextInput = styled(TextInput)(({ theme }) => ({
@@ -126,8 +124,12 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
   flexGrow: 2,
 }));
 
-const StyledErrorAndHelpTextContainer = styled(View)(() => ({
-  flex: 1,
+const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
+  paddingLeft:
+    theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
+}));
+
+const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
 }));
@@ -149,4 +151,5 @@ export {
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
+  StyledErrorAndMaxLengthContainer,
 };

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -711,7 +711,6 @@ exports[`StyledErrorMessageContainer renders correctly 1`] = `
         "flex": 1,
         "flexDirection": "row",
         "flexGrow": 4,
-        "marginLeft": 16,
         "marginRight": 4,
       },
       undefined,