@jobber/components-native 0.98.5 → 0.100.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.98.5",
+    "version": "0.100.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -46,8 +46,6 @@
         "react-hook-form": "^7.52.0",
         "react-intl": "^7.1.11",
         "react-native-keyboard-controller": "^1.20.7",
-        "react-native-modalize": "^2.0.13",
-        "react-native-portalize": "^1.0.7",
         "react-native-toast-message": "^2.1.6",
         "react-native-uuid": "^1.4.9",
         "ts-xor": "^1.1.0"
@@ -69,6 +67,7 @@
         "date-fns-tz": "^2.0.0",
         "react-native": "^0.82.1",
         "react-native-gesture-handler": "^2.29.1",
+        "react-native-keyboard-controller": "^1.12.0",
         "react-native-modal-datetime-picker": "^18.0.0",
         "react-native-reanimated": "^3.7.1",
         "react-native-safe-area-context": "^5.4.0",
@@ -90,11 +89,9 @@
         "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-controller": "^1.20.7",
         "react-native-modal-datetime-picker": " >=13.0.0",
-        "react-native-modalize": "^2.0.13",
-        "react-native-portalize": "^1.0.7",
         "react-native-reanimated": "^3.0.0",
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "60dbce9880c63f02f43d8b3f1f5ef9090dba32e3"
+    "gitHead": "2ef76c22620e1627eca8cf576b35e78228262574"
 }

package/dist/src/AtlantisOverlayProvider/AtlantisOverlayProvider.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+export function AtlantisOverlayProvider({ children, }) {
+    return React.createElement(BottomSheetModalProvider, null, children);
+}

package/dist/src/AtlantisOverlayProvider/index.js

@@ -0,0 +1 @@
+export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import RNBottomSheet, { BottomSheetBackdrop, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView, } from "@gorhom/bottom-sheet";
 import { tokens } from "@jobber/design";
 import { useStyles } from "./BottomSheet.style";
 import { BottomSheetOption } from "./components/BottomSheetOption";
@@ -22,7 +22,8 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
     useImperativeHandle(ref, () => ({
         open: () => {
             var _a;
-            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.expand();
+            dismissKeyboard();
+            (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.present();
         },
         close: () => {
             close();
@@ -30,25 +31,22 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
     }));
     const close = useCallback(() => {
         var _a;
-        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
     }, []);
     const handleChange = (index) => {
         // Handle Android back button
         handleSheetPositionChange(index);
         const previousIndex = previousIndexRef.current;
         if (previousIndex === -1 && index >= 0) {
-            // Transitioned from closed to open
-            dismissKeyboard();
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
-        else if (previousIndex >= 0 && index === -1) {
-            // Transitioned from open to closed
-            dismissKeyboard();
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
         previousIndexRef.current = index;
     };
-    return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
+    return (React.createElement(BottomSheetModal, { ref: bottomSheetRef, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, onDismiss: () => {
+            previousIndexRef.current = -1;
+            dismissKeyboard();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
         React.createElement(BottomSheetView, { style: {
                 paddingBottom: insets.bottom + tokens["space-small"],
                 paddingTop: tokens["space-small"],

package/dist/src/BottomSheet/hooks/useBottomSheetBackHandler.js

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from "react";
 import { BackHandler } from "react-native";
 /**
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
  * @param bottomSheetRef ref to the bottom sheet component
  */
 export function useBottomSheetBackHandler(bottomSheetRef) {
@@ -13,7 +13,7 @@ export function useBottomSheetBackHandler(bottomSheetRef) {
             // Setup the back handler if the bottom sheet is right in front of the user
             backHandlerSubscriptionRef.current = BackHandler.addEventListener("hardwareBackPress", () => {
                 var _a;
-                (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
                 return true;
             });
         }

package/dist/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.js

@@ -1,17 +1,15 @@
 import React from "react";
 import { View } from "react-native";
-import { Portal } from "react-native-portalize";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
 import { BottomSheet } from "../../../BottomSheet/BottomSheet";
 export function SecondaryActionSheet({ actions, secondaryActionsRef, heading, showCancel, onOpenBottomSheet, onCloseBottomSheet, }) {
-    return (React.createElement(Portal, null,
-        React.createElement(BottomSheet, { heading: heading, showCancel: showCancel, ref: secondaryActionsRef, onOpen: onOpenBottomSheet, onClose: onCloseBottomSheet },
-            React.createElement(View, null, actions.map((action, index) => {
-                const { label, onPress, icon, iconColor, destructive } = action;
-                return (React.createElement(BottomSheetOption, { destructive: destructive, key: index, text: label, onPress: () => {
-                        var _a;
-                        (_a = secondaryActionsRef === null || secondaryActionsRef === void 0 ? void 0 : secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                        onPress();
-                    }, icon: icon, iconColor: iconColor }));
-            })))));
+    return (React.createElement(BottomSheet, { heading: heading, showCancel: showCancel, ref: secondaryActionsRef, onOpen: onOpenBottomSheet, onClose: onCloseBottomSheet },
+        React.createElement(View, null, actions.map((action, index) => {
+            const { label, onPress, icon, iconColor, destructive } = action;
+            return (React.createElement(BottomSheetOption, { destructive: destructive, key: index, text: label, onPress: () => {
+                    var _a;
+                    (_a = secondaryActionsRef === null || secondaryActionsRef === void 0 ? void 0 : secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                    onPress();
+                }, icon: icon, iconColor: iconColor }));
+        }))));
 }

package/dist/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.js

@@ -0,0 +1,19 @@
+import { memo } from "react";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { SCROLLABLE_TYPE, createBottomSheetScrollableComponent, } from "@gorhom/bottom-sheet";
+import Reanimated from "react-native-reanimated";
+/**
+ * A keyboard-aware scroll view component that integrates with @gorhom/bottom-sheet.
+ *
+ * This component wraps `KeyboardAwareScrollView` from `react-native-keyboard-controller`
+ * with the bottom sheet HOCs to ensure proper keyboard handling on Android when using
+ * TextInputs inside a BottomSheet.
+ *
+ * @see https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view#gorhombottom-sheet
+ */
+const AnimatedScrollView = Reanimated.createAnimatedComponent(KeyboardAwareScrollView);
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
+BottomSheetKeyboardAwareScrollView.displayName =
+    "BottomSheetKeyboardAwareScrollView";
+export { BottomSheetKeyboardAwareScrollView };

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -1,121 +1,162 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { createContext, useContext, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { AccessibilityInfo, View, findNodeHandle, useWindowDimensions, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
-import { Portal } from "react-native-portalize";
-import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { BottomSheetKeyboardAwareScrollView } from "./BottomSheetKeyboardAwareScrollView";
 import { useStyles } from "./ContentOverlay.style";
-import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
-import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
+import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
+import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
+import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "./constants";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-export const ContentOverlay = forwardRef(ContentOverlayPortal);
-const ContentOverlayModal = forwardRef(ContentOverlayInternal);
+/**
+ * Signals whether keyboard handling inside a ContentOverlay is delegated to
+ * a keyboard-aware scroll view (e.g. BottomSheetKeyboardAwareScrollView).
+ *
+ * When `true`, InputText skips registering with the bottom-sheet's internal
+ * keyboard state so that only the scroll view manages keyboard offset —
+ * preventing double-counted spacing.
+ */
+const ContentOverlayKeyboardContext = createContext(false);
+export function useIsKeyboardHandledByScrollView() {
+    return useContext(ContentOverlayKeyboardContext);
+}
+const LARGE_SCREEN_BREAKPOINT = 640;
+function getModalBackgroundColor(variation, tokens) {
+    switch (variation) {
+        case "surface":
+            return tokens["color-surface"];
+        case "background":
+            return tokens["color-surface--background"];
+    }
+}
 // eslint-disable-next-line max-statements
-function ContentOverlayInternal({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, keyboardAvoidingBehavior, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, loading = false, avoidKeyboardLikeIOS, }, ref) {
-    isDraggable = onBeforeExit ? false : isDraggable;
-    const isCloseableOnOverlayTap = onBeforeExit ? false : true;
+export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, loading = false, ref, }) {
+    const insets = useSafeAreaInsets();
+    const { width: windowWidth } = useWindowDimensions();
+    const bottomSheetModalRef = useRef(null);
+    const previousIndexRef = useRef(-1);
+    const [currentPosition, setCurrentPosition] = useState(-1);
+    const styles = useStyles();
     const { t } = useAtlantisI18n();
     const { tokens } = useAtlantisTheme();
-    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-    const insets = useSafeAreaInsets();
-    const [position, setPosition] = useState("initial");
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
-    const isFullScreenOrTopPosition = fullScreen || (!adjustToContentHeight && position === "top");
-    const shouldShowDismiss = showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
+    const behavior = computeContentOverlayBehavior({
+        fullScreen,
+        adjustToContentHeight,
+        isDraggable,
+        hasOnBeforeExit: onBeforeExit !== undefined,
+        showDismiss,
+    }, {
+        isScreenReaderEnabled,
+        position: currentPosition,
+    });
+    const effectiveIsDraggable = behavior.isDraggable;
+    const shouldShowDismiss = behavior.showDismiss;
+    const isCloseableOnOverlayTap = onBeforeExit === undefined;
+    // Prevent the Overlay from being flush with the top of the screen, even if we are "100%" or "fullscreen"
+    const topInset = insets.top || tokens["space-larger"];
     const [showHeaderShadow, setShowHeaderShadow] = useState(false);
     const overlayHeader = useRef(null);
-    const internalRef = useRef(null);
-    const [modalizeMethods, setModalizeMethods] = useState();
-    const callbackInternalRef = useCallback((instance) => {
-        if (instance && !internalRef.current) {
-            internalRef.current = instance;
-            setModalizeMethods(instance);
-        }
+    const scrollViewRef = useRef(null);
+    // enableDynamicSizing will add another snap point of the content height
+    const snapPoints = useMemo(() => {
+        // There is a bug with "restore" behavior after keyboard is dismissed.
+        // https://github.com/gorhom/react-native-bottom-sheet/issues/2465
+        // providing a 100% snap point "fixes" it for now, but there is an approved PR to fix it
+        // that just needs to be merged and released: https://github.com/gorhom/react-native-bottom-sheet/pull/2511
+        return ["100%"];
     }, []);
-    const refMethods = useMemo(() => {
-        if (!(modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.open) || !(modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.close)) {
-            return {};
-        }
-        return {
-            open: modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.open,
-            close: modalizeMethods === null || modalizeMethods === void 0 ? void 0 : modalizeMethods.close,
-        };
-    }, [modalizeMethods]);
-    const { keyboardHeight } = useKeyboardVisibility();
-    useImperativeHandle(ref, () => refMethods, [refMethods]);
-    const { handleLayout: handleChildrenLayout, height: childrenHeight, heightKnown: childrenHeightKnown, } = useViewLayoutHeight();
-    const { handleLayout: handleHeaderLayout, height: headerHeight, heightKnown: headerHeightKnown, } = useViewLayoutHeight();
-    const snapPoint = useMemo(() => {
-        if (fullScreen || !isDraggable || adjustToContentHeight) {
-            return undefined;
-        }
-        const overlayHeight = headerHeight + childrenHeight;
-        if (overlayHeight >= windowHeight) {
-            return undefined;
-        }
-        return overlayHeight;
-    }, [
-        fullScreen,
-        isDraggable,
-        adjustToContentHeight,
-        headerHeight,
-        childrenHeight,
-        windowHeight,
-    ]);
-    const styles = useStyles();
-    const modalStyle = [
-        styles.modal,
-        windowWidth > 640 ? styles.modalForLargeScreens : undefined,
-        { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
-        keyboardHeight > 0 && { marginBottom: 0 },
-    ];
-    const renderedChildren = renderChildren();
-    const renderedHeader = renderHeader();
     const onCloseController = () => {
         var _a;
         if (!onBeforeExit) {
-            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.close();
-            return true;
+            (_a = bottomSheetModalRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
         }
         else {
             onBeforeExit();
-            return false;
         }
     };
-    return (React.createElement(React.Fragment, null,
-        headerHeightKnown && childrenHeightKnown && (React.createElement(UNSAFE_WrappedModalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
-                if (overlayHeader.current) {
-                    const reactTag = findNodeHandle(overlayHeader.current);
-                    if (reactTag) {
-                        AccessibilityInfo.setAccessibilityFocus(reactTag);
-                    }
+    const { handleSheetPositionChange } = useBottomSheetModalBackHandler(onCloseController);
+    useImperativeHandle(ref, () => ({
+        open: () => {
+            var _a;
+            (_a = bottomSheetModalRef.current) === null || _a === void 0 ? void 0 : _a.present();
+        },
+        close: () => {
+            var _a;
+            (_a = bottomSheetModalRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
+        },
+    }), []);
+    const handleChange = (index, position) => {
+        const previousIndex = previousIndexRef.current;
+        setCurrentPosition(position);
+        handleSheetPositionChange(index);
+        if (previousIndex === -1 && index >= 0) {
+            // Transitioned from closed to open
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            // Set accessibility focus on header when opened
+            if (overlayHeader.current) {
+                const reactTag = findNodeHandle(overlayHeader.current);
+                if (reactTag) {
+                    AccessibilityInfo.setAccessibilityFocus(reactTag);
                 }
-            }, scrollViewProps: {
-                scrollEnabled,
-                showsVerticalScrollIndicator: false,
-                stickyHeaderIndices: Platform.OS === "android" ? [0] : undefined,
-                onScroll: handleOnScroll,
-                keyboardShouldPersistTaps: keyboardShouldPersistTaps
-                    ? "handled"
-                    : "never",
-            }, HeaderComponent: Platform.OS === "ios" ? renderedHeader : undefined, onPositionChange: setPosition },
-            Platform.OS === "android" ? renderedHeader : undefined,
-            renderedChildren)),
-        !childrenHeightKnown && (React.createElement(View, { style: [styles.hiddenContent, modalStyle] }, renderedChildren)),
-        !headerHeightKnown && (React.createElement(View, { style: [styles.hiddenContent, modalStyle] }, renderedHeader))));
-    function renderHeader() {
+            }
+        }
+        previousIndexRef.current = index;
+    };
+    const handleOnScroll = () => {
+        var _a;
+        const scrollTop = ((_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
+        setShowHeaderShadow(scrollTop > 0);
+    };
+    const sheetStyle = useMemo(() => windowWidth > LARGE_SCREEN_BREAKPOINT
+        ? {
+            width: LARGE_SCREEN_BREAKPOINT,
+            marginLeft: (windowWidth - LARGE_SCREEN_BREAKPOINT) / 2,
+        }
+        : undefined, [windowWidth]);
+    const backgroundStyle = [
+        styles.background,
+        { backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens) },
+    ];
+    const handleIndicatorStyles = [
+        styles.handle,
+        !effectiveIsDraggable && {
+            opacity: 0,
+        },
+    ];
+    const renderHeader = () => {
         const closeOverlayA11YLabel = t("ContentOverlay.close", {
             title: title,
         });
         const headerStyles = [
             styles.header,
+            {
+                // Background color is necessary for scrollable modals as the content flows behind the header.
+                backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens),
+            },
+        ];
+        const headerShadowStyles = [
             showHeaderShadow && styles.headerShadow,
-            { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+            {
+                backgroundColor: getModalBackgroundColor(modalBackgroundColor, tokens),
+            },
         ];
-        return (React.createElement(View, { onLayout: handleHeaderLayout, testID: "ATL-Overlay-Header" },
+        return (React.createElement(View, { testID: "ATL-Overlay-Header" },
             React.createElement(View, { style: headerStyles },
                 React.createElement(View, { style: [
                         styles.title,
@@ -125,24 +166,19 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
                     ] },
                     React.createElement(Heading, { level: "subtitle", variation: loading ? "subdued" : "heading", align: "start" }, title)),
                 shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
-                    React.createElement(IconButton, { name: "cross", customColor: loading ? tokens["color-disabled"] : tokens["color-heading"], onPress: () => onCloseController(), accessibilityLabel: closeOverlayA11YLabel, testID: "ATL-Overlay-CloseButton" }))))));
-    }
-    function renderChildren() {
-        return (React.createElement(View, { style: { paddingBottom: insets.bottom }, onLayout: handleChildrenLayout, testID: "ATL-Overlay-Children" }, children));
-    }
-    function handleOnScroll({ nativeEvent, }) {
-        setShowHeaderShadow(nativeEvent.contentOffset.y > 0);
-    }
-    function getModalBackgroundColor(variation) {
-        switch (variation) {
-            case "surface":
-                return tokens["color-surface"];
-            case "background":
-                return tokens["color-surface--background"];
-        }
-    }
+                    React.createElement(IconButton, { name: "cross", customColor: loading ? tokens["color-disabled"] : tokens["color-heading"], onPress: () => onCloseController(), accessibilityLabel: closeOverlayA11YLabel, testID: "ATL-Overlay-CloseButton" })))),
+            React.createElement(View, null,
+                React.createElement(View, { style: headerShadowStyles }))));
+    };
+    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: props => (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" }))), snapPoints: snapPoints, enablePanDownToClose: effectiveIsDraggable, enableContentPanningGesture: effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
+        React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
+            renderHeader(),
+            React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,
+            renderHeader(),
+            React.createElement(View, { style: { paddingBottom: insets.bottom }, testID: "ATL-Overlay-Children" }, children))))));
 }
-function ContentOverlayPortal(modalProps, ref) {
-    return (React.createElement(Portal, null,
-        React.createElement(ContentOverlayModal, Object.assign({ ref: ref }, modalProps))));
+function Backdrop(bottomSheetBackdropProps) {
+    const styles = useStyles();
+    const { pressBehavior } = bottomSheetBackdropProps, props = __rest(bottomSheetBackdropProps, ["pressBehavior"]);
+    return (React.createElement(BottomSheetBackdrop, Object.assign({}, props, { appearsOnIndex: 0, disappearsOnIndex: -1, style: styles.backdrop, opacity: 1, pressBehavior: pressBehavior })));
 }

package/dist/src/ContentOverlay/ContentOverlay.style.js

@@ -1,36 +1,32 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
 export const useStyles = buildThemedStyles(tokens => {
     const modalBorderRadius = tokens["radius-larger"];
-    const titleOffsetFromHandle = tokens["space-base"];
     return {
+        handleWrapper: {
+            paddingBottom: tokens["space-smallest"],
+            paddingTop: tokens["space-small"],
+        },
         handle: {
             width: tokens["space-largest"],
             height: tokens["space-smaller"] + tokens["space-smallest"],
             backgroundColor: tokens["color-border"],
-            top: tokens["space-small"],
             borderRadius: tokens["radius-circle"],
         },
-        overlay: {
+        backdrop: {
             backgroundColor: tokens["color-overlay"],
         },
-        modal: {
+        background: {
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
         },
-        modalForLargeScreens: {
-            width: 640,
-            alignSelf: "center",
-        },
         header: {
             flexDirection: "row",
-            backgroundColor: tokens["color-surface"],
-            paddingTop: titleOffsetFromHandle,
             zIndex: tokens["elevation-base"],
+            minHeight: tokens["space-extravagant"] - tokens["space-base"],
             borderTopLeftRadius: modalBorderRadius,
             borderTopRightRadius: modalBorderRadius,
-            minHeight: tokens["space-extravagant"],
         },
-        headerShadow: Object.assign({}, tokens["shadow-base"]),
+        headerShadow: Object.assign(Object.assign({}, tokens["shadow-base"]), { position: "absolute", top: -20, height: 20, width: "100%" }),
         childrenStyle: {
             // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
             zIndex: -1,

package/dist/src/ContentOverlay/computeContentOverlayBehavior.js

@@ -0,0 +1,76 @@
+/**
+ * Computes the abstract behavior of ContentOverlay from its props and state.
+ *
+ * This pure function documents and centralizes the complex logic that determines:
+ * - Initial height mode (fullScreen vs contentHeight)
+ * - Whether the overlay is draggable
+ * - Whether the dismiss button should be shown
+ *
+ * The logic accounts for legacy behavior where:
+ * - `onBeforeExit` silently overrides `isDraggable` to false
+ * - Default props (neither fullScreen nor adjustToContentHeight) are treated
+ *   as contentHeight for the new implementation
+ * - Dismiss button visibility depends on multiple factors including position state
+ */
+export function computeContentOverlayBehavior(config, state) {
+    const isDraggable = computeIsDraggable(config);
+    const initialHeight = computeInitialHeight(config, isDraggable);
+    const showDismiss = computeShowDismiss(config, state);
+    return {
+        initialHeight,
+        isDraggable,
+        showDismiss,
+    };
+}
+/**
+ * Order is important to maintain legacy behavior, despite the questionable logic.
+ * A non draggable overlay wants to be fullscreen, so as to have the dismiss button be visible.
+ * There is an invalid combination here with adjustToContentHeight and onBeforeExit which in turn overrides isDraggable to false.
+ * This requires an explicit showDismiss=true or else it will not be possible to dismiss the overlay.
+ */
+function computeInitialHeight(config, isDraggable) {
+    if (config.adjustToContentHeight) {
+        return "contentHeight";
+    }
+    if (config.fullScreen) {
+        return "fullScreen";
+    }
+    if (!isDraggable) {
+        return "fullScreen";
+    }
+    return "contentHeight";
+}
+/**
+ * Draggability determination:
+ * - hasOnBeforeExit: true → false (silent override, regardless of isDraggable prop)
+ * - Otherwise → use isDraggable prop value
+ *
+ * This silent override exists because onBeforeExit needs to intercept close attempts,
+ * and dragging would bypass that interception.
+ */
+function computeIsDraggable(config) {
+    if (config.hasOnBeforeExit) {
+        return false;
+    }
+    return config.isDraggable;
+}
+/**
+ * Dismiss button visibility:
+ * The idea behind fullscreen having it is that there may be little room to tap the background to dismiss.
+ * While this logic is redundant with the position, it's a relic of the legacy behavior where position didn't update in time.
+ */
+function computeShowDismiss(config, state) {
+    if (config.showDismiss) {
+        return true;
+    }
+    if (state.isScreenReaderEnabled) {
+        return true;
+    }
+    if (config.fullScreen) {
+        return true;
+    }
+    if (!config.adjustToContentHeight && state.position === 0) {
+        return true;
+    }
+    return false;
+}

package/dist/src/ContentOverlay/constants.js

@@ -0,0 +1 @@
+export const KEYBOARD_TOP_PADDING_AUTO_SCROLL = 20;

package/dist/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.js

@@ -0,0 +1,25 @@
+import { useCallback, useRef } from "react";
+import { BackHandler } from "react-native";
+/**
+ * Hook that dismisses the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetModalRef ref to the bottom sheet modal component
+ */
+export function useBottomSheetModalBackHandler(onCloseController) {
+    const backHandlerSubscriptionRef = useRef(null);
+    const handleSheetPositionChange = useCallback((index) => {
+        var _a;
+        const isBottomSheetModalVisible = index >= 0;
+        if (isBottomSheetModalVisible && !backHandlerSubscriptionRef.current) {
+            // Setup the back handler if the bottom sheet is right in front of the user
+            backHandlerSubscriptionRef.current = BackHandler.addEventListener("hardwareBackPress", () => {
+                onCloseController();
+                return true;
+            });
+        }
+        else if (!isBottomSheetModalVisible) {
+            (_a = backHandlerSubscriptionRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            backHandlerSubscriptionRef.current = null;
+        }
+    }, [onCloseController]);
+    return { handleSheetPositionChange };
+}

package/dist/src/ContentOverlay/index.js

@@ -1 +1 @@
-export { ContentOverlay } from "./ContentOverlay";
+export { ContentOverlay, useIsKeyboardHandledByScrollView, } from "./ContentOverlay";