@jobber/components-native 0.95.2-JOB-141866-1ab1d84.4 → 0.95.2-JOB-141866-80fe04c.8

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-1ab1d84.4+1ab1d8407",
+  "version": "0.95.2-JOB-141866-80fe04c.8+80fe04c86",
   "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": "1ab1d8407fce8e7c5ea822477740ec1d5b8f1abb"
+  "gitHead": "80fe04c86fc91e07591231460c32bc3194072bdc"
 }

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

@@ -1,8 +1,7 @@
-import React, { useState } from "react";
+import React, { useMemo, 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";
@@ -71,6 +70,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,
@@ -108,8 +108,12 @@ function InternalForm<T extends FieldValues, S>({
   const [isSecondaryActionLoading, setIsSecondaryActionLoading] =
     useState<boolean>(false);
 
-  const extraViewHeight = paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE;
-  const calculatedKeyboardHeight = keyboardHeight - extraViewHeight;
+  const { calculatedKeyboardHeight } = useMemo(() => {
+    return {
+      calculatedKeyboardHeight:
+        keyboardHeight - (paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE),
+    };
+  }, [paddingBottom, keyboardHeight]);
 
   useScrollToError({
     formState: formMethods.formState,
@@ -122,9 +126,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 +135,6 @@ function InternalForm<T extends FieldValues, S>({
     },
   });
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    setMessageBannerHeight(event.nativeEvent.layout.height);
-  };
-
   const styles = useStyles();
 
   const { edgeToEdgeEnabled } = useAtlantisFormContext();
@@ -179,13 +178,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 +239,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

@@ -29,6 +29,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<
@@ -372,6 +381,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 +407,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,6 +440,9 @@ function InputTextInternal(
           styleOverride?.inputText,
           loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
+        // 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}
@@ -420,7 +450,11 @@ function InputTextInternal(
         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"}
         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";