@hero-design/rn 8.101.1 → 8.101.2-alpha.1

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

@@ -156,215 +156,232 @@ exports[`BottomSheet renders correctly with open state 1`] = `
             }
           }
         />
-        <RCTSafeAreaView
-          collapsable={false}
+        <RNCSafeAreaView
+          edges={
+            {
+              "bottom": "off",
+              "left": "additive",
+              "right": "additive",
+              "top": "additive",
+            }
+          }
           style={
             {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
               "maxHeight": "94%",
-              "transform": [
-                {
-                  "scaleY": 1,
-                },
-                {
-                  "translateY": 1334,
-                },
-              ],
-              "width": "100%",
             }
           }
         >
           <View
+            collapsable={false}
             style={
-              [
-                {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
-                },
-                undefined,
-              ]
+              {
+                "backgroundColor": "#ffffff",
+                "borderTopLeftRadius": 16,
+                "borderTopRightRadius": 16,
+                "maxHeight": "100%",
+                "paddingBottom": 24,
+                "transform": [
+                  {
+                    "scaleY": 1,
+                  },
+                  {
+                    "translateY": 1334,
+                  },
+                ],
+                "width": "100%",
+              }
             }
           >
             <View
               style={
                 [
                   {
-                    "flex": 1,
-                    "justifyContent": "center",
+                    "flexDirection": "row",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
                   },
                   undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
                 style={
                   [
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
-                      "fontSize": 16,
-                      "letterSpacing": 0.24,
-                      "lineHeight": 24,
+                      "flex": 1,
+                      "justifyContent": "center",
                     },
                     undefined,
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular-bold"
               >
-                Title
-              </Text>
-            </View>
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "flex-end",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                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
+                  allowFontScaling={false}
                   style={
                     [
                       {
                         "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-SemiBold",
                         "fontSize": 16,
+                        "letterSpacing": 0.24,
+                        "lineHeight": 24,
                       },
                       undefined,
                     ]
                   }
-                  themeIntent="text"
-                  themeSize="xsmall"
-                />
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="regular-bold"
+                >
+                  Title
+                </Text>
               </View>
-            </View>
-          </View>
-          <Text>
-            Content
-          </Text>
-          <View>
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
               <View
-                accessibilityRole="button"
-                accessibilityState={
-                  {
-                    "busy": undefined,
-                    "checked": undefined,
-                    "disabled": undefined,
-                    "expanded": undefined,
-                    "selected": undefined,
-                  }
-                }
-                accessibilityValue={
-                  {
-                    "max": undefined,
-                    "min": undefined,
-                    "now": undefined,
-                    "text": undefined,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={false}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
                 style={
-                  {
-                    "opacity": 1,
-                  }
+                  [
+                    {
+                      "alignItems": "flex-end",
+                      "height": 48,
+                      "justifyContent": "center",
+                      "marginLeft": 12,
+                      "width": 48,
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  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
+                  <HeroIcon
+                    name="cancel"
                     style={
                       [
                         {
-                          "color": "#007AFF",
-                          "fontSize": 18,
-                          "margin": 8,
-                          "textAlign": "center",
+                          "color": "#001f23",
+                          "fontSize": 16,
                         },
+                        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"
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  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={
+                      [
+                        {},
                       ]
                     }
                   >
-                    Footer CTA
-                  </Text>
+                    <Text
+                      style={
+                        [
+                          {
+                            "color": "#007AFF",
+                            "fontSize": 18,
+                            "margin": 8,
+                            "textAlign": "center",
+                          },
+                        ]
+                      }
+                    >
+                      Footer CTA
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
           </View>
-        </RCTSafeAreaView>
+        </RNCSafeAreaView>
       </View>
     </View>
   </Modal>

package/src/components/BottomSheet/index.tsx

@@ -10,14 +10,12 @@ import {
   Platform,
 } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
+import ContentContainer from './ContentContainer';
 import Footer from './Footer';
 import Header from './Header';
 import ScrollView from './ScrollView';
 import {
   StyledBackdrop,
-  StyledBottomSheet,
-  StyledFloatingBottomSheet,
-  StyledFloatingWrapper,
   StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
@@ -168,12 +166,6 @@ const BottomSheet = ({
     [setInternalShowDivider]
   );
 
-  const BottomSheetWrapperComponent =
-    variant === 'fixed' ? React.Fragment : StyledFloatingWrapper;
-
-  const BottomSheetComponent =
-    variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
-
   return (
     <Modal
       visible={visible}
@@ -192,39 +184,36 @@ const BottomSheet = ({
             style={{ opacity: interpolateOpacity }}
             onPress={onRequestClose}
           />
-          <BottomSheetWrapperComponent>
-            <BottomSheetComponent
-              style={[
-                style,
-                {
-                  transform: [
-                    { scaleY: height > 0 ? 1 : 0 },
-                    {
-                      translateY: interpolateY,
-                    },
-                  ],
-                },
-              ]}
-            >
-              {header !== undefined ? (
-                <Header
-                  variant={variant}
-                  content={header}
-                  showDivider={internalShowDivider}
-                  onRequestClose={onRequestClose}
-                  showCloseButton={showCloseButton}
-                />
-              ) : null}
-
-              <BottomSheetContext.Provider value={BottomSheetContextValue}>
-                {children}
-              </BottomSheetContext.Provider>
-
-              {footer ? (
-                <Footer showDivider={showDivider}>{footer}</Footer>
-              ) : null}
-            </BottomSheetComponent>
-          </BottomSheetWrapperComponent>
+          <ContentContainer
+            variant={variant}
+            style={[
+              style,
+              {
+                transform: [
+                  { scaleY: height > 0 ? 1 : 0 },
+                  { translateY: interpolateY },
+                ],
+              },
+            ]}
+          >
+            {header !== undefined ? (
+              <Header
+                variant={variant}
+                content={header}
+                showDivider={internalShowDivider}
+                onRequestClose={onRequestClose}
+                showCloseButton={showCloseButton}
+              />
+            ) : null}
+
+            <BottomSheetContext.Provider value={BottomSheetContextValue}>
+              {children}
+            </BottomSheetContext.Provider>
+
+            {footer ? (
+              <Footer showDivider={showDivider}>{footer}</Footer>
+            ) : null}
+          </ContentContainer>
         </StyledKeyboardAvoidingView>
       </StyledWrapper>
     </Modal>