@jobber/components-native 0.95.2-JOB-141866-80fe04c.8 → 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/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-80fe04c.8+80fe04c86",
+  "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": "80fe04c86fc91e07591231460c32bc3194072bdc"
+  "gitHead": "ccf6ba8d6a687be9144debdfeab7c09525685fb0"
 }

package/src/Form/Form.tsx

@@ -70,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,
@@ -178,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,7 +23,7 @@ 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,
@@ -30,6 +31,7 @@ import type {
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 import { useScreenInformation } from "../Form/hooks/useScreenInformation";
+// import { useScreenInformation } from "../Form/hooks/useScreenInformation";
 
 /**
  * Buffer zone in pixels for offscreen detection.
@@ -37,7 +39,7 @@ import { useScreenInformation } from "../Form/hooks/useScreenInformation";
  * 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<
@@ -381,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}
@@ -407,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}
@@ -440,9 +440,6 @@ 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}
@@ -454,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;
 }