@hero-design/rn 8.43.1 → 8.44.0

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

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal renders correctly 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     collapsable={false}
     style={
@@ -15,7 +21,7 @@ exports[`Modal renders correctly 1`] = `
         "top": 0,
       }
     }
-  />,
+  />
   <View
     collapsable={false}
     style={
@@ -54,12 +60,38 @@ exports[`Modal renders correctly 1`] = `
     >
       Modal content
     </Text>
-  </View>,
-]
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Modal renders correctly with transparent 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     collapsable={false}
     style={
@@ -73,7 +105,7 @@ exports[`Modal renders correctly with transparent 1`] = `
         "top": 0,
       }
     }
-  />,
+  />
   <View
     collapsable={false}
     style={
@@ -112,6 +144,26 @@ exports[`Modal renders correctly with transparent 1`] = `
     >
       Modal content
     </Text>
-  </View>,
-]
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;

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

@@ -3,71 +3,99 @@
 exports[`RefreshControl renders correctly 1`] = `
 <View
   style={
-    [
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
-    accessibilityState={
-      {
-        "selected": false,
-      }
-    }
-    collapsable={false}
     style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
-      }
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator0"
-  />
-  <View
-    accessibilityState={
-      {
-        "selected": true,
+  >
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
       }
-    }
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 1,
-        "width": 24,
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
       }
-    }
-    testID="page-control-indicator1"
-  />
-  <View
-    accessibilityState={
-      {
-        "selected": false,
+      testID="page-control-indicator0"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
       }
-    }
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 1,
+          "width": 24,
+        }
       }
+      testID="page-control-indicator1"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator2"
+    />
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator2"
   />
 </View>
 `;

package/src/components/PinInput/__tests__/StyledPinInput.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Wrapper } from '../../ContentNavigator/StyledContentNavigator';
 import { StyledHiddenInput } from '../StyledPinInput';
 
 describe('StyledHiddenInput', () => {
@@ -10,13 +11,17 @@ describe('StyledHiddenInput', () => {
     ${8}           | ${432}
   `(
     'has correct width when pin length is $themePinLength',
-    ({ themePinLength, width }) => {
+    async ({ themePinLength, width }) => {
       const wrapper = renderWithTheme(
-        <StyledHiddenInput themePinLength={themePinLength} />
+        <StyledHiddenInput
+          testID="hidden-input"
+          themePinLength={themePinLength}
+        />
       );
+      const hiddenInput = wrapper.getByTestId('hidden-input');
 
-      expect(wrapper.toJSON()).toHaveStyle({ width });
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(hiddenInput).toHaveStyle({ width });
+      expect(Wrapper).toMatchSnapshot();
     }
   );
 });