@hero-design/rn 8.42.4 → 8.43.0

package/package.json

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

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

@@ -1,287 +1,273 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `null`;
+exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
 
-exports[`BottomSheet renders correctly with close state 1`] = `null`;
+exports[`BottomSheet renders correctly with close state 1`] = `
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={false}
+/>
+`;
 
 exports[`BottomSheet renders correctly with open state 1`] = `
-[
+<Modal
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  transparent={true}
+  visible={true}
+>
   <View
-    collapsable={false}
+    pointerEvents="box-none"
     style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
+      [
+        {
+          "bottom": 0,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
   >
     <View
-      pointerEvents="box-none"
+      onLayout={[Function]}
       style={
         [
+          [
+            {
+              "flex": 1,
+              "flexDirection": "column-reverse",
+            },
+            undefined,
+          ],
           {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "paddingBottom": 0,
           },
-          undefined,
         ]
       }
     >
       <View
-        onLayout={[Function]}
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            [
+          {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <RCTSafeAreaView
+        collapsable={false}
+        emulateUnlessSupported={true}
+        style={
+          {
+            "backgroundColor": "#ffffff",
+            "borderTopLeftRadius": 16,
+            "borderTopRightRadius": 16,
+            "elevation": 10,
+            "maxHeight": "94%",
+            "shadowColor": "#001f23",
+            "shadowOffset": {
+              "height": 3,
+              "width": 0,
+            },
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
+            "transform": [
               {
-                "flex": 1,
-                "flexDirection": "column-reverse",
+                "scaleY": 1,
+              },
+              {
+                "translateY": 1334,
               },
-              undefined,
             ],
-            {
-              "paddingBottom": 0,
-            },
-          ]
+            "width": "100%",
+          }
         }
       >
         <View
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
           style={
-            {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          collapsable={false}
-          emulateUnlessSupported={true}
-          style={
-            {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
-              "elevation": 10,
-              "maxHeight": "94%",
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
+            [
+              {
+                "flexDirection": "row",
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
-              "transform": [
-                {
-                  "scaleY": 1,
-                },
-                {
-                  "translateY": 1334,
-                },
-              ],
-              "width": "100%",
-            }
+              undefined,
+            ]
           }
         >
           <View
             style={
               [
                 {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
+                  "flex": 1,
+                  "justifyContent": "center",
                 },
                 undefined,
               ]
             }
           >
-            <View
+            <Text
+              allowFontScaling={false}
               style={
                 [
                   {
-                    "flex": 1,
-                    "justifyContent": "center",
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-SemiBold",
+                    "fontSize": 16,
+                    "letterSpacing": 0.24,
+                    "lineHeight": 24,
                   },
                   undefined,
                 ]
               }
+              themeIntent="body"
+              themeTypeface="neutral"
+              themeVariant="regular-bold"
+            >
+              Title
+            </Text>
+          </View>
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "height": 48,
+                  "justifyContent": "center",
+                  "marginLeft": 12,
+                  "width": 48,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                {
+                  "opacity": 1,
+                }
+              }
+              testID="bottom-sheet-close-icon"
             >
-              <Text
-                allowFontScaling={false}
+              <HeroIcon
+                name="cancel"
                 style={
                   [
                     {
                       "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 16,
-                      "letterSpacing": 0.24,
-                      "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular-bold"
-              >
-                Title
-              </Text>
+                themeIntent="text"
+                themeSize="xsmall"
+              />
             </View>
+          </View>
+        </View>
+        <Text>
+          Content
+        </Text>
+        <View>
+          <View
+            style={
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "flex-end",
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 2,
+                },
+                undefined,
+              ]
+            }
+          >
             <View
+              accessibilityRole="button"
+              accessible={true}
+              collapsable={false}
+              focusable={false}
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "alignItems": "center",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
-                  },
-                  undefined,
-                ]
+                {
+                  "opacity": 1,
+                }
               }
             >
               <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {},
+                  ]
                 }
-                testID="bottom-sheet-close-icon"
               >
-                <HeroIcon
-                  name="cancel"
+                <Text
                   style={
                     [
                       {
-                        "color": "#001f23",
-                        "fontSize": 16,
+                        "color": "#007AFF",
+                        "fontSize": 18,
+                        "margin": 8,
+                        "textAlign": "center",
                       },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="text"
-                  themeSize="xsmall"
-                />
-              </View>
-            </View>
-          </View>
-          <Text>
-            Content
-          </Text>
-          <View>
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityRole="button"
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
-              >
-                <View
-                  style={
-                    [
-                      {},
                     ]
                   }
                 >
-                  <Text
-                    style={
-                      [
-                        {
-                          "color": "#007AFF",
-                          "fontSize": 18,
-                          "margin": 8,
-                          "textAlign": "center",
-                        },
-                      ]
-                    }
-                  >
-                    Footer CTA
-                  </Text>
-                </View>
+                  Footer CTA
+                </Text>
               </View>
             </View>
           </View>
-        </RCTSafeAreaView>
-      </View>
+        </View>
+      </RCTSafeAreaView>
     </View>
-  </View>,
-]
+  </View>
+</Modal>
 `;

package/src/components/BottomSheet/index.tsx

@@ -6,6 +6,7 @@ import {
   Dimensions,
   Easing,
   KeyboardAvoidingViewProps,
+  Modal,
   Platform,
 } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
@@ -18,7 +19,6 @@ import {
   StyledWrapper,
 } from './StyledBottomSheet';
 import ScrollView from './ScrollView';
-import Modal from '../Modal';
 
 interface BottomSheetProps {
   /**

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -1,8 +1,8 @@
-import { View } from 'react-native';
-import styled from '@emotion/native';
-import type { ViewProps } from 'react-native';
 import type { ReactNativeStyle } from '@emotion/native';
+import styled from '@emotion/native';
 import type { Theme } from '@emotion/react';
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
 
 type Intent = 'primary' | 'secondary' | 'danger';
 
@@ -25,13 +25,11 @@ const genLoadingIndicatorStyles = (
   backgroundColor: theme.__hd__.button.colors[intent],
 });
 
-const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>(({ theme }) => ({
+const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>({
   flexDirection: 'row',
   justifyContent: 'center',
   alignItems: 'center',
-  paddingVertical:
-    theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding,
-}));
+});
 
 const StyledLoadingDot = styled(View)<{
   size?: number;
@@ -61,12 +59,10 @@ const StyledLoadingDot = styled(View)<{
   return {
     width: size,
     height: size,
-    marginTop: theme.space.xsmall,
-    marginBottom: theme.space.xsmall,
     marginHorizontal: theme.space.small,
     borderRadius: theme.space.small,
     ...themeStyling(),
   };
 });
 
-export { StyledLoadingIndicatorWrapper, StyledLoadingDot };
+export { StyledLoadingDot, StyledLoadingIndicatorWrapper };

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -8,9 +8,7 @@ exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -28,9 +26,7 @@ exports[`StyledLoadingIndicator has filled-danger style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -48,9 +44,7 @@ exports[`StyledLoadingIndicator has filled-primary style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -68,9 +62,7 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -88,9 +80,7 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -108,9 +98,7 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -128,9 +116,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -148,9 +134,7 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -168,9 +152,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,
@@ -188,9 +170,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
-        "marginBottom": 4,
         "marginHorizontal": 8,
-        "marginTop": 4,
         "width": 12,
       },
       undefined,