Merge branch 'main' into feat/ses-experimental-setting

android/app/build.gradle

@@ -137,8 +137,8 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1242
-        versionName "7.14.0"
+        versionCode 1245
+        versionName "7.15.0"
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -35,9 +35,10 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     {
       children,
       onClose,
+      onOpen,
       isInteractable = true,
       shouldNavigateBack = true,
-      isFlexible = false,
+      isFullscreen = false,
       ...props
     },
     ref,
@@ -51,7 +52,12 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     const { y: frameY } = useSafeAreaFrame();
     const navigation = useNavigation();
 
-    const onHidden = useCallback(() => {
+    const onOpenCB = useCallback(() => {
+      onOpen?.(!!postCallback.current);
+      postCallback.current?.();
+    }, [onOpen]);
+
+    const onCloseCB = useCallback(() => {
       shouldNavigateBack && navigation.goBack();
       onClose?.(!!postCallback.current);
       postCallback.current?.();
@@ -60,19 +66,23 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
     // Dismiss the sheet when Android back button is pressed.
     useEffect(() => {
       const hardwareBackPress = () => {
-        isInteractable && bottomSheetDialogRef.current?.closeDialog();
+        isInteractable && bottomSheetDialogRef.current?.onCloseDialog();
         return true;
       };
       BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
       return () => {
         BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);
       };
-    }, [onHidden, isInteractable]);
+    }, [onCloseCB, isInteractable]);
 
     useImperativeHandle(ref, () => ({
-      hide: (callback) => {
+      onCloseBottomSheet: (callback) => {
+        postCallback.current = callback;
+        bottomSheetDialogRef.current?.onCloseDialog();
+      },
+      onOpenBottomSheet: (callback) => {
         postCallback.current = callback;
-        bottomSheetDialogRef.current?.closeDialog();
+        bottomSheetDialogRef.current?.onOpenDialog();
       },
     }));
 
@@ -88,14 +98,15 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
         <BottomSheetOverlay
           disabled={!isInteractable}
           onPress={() => {
-            isInteractable && bottomSheetDialogRef.current?.closeDialog();
+            isInteractable && bottomSheetDialogRef.current?.onCloseDialog();
           }}
         />
         <BottomSheetDialog
           isInteractable={isInteractable}
-          onDismissed={onHidden}
+          onClose={onCloseCB}
+          onOpen={onOpenCB}
           ref={bottomSheetDialogRef}
-          isFlexible={isFlexible}
+          isFullscreen={isFullscreen}
         >
           {children}
         </BottomSheetDialog>

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.types.ts

@@ -1,35 +1,20 @@
-import { ViewProps } from 'react-native';
+// Internal dependencies.
+import { BottomSheetDialogProps } from './foundation/BottomSheetDialog/BottomSheetDialog.types';
 
 /**
  * BottomSheet component props.
  */
-export interface BottomSheetProps extends ViewProps {
-  /**
-   * Content to wrap for multiselect.
-   */
-  children: React.ReactNode;
-  /**
-   * Optional callback that gets triggered when sheet is dismissed.
-   */
-  onClose?: (hasPendingAction: boolean) => void;
-  /**
-   * Optional boolean that indicates if sheet is swippable. This affects whether or not tapping on the overlay will dismiss the sheet as well.
-   * @default true
-   */
-  isInteractable?: boolean;
+export interface BottomSheetProps extends BottomSheetDialogProps {
   /**
    * Optional boolean that indicates if sheet isUnmounted from the stack or not when closed.
    * @default true
    */
   shouldNavigateBack?: boolean;
-  /**
-   * Optional boolean that allow the bottomsheet to grow until the top.
-   */
-  isFlexible?: boolean;
 }
 
 export type BottomSheetPostCallback = () => void;
 
 export interface BottomSheetRef {
-  hide: (callback?: BottomSheetPostCallback) => void;
+  onOpenBottomSheet: (callback?: BottomSheetPostCallback) => void;
+  onCloseBottomSheet: (callback?: BottomSheetPostCallback) => void;
 }

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx

@@ -0,0 +1,98 @@
+// Third party dependencies
+import React, { useRef, useEffect } from 'react';
+import { render, act } from '@testing-library/react-native';
+
+// External dependencies.
+import Text from '../../../../Texts/Text';
+
+// Internal dependencies
+import BottomSheetDialog from './BottomSheetDialog';
+import { BottomSheetDialogRef } from './BottomSheetDialog.types';
+
+jest.mock('react-native-safe-area-context', () => {
+  // using disting digits for mock rects to make sure they are not mixed up
+  const inset = { top: 1, right: 2, bottom: 3, left: 4 };
+  const frame = { width: 5, height: 6, x: 7, y: 8 };
+  return {
+    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({ children }) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
+  };
+});
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+describe('BottomSheetDialog', () => {
+  it('should render correctly', () => {
+    const wrapper = render(<BottomSheetDialog />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the component with children', () => {
+    const { getByText } = render(
+      <BottomSheetDialog>
+        <Text>Test Child</Text>
+      </BottomSheetDialog>,
+    );
+    expect(getByText('Test Child')).toBeTruthy();
+  });
+  it('should call onOpen when onOpenDialog ref is called', () => {
+    const onOpenMock = jest.fn();
+    const TestComponent = () => {
+      const ref = useRef<BottomSheetDialogRef>(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          act(() => {
+            ref.current?.onOpenDialog();
+          });
+        }
+      }, []);
+
+      return (
+        <BottomSheetDialog ref={ref} onOpen={onOpenMock}>
+          <Text>Test Child</Text>
+        </BottomSheetDialog>
+      );
+    };
+
+    render(<TestComponent />);
+
+    expect(onOpenMock).toHaveBeenCalled();
+  });
+  it('should call onClose when onCloseDialog ref is called', () => {
+    const onCloseMock = jest.fn();
+    const TestComponent = () => {
+      const ref = useRef<BottomSheetDialogRef>(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          act(() => {
+            ref.current?.onCloseDialog();
+          });
+        }
+      }, []);
+
+      return (
+        <BottomSheetDialog ref={ref} onClose={onCloseMock}>
+          <Text>Test Child</Text>
+        </BottomSheetDialog>
+      );
+    };
+
+    render(<TestComponent />);
+
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+  //   Note: Add Gesture tests when react-native-gesture-handler gets updated
+});