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

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -3,531 +3,711 @@
 exports[`AccordionItem renders correctly when header is an element 1`] = `
 <View
   style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 0,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="default"
 >
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 0,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
+    themeVariant="default"
   >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "letterSpacing": 0.48,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular"
-    >
-      Accordion header
-    </Text>
-    <HeroIcon
-      name="arrow-down"
-      style={
-        [
-          {
-            "color": "#795e90",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-      themeIntent="secondary"
-      themeSize="small"
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
+      accessible={true}
+      collapsable={false}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "opacity": 1,
+        }
       }
-    }
-  >
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Accordion header
+      </Text>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          [
+            {
+              "color": "#795e90",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="secondary"
+        themeSize="small"
+      />
+    </View>
     <View
+      collapsable={false}
+      onLayout={[Function]}
       style={
-        [
-          {
-            "height": 1334,
-          },
-          undefined,
-        ]
+        {
+          "height": 0,
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        }
       }
     >
       <View
-        onLayout={[Function]}
         style={
           [
             {
-              "margin": 0,
-              "padding": 0,
+              "height": 1334,
             },
-            [
-              {
-                "paddingTop": 16,
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
       >
-        <Text
-          allowFontScaling={false}
+        <View
+          onLayout={[Function]}
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "margin": 0,
+                "padding": 0,
               },
-              undefined,
+              [
+                {
+                  "paddingTop": 16,
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Accordion content
-        </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Accordion content
+          </Text>
+        </View>
       </View>
     </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[`AccordionItem renders correctly when header is string 1`] = `
 <View
   style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 0,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="default"
 >
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 0,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
+    themeVariant="default"
   >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "letterSpacing": 0.24,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular-bold"
-    >
-      Accordion header
-    </Text>
-    <HeroIcon
-      name="arrow-down"
-      style={
-        [
-          {
-            "color": "#795e90",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-      themeIntent="secondary"
-      themeSize="small"
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
+      accessible={true}
+      collapsable={false}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "opacity": 1,
+        }
       }
-    }
-  >
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "letterSpacing": 0.24,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular-bold"
+      >
+        Accordion header
+      </Text>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          [
+            {
+              "color": "#795e90",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="secondary"
+        themeSize="small"
+      />
+    </View>
     <View
+      collapsable={false}
+      onLayout={[Function]}
       style={
-        [
-          {
-            "height": 1334,
-          },
-          undefined,
-        ]
+        {
+          "height": 0,
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        }
       }
     >
       <View
-        onLayout={[Function]}
         style={
           [
             {
-              "margin": 0,
-              "padding": 0,
+              "height": 1334,
             },
-            [
-              {
-                "paddingTop": 16,
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
       >
-        <Text
-          allowFontScaling={false}
+        <View
+          onLayout={[Function]}
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "margin": 0,
+                "padding": 0,
               },
-              undefined,
+              [
+                {
+                  "paddingTop": 16,
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Accordion content
-        </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Accordion content
+          </Text>
+        </View>
       </View>
     </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[`AccordionItem renders correctly when open 1`] = `
 <View
   style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 0,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="default"
 >
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 0,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
+    themeVariant="default"
   >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "letterSpacing": 0.24,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular-bold"
-    >
-      Accordion header
-    </Text>
-    <HeroIcon
-      name="arrow-up"
-      style={
-        [
-          {
-            "color": "#795e90",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-      themeIntent="secondary"
-      themeSize="small"
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
+      accessible={true}
+      collapsable={false}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "opacity": 1,
+        }
       }
-    }
-  >
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "letterSpacing": 0.24,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular-bold"
+      >
+        Accordion header
+      </Text>
+      <HeroIcon
+        name="arrow-up"
+        style={
+          [
+            {
+              "color": "#795e90",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="secondary"
+        themeSize="small"
+      />
+    </View>
     <View
+      collapsable={false}
+      onLayout={[Function]}
       style={
-        [
-          {
-            "height": 1334,
-          },
-          undefined,
-        ]
+        {
+          "height": 0,
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        }
       }
     >
       <View
-        onLayout={[Function]}
         style={
           [
             {
-              "margin": 0,
-              "padding": 0,
+              "height": 1334,
             },
-            [
-              {
-                "paddingTop": 16,
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
       >
-        <Text
-          allowFontScaling={false}
+        <View
+          onLayout={[Function]}
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "margin": 0,
+                "padding": 0,
               },
-              undefined,
+              [
+                {
+                  "paddingTop": 16,
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Accordion content
-        </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Accordion content
+          </Text>
+        </View>
       </View>
     </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[`AccordionItem renders correctly when variant is card 1`] = `
 <View
   style={
-    [
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="card"
 >
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "padding": 16,
+        },
+        undefined,
+      ]
     }
+    themeVariant="card"
   >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 16,
-            "letterSpacing": 0.24,
-            "lineHeight": 24,
-          },
-          undefined,
-        ]
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="regular-bold"
-    >
-      Accordion header
-    </Text>
-    <HeroIcon
-      name="arrow-down"
-      style={
-        [
-          {
-            "color": "#795e90",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
       }
-      themeIntent="secondary"
-      themeSize="small"
-    />
-  </View>
-  <View
-    collapsable={false}
-    onLayout={[Function]}
-    style={
-      {
-        "height": 0,
-        "margin": 0,
-        "overflow": "hidden",
-        "padding": 0,
+      accessible={true}
+      collapsable={false}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "opacity": 1,
+        }
       }
-    }
-  >
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 16,
+              "letterSpacing": 0.24,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular-bold"
+      >
+        Accordion header
+      </Text>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          [
+            {
+              "color": "#795e90",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="secondary"
+        themeSize="small"
+      />
+    </View>
     <View
+      collapsable={false}
+      onLayout={[Function]}
       style={
-        [
-          {
-            "height": 1334,
-          },
-          undefined,
-        ]
+        {
+          "height": 0,
+          "margin": 0,
+          "overflow": "hidden",
+          "padding": 0,
+        }
       }
     >
       <View
-        onLayout={[Function]}
         style={
           [
             {
-              "margin": 0,
-              "padding": 0,
+              "height": 1334,
             },
-            [
-              {
-                "paddingTop": 16,
-              },
-              undefined,
-            ],
+            undefined,
           ]
         }
       >
-        <Text
-          allowFontScaling={false}
+        <View
+          onLayout={[Function]}
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "margin": 0,
+                "padding": 0,
               },
-              undefined,
+              [
+                {
+                  "paddingTop": 16,
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
         >
-          Accordion content
-        </Text>
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 24,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="regular"
+          >
+            Accordion content
+          </Text>
+        </View>
       </View>
     </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>
 `;