@hero-design/rn 8.44.0-alpha.0 → 8.44.0

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

@@ -2,497 +2,693 @@
 
 exports[`Skeleton renders correctly by default 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#f6f6f7",
-          "borderRadius": 16,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="light"
-  themeVariant="rounded"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#f6f6f7",
             "borderRadius": 16,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="light"
     themeVariant="rounded"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294375159,
-          4292533214,
-          4294375159,
+          {},
+          [
+            {
+              "borderRadius": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="rounded"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294375159,
+            4292533214,
+            4294375159,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is dark and variant is circular 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 999,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="dark"
-  themeVariant="circular"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#ffffff",
             "borderRadius": 999,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="dark"
     themeVariant="circular"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294967295,
-          4292533214,
-          4294967295,
+          {},
+          [
+            {
+              "borderRadius": 999,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="circular"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294967295,
+            4292533214,
+            4294967295,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is dark and variant is rectangular 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 0,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="dark"
-  themeVariant="rectangular"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#ffffff",
             "borderRadius": 0,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="dark"
     themeVariant="rectangular"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294967295,
-          4292533214,
-          4294967295,
+          {},
+          [
+            {
+              "borderRadius": 0,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="rectangular"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294967295,
+            4292533214,
+            4294967295,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is dark and variant is rounded 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#ffffff",
-          "borderRadius": 16,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="dark"
-  themeVariant="rounded"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#ffffff",
             "borderRadius": 16,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="dark"
     themeVariant="rounded"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294967295,
-          4292533214,
-          4294967295,
+          {},
+          [
+            {
+              "borderRadius": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="rounded"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294967295,
+            4292533214,
+            4294967295,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is light and variant is circular 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#f6f6f7",
-          "borderRadius": 999,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="light"
-  themeVariant="circular"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#f6f6f7",
             "borderRadius": 999,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="light"
     themeVariant="circular"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294375159,
-          4292533214,
-          4294375159,
+          {},
+          [
+            {
+              "borderRadius": 999,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="circular"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294375159,
+            4292533214,
+            4294375159,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is light and variant is rectangular 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#f6f6f7",
-          "borderRadius": 0,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="light"
-  themeVariant="rectangular"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#f6f6f7",
             "borderRadius": 0,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="light"
     themeVariant="rectangular"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294375159,
-          4292533214,
-          4294375159,
+          {},
+          [
+            {
+              "borderRadius": 0,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="rectangular"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294375159,
+            4292533214,
+            4294375159,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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[`Skeleton renders correctly when intent is light and variant is rounded 1`] = `
 <View
-  onLayout={[Function]}
   style={
-    [
-      {},
-      [
-        {
-          "backgroundColor": "#f6f6f7",
-          "borderRadius": 16,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeIntent="light"
-  themeVariant="rounded"
 >
   <View
+    onLayout={[Function]}
     style={
       [
         {},
         [
           {
+            "backgroundColor": "#f6f6f7",
             "borderRadius": 16,
-            "overflow": "hidden",
           },
           undefined,
         ],
       ]
     }
+    themeIntent="light"
     themeVariant="rounded"
   >
-    <BVLinearGradient
-      collapsable={false}
-      colors={
+    <View
+      style={
         [
-          4294375159,
-          4292533214,
-          4294375159,
+          {},
+          [
+            {
+              "borderRadius": 16,
+              "overflow": "hidden",
+            },
+            undefined,
+          ],
         ]
       }
-      endPoint={
-        {
-          "x": 1,
-          "y": 0,
+      themeVariant="rounded"
+    >
+      <BVLinearGradient
+        collapsable={false}
+        colors={
+          [
+            4294375159,
+            4292533214,
+            4294375159,
+          ]
         }
-      }
-      locations={null}
-      startPoint={
-        {
-          "x": 0,
-          "y": 0,
+        endPoint={
+          {
+            "x": 1,
+            "y": 0,
+          }
         }
-      }
-      style={
-        {
-          "height": "100%",
-          "transform": [
-            {
-              "translateX": -0,
-            },
-          ],
-          "width": "100%",
+        locations={null}
+        startPoint={
+          {
+            "x": 0,
+            "y": 0,
+          }
         }
-      }
-    />
+        style={
+          {
+            "height": "100%",
+            "transform": [
+              {
+                "translateX": -0,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+      />
+    </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>
 `;