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

package/dist/types/src/InputText/context/types.d.ts

@@ -19,5 +19,7 @@ export interface InputAccessoriesContextProps {
     readonly onFocusNext: () => void;
     readonly onFocusPrevious: () => void;
     readonly setFocusedInput: (name: string) => void;
+    readonly isScrolling: boolean;
+    readonly setIsScrolling: (isScrolling: boolean) => void;
 }
 export {};

package/dist/types/src/hooks/index.d.ts

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

package/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/src/ContentOverlay/ContentOverlay.tsx

@@ -18,7 +18,6 @@ import {
   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 type {
@@ -27,7 +26,7 @@ import type {
   ModalBackgroundColor,
 } from "./types";
 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/src/Form/Form.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import type { FieldValues } from "react-hook-form";
 import { FormProvider } from "react-hook-form";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import type { LayoutChangeEvent } from "react-native";
 import { Keyboard, Platform, View, findNodeHandle } from "react-native";
 import { useStyles } from "./Form.style";
 import { FormErrorBanner } from "./components/FormErrorBanner";
@@ -27,7 +26,10 @@ 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";
 
@@ -71,6 +73,7 @@ function InternalForm<T extends FieldValues, S>({
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
   const [messageBannerHeight, setMessageBannerHeight] = useState(0);
+  const { setIsScrolling } = useInputAccessoriesContext();
   const {
     formMethods,
     handleSubmit,
@@ -122,9 +125,8 @@ function InternalForm<T extends FieldValues, S>({
 
   const keyboardProps = Platform.select({
     ios: {
-      onKeyboardDidHide: handleKeyboardHide,
-      onKeyboardDidShow: handleKeyboardShow,
-      onKeyboardDidChangeFrame: handleKeyboardDidChangeFrame,
+      onKeyboardWillHide: handleKeyboardHide,
+      onKeyboardWillShow: handleKeyboardShow,
     },
     android: {
       onKeyboardDidHide: handleKeyboardHide,
@@ -132,10 +134,6 @@ function InternalForm<T extends FieldValues, S>({
     },
   });
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    setMessageBannerHeight(event.nativeEvent.layout.height);
-  };
-
   const styles = useStyles();
 
   const { edgeToEdgeEnabled } = useAtlantisFormContext();
@@ -179,13 +177,23 @@ function InternalForm<T extends FieldValues, S>({
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }
+            onScrollBeginDrag={() => {
+              setIsScrolling(true);
+            }}
+            onScrollEndDrag={() => {
+              setIsScrolling(false);
+            }}
           >
             <View
               onLayout={({ nativeEvent }) => {
                 setFormContentHeight(nativeEvent.layout.height);
               }}
             >
-              <View onLayout={onLayout}>
+              <View
+                onLayout={({ nativeEvent }) => {
+                  setMessageBannerHeight(nativeEvent.layout.height);
+                }}
+              >
                 <FormMessageBanner bannerMessages={bannerMessages} />
                 <FormErrorBanner
                   networkError={bannerErrors?.networkError}
@@ -230,21 +238,6 @@ function InternalForm<T extends FieldValues, S>({
     </FormProvider>
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function handleKeyboardDidChangeFrame(frames: Record<string, any>) {
-    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: Record<string, any>) {
     setKeyboardScreenY(frames.endCoordinates.screenY);

package/src/InputText/InputText.tsx

@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import type {
   FocusEvent,
+  LayoutChangeEvent,
   ReturnKeyTypeOptions,
   StyleProp,
   TextInputProps,
@@ -29,6 +30,15 @@ import type {
 } from "../InputFieldWrapper/InputFieldWrapper";
 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 interface InputTextProps
   extends Pick<
@@ -333,6 +343,7 @@ function InputTextInternal(
     setFocusedInput,
     canFocusNext,
     onFocusNext,
+    isScrolling,
   } = useInputAccessoriesContext();
   useEffect(() => {
     _name &&
@@ -372,6 +383,10 @@ function InputTextInternal(
 
   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 (
     <InputFieldWrapper
@@ -394,6 +409,20 @@ function InputTextInternal(
       loadingType={loadingType}
     >
       <TextInput
+        onLayout={(event: LayoutChangeEvent) => {
+          event.target?.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}
@@ -413,14 +442,21 @@ function InputTextInternal(
           styleOverride?.inputText,
           loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
-        readOnly={readonly}
+        // 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}
-        scrollEnabled={false}
+        // 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}

package/src/InputText/context/InputAccessoriesContext.ts

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

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -27,6 +27,8 @@ export function InputAccessoriesProvider({
     setElements,
     previousKey,
     nextKey,
+    isScrolling,
+    setIsScrolling,
   } = useInputAccessoriesProviderState();
 
   const colorScheme = useColorScheme();
@@ -46,6 +48,8 @@ export function InputAccessoriesProvider({
         onFocusNext,
         onFocusPrevious,
         setFocusedInput,
+        isScrolling,
+        setIsScrolling,
       }}
     >
       {children}
@@ -96,6 +100,7 @@ function useInputAccessoriesProviderState() {
   const [canFocusNext, setCanFocusNext] = useState(false);
   const [canFocusPrevious, setCanFocusPrevious] = useState(false);
   const [elements, setElements] = useState<Record<string, () => void>>({});
+  const [isScrolling, setIsScrolling] = useState(false);
 
   const keys = Object.keys(elements);
   const selectedIndex = keys.findIndex(key => key === focusedInput);
@@ -119,5 +124,7 @@ function useInputAccessoriesProviderState() {
     setCanFocusPrevious,
     elements,
     setElements,
+    isScrolling,
+    setIsScrolling,
   };
 }

package/src/InputText/context/types.ts

@@ -25,4 +25,6 @@ export interface InputAccessoriesContextProps {
   readonly onFocusNext: () => void;
   readonly onFocusPrevious: () => void;
   readonly setFocusedInput: (name: string) => void;
+  readonly isScrolling: boolean;
+  readonly setIsScrolling: (isScrolling: boolean) => void;
 }

package/src/hooks/index.ts

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