@jobber/components-native 0.99.0 → 0.100.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.99.0",
+    "version": "0.100.1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -32,6 +32,7 @@
         "build": "npm run build:clean && npm run compile",
         "bootstrap": "npm run build",
         "prepack": "npm run build",
+        "watch": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
         "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
         "storybook": "storybook dev -p 6008 --disable-telemetry",
@@ -46,8 +47,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 +68,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 +90,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": "c92c33f8e0a06cbc2addce9eca3005c1231a9202"
+    "gitHead": "952a8f59bf74f0fec04b870102aa1b23289b2517"
 }

package/dist/src/Button/Button.js

@@ -44,11 +44,11 @@ function getActionLabelVariation(variation, type) {
     }
     switch (variation) {
         case "learning":
-            return "subtle";
+            return "interactiveSubtle";
         case "destructive":
             return "destructive";
         case "cancel":
-            return "subtle";
+            return "interactiveSubtle";
         default:
             return "interactive";
     }

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";

package/dist/src/InputText/InputText.js

@@ -1,9 +1,11 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Platform, TextInput } from "react-native";
+import { Platform, TextInput, findNodeHandle } from "react-native";
+import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
 import identity from "lodash/identity";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
+import { useIsKeyboardHandledByScrollView } from "../ContentOverlay";
 import { useFormController } from "../hooks";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
@@ -32,6 +34,18 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
         hasValue,
         disabled,
     });
+    // When inside a scrollable ContentOverlay, keyboard offset is handled by
+    // KeyboardAwareScrollView. Registering with the bottom-sheet's keyboard
+    // state would cause double-counted spacing, so we skip it.
+    const isKeyboardHandledByScrollView = useIsKeyboardHandledByScrollView();
+    const bottomSheetContext = useBottomSheetInternal(true);
+    const shouldHandleBottomSheetKeyboard = bottomSheetContext !== null && !isKeyboardHandledByScrollView;
+    const animatedKeyboardState = shouldHandleBottomSheetKeyboard
+        ? bottomSheetContext.animatedKeyboardState
+        : undefined;
+    const textInputNodesRef = shouldHandleBottomSheetKeyboard
+        ? bottomSheetContext.textInputNodesRef
+        : undefined;
     // Android doesn't have an accessibility label like iOS does. By adding
     // it as a placeholder it readds it like a label. However we don't want to
     // add a placeholder on iOS.
@@ -97,10 +111,12 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
             // This is tech debt related to an issue where keyboard aware scrollview doesn't work if `scrollEnabled` is true. However,
             // when `scrollEnabled` is false it causes an issue where super long text inputs will jump to the top when a new line is added to the bottom of the input.
             scrollEnabled: Platform.OS === "ios" && multiline, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+                handleBottomSheetFocus(event);
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
             }, onBlur: event => {
+                handleBottomSheetBlur(event);
                 _name && setFocusedInput("");
                 setFocused(false);
                 onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -121,6 +137,33 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
         const removedIOSCharValue = isIOS ? value.replace(/\uFFFC/g, "") : value;
         updateFormAndState(removedIOSCharValue);
     }
+    function handleBottomSheetFocus(event) {
+        if (!animatedKeyboardState || !textInputNodesRef || !(event === null || event === void 0 ? void 0 : event.nativeEvent)) {
+            return;
+        }
+        animatedKeyboardState.set(state => (Object.assign(Object.assign({}, state), { target: event.nativeEvent.target })));
+    }
+    function handleBottomSheetBlur(event) {
+        if (!animatedKeyboardState || !textInputNodesRef || !(event === null || event === void 0 ? void 0 : event.nativeEvent)) {
+            return;
+        }
+        const keyboardState = animatedKeyboardState.get();
+        const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+        const currentFocusedInput = currentlyFocusedInput !== null
+            ? findNodeHandle(
+            // @ts-expect-error - TextInput.State.currentlyFocusedInput() returns NativeMethods
+            // which is not directly assignable to findNodeHandle's expected type,
+            // but it works at runtime. This is a known type limitation in React Native.
+            currentlyFocusedInput)
+            : null;
+        // Only remove the target if it belongs to the current component
+        // and if the currently focused input is not in the targets set
+        const shouldRemoveCurrentTarget = keyboardState.target === event.nativeEvent.target;
+        const shouldIgnoreBlurEvent = currentFocusedInput && textInputNodesRef.current.has(currentFocusedInput);
+        if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
+            animatedKeyboardState.set(state => (Object.assign(Object.assign({}, state), { target: undefined })));
+        }
+    }
     function handleClear() {
         handleChangeText("");
     }