@jobber/components-native 0.95.2-JOB-141866-990fa70.9 → 0.95.2-JOB-141866-a6ee36d.22

package/dist/types/src/Form/types.d.ts

@@ -157,6 +157,13 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * Renders a footer below the save button.
      */
     renderFooter?: React.ReactNode;
+    /**
+     * TODO: JOB-147156 This is a HACK for multiline inputs on iOS scrolling issue.
+     * Disables the keyboard aware scroll view.
+     * This is useful when you want to disable the keyboard aware scroll view for a specific form.
+     * For example, when you have a form with a lot of fields and you want to disable the keyboard aware scroll view.
+     */
+    disableKeyboardAwareScroll?: boolean;
 }
 export type InternalFormProps<T extends FieldValues, SubmitResponseType> = Omit<FormProps<T, SubmitResponseType>, "initialLoading">;
 export type ValidationRulesByFieldPath<T extends FieldValues> = {

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

@@ -6,11 +6,6 @@ import type { RegisterOptions } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldStyleOverride, InputFieldWrapperProps } from "../InputFieldWrapper/InputFieldWrapper";
-/**
- * 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.
- */
 export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" | "toolbarVisibility" | "loading" | "loadingType"> {
     /**
      * Highlights the field red and shows message below (if string) to indicate an error

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

@@ -19,7 +19,5 @@ 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,3 +1,2 @@
 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-990fa70.9+990fa7081",
+  "version": "0.95.2-JOB-141866-a6ee36d.22+a6ee36d10",
   "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": "990fa708191391b1d9f973c5eccd4dd8ec532424"
+  "gitHead": "a6ee36d10f2c1ba08f20ad6bb9019e274bcee16f"
 }

package/src/ContentOverlay/ContentOverlay.tsx

@@ -18,6 +18,7 @@ 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 {
@@ -26,7 +27,7 @@ import type {
   ModalBackgroundColor,
 } from "./types";
 import { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
-import { useIsScreenReaderEnabled, useKeyboardVisibility } from "../hooks";
+import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";

package/src/Form/Form.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo, useState } from "react";
+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";
@@ -26,10 +27,7 @@ import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
 import { useAtlantisFormContext } from "./context/AtlantisFormContext";
-import {
-  InputAccessoriesProvider,
-  useInputAccessoriesContext,
-} from "../InputText";
+import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
 
@@ -67,13 +65,13 @@ function InternalForm<T extends FieldValues, S>({
   secondaryActions,
   saveButtonOffset,
   showStickySaveButton = false,
+  disableKeyboardAwareScroll = false,
   renderFooter,
   UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
   const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
   const [saveButtonHeight, setSaveButtonHeight] = useState(0);
   const [messageBannerHeight, setMessageBannerHeight] = useState(0);
-  const { setIsScrolling } = useInputAccessoriesContext();
   const {
     formMethods,
     handleSubmit,
@@ -111,12 +109,8 @@ function InternalForm<T extends FieldValues, S>({
   const [isSecondaryActionLoading, setIsSecondaryActionLoading] =
     useState<boolean>(false);
 
-  const { calculatedKeyboardHeight } = useMemo(() => {
-    return {
-      calculatedKeyboardHeight:
-        keyboardHeight - (paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE),
-    };
-  }, [paddingBottom, keyboardHeight]);
+  const extraViewHeight = paddingBottom + KEYBOARD_SAVE_BUTTON_DISTANCE;
+  const calculatedKeyboardHeight = keyboardHeight - extraViewHeight;
 
   useScrollToError({
     formState: formMethods.formState,
@@ -138,6 +132,10 @@ function InternalForm<T extends FieldValues, S>({
     },
   });
 
+  const onLayout = (event: LayoutChangeEvent) => {
+    setMessageBannerHeight(event.nativeEvent.layout.height);
+  };
+
   const styles = useStyles();
 
   const { edgeToEdgeEnabled } = useAtlantisFormContext();
@@ -168,7 +166,7 @@ function InternalForm<T extends FieldValues, S>({
         >
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
-            enableAutomaticScroll={true}
+            enableAutomaticScroll={!disableKeyboardAwareScroll}
             enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
@@ -181,23 +179,13 @@ 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={({ nativeEvent }) => {
-                  setMessageBannerHeight(nativeEvent.layout.height);
-                }}
-              >
+              <View onLayout={onLayout}>
                 <FormMessageBanner bannerMessages={bannerMessages} />
                 <FormErrorBanner
                   networkError={bannerErrors?.networkError}

package/src/Form/types.ts

@@ -201,6 +201,14 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * Renders a footer below the save button.
    */
   renderFooter?: React.ReactNode;
+
+  /**
+   * TODO: JOB-147156 This is a HACK for multiline inputs on iOS scrolling issue.
+   * Disables the keyboard aware scroll view.
+   * This is useful when you want to disable the keyboard aware scroll view for a specific form.
+   * For example, when you have a form with a lot of fields and you want to disable the keyboard aware scroll view.
+   */
+  disableKeyboardAwareScroll?: boolean;
 }
 
 export type InternalFormProps<T extends FieldValues, SubmitResponseType> = Omit<

package/src/InputText/InputText.tsx

@@ -29,15 +29,6 @@ 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<
@@ -341,7 +332,6 @@ function InputTextInternal(
     unregister,
     setFocusedInput,
     canFocusNext,
-    isScrolling,
     onFocusNext,
   } = useInputAccessoriesContext();
   useEffect(() => {
@@ -382,10 +372,6 @@ 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
@@ -408,20 +394,6 @@ 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}
@@ -441,21 +413,14 @@ 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}
+        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"}
+        scrollEnabled={false}
         textContentType={textContentType}
         onChangeText={handleChangeText}
         onSubmitEditing={handleOnSubmitEditing}

package/src/InputText/context/InputAccessoriesContext.ts

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

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -27,8 +27,6 @@ export function InputAccessoriesProvider({
     setElements,
     previousKey,
     nextKey,
-    isScrolling,
-    setIsScrolling,
   } = useInputAccessoriesProviderState();
 
   const colorScheme = useColorScheme();
@@ -48,8 +46,6 @@ export function InputAccessoriesProvider({
         onFocusNext,
         onFocusPrevious,
         setFocusedInput,
-        isScrolling,
-        setIsScrolling,
       }}
     >
       {children}
@@ -100,7 +96,6 @@ 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);
@@ -124,7 +119,5 @@ function useInputAccessoriesProviderState() {
     setCanFocusPrevious,
     elements,
     setElements,
-    isScrolling,
-    setIsScrolling,
   };
 }

package/src/InputText/context/types.ts

@@ -25,6 +25,4 @@ 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,3 +1,2 @@
 export * from "./useFormController";
 export * from "./useIsScreenReaderEnabled";
-export * from "./useKeyboardVisibility";