@jobber/components-native 0.95.2-JOB-141866-cab4e3f.3 → 0.95.2-JOB-141866-acfcddc.7

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.95.2-JOB-141866-cab4e3f.3+cab4e3feb",
+    "version": "0.95.2-JOB-141866-acfcddc.7+acfcddc57",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -96,5 +96,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "cab4e3febe1c59269f69b54e3b442122ac0a3cde"
+    "gitHead": "acfcddc57c91d179ef43e2ed44fd25bd3cae6405"
 }

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -2,11 +2,10 @@ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, u
 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 { useStyles } from "./ContentOverlay.style";
 import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
 import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
-import { useIsScreenReaderEnabled } from "../hooks";
+import { useIsScreenReaderEnabled, useKeyboardVisibility } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";

package/dist/src/Form/Form.js

@@ -39,7 +39,7 @@ import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
 import { useAtlantisFormContext } from "./context/AtlantisFormContext";
-import { InputAccessoriesProvider } from "../InputText";
+import { InputAccessoriesProvider, useInputAccessoriesContext, } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 export function Form(_a) {
@@ -54,6 +54,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
     const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
     const [saveButtonHeight, setSaveButtonHeight] = useState(0);
     const [messageBannerHeight, setMessageBannerHeight] = useState(0);
+    const { setIsScrolling } = useInputAccessoriesContext();
     const { formMethods, handleSubmit, isSubmitting, removeListenerRef, setLocalCache, } = useInternalForm({
         mode,
         reValidateMode,
@@ -92,18 +93,14 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
     const handleOfflineSubmit = useOfflineHandler();
     const keyboardProps = Platform.select({
         ios: {
-            onKeyboardDidHide: handleKeyboardHide,
-            onKeyboardDidShow: handleKeyboardShow,
-            onKeyboardDidChangeFrame: handleKeyboardDidChangeFrame,
+            onKeyboardWillHide: handleKeyboardHide,
+            onKeyboardWillShow: handleKeyboardShow,
         },
         android: {
             onKeyboardDidHide: handleKeyboardHide,
             onKeyboardDidShow: handleKeyboardShow,
         },
     });
-    const onLayout = (event) => {
-        setMessageBannerHeight(event.nativeEvent.layout.height);
-    };
     const styles = useStyles();
     const { edgeToEdgeEnabled } = useAtlantisFormContext();
     return (React.createElement(FormProvider, Object.assign({}, formMethods),
@@ -111,11 +108,17 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
             (isSubmitting || isSecondaryActionLoading) && React.createElement(FormMask, null),
             React.createElement(FormCache, { localCacheKey: localCacheKey, localCacheExclude: localCacheExclude, setLocalCache: setLocalCache }),
             React.createElement(FormBody, { keyboardHeight: calculateSaveButtonOffset(), submit: handleSubmit(internalSubmit), isFormSubmitting: isSubmitting, saveButtonLabel: saveButtonLabel, shouldRenderActionBar: saveButtonPosition === "sticky", renderStickySection: renderStickySection, secondaryActions: secondaryActions, setSecondaryActionLoading: setIsSecondaryActionLoading, setSaveButtonHeight: setSaveButtonHeight, saveButtonOffset: saveButtonOffset },
-                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: true, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
+                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: true, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer, onScrollBeginDrag: () => {
+                        setIsScrolling(true);
+                    }, onScrollEndDrag: () => {
+                        setIsScrolling(false);
+                    } }),
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },
-                        React.createElement(View, { onLayout: onLayout },
+                        React.createElement(View, { onLayout: ({ nativeEvent }) => {
+                                setMessageBannerHeight(nativeEvent.layout.height);
+                            } },
                             React.createElement(FormMessageBanner, { bannerMessages: bannerMessages }),
                             React.createElement(FormErrorBanner, { networkError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.networkError, bannerError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.bannerError })),
                         React.createElement(View, { style: styles.formChildContainer },
@@ -126,19 +129,6 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
                     React.createElement(View, { style: styles.safeArea, ref: bottomViewRef })))),
         React.createElement(FormMessage, null)));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function handleKeyboardDidChangeFrame(frames) {
-        if (frames &&
-            "endCoordinates" in frames &&
-            "height" in frames.endCoordinates &&
-            typeof frames.endCoordinates.height === "number" &&
-            frames.endCoordinates.height > keyboardHeight) {
-            handleKeyboardShow(frames);
-        }
-        else {
-            handleKeyboardHide();
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function handleKeyboardShow(frames) {
         setKeyboardScreenY(frames.endCoordinates.screenY);
         setKeyboardHeight(frames.endCoordinates.height);

package/dist/src/InputText/InputText.js

@@ -7,6 +7,14 @@ import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+import { useScreenInformation } from "../Form/hooks/useScreenInformation";
+/**
+ * Buffer zone in pixels for offscreen detection.
+ * This makes the detection more sensitive by marking the component as offscreen
+ * even if it's technically still visible but within this buffer distance from the edge.
+ */
+// 44 (accessory bar height) + 20 (buffer)
+const KEYBOARD_AWARE_DETECTION_BUFFER = 64;
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
 function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, showMiniLabel = true, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
@@ -40,7 +48,7 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
         placeholderTextColor: "transparent",
     }));
     const _name = name !== null && name !== void 0 ? name : field.name;
-    const { inputAccessoryID, register, unregister, setFocusedInput, canFocusNext, onFocusNext, } = useInputAccessoriesContext();
+    const { inputAccessoryID, register, unregister, setFocusedInput, canFocusNext, onFocusNext, isScrolling, } = useInputAccessoriesContext();
     useEffect(() => {
         _name &&
             register(_name, () => {
@@ -75,8 +83,23 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     }
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
+    const { headerHeight, windowHeight } = useScreenInformation();
+    // State to track if the InputText component can fully fit on screen
+    // (i.e., it's completely visible). Use this state to handle visibility issues.
+    const [canFullyFitOnScreen, setCanFullyFitOnScreen] = useState(true);
     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 },
-        React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
+        React.createElement(TextInput, Object.assign({ onLayout: (event) => {
+                var _a;
+                (_a = event.target) === null || _a === void 0 ? void 0 : _a.measureInWindow((_, y, __, height) => {
+                    // Check if component can't fully fit on screen (height only)
+                    // Account for headerHeight at the top of the screen and buffer zone
+                    const visibleTop = headerHeight + KEYBOARD_AWARE_DETECTION_BUFFER; // Top of visible area (below header) with buffer
+                    const visibleBottom = windowHeight - KEYBOARD_AWARE_DETECTION_BUFFER; // Bottom of visible area with buffer
+                    const isOffScreen = y < visibleTop || // Top edge is behind or above the header (with buffer)
+                        y + height > visibleBottom; // Bottom edge is below the window (with buffer)
+                    setCanFullyFitOnScreen(!isOffScreen);
+                });
+            }, inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,
                 styles.inputPaddingTop,
                 !miniLabelActive && commonInputStyles.inputEmpty,
@@ -89,7 +112,17 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
                     styles.multilineWithoutMiniLabel,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
                 loading && loadingType === "glimmer" && { color: "transparent" },
-            ], readOnly: readonly, editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+            ], 
+            // Prevent focus during scroll for multiline inputs to avoid
+            // the input focusing when the user is trying to scroll the form
+            readOnly: readonly || (multiline && isScrolling && !focused), 
+            // readOnly={readonly}
+            editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, 
+            // Makes sure it doesn't jump to the top of the screen when the keyboard is shown and a new line is added.
+            // State for tracking if the input should be scrollable.
+            // 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" && !canFullyFitOnScreen, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);

package/dist/src/InputText/context/InputAccessoriesContext.js

@@ -10,6 +10,8 @@ const inputAccessoriesContextDefaultValues = {
     onFocusNext: () => undefined,
     onFocusPrevious: () => undefined,
     setFocusedInput: () => undefined,
+    isScrolling: false,
+    setIsScrolling: () => undefined,
 };
 export const InputAccessoriesContext = createContext(inputAccessoriesContextDefaultValues);
 export function useInputAccessoriesContext() {

package/dist/src/InputText/context/InputAccessoriesProvider.js

@@ -5,7 +5,7 @@ import { InputAccessoriesContext } from "./InputAccessoriesContext";
 import { useStyles } from "./InputAccessoriesProvider.style";
 export function InputAccessoriesProvider({ children, }) {
     const inputAccessoryID = useRef(v4()).current;
-    const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, } = useInputAccessoriesProviderState();
+    const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, isScrolling, setIsScrolling, } = useInputAccessoriesProviderState();
     const colorScheme = useColorScheme();
     const styles = useStyles();
     return (React.createElement(InputAccessoriesContext.Provider, { value: {
@@ -19,6 +19,8 @@ export function InputAccessoriesProvider({ children, }) {
             onFocusNext,
             onFocusPrevious,
             setFocusedInput,
+            isScrolling,
+            setIsScrolling,
         } },
         children,
         Platform.OS === "ios" && (React.createElement(InputAccessoryView, { nativeID: inputAccessoryID },
@@ -49,6 +51,7 @@ function useInputAccessoriesProviderState() {
     const [canFocusNext, setCanFocusNext] = useState(false);
     const [canFocusPrevious, setCanFocusPrevious] = useState(false);
     const [elements, setElements] = useState({});
+    const [isScrolling, setIsScrolling] = useState(false);
     const keys = Object.keys(elements);
     const selectedIndex = keys.findIndex(key => key === focusedInput);
     const nextKey = keys[selectedIndex + 1];
@@ -68,5 +71,7 @@ function useInputAccessoriesProviderState() {
         setCanFocusPrevious,
         elements,
         setElements,
+        isScrolling,
+        setIsScrolling,
     };
 }

package/dist/src/hooks/index.js

@@ -1,2 +1,3 @@
 export * from "./useFormController";
 export * from "./useIsScreenReaderEnabled";
+export * from "./useKeyboardVisibility";