@jobber/components-native 0.95.3 → 0.95.4-improve-co-ca924fd.14

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.95.3",
+    "version": "0.95.4-improve-co-ca924fd.14+ca924fd5a",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -44,9 +44,8 @@
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
         "react-hook-form": "^7.52.0",
-        "react-intl": "^7.1.11",
+        "react-intl": "^6 || ^7",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
-        "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",
@@ -90,11 +89,10 @@
         "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "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": "d082bc71718efe42e118b1f3adcd9007bb1923cb"
+    "gitHead": "ca924fd5a3a8d378218db75aa5b9233c46e7c256"
 }

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -1,121 +1,148 @@
-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, { 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, BottomSheetScrollView, BottomSheetView, } from "@gorhom/bottom-sheet";
 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 { 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);
+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 +152,18 @@ 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() }, scrollEnabled ? (React.createElement(BottomSheetScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0] },
+        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/ContentOverlayProvider.js

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

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/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,2 @@
 export { ContentOverlay } from "./ContentOverlay";
+export { ContentOverlayProvider } from "./ContentOverlayProvider";

package/dist/src/InputText/InputText.js

@@ -1,5 +1,6 @@
 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";
@@ -32,6 +33,10 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
         hasValue,
         disabled,
     });
+    // Bottom sheet keyboard handling - detect if we're inside a ContentOverlay
+    const bottomSheetContext = useBottomSheetInternal(true);
+    const animatedKeyboardState = bottomSheetContext === null || bottomSheetContext === void 0 ? void 0 : bottomSheetContext.animatedKeyboardState;
+    const textInputNodesRef = bottomSheetContext === null || bottomSheetContext === void 0 ? void 0 : bottomSheetContext.textInputNodesRef;
     // 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 +102,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 +128,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("");
     }

package/dist/src/utils/meta/meta.json

@@ -23,6 +23,7 @@
         "Chip",
         "Content",
         "ContentOverlay",
+        "ContentOverlayProvider",
         "Disclosure",
         "Divider",
         "EmptyState",