@jobber/components-native 0.98.5 → 0.100.0

package/dist/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Portal } from "react-native-portalize";
 import { BottomSheet } from "../../../BottomSheet/BottomSheet";
 import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
@@ -10,12 +9,11 @@ export const FormatFileBottomSheet = ({ bottomSheetRef, onPreviewPress, onRemove
         onPressAction();
         (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
-    return (React.createElement(Portal, null,
-        React.createElement(BottomSheet, { ref: bottomSheetRef },
-            onPreviewPress ? (React.createElement(BottomSheetOption, { icon: "eye", text: t("FormatFile.preview", {
-                    item: bottomSheetOptionsSuffix || "",
-                }), onPress: () => handlePress(onPreviewPress) })) : undefined,
-            onRemovePress ? (React.createElement(BottomSheetOption, { icon: "trash", destructive: true, text: t("FormatFile.remove", {
-                    item: bottomSheetOptionsSuffix || "",
-                }), onPress: () => handlePress(onRemovePress) })) : undefined)));
+    return (React.createElement(BottomSheet, { ref: bottomSheetRef },
+        onPreviewPress ? (React.createElement(BottomSheetOption, { icon: "eye", text: t("FormatFile.preview", {
+                item: bottomSheetOptionsSuffix || "",
+            }), onPress: () => handlePress(onPreviewPress) })) : undefined,
+        onRemovePress ? (React.createElement(BottomSheetOption, { icon: "trash", destructive: true, text: t("FormatFile.remove", {
+                item: bottomSheetOptionsSuffix || "",
+            }), onPress: () => handlePress(onRemovePress) })) : undefined));
 };

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("");
     }

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisOverlayProvider";
 export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";

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

@@ -9,6 +9,7 @@
         "AtlantisContext.Provider",
         "AtlantisFormContext.Consumer",
         "AtlantisFormContext.Provider",
+        "AtlantisOverlayProvider",
         "AtlantisThemeContextProvider",
         "AutoLink",
         "Banner",