@hero-design/rn 8.51.0 → 8.52.1

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

@@ -218,7 +218,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         [
           {
             "minHeight": 16,
-            "paddingLeft": 16,
+            "paddingHorizontal": 16,
             "paddingTop": 2,
           },
           undefined,
@@ -229,6 +229,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         style={
           [
             {
+              "alignItems": "flex-start",
               "flexDirection": "row",
               "justifyContent": "space-between",
             },
@@ -535,7 +536,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         [
           {
             "minHeight": 16,
-            "paddingLeft": 16,
+            "paddingHorizontal": 16,
             "paddingTop": 2,
           },
           undefined,
@@ -546,6 +547,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         style={
           [
             {
+              "alignItems": "flex-start",
               "flexDirection": "row",
               "justifyContent": "space-between",
             },

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

@@ -239,7 +239,7 @@ exports[`rendering allows custom renderer 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -250,6 +250,7 @@ exports[`rendering allows custom renderer 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -1770,7 +1771,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -1781,6 +1782,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -2061,7 +2063,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -2072,6 +2074,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -3811,7 +3814,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -3822,6 +3825,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -4102,7 +4106,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -4113,6 +4117,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -5419,7 +5424,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -5430,6 +5435,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },

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

@@ -238,7 +238,7 @@ exports[`rendering allows custom renderer 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -249,6 +249,7 @@ exports[`rendering allows custom renderer 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -1685,7 +1686,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -1696,6 +1697,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -1976,7 +1978,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -1987,6 +1989,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -3586,7 +3589,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -3597,6 +3600,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },
@@ -3877,7 +3881,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               [
                 {
                   "minHeight": 16,
-                  "paddingLeft": 16,
+                  "paddingHorizontal": 16,
                   "paddingTop": 2,
                 },
                 undefined,
@@ -3888,6 +3892,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
               style={
                 [
                   {
+                    "alignItems": "flex-start",
                     "flexDirection": "row",
                     "justifyContent": "space-between",
                   },

package/src/components/Swipeable/__tests__/__snapshots__/index.spec.tsx.snap

@@ -10,37 +10,55 @@ exports[`Swipeable renders correctly with variant=card 1`] = `
 >
   <View>
     <View
-      containerStyle={
-        {
-          "borderRadius": 8,
-        }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          undefined,
+        ]
       }
-      onSwipeableClose={[Function]}
-      onSwipeableLeftOpen={[Function]}
-      onSwipeableRightOpen={[Function]}
-      renderLeftActions={[Function]}
-      renderRightActions={[Function]}
     >
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.48,
-              "lineHeight": 22,
-            },
-            undefined,
-          ]
+      <View
+        childrenContainerStyle={
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "position": "relative",
+            "width": 4,
+          }
+        }
+        containerStyle={
+          {
+            "borderRadius": 8,
+          }
         }
-        themeIntent="body"
-        themeTypeface="neutral"
-        themeVariant="small"
+        onSwipeableClose={[Function]}
+        onSwipeableLeftOpen={[Function]}
+        onSwipeableRightOpen={[Function]}
+        renderLeftActions={[Function]}
+        renderRightActions={[Function]}
       >
-        Swipeable Item
-      </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Swipeable Item
+        </Text>
+      </View>
     </View>
   </View>
   <View
@@ -76,37 +94,55 @@ exports[`Swipeable renders correctly with variant=full-width 1`] = `
 >
   <View>
     <View
-      containerStyle={
-        {
-          "borderRadius": 0,
-        }
+      onLayout={[Function]}
+      style={
+        [
+          {},
+          undefined,
+        ]
       }
-      onSwipeableClose={[Function]}
-      onSwipeableLeftOpen={[Function]}
-      onSwipeableRightOpen={[Function]}
-      renderLeftActions={[Function]}
-      renderRightActions={[Function]}
     >
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.48,
-              "lineHeight": 22,
-            },
-            undefined,
-          ]
+      <View
+        childrenContainerStyle={
+          {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 8,
+            "position": "relative",
+            "width": 4,
+          }
+        }
+        containerStyle={
+          {
+            "borderRadius": 0,
+          }
         }
-        themeIntent="body"
-        themeTypeface="neutral"
-        themeVariant="small"
+        onSwipeableClose={[Function]}
+        onSwipeableLeftOpen={[Function]}
+        onSwipeableRightOpen={[Function]}
+        renderLeftActions={[Function]}
+        renderRightActions={[Function]}
       >
-        Swipeable Item
-      </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Swipeable Item
+        </Text>
+      </View>
     </View>
   </View>
   <View

package/src/components/Swipeable/index.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-native-gesture-handler';
 import SwipeableAction from './SwipeableAction';
 import { useTheme } from '../../theme';
+import Box from '../Box';
 
 type State = 'closed' | 'leftOpen' | 'rightOpen';
 // We are supporting both v1 and v2 of RNGH at the same time.
@@ -90,6 +91,8 @@ const renderActions = (
         width,
         flexDirection: 'row',
         transform: [{ translateX: trans }],
+        zIndex: -99,
+        position: 'relative',
       }}
     >
       {actions}
@@ -111,6 +114,7 @@ const Swipeable = ({
   const theme = useTheme();
   const { width } = useWindowDimensions();
   const swipeableRef = useRef<RnghSwipeable>(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
 
   const renderLeftActions = useCallback(
     (progress: Animated.AnimatedInterpolation<string | number>) =>
@@ -146,23 +150,33 @@ const Swipeable = ({
 
   return (
     <GestureHandlerRootView>
-      <RnghSwipeable
-        {...swipeableProps}
-        ref={swipeableRef}
-        {...(leftActions !== undefined && { renderLeftActions })}
-        {...(rightActions !== undefined && { renderRightActions })}
-        onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
-        onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
-        onSwipeableClose={() => onStateChange?.('closed')}
-        containerStyle={{
-          borderRadius:
-            variant === 'card'
-              ? theme.__hd__.swipeable.radii.swipeableContainer
-              : 0,
-        }}
-      >
-        {children}
-      </RnghSwipeable>
+      <Box onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}>
+        <RnghSwipeable
+          {...swipeableProps}
+          ref={swipeableRef}
+          {...(leftActions !== undefined && { renderLeftActions })}
+          {...(rightActions !== undefined && { renderRightActions })}
+          onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
+          onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
+          onSwipeableClose={() => onStateChange?.('closed')}
+          containerStyle={{
+            borderRadius:
+              variant === 'card'
+                ? theme.__hd__.swipeable.radii.swipeableContainer
+                : 0,
+          }}
+          childrenContainerStyle={{
+            backgroundColor:
+              theme.__hd__.swipeable.colors.defaultContainerBackground,
+            position: 'relative',
+            width:
+              containerWidth + theme.__hd__.swipeable.space.containerExtraWidth,
+            borderRadius: theme.__hd__.swipeable.radii.swipeableContainer,
+          }}
+        >
+          {children}
+        </RnghSwipeable>
+      </Box>
     </GestureHandlerRootView>
   );
 };

package/src/components/TextInput/StyledTextInput.tsx

@@ -56,8 +56,6 @@ const StyledMaxLengthMessage = styled(Typography.Caption)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
   color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
-  marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
-  alignSelf: 'flex-end',
   flex: 1,
   flexGrow: 1,
   textAlign: 'right',
@@ -112,8 +110,8 @@ const StyledTextInputAndLabelContainer = styled(View)(() => ({
 }));
 
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
-  paddingLeft:
-    theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
+  paddingHorizontal:
+    theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
   minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
   paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
 }));
@@ -121,6 +119,7 @@ const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
 const StyledErrorAndMaxLengthContainer = styled(View)(() => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
+  alignItems: 'flex-start',
 }));
 
 export {

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

@@ -777,11 +777,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState default 1`] =
         },
         [
           {
-            "alignSelf": "flex-end",
             "color": "#001f23",
             "flex": 1,
             "flexGrow": 1,
-            "marginRight": 4,
             "textAlign": "right",
           },
           undefined,
@@ -838,11 +836,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState disabled 1`] =
         },
         [
           {
-            "alignSelf": "flex-end",
             "color": "#bfc1c5",
             "flex": 1,
             "flexGrow": 1,
-            "marginRight": 4,
             "textAlign": "right",
           },
           undefined,
@@ -899,11 +895,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
         },
         [
           {
-            "alignSelf": "flex-end",
             "color": "#cb300a",
             "flex": 1,
             "flexGrow": 1,
-            "marginRight": 4,
             "textAlign": "right",
           },
           undefined,
@@ -960,11 +954,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState filled 1`] = `
         },
         [
           {
-            "alignSelf": "flex-end",
             "color": "#001f23",
             "flex": 1,
             "flexGrow": 1,
-            "marginRight": 4,
             "textAlign": "right",
           },
           undefined,
@@ -1021,11 +1013,9 @@ exports[`StyledMaxLengthMessage renders correctly with themeState readonly 1`] =
         },
         [
           {
-            "alignSelf": "flex-end",
             "color": "#808f91",
             "flex": 1,
             "flexGrow": 1,
-            "marginRight": 4,
             "textAlign": "right",
           },
           undefined,