npm - @hero-design/rn - Versions diffs - 8.43.1 → 8.44.0 - Mend

@hero-design/rn 8.43.1 → 8.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap CHANGED Viewed

@@ -3,100 +3,95 @@
 exports[`CardCarousel android should render correctly on iOS 1`] = `
 <View
   style={
-    [
-      {},
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="cardCarousel"
 >
-  <RCTScrollView
-    bounces={false}
-    contentInset={
-      {
-        "bottom": 0,
-        "left": 24,
-        "right": 24,
-        "top": 0,
-      }
-    }
-    data={
-      [
-        <Body
-          variant="small"
-        >
-           screen 1
-        </Body>,
-        <Body
-          variant="small"
-        >
-           screen 2
-        </Body>,
-      ]
-    }
-    decelerationRate="fast"
-    getItem={[Function]}
-    getItemCount={[Function]}
-    getItemLayout={[Function]}
-    horizontal={true}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    onViewableItemsChanged={[Function]}
-    pagingEnabled={true}
-    removeClippedSubviews={true}
-    renderItem={[Function]}
-    renderToHardwareTextureAndroid={true}
-    scrollEventThrottle={32}
-    showsHorizontalScrollIndicator={false}
-    snapToAlignment="center"
-    snapToInterval={0}
-    stickyHeaderIndices={[]}
-    viewabilityConfig={
-      {
-        "itemVisiblePercentThreshold": 80,
-      }
-    }
-    viewabilityConfigCallbackPairs={
+  <View
+    style={
       [
+        {},
         {
-          "onViewableItemsChanged": [Function],
-          "viewabilityConfig": {
-            "itemVisiblePercentThreshold": 80,
-          },
+          "height": 100,
+          "width": 100,
         },
       ]
     }
+    testID="cardCarousel"
   >
-    <View>
-      <View
-        onFocusCapture={[Function]}
-        style={
-          [
-            {
-              "flexDirection": "row",
-            },
-            null,
-          ]
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
         }
-      >
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={true}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
         <View
+          onFocusCapture={[Function]}
           style={
             [
               {
-                "padding": 8,
-              },
-              {
-                "width": 0,
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
@@ -104,18 +99,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
             style={
               [
                 {
-                  "borderRadius": 8,
-                  "elevation": 3,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 4,
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
@@ -123,64 +111,71 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               style={
                 [
                   {
-                    "borderRadius": 12,
-                    "overflow": "hidden",
-                  },
-                  [
-                    {
-                      "borderRadius": 8,
-                      "flex": 1,
-                      "overflow": "hidden",
+                    "borderRadius": 8,
+                    "elevation": 3,
+                    "flex": 1,
+                    "shadowColor": "#001f23",
+                    "shadowOffset": {
+                      "height": 2,
+                      "width": 0,
                     },
-                    undefined,
-                  ],
+                    "shadowOpacity": 0.12,
+                    "shadowRadius": 4,
+                  },
+                  undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
                 style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 22,
+                      "borderRadius": 12,
+                      "overflow": "hidden",
                     },
-                    undefined,
+                    [
+                      {
+                        "borderRadius": 8,
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      undefined,
+                    ],
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="small"
               >
-                 screen 1
-              </Text>
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 22,
+                      },
+                      undefined,
+                    ]
+                  }
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="small"
+                >
+                   screen 1
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        style={
-          [
-            {
-              "flexDirection": "row",
-            },
-            null,
-          ]
-        }
-      >
         <View
+          onFocusCapture={[Function]}
           style={
             [
               {
-                "padding": 8,
-              },
-              {
-                "width": 0,
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
@@ -188,18 +183,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
             style={
               [
                 {
-                  "borderRadius": 8,
-                  "elevation": 3,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 4,
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
@@ -207,203 +195,238 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               style={
                 [
                   {
-                    "borderRadius": 12,
-                    "overflow": "hidden",
-                  },
-                  [
-                    {
-                      "borderRadius": 8,
-                      "flex": 1,
-                      "overflow": "hidden",
+                    "borderRadius": 8,
+                    "elevation": 3,
+                    "flex": 1,
+                    "shadowColor": "#001f23",
+                    "shadowOffset": {
+                      "height": 2,
+                      "width": 0,
                     },
-                    undefined,
-                  ],
+                    "shadowOpacity": 0.12,
+                    "shadowRadius": 4,
+                  },
+                  undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
                 style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 22,
+                      "borderRadius": 12,
+                      "overflow": "hidden",
                     },
-                    undefined,
+                    [
+                      {
+                        "borderRadius": 8,
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      undefined,
+                    ],
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="small"
               >
-                 screen 2
-              </Text>
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 22,
+                      },
+                      undefined,
+                    ]
+                  }
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="small"
+                >
+                   screen 2
+                </Text>
+              </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-  </RCTScrollView>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        },
+    </RCTScrollView>
+    <View
+      style={
         [
           {
-            "alignSelf": "center",
-            "marginTop": 16,
+            "alignItems": "center",
+            "flexDirection": "row",
           },
-          undefined,
-        ],
-      ]
-    }
-    testID="pageControl"
-  >
-    <View
-      accessibilityState={
-        {
-          "selected": true,
-        }
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
       }
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 1,
-          "width": 24,
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
         }
-      }
-      testID="page-control-indicator0"
-    />
-    <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-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
         }
-      }
-      testID="page-control-indicator1"
-    />
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </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[`CardCarousel ios should render correctly on iOS 1`] = `
 <View
   style={
-    [
-      {},
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="cardCarousel"
 >
-  <RCTScrollView
-    bounces={false}
-    contentInset={
-      {
-        "bottom": 0,
-        "left": 24,
-        "right": 24,
-        "top": 0,
-      }
-    }
-    data={
-      [
-        <Body
-          variant="small"
-        >
-           screen 1
-        </Body>,
-        <Body
-          variant="small"
-        >
-           screen 2
-        </Body>,
-      ]
-    }
-    decelerationRate="fast"
-    getItem={[Function]}
-    getItemCount={[Function]}
-    getItemLayout={[Function]}
-    horizontal={true}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    onViewableItemsChanged={[Function]}
-    pagingEnabled={true}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    renderToHardwareTextureAndroid={true}
-    scrollEventThrottle={32}
-    showsHorizontalScrollIndicator={false}
-    snapToAlignment="center"
-    snapToInterval={0}
-    stickyHeaderIndices={[]}
-    viewabilityConfig={
-      {
-        "itemVisiblePercentThreshold": 80,
-      }
-    }
-    viewabilityConfigCallbackPairs={
+  <View
+    style={
       [
+        {},
         {
-          "onViewableItemsChanged": [Function],
-          "viewabilityConfig": {
-            "itemVisiblePercentThreshold": 80,
-          },
+          "height": 100,
+          "width": 100,
         },
       ]
     }
+    testID="cardCarousel"
   >
-    <View>
-      <View
-        onFocusCapture={[Function]}
-        style={
-          [
-            {
-              "flexDirection": "row",
-            },
-            null,
-          ]
+    <RCTScrollView
+      bounces={false}
+      contentInset={
+        {
+          "bottom": 0,
+          "left": 24,
+          "right": 24,
+          "top": 0,
         }
-      >
+      }
+      data={
+        [
+          <Body
+            variant="small"
+          >
+             screen 1
+          </Body>,
+          <Body
+            variant="small"
+          >
+             screen 2
+          </Body>,
+        ]
+      }
+      decelerationRate="fast"
+      getItem={[Function]}
+      getItemCount={[Function]}
+      getItemLayout={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      renderToHardwareTextureAndroid={true}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      snapToAlignment="center"
+      snapToInterval={0}
+      stickyHeaderIndices={[]}
+      viewabilityConfig={
+        {
+          "itemVisiblePercentThreshold": 80,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "itemVisiblePercentThreshold": 80,
+            },
+          },
+        ]
+      }
+    >
+      <View>
         <View
+          onFocusCapture={[Function]}
           style={
             [
               {
-                "padding": 8,
-              },
-              {
-                "width": 0,
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
@@ -411,18 +434,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
             style={
               [
                 {
-                  "borderRadius": 8,
-                  "elevation": 3,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 4,
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
@@ -430,64 +446,71 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               style={
                 [
                   {
-                    "borderRadius": 12,
-                    "overflow": "hidden",
-                  },
-                  [
-                    {
-                      "borderRadius": 8,
-                      "flex": 1,
-                      "overflow": "hidden",
+                    "borderRadius": 8,
+                    "elevation": 3,
+                    "flex": 1,
+                    "shadowColor": "#001f23",
+                    "shadowOffset": {
+                      "height": 2,
+                      "width": 0,
                     },
-                    undefined,
-                  ],
+                    "shadowOpacity": 0.12,
+                    "shadowRadius": 4,
+                  },
+                  undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
                 style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 22,
+                      "borderRadius": 12,
+                      "overflow": "hidden",
                     },
-                    undefined,
+                    [
+                      {
+                        "borderRadius": 8,
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      undefined,
+                    ],
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="small"
               >
-                 screen 1
-              </Text>
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 22,
+                      },
+                      undefined,
+                    ]
+                  }
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="small"
+                >
+                   screen 1
+                </Text>
+              </View>
             </View>
           </View>
         </View>
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        style={
-          [
-            {
-              "flexDirection": "row",
-            },
-            null,
-          ]
-        }
-      >
         <View
+          onFocusCapture={[Function]}
           style={
             [
               {
-                "padding": 8,
-              },
-              {
-                "width": 0,
+                "flexDirection": "row",
               },
+              null,
             ]
           }
         >
@@ -495,18 +518,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
             style={
               [
                 {
-                  "borderRadius": 8,
-                  "elevation": 3,
-                  "flex": 1,
-                  "shadowColor": "#001f23",
-                  "shadowOffset": {
-                    "height": 2,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.12,
-                  "shadowRadius": 4,
+                  "padding": 8,
+                },
+                {
+                  "width": 0,
                 },
-                undefined,
               ]
             }
           >
@@ -514,102 +530,142 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               style={
                 [
                   {
-                    "borderRadius": 12,
-                    "overflow": "hidden",
-                  },
-                  [
-                    {
-                      "borderRadius": 8,
-                      "flex": 1,
-                      "overflow": "hidden",
+                    "borderRadius": 8,
+                    "elevation": 3,
+                    "flex": 1,
+                    "shadowColor": "#001f23",
+                    "shadowOffset": {
+                      "height": 2,
+                      "width": 0,
                     },
-                    undefined,
-                  ],
+                    "shadowOpacity": 0.12,
+                    "shadowRadius": 4,
+                  },
+                  undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
                 style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 22,
+                      "borderRadius": 12,
+                      "overflow": "hidden",
                     },
-                    undefined,
+                    [
+                      {
+                        "borderRadius": 8,
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      undefined,
+                    ],
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="small"
               >
-                 screen 2
-              </Text>
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-Regular",
+                        "fontSize": 14,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 22,
+                      },
+                      undefined,
+                    ]
+                  }
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="small"
+                >
+                   screen 2
+                </Text>
+              </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-  </RCTScrollView>
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-        },
+    </RCTScrollView>
+    <View
+      style={
         [
           {
-            "alignSelf": "center",
-            "marginTop": 16,
+            "alignItems": "center",
+            "flexDirection": "row",
           },
-          undefined,
-        ],
-      ]
-    }
-    testID="pageControl"
-  >
-    <View
-      accessibilityState={
-        {
-          "selected": true,
-        }
+          [
+            {
+              "alignSelf": "center",
+              "marginTop": 16,
+            },
+            undefined,
+          ],
+        ]
       }
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "height": 8,
-          "marginHorizontal": 8,
-          "opacity": 1,
-          "width": 24,
+      testID="pageControl"
+    >
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
         }
-      }
-      testID="page-control-indicator0"
-    />
-    <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-indicator0"
+      />
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
         }
-      }
-      testID="page-control-indicator1"
-    />
+        collapsable={false}
+        style={
+          {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+    </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>
 `;