@hero-design/rn 8.68.0-alpha.1 → 8.69.0

package/src/components/BottomSheet/Header.tsx

@@ -1,50 +1,73 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import { View } from 'react-native';
-import type { ReactElement } from 'react';
+import { noop } from '../../utils/functions';
 import Button from '../Button';
 import Divider from '../Divider';
 import Typography from '../Typography';
 import {
+  StyledFloatingHeaderWrapper,
   StyledHeader,
   StyledHeaderWrapper,
   StyledIconWrapper,
 } from './StyledBottomSheet';
-import { noop } from '../../utils/functions';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
 
 const Header = ({
   content,
   showDivider,
   onRequestClose = noop,
   showCloseButton,
+  variant = 'fixed',
 }: {
   content: string | ReactElement;
   showDivider: boolean;
   onRequestClose?: () => void;
   showCloseButton: boolean;
-}) => (
-  <>
-    <StyledHeaderWrapper>
-      {typeof content === 'string' ? (
-        <StyledHeader>
-          <Typography.Body variant="regular-bold">{content}</Typography.Body>
-        </StyledHeader>
-      ) : (
-        <View style={{ flex: 1 }}>{content}</View>
-      )}
-      {showCloseButton ? (
-        <StyledIconWrapper>
-          <Button.Icon
-            icon="cancel"
-            onPress={onRequestClose}
-            intent="text"
-            testID="bottom-sheet-close-icon"
-            size="xsmall"
-          />
-        </StyledIconWrapper>
-      ) : null}
-    </StyledHeaderWrapper>
-    {showDivider ? <Divider /> : null}
-  </>
-);
+  variant?: 'fixed' | 'floating';
+}) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <StyledHeaderWrapper>
+        {typeof content === 'string' ? (
+          <StyledHeader>
+            <Typography.Body variant="regular-bold">{content}</Typography.Body>
+          </StyledHeader>
+        ) : (
+          <View style={{ flex: 1 }}>{content}</View>
+        )}
+        {showCloseButton ? (
+          <StyledIconWrapper>
+            {variant === 'fixed' ? (
+              <Button.Icon
+                icon="cancel"
+                onPress={onRequestClose}
+                intent="text"
+                testID="bottom-sheet-close-icon"
+                size="xsmall"
+              />
+            ) : (
+              <StyledFloatingHeaderWrapper
+                onPress={onRequestClose}
+                testID="bottom-sheet-close-icon"
+              >
+                <Icon
+                  icon="cancel"
+                  style={{
+                    fontSize: theme.__hd__.bottomSheet.sizes.floatingCloseIcon,
+                  }}
+                />
+              </StyledFloatingHeaderWrapper>
+            )}
+          </StyledIconWrapper>
+        ) : null}
+      </StyledHeaderWrapper>
+      {showDivider ? <Divider /> : null}
+    </>
+  );
+};
 
 export default Header;

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,4 +1,6 @@
 import styled from '@emotion/native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -6,10 +8,9 @@ import {
   Pressable,
   SafeAreaView,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
-import type { ComponentProps } from 'react';
-import type { ViewProps } from 'react-native';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
@@ -26,6 +27,23 @@ const StyledKeyboardAvoidingView = styled(
   flexDirection: 'column-reverse',
 }));
 
+const StyledFloatingWrapper = styled(AnimatedSafeAreaView)(({ theme }) => ({
+  margin: theme.__hd__.bottomSheet.space.floatingContentMargin,
+}));
+
+const StyledFloatingBottomSheet = styled(Animated.View)(({ theme }) => ({
+  width: '100%',
+  shadowColor: theme.__hd__.bottomSheet.colors.shadow,
+  shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
+  shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
+  shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
+  elevation: theme.__hd__.bottomSheet.shadows.elevation,
+  backgroundColor: theme.__hd__.bottomSheet.colors.background,
+  borderRadius: theme.__hd__.bottomSheet.radii.floating,
+  maxHeight: '100%',
+  padding: theme.__hd__.bottomSheet.space.floatingInnerPadding,
+}));
+
 const StyledBottomSheet = styled(AnimatedSafeAreaView)<
   ComponentProps<typeof AnimatedSafeAreaView>
 >(({ theme }) => ({
@@ -70,20 +88,29 @@ const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  alignItems: 'center',
+  alignItems: 'flex-end',
   justifyContent: 'center',
   width: theme.__hd__.bottomSheet.sizes.closeIcon,
   height: theme.__hd__.bottomSheet.sizes.closeIcon,
   marginLeft: theme.__hd__.bottomSheet.space.closeIconMargin,
 }));
 
+const StyledFloatingHeaderWrapper = styled(TouchableOpacity)(({ theme }) => ({
+  padding: theme.__hd__.bottomSheet.space.floatingHeaderIconPadding,
+  backgroundColor: theme.__hd__.bottomSheet.colors.floatingHeaderIconBackground,
+  borderRadius: theme.__hd__.bottomSheet.radii.floatingHeaderIcon,
+}));
+
 export {
-  StyledWrapper,
-  StyledHeaderWrapper,
-  StyledHeader,
+  StyledBackdrop,
+  StyledBottomSheet,
+  StyledFloatingBottomSheet,
+  StyledFloatingHeaderWrapper,
+  StyledFloatingWrapper,
   StyledFooter,
+  StyledHeader,
+  StyledHeaderWrapper,
   StyledIconWrapper,
-  StyledBottomSheet,
-  StyledBackdrop,
   StyledKeyboardAvoidingView,
+  StyledWrapper,
 };

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

@@ -232,7 +232,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               style={
                 [
                   {
-                    "alignItems": "center",
+                    "alignItems": "flex-end",
                     "height": 48,
                     "justifyContent": "center",
                     "marginLeft": 12,
@@ -398,3 +398,354 @@ exports[`BottomSheet renders correctly with open state 1`] = `
   />
 </View>
 `;
+
+exports[`BottomSheet renders floating BottomSheet correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[MockFunction]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
+    transparent={true}
+    visible={true}
+  >
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "bottom": 0,
+            "flexDirection": "column-reverse",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        style={
+          [
+            [
+              {
+                "flex": 1,
+                "flexDirection": "column-reverse",
+              },
+              undefined,
+            ],
+            {
+              "paddingBottom": 0,
+            },
+          ]
+        }
+      >
+        <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}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "backgroundColor": "#000000",
+              "bottom": 0,
+              "left": 0,
+              "opacity": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+        <RCTSafeAreaView
+          collapsable={false}
+          style={
+            {
+              "margin": 16,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 32,
+                "elevation": 10,
+                "maxHeight": "100%",
+                "padding": 8,
+                "shadowColor": "#001f23",
+                "shadowOffset": {
+                  "height": 3,
+                  "width": 0,
+                },
+                "shadowOpacity": 0.4,
+                "shadowRadius": 16,
+                "transform": [
+                  {
+                    "scaleY": 1,
+                  },
+                  {
+                    "translateY": 1334,
+                  },
+                ],
+                "width": "100%",
+              }
+            }
+          >
+            <View
+              style={
+                [
+                  {
+                    "flexDirection": "row",
+                    "paddingHorizontal": 16,
+                    "paddingVertical": 8,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "flex": 1,
+                      "justifyContent": "center",
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  style={
+                    [
+                      {
+                        "color": "#001f23",
+                        "fontFamily": "BeVietnamPro-SemiBold",
+                        "fontSize": 16,
+                        "letterSpacing": 0.24,
+                        "lineHeight": 24,
+                      },
+                      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={
+                    {
+                      "backgroundColor": "#dadbde",
+                      "borderRadius": 999,
+                      "opacity": 1,
+                      "padding": 8,
+                    }
+                  }
+                  testID="bottom-sheet-close-icon"
+                >
+                  <HeroIcon
+                    name="cancel"
+                    style={
+                      [
+                        {
+                          "color": "#001f23",
+                          "fontSize": 24,
+                        },
+                        {
+                          "fontSize": 12,
+                        },
+                      ]
+                    }
+                    themeIntent="text"
+                    themeSize="medium"
+                  />
+                </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={
+                      [
+                        {},
+                      ]
+                    }
+                  >
+                    <Text
+                      style={
+                        [
+                          {
+                            "color": "#007AFF",
+                            "fontSize": 18,
+                            "margin": 8,
+                            "textAlign": "center",
+                          },
+                        ]
+                      }
+                    >
+                      Footer CTA
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RCTSafeAreaView>
+      </View>
+    </View>
+  </Modal>
+  <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/BottomSheet/__tests__/index.spec.tsx

@@ -26,6 +26,25 @@ describe('BottomSheet', () => {
     expect(getByText('Content')).toBeDefined();
   });
 
+  it('renders floating BottomSheet correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <BottomSheet
+        variant="floating"
+        open
+        header="Title"
+        footer={<Button title="Footer CTA" />}
+        onRequestClose={jest.fn()}
+      >
+        <Content />
+      </BottomSheet>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Footer CTA')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+  });
+
   it('renders correctly with close state', () => {
     const { toJSON } = renderWithTheme(
       <BottomSheet
@@ -86,6 +105,17 @@ describe('BottomSheet', () => {
       expect(getByText('Content')).toBeDefined();
     });
 
+    it('renders floating header correctly', () => {
+      const { getByText } = renderWithTheme(
+        <BottomSheet open header="Title" variant="floating">
+          <Content />
+        </BottomSheet>
+      );
+
+      expect(getByText('Title')).toBeDefined();
+      expect(getByText('Content')).toBeDefined();
+    });
+
     it('renders custom header correctly', () => {
       const { getByText } = renderWithTheme(
         <BottomSheet open header={<Text>Custom Title</Text>}>

package/src/components/BottomSheet/index.tsx

@@ -12,13 +12,15 @@ import {
 import BottomSheetContext from './BottomSheetContext';
 import Footer from './Footer';
 import Header from './Header';
+import ScrollView from './ScrollView';
 import {
   StyledBackdrop,
   StyledBottomSheet,
+  StyledFloatingBottomSheet,
+  StyledFloatingWrapper,
   StyledKeyboardAvoidingView,
   StyledWrapper,
 } from './StyledBottomSheet';
-import ScrollView from './ScrollView';
 
 interface BottomSheetProps {
   /**
@@ -82,6 +84,10 @@ interface BottomSheetProps {
    * Supported orientations for the BottomSheet modal, iOS only.
    */
   supportedOrientations?: ('portrait' | 'landscape')[];
+  /**
+   * Variant of the bottom sheet.
+   */
+  variant?: 'fixed' | 'floating';
 }
 
 const BottomSheet = ({
@@ -100,6 +106,7 @@ const BottomSheet = ({
   testID,
   keyboardAvoidingViewProps = {},
   supportedOrientations = ['portrait'],
+  variant = 'fixed',
 }: BottomSheetProps): JSX.Element => {
   const { height } = Dimensions.get('window');
 
@@ -159,6 +166,12 @@ const BottomSheet = ({
     [setInternalShowDivider]
   );
 
+  const BottomSheetWrapperComponent =
+    variant === 'fixed' ? React.Fragment : StyledFloatingWrapper;
+
+  const BottomSheetComponent =
+    variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
+
   return (
     <Modal
       visible={visible}
@@ -177,35 +190,39 @@ const BottomSheet = ({
             style={{ opacity: interpolateOpacity }}
             onPress={onRequestClose}
           />
-          <StyledBottomSheet
-            style={[
-              style,
-              {
-                transform: [
-                  { scaleY: height > 0 ? 1 : 0 },
-                  {
-                    translateY: interpolateY,
-                  },
-                ],
-              },
-            ]}
-          >
-            {header !== undefined ? (
-              <Header
-                content={header}
-                showDivider={internalShowDivider}
-                onRequestClose={onRequestClose}
-                showCloseButton={showCloseButton}
-              />
-            ) : null}
-            <BottomSheetContext.Provider value={BottomSheetContextValue}>
-              {children}
-            </BottomSheetContext.Provider>
-
-            {footer ? (
-              <Footer showDivider={showDivider}>{footer}</Footer>
-            ) : null}
-          </StyledBottomSheet>
+          <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>
         </StyledKeyboardAvoidingView>
       </StyledWrapper>
     </Modal>