feat(components-native): Replace react-native-modalize with react-native-bottom-sheet for ContentOverlay

docs/components/ContentOverlay/Mobile.stories.tsx

@@ -20,6 +20,7 @@ export default {
   },
 } as ComponentMeta<typeof ContentOverlay>;
 
+// TODO: move to storybook v9
 const BasicTemplate: ComponentStory<typeof ContentOverlay> = args => {
   const contentOverlayRef = useRef<ContentOverlayRef>(null);
 

packages/components-native/src/ContentOverlay/ContentOverlay.rebuilt.style.ts

@@ -0,0 +1,66 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
+
+  return {
+    handle: {
+      width: tokens["space-largest"],
+      height: tokens["space-smaller"] + tokens["space-smallest"],
+      backgroundColor: tokens["color-border"],
+      borderRadius: tokens["radius-circle"],
+    },
+
+    backdrop: {
+      backgroundColor: tokens["color-overlay"],
+    },
+
+    background: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+    },
+
+    modalForLargeScreens: {
+      width: 640,
+      alignSelf: "center",
+    },
+
+    header: {
+      flexDirection: "row",
+      backgroundColor: tokens["color-surface"],
+      zIndex: tokens["elevation-base"],
+      minHeight: tokens["space-extravagant"],
+    },
+
+    headerShadow: {
+      ...tokens["shadow-base"],
+    },
+
+    childrenStyle: {
+      // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+      zIndex: -1,
+    },
+
+    dismissButton: {
+      alignItems: "center",
+    },
+
+    hiddenContent: {
+      opacity: 0,
+    },
+
+    title: {
+      flex: 1,
+      justifyContent: "center",
+      paddingLeft: tokens["space-base"],
+    },
+
+    titleWithoutDismiss: {
+      paddingRight: tokens["space-base"],
+    },
+
+    titleWithDismiss: {
+      paddingRight: tokens["space-smaller"],
+    },
+  };
+});

packages/components-native/src/ContentOverlay/ContentOverlay.rebuilt.tsx

@@ -0,0 +1,245 @@
+import React, { useImperativeHandle, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, View, findNodeHandle } from "react-native";
+import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type {
+  BottomSheetBackdropProps,
+  BottomSheetModal as BottomSheetModalType,
+} from "@gorhom/bottom-sheet";
+import type { ContentOverlayRebuiltProps, ModalBackgroundColor } from "./types";
+import { useStyles } from "./ContentOverlay.rebuilt.style";
+import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { IconButton } from "../IconButton";
+import { Heading } from "../Heading";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
+
+function getModalBackgroundColor(
+  variation: ModalBackgroundColor,
+  tokens: ReturnType<typeof useAtlantisTheme>["tokens"],
+) {
+  switch (variation) {
+    case "surface":
+      return tokens["color-surface"];
+    case "background":
+      return tokens["color-surface--background"];
+  }
+}
+
+// eslint-disable-next-line max-statements
+export function ContentOverlayRebuilt({
+  children,
+  title,
+  accessibilityLabel,
+  fullScreen = false,
+  showDismiss = false,
+  isDraggable = true,
+  adjustToContentHeight = false,
+  keyboardShouldPersistTaps = false,
+  scrollEnabled = false,
+  modalBackgroundColor = "surface",
+  onClose,
+  onOpen,
+  onBeforeExit,
+  loading = false,
+  ref,
+}: ContentOverlayRebuiltProps) {
+  const insets = useSafeAreaInsets();
+  const bottomSheetModalRef = useRef<BottomSheetModalType>(null);
+  const previousIndexRef = useRef(-1);
+  const [currentPosition, setCurrentPosition] = useState<number>(-1);
+
+  const styles = useStyles();
+  const { t } = useAtlantisI18n();
+  const { tokens } = useAtlantisTheme();
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+
+  const isFullScreenOrTopPosition =
+    fullScreen || (!adjustToContentHeight && currentPosition === 0);
+  const shouldShowDismiss =
+    showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
+
+  const draggable = onBeforeExit ? false : isDraggable;
+
+  const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
+  const overlayHeader = useRef<View>(null);
+
+  // If isDraggable is true, we always want to have a snap point at 100%
+  // enableDynamicSizing will add another snap point of the content height
+  const snapPoints = useMemo(() => ["100%"], []);
+
+  const onCloseController = () => {
+    if (!onBeforeExit) {
+      bottomSheetModalRef.current?.dismiss();
+    } else {
+      onBeforeExit();
+    }
+  };
+
+  const { handleSheetPositionChange } =
+    useBottomSheetModalBackHandler(onCloseController);
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      bottomSheetModalRef.current?.present();
+    },
+    close: () => {
+      bottomSheetModalRef.current?.dismiss();
+    },
+  }));
+
+  const handleChange = (index: number, position: number) => {
+    const previousIndex = previousIndexRef.current;
+
+    setCurrentPosition(position);
+    handleSheetPositionChange(index);
+
+    if (previousIndex === -1 && index >= 0) {
+      // Transitioned from closed to open
+      onOpen?.();
+
+      // Set accessibility focus on header when opened
+      if (overlayHeader.current) {
+        const reactTag = findNodeHandle(overlayHeader.current);
+
+        if (reactTag) {
+          AccessibilityInfo.setAccessibilityFocus(reactTag);
+        }
+      }
+    } else if (previousIndex >= 0 && index === -1) {
+      // Transitioned from open to closed
+      onClose?.();
+    }
+
+    previousIndexRef.current = index;
+  };
+
+  const handleOnScroll = ({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setShowHeaderShadow(nativeEvent.contentOffset.y > 0);
+  };
+
+  const renderHeader = () => {
+    const closeOverlayA11YLabel = t("ContentOverlay.close", {
+      title: title,
+    });
+
+    const headerStyles = [
+      styles.header,
+      showHeaderShadow && styles.headerShadow,
+      {
+        backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens),
+      },
+    ];
+
+    return (
+      <View testID="ATL-Overlay-Header">
+        <View style={headerStyles}>
+          <View
+            style={[
+              styles.title,
+              shouldShowDismiss
+                ? styles.titleWithDismiss
+                : styles.titleWithoutDismiss,
+            ]}
+          >
+            <Heading
+              level="subtitle"
+              variation={loading ? "subdued" : "heading"}
+              align={"start"}
+            >
+              {title}
+            </Heading>
+          </View>
+
+          {shouldShowDismiss && (
+            <View
+              style={styles.dismissButton}
+              ref={overlayHeader}
+              accessibilityLabel={accessibilityLabel || closeOverlayA11YLabel}
+              accessible={true}
+            >
+              <IconButton
+                name="cross"
+                customColor={
+                  loading ? tokens["color-disabled"] : tokens["color-heading"]
+                }
+                onPress={() => onCloseController()}
+                accessibilityLabel={closeOverlayA11YLabel}
+                testID="ATL-Overlay-CloseButton"
+              />
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      onChange={handleChange}
+      backgroundStyle={styles.background}
+      handleIndicatorStyle={styles.handle}
+      handleComponent={draggable ? undefined : null}
+      backdropComponent={props => (
+        <Backdrop {...props} pressBehavior={onBeforeExit ? "none" : "close"} />
+      )}
+      name="content-overlay-rebuilt"
+      snapPoints={snapPoints}
+      enablePanDownToClose={draggable}
+      enableContentPanningGesture={draggable}
+      enableDynamicSizing={!fullScreen}
+      topInset={insets.top}
+    >
+      {scrollEnabled ? (
+        <BottomSheetScrollView
+          style={styles.background}
+          contentContainerStyle={{ paddingBottom: insets.bottom }}
+          keyboardShouldPersistTaps={
+            keyboardShouldPersistTaps ? "handled" : "never"
+          }
+          showsVerticalScrollIndicator={false}
+          onScroll={handleOnScroll}
+          stickyHeaderIndices={[0]}
+        >
+          {renderHeader()}
+          {children}
+        </BottomSheetScrollView>
+      ) : (
+        <BottomSheetView style={styles.background}>
+          {renderHeader()}
+          <View style={{ paddingBottom: insets.bottom }}>{children}</View>
+        </BottomSheetView>
+      )}
+    </BottomSheetModal>
+  );
+}
+
+function Backdrop(
+  bottomSheetBackdropProps: BottomSheetBackdropProps & {
+    pressBehavior: "none" | "close";
+  },
+) {
+  const styles = useStyles();
+  const { pressBehavior, ...props } = bottomSheetBackdropProps;
+
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      style={styles.backdrop}
+      opacity={1}
+      pressBehavior={pressBehavior}
+    />
+  );
+}

packages/components-native/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -0,0 +1,59 @@
+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 { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { Button, Heading, Text } from "@jobber/components-native";
+import { ContentOverlayRebuilt } from "./ContentOverlay.rebuilt";
+import type { ContentOverlayRebuiltRef } from "./types";
+
+const meta = {
+  title: "Components/Overlays/ContentOverlay",
+  component: ContentOverlayRebuilt,
+} satisfies Meta<typeof ContentOverlayRebuilt>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = () => {
+  const contentOverlayRef = useRef<ContentOverlayRebuiltRef>(null);
+
+  const openContentOverlay = () => {
+    contentOverlayRef.current?.open?.();
+  };
+
+  const closeContentOverlay = () => {
+    contentOverlayRef.current?.close?.();
+  };
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <View style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          <Heading>Basic ContentOverlay</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 Content Overlay" onPress={openContentOverlay} />
+          <Button label="Close Content Overlay" onPress={closeContentOverlay} />
+        </View>
+        <ContentOverlayRebuilt
+          ref={contentOverlayRef}
+          title="Content Overlay Title"
+          onClose={() => console.log("closed content overlay")}
+          onOpen={() => console.log("opened content overlay")}
+        >
+          <View style={{ padding: 16 }}>
+            <Text>This is the content inside the overlay.</Text>
+          </View>
+        </ContentOverlayRebuilt>
+      </BottomSheetModalProvider>
+    </SafeAreaProvider>
+  );
+};
+
+export const Basic: Story = {
+  render: BasicTemplate,
+  args: {} as Story["args"],
+};

packages/components-native/src/ContentOverlay/UNSAFE_WrappedModalize.tsx

@@ -9,6 +9,7 @@ import type { IHandles } from "react-native-modalize/lib/options";
 
 type Props = React.ComponentProps<typeof Modalize>;
 
+// TODO: delete this file
 export const UNSAFE_WrappedModalize = forwardRef<IHandles | undefined, Props>(
   (props, ref) => {
     const innerRef = useRef<IHandles | null>(null);