@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/src/Banner/Banner.tsx

@@ -18,7 +18,7 @@ export function Banner({
   type,
   children,
   icon,
-}: BannerProps): JSX.Element {
+}: BannerProps) {
   const bannerIcon = icon || getBannerIcon(type);
 
   const shouldFlow =
@@ -60,7 +60,7 @@ export function Banner({
   );
 }
 
-function BannerChildren({ children }: PropsWithChildren): JSX.Element {
+function BannerChildren({ children }: PropsWithChildren) {
   if (!children) return <></>;
 
   if (children && typeof children === "string") {
@@ -97,5 +97,7 @@ function getBannerIcon(type: BannerTypes): IconNames | undefined {
       return "help";
     case "error":
       return "alert";
+    case "success":
+      return "checkmark";
   }
 }

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -15,5 +15,8 @@ export const useStyles = buildThemedStyles(tokens => {
     notice: {
       backgroundColor: tokens["color-informative"],
     },
+    success: {
+      backgroundColor: tokens["color-success"],
+    },
   };
 });

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -10,7 +10,7 @@ export interface BannerIconProps {
   readonly type: BannerTypes;
 }
 
-export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+export function BannerIcon({ icon, type }: BannerIconProps) {
   const styles = useStyles();
 
   return (

package/src/Banner/types.ts

@@ -2,7 +2,7 @@ import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 
 export interface BannerStyleProps {
   /**

package/src/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,128 @@
+import React, { useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { View } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Button, Heading, Text } from "@jobber/components-native";
+import { BottomSheet } from "./BottomSheet";
+import type { BottomSheetRef } from "./BottomSheet";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+
+const meta = {
+  title: "Components/Selections/BottomSheet",
+  component: BottomSheet,
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = () => {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.open();
+  };
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.close();
+  };
+
+  return (
+    <SafeAreaProvider>
+      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Heading>Basic BottomSheet</Heading>
+        <Text>
+          Note that due to the differences between React Native Web and React
+          Native, this does not render 100% properly
+        </Text>
+        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
+        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
+      </View>
+      <BottomSheet
+        ref={bottomSheetRef}
+        onClose={() => console.log("closed bottom sheet")}
+        onOpen={() => console.log("opened bottom sheet")}
+      >
+        <BottomSheetOption
+          icon="sendMessage"
+          iconColor="greyBlue"
+          text="Send message"
+          onPress={() => alert("send message")}
+        />
+        <BottomSheetOption
+          icon="phone"
+          iconColor="greyBlue"
+          text="Call a friend"
+          onPress={() => alert("Calling a friend")}
+        />
+        <BottomSheetOption
+          destructive={true}
+          icon="trash"
+          text="Remove"
+          onPress={() => alert("Removed")}
+        />
+      </BottomSheet>
+    </SafeAreaProvider>
+  );
+};
+
+const HeaderFooterInputTextTemplate = () => {
+  const bottomSheetRef = useRef<BottomSheetRef>(null);
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.open();
+  };
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.close();
+  };
+
+  return (
+    <SafeAreaProvider>
+      <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <Heading>Basic BottomSheet</Heading>
+        <Text>
+          Note that due to the differences between React Native Web and React
+          Native, this does not render 100% properly
+        </Text>
+        <Button label="Open Bottom Sheet" onPress={openBottomSheet} />
+        <Button label="Close Bottom Sheet" onPress={closeBottomSheet} />
+      </View>
+      <BottomSheet
+        ref={bottomSheetRef}
+        showCancel={true}
+        heading="BottomSheet Header"
+        onClose={() => console.log("closed bottom sheet")}
+        onOpen={() => console.log("opened bottom sheet")}
+      >
+        <BottomSheetOption
+          icon="sendMessage"
+          iconColor="greyBlue"
+          text="Send message"
+          onPress={() => alert("send message")}
+        />
+        <BottomSheetOption
+          icon="phone"
+          iconColor="greyBlue"
+          text="Call a friend"
+          onPress={() => alert("Calling a friend")}
+        />
+        <BottomSheetOption
+          destructive={true}
+          icon="trash"
+          text="Remove"
+          onPress={() => alert("Removed")}
+        />
+      </BottomSheet>
+    </SafeAreaProvider>
+  );
+};
+
+export const Basic: Story = {
+  render: BasicTemplate,
+  args: {} as Story["args"],
+};
+
+export const HeaderFooterInputText: Story = {
+  render: HeaderFooterInputTextTemplate,
+  args: {} as Story["args"],
+};

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,28 +1,18 @@
-import { Dimensions, StyleSheet } from "react-native";
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const { height } = Dimensions.get("window");
-
 export const useStyles = buildThemedStyles(tokens => {
   const modalBorderRadius = tokens["radius-larger"];
 
   return {
-    overlayModalize: {
-      backgroundColor: "transparent",
-    },
-
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
+    backdrop: {
       backgroundColor: tokens["color-overlay"],
-      height,
     },
-    modal: {
+    background: {
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
-      paddingTop: tokens["space-small"],
     },
-    children: {
-      paddingBottom: tokens["space-small"],
+    footerContainer: {
+      backgroundColor: tokens["color-surface"],
     },
     header: {
       paddingHorizontal: tokens["space-base"],
@@ -34,5 +24,8 @@ export const useStyles = buildThemedStyles(tokens => {
       marginTop: tokens["space-small"],
       marginBottom: tokens["space-smaller"],
     },
+    handle: {
+      display: "none",
+    },
   };
 });

package/src/BottomSheet/BottomSheet.test.tsx

@@ -1,7 +1,6 @@
 import React, { createRef } from "react";
-import { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import { act, render, userEvent, waitFor } from "@testing-library/react-native";
 import { AccessibilityInfo, View } from "react-native";
-import { Host, Portal } from "react-native-portalize";
 import { BottomSheet } from ".";
 import type { BottomSheetRef } from "./BottomSheet";
 import { waitForUntestableRender } from "../utils/test/wait";
@@ -23,62 +22,59 @@ function setup({
   loading?: boolean;
 }) {
   return render(
-    <Host>
-      <Portal>
-        <BottomSheet
-          ref={ref}
-          heading={heading}
-          showCancel={showCancel}
-          loading={loading}
-          onClose={mockOnClose}
-          onOpen={mockOnOpen}
-        >
-          <View>
-            <Text>BottomSheet</Text>
-          </View>
-        </BottomSheet>
-      </Portal>
-    </Host>,
+    <BottomSheet
+      ref={ref}
+      heading={heading}
+      showCancel={showCancel}
+      loading={loading}
+      onClose={mockOnClose}
+      onOpen={mockOnOpen}
+    >
+      <View>
+        <Text>BottomSheet</Text>
+      </View>
+    </BottomSheet>,
   );
 }
 
 it("renders a BottomSheet", async () => {
-  const { getByText } = setup({});
+  const { findByText } = setup({});
 
   await waitForUntestableRender(
     "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
   );
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  expect(getByText("BottomSheet")).toBeDefined();
+  expect(await findByText("BottomSheet")).toBeDefined();
 });
 
 it("renders a BottomSheet with a header", async () => {
   const header = "Hello this is header";
-  const { getByText } = setup({ heading: header });
+  const { findByText } = setup({ heading: header });
 
   await waitForUntestableRender(
     "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
   );
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  expect(getByText(header)).toBeDefined();
+  expect(await findByText(header)).toBeDefined();
 });
 
 it("BottomSheet can be closed with the cancel action", async () => {
-  const { getByText, queryByText } = setup({ showCancel: true });
+  const { findByLabelText, queryByText } = setup({ showCancel: true });
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
-  fireEvent.press(getByText("Cancel"));
+  const cancelButton = await findByLabelText("Cancel");
+  await userEvent.press(cancelButton);
 
   await waitFor(() => {
     expect(queryByText("BottomSheet")).toBeNull();
@@ -93,7 +89,7 @@ describe("when loading is provided and true", () => {
       "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
     );
 
-    act(() => {
+    await act(async () => {
       ref.current?.open();
     });
 
@@ -104,25 +100,25 @@ describe("when loading is provided and true", () => {
 it("calls onClose when BottomSheet is closed", async () => {
   setup({});
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
     ref.current?.close();
   });
 
   await waitFor(() => {
-    expect(mockOnClose).toHaveBeenCalled();
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
 });
 
 it("calls onOpen when BottomSheet is opened", async () => {
   setup({});
 
-  act(() => {
+  await act(async () => {
     ref.current?.open();
   });
 
   await waitFor(() => {
-    expect(mockOnOpen).toHaveBeenCalled();
+    expect(mockOnOpen).toHaveBeenCalledTimes(1);
   });
 });
 
@@ -132,17 +128,16 @@ describe("when there is a screen reader enabled", () => {
       .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
       .mockImplementation(() => Promise.resolve(true));
 
-    const { getByText, queryByText } = setup({});
+    const { findByLabelText, queryByText } = setup({});
 
-    await waitForUntestableRender(
-      "Wait for AccessibilityInfo.isScreenReaderEnabled to resolve",
-    );
-
-    act(() => {
+    await act(async () => {
       ref.current?.open();
     });
 
-    fireEvent.press(getByText("Cancel"));
+    const cancelButton = await findByLabelText("Cancel");
+    expect(cancelButton).toBeDefined();
+
+    await userEvent.press(cancelButton);
 
     await waitFor(() => {
       expect(queryByText("BottomSheet")).toBeNull();

package/src/BottomSheet/BottomSheet.tsx

@@ -1,13 +1,19 @@
-import type { ReactNode, Ref, RefObject } from "react";
-import React, { forwardRef, useState } from "react";
-import { Modalize } from "react-native-modalize";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { ReactNode } from "react";
+import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
-import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import RNBottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
+import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { BottomSheetOption } from "./components/BottomSheetOption";
+import { useBottomSheetBackHandler } from "./hooks/useBottomSheetBackHandler";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
+import { useIsScreenReaderEnabled } from "../hooks";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export interface BottomSheetProps {
@@ -39,71 +45,89 @@ export interface BottomSheetProps {
   readonly onClose?: () => void;
 }
 
-export const BottomSheet = forwardRef(BottomSheetInternal);
-
-export type BottomSheetRef = Modalize | undefined;
-
-function BottomSheetInternal(
-  {
-    children,
-    showCancel,
-    loading = false,
-    heading,
-    onOpen,
-    onClose,
-  }: BottomSheetProps,
-  ref: Ref<BottomSheetRef>,
-) {
-  const isScreenReaderEnabled = useIsScreenReaderEnabled();
-  const [open, setOpen] = useState<boolean>(false);
+export interface BottomSheetRef {
+  open: () => void;
+  close: () => void;
+}
+
+export function BottomSheet({
+  children,
+  showCancel,
+  loading = false,
+  heading,
+  onOpen,
+  onClose,
+  ref,
+}: BottomSheetProps & { readonly ref?: React.Ref<BottomSheetRef> }) {
   const styles = useStyles();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+
+  const cancellable = (showCancel && !loading) || isScreenReaderEnabled;
+
+  const { t } = useAtlantisI18n();
+  const insets = useSafeAreaInsets();
+  const previousIndexRef = useRef(-1);
+  const bottomSheetRef = useRef<RNBottomSheet>(null);
+  const { handleSheetPositionChange } =
+    useBottomSheetBackHandler(bottomSheetRef);
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      bottomSheetRef.current?.expand();
+    },
+    close: () => {
+      close();
+    },
+  }));
+
+  const close = useCallback(() => {
+    bottomSheetRef.current?.close();
+  }, []);
+
+  const handleChange = (index: number) => {
+    // Handle Android back button
+    handleSheetPositionChange(index);
+
+    const previousIndex = previousIndexRef.current;
+
+    if (previousIndex === -1 && index >= 0) {
+      // Transitioned from closed to open
+      dismissKeyboard();
+      onOpen?.();
+    } else if (previousIndex >= 0 && index === -1) {
+      // Transitioned from open to closed
+      dismissKeyboard();
+      onClose?.();
+    }
+
+    previousIndexRef.current = index;
+  };
 
   return (
-    <>
-      {open && <Overlay styles={styles} />}
-      <Modalize
-        ref={ref}
-        adjustToContentHeight={true}
-        modalStyle={styles.modal}
-        overlayStyle={styles.overlayModalize}
-        HeaderComponent={
-          heading && <Header heading={heading} styles={styles} />
-        }
-        FooterComponent={
-          <Footer
-            cancellable={(showCancel && !loading) || isScreenReaderEnabled}
-            onCancel={() => {
-              (ref as RefObject<BottomSheetRef>)?.current?.close();
-            }}
-            styles={styles}
-          />
-        }
-        withHandle={false}
-        withReactModal={isScreenReaderEnabled}
-        onOpen={openModal}
-        onClose={closeModal}
+    <RNBottomSheet
+      ref={bottomSheetRef}
+      index={-1}
+      backdropComponent={Backdrop}
+      backgroundStyle={styles.background}
+      enablePanDownToClose={true}
+      onChange={handleChange}
+      keyboardBlurBehavior="restore"
+      handleStyle={styles.handle}
+    >
+      <BottomSheetView
+        style={{
+          paddingBottom: insets.bottom + tokens["space-small"],
+          paddingTop: tokens["space-small"],
+        }}
       >
-        <View
-          style={
-            !showCancel && !isScreenReaderEnabled ? styles.children : undefined
-          }
-        >
-          {children}
-        </View>
-      </Modalize>
-    </>
+        {heading && <Header heading={heading} styles={styles} />}
+        {children}
+        {cancellable && (
+          <Footer styles={styles} close={close} cancelLabel={t("cancel")} />
+        )}
+      </BottomSheetView>
+    </RNBottomSheet>
   );
-
-  function openModal() {
-    onOpen?.();
-    setOpen(true);
-    dismissKeyboard();
-  }
-
-  function closeModal() {
-    onClose?.();
-    setOpen(false);
-  }
 }
 
 function Header({
@@ -121,31 +145,21 @@ function Header({
 }
 
 function Footer({
-  cancellable,
-  onCancel,
   styles,
+  close,
+  cancelLabel,
 }: {
-  readonly cancellable: boolean;
-  readonly onCancel: () => void;
   readonly styles: ReturnType<typeof useStyles>;
+  readonly close: () => void;
+  readonly cancelLabel: string;
 }) {
-  const insets = useSafeAreaInsets();
-  const { t } = useAtlantisI18n();
-
   return (
-    <View style={{ marginBottom: insets.bottom }}>
-      {cancellable && (
-        <View style={styles.children}>
-          <View style={styles.footerDivider}>
-            <Divider />
-          </View>
-          <BottomSheetOption
-            text={t("cancel")}
-            icon={"remove"}
-            onPress={onCancel}
-          />
-        </View>
-      )}
+    <View>
+      <View style={styles.footerDivider}>
+        <Divider />
+      </View>
+
+      <BottomSheetOption text={cancelLabel} icon="remove" onPress={close} />
     </View>
   );
 }
@@ -156,10 +170,16 @@ function dismissKeyboard() {
   Keyboard.dismiss();
 }
 
-function Overlay({
-  styles,
-}: {
-  readonly styles: ReturnType<typeof useStyles>;
-}) {
-  return <View style={styles.overlay} />;
+function Backdrop(bottomSheetBackdropProps: BottomSheetBackdropProps) {
+  const styles = useStyles();
+
+  return (
+    <BottomSheetBackdrop
+      {...bottomSheetBackdropProps}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      style={styles.backdrop}
+      opacity={1}
+    />
+  );
 }

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -25,7 +25,7 @@ export function BottomSheetOption({
   destructive,
   textTransform = "capitalize",
   onPress,
-}: BottomSheetOptionProps): JSX.Element {
+}: BottomSheetOptionProps) {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
   const styles = useStyles();