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

package/dist/package.json

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

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -1,148 +1,121 @@
-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 React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
+import { Portal } from "react-native-portalize";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { useStyles } from "./ContentOverlay.style";
-import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
-import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
+import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
+import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-const LARGE_SCREEN_BREAKPOINT = 640;
-function getModalBackgroundColor(variation, tokens) {
-    switch (variation) {
-        case "surface":
-            return tokens["color-surface"];
-        case "background":
-            return tokens["color-surface--background"];
-    }
-}
+export const ContentOverlay = forwardRef(ContentOverlayPortal);
+const ContentOverlayModal = forwardRef(ContentOverlayInternal);
 // eslint-disable-next-line max-statements
-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();
+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;
     const { t } = useAtlantisI18n();
     const { tokens } = useAtlantisTheme();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const [position, setPosition] = useState("initial");
     const isScreenReaderEnabled = useIsScreenReaderEnabled();
-    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 isFullScreenOrTopPosition = fullScreen || (!adjustToContentHeight && position === "top");
+    const shouldShowDismiss = showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
     const [showHeaderShadow, setShowHeaderShadow] = useState(false);
     const overlayHeader = useRef(null);
-    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 internalRef = useRef(null);
+    const [modalizeMethods, setModalizeMethods] = useState();
+    const callbackInternalRef = useCallback((instance) => {
+        if (instance && !internalRef.current) {
+            internalRef.current = instance;
+            setModalizeMethods(instance);
+        }
     }, []);
+    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 = bottomSheetModalRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
+            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            return true;
         }
         else {
             onBeforeExit();
+            return false;
         }
     };
-    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);
+    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);
+                    }
                 }
-            }
-        }
-        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 = () => {
+            }, 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() {
         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, tokens),
-            },
+            { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
         ];
-        return (React.createElement(View, { testID: "ATL-Overlay-Header" },
+        return (React.createElement(View, { onLayout: handleHeaderLayout, testID: "ATL-Overlay-Header" },
             React.createElement(View, { style: headerStyles },
                 React.createElement(View, { style: [
                         styles.title,
@@ -152,18 +125,24 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
                     ] },
                     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" })))),
-            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)))));
+                    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"];
+        }
+    }
 }
-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 })));
+function ContentOverlayPortal(modalProps, ref) {
+    return (React.createElement(Portal, null,
+        React.createElement(ContentOverlayModal, Object.assign({ ref: ref }, modalProps))));
 }

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

@@ -1,32 +1,36 @@
 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"],
         },
-        backdrop: {
+        overlay: {
             backgroundColor: tokens["color-overlay"],
         },
-        background: {
+        modal: {
             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(Object.assign({}, tokens["shadow-base"]), { position: "absolute", top: -20, height: 20, width: "100%" }),
+        headerShadow: Object.assign({}, tokens["shadow-base"]),
         childrenStyle: {
             // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
             zIndex: -1,

package/dist/src/ContentOverlay/UNSAFE_WrappedModalize.js

@@ -0,0 +1,23 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState, } from "react";
+import { Modalize } from "react-native-modalize";
+export const UNSAFE_WrappedModalize = forwardRef((props, ref) => {
+    const innerRef = useRef(null);
+    const [openRenderId, setOpenRenderId] = useState(0);
+    useImperativeHandle(ref, () => ({
+        open(dest) {
+            setOpenRenderId(id => id + 1);
+            // Open on a fresh tick for additional safety
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.open(dest);
+            });
+        },
+        close(dest) {
+            var _a;
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.close(dest);
+        },
+    }), []);
+    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
+    return (React.createElement(Modalize, Object.assign({ key: `modalize-${openRenderId}`, ref: innerRef }, props)));
+});
+UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";

package/dist/src/ContentOverlay/index.js

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

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as RNText, View } from "react-native";
+import { PixelRatio, Platform, Text as RNText, View } from "react-native";
 import { useStyles } from "./InputFieldWrapper.style";
 import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
 import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
@@ -11,7 +11,7 @@ import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode = "normal", hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", }) {
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode = "normal", hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", multiline = false, }) {
     fieldAffixRequiredPropsCheck([prefix, suffix]);
     const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
     warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -29,6 +29,9 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                 (Boolean(invalid) || error) && styles.inputInvalid,
                 disabled && styles.disabled,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
+                shouldApplyScrollTrapWorkaround(multiline) && {
+                    maxWidth: "90%",
+                },
             ] },
             React.createElement(View, { style: styles.field },
                 (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, inputInvalid: inputInvalid, icon: prefix.icon })),
@@ -63,6 +66,13 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
             isToolbarVisible && React.createElement(View, { style: styles.toolbar }, toolbar)),
         assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
 }
+function shouldApplyScrollTrapWorkaround(isMultiline) {
+    const isCustomFontScale = PixelRatio.getFontScale() !== 1;
+    // On iOS, when the OS font scale is not default, it causes multiline inputs to become scroll-trapped
+    // which prevents the user from scrolling the parent form view. For now, we're working around this
+    // by limiting the width of the input field, thus providing a gap so the user can scroll more easily.
+    return isMultiline && Platform.OS === "ios" && isCustomFontScale;
+}
 function getLabelVariation(error, invalid, disabled) {
     if (invalid || error) {
         return "error";

package/dist/src/InputText/InputText.js

@@ -1,6 +1,5 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Platform, TextInput, findNodeHandle } from "react-native";
-import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
+import { Platform, TextInput } from "react-native";
 import identity from "lodash/identity";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
@@ -33,10 +32,6 @@ 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.
@@ -80,7 +75,7 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     }
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType, multiline: multiline },
         React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,
                 styles.inputPaddingTop,
@@ -102,12 +97,10 @@ 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);
@@ -128,33 +121,6 @@ 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,7 +23,6 @@
         "Chip",
         "Content",
         "ContentOverlay",
-        "ContentOverlayProvider",
         "Disclosure",
         "Divider",
         "EmptyState",