@jobber/components-native 0.95.2-JOB-141866-990fa70.9 → 0.95.2-JOB-141866-ccf6ba8.10

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { FieldError } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 export type Clearable = "never" | "while-editing" | "always";
@@ -82,7 +82,8 @@ export interface InputFieldWrapperProps {
      * Change the type of loading indicator to spinner or glimmer.
      */
     readonly loadingType?: "spinner" | "glimmer";
+    readonly scrollViewHackOnLayout?: (event: LayoutChangeEvent) => void;
 }
 export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): React.JSX.Element;
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, scrollViewHackOnLayout, }: InputFieldWrapperProps): React.JSX.Element;

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/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-ccf6ba8.10+ccf6ba8d6",
   "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": "ccf6ba8d6a687be9144debdfeab7c09525685fb0"
 }

package/src/Form/Form.tsx

@@ -26,10 +26,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";
 
@@ -73,7 +70,6 @@ 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,
@@ -181,12 +177,6 @@ function InternalForm<T extends FieldValues, S>({
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }
-            onScrollBeginDrag={() => {
-              setIsScrolling(true);
-            }}
-            onScrollEndDrag={() => {
-              setIsScrolling(false);
-            }}
           >
             <View
               onLayout={({ nativeEvent }) => {

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type {
+  LayoutChangeEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
 import { Text as RNText, View } from "react-native";
 import type { FieldError } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
@@ -112,6 +117,8 @@ export interface InputFieldWrapperProps {
    * Change the type of loading indicator to spinner or glimmer.
    */
   readonly loadingType?: "spinner" | "glimmer";
+
+  readonly scrollViewHackOnLayout?: (event: LayoutChangeEvent) => void;
 }
 
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID =
@@ -138,6 +145,7 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
+  scrollViewHackOnLayout,
 }: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
@@ -164,6 +172,7 @@ export function InputFieldWrapper({
           disabled && styles.disabled,
           styleOverride?.container,
         ]}
+        onLayout={scrollViewHackOnLayout}
       >
         <View style={styles.field}>
           {prefix?.icon && (

package/src/InputText/InputText.tsx

@@ -1,6 +1,7 @@
 import type { Ref, SyntheticEvent } from "react";
 import React, {
   forwardRef,
+  useDeferredValue,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -22,13 +23,14 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
-import { useFormController } from "../hooks";
+import { useFormController, useKeyboardVisibility } from "../hooks";
 import type {
   InputFieldStyleOverride,
   InputFieldWrapperProps,
 } from "../InputFieldWrapper/InputFieldWrapper";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+import { useScreenInformation } from "../Form/hooks/useScreenInformation";
 // import { useScreenInformation } from "../Form/hooks/useScreenInformation";
 
 /**
@@ -37,7 +39,7 @@ import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.sty
  * 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;
+const KEYBOARD_AWARE_DETECTION_BUFFER = 40;
 
 export interface InputTextProps
   extends Pick<
@@ -341,7 +343,6 @@ function InputTextInternal(
     unregister,
     setFocusedInput,
     canFocusNext,
-    isScrolling,
     onFocusNext,
   } = useInputAccessoriesContext();
   useEffect(() => {
@@ -382,13 +383,25 @@ 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);
+  const { headerHeight, windowHeight } = useScreenInformation();
+  const { keyboardHeight } = useKeyboardVisibility();
+  const maxHeight = useDeferredValue(
+    windowHeight -
+      headerHeight -
+      keyboardHeight -
+      KEYBOARD_AWARE_DETECTION_BUFFER,
+  );
+  const [inputHeight, setInputHeight] = useState(0);
+
+  const enableScroll = useDeferredValue(inputHeight > maxHeight);
 
   return (
     <InputFieldWrapper
+      scrollViewHackOnLayout={event => {
+        event.target?.measureInWindow((_, y, __, height) => {
+          setInputHeight(height);
+        });
+      }}
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
@@ -408,20 +421,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,10 +440,7 @@ 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)}
@@ -455,7 +451,7 @@ function InputTextInternal(
         // 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={Platform.OS === "ios" && enableScroll}
         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.test.tsx

@@ -8,6 +8,7 @@ import { InputText } from "../InputText";
 const mockUseFormController = jest.fn();
 jest.mock("../../hooks", () => {
   return {
+    ...jest.requireActual("../../hooks"),
     useFormController: (
       ...args: [{ name: string; value: string; validations: unknown }]
     ) => mockUseFormController(...args),

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;
 }