@jobber/components-native 0.95.2-JOB-141866-ccf6ba8.10 → 0.95.2-JOB-141866-5052098.24

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/InputFieldWrapper/InputFieldWrapper.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { 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,8 +82,7 @@ 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, scrollViewHackOnLayout, }: 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, }: InputFieldWrapperProps): React.JSX.Element;

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-ccf6ba8.10+ccf6ba8d6",
+  "version": "0.95.2-JOB-141866-5052098.24+505209802",
   "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": "ccf6ba8d6a687be9144debdfeab7c09525685fb0"
+  "gitHead": "5052098024ddd00b6992954ce35278a551c13ed4"
 }

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";
@@ -64,6 +65,7 @@ function InternalForm<T extends FieldValues, S>({
   secondaryActions,
   saveButtonOffset,
   showStickySaveButton = false,
+  disableKeyboardAwareScroll = false,
   renderFooter,
   UNSAFE_allowDiscardLocalCacheWhenOffline,
 }: InternalFormProps<T, S>) {
@@ -107,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,
@@ -134,6 +132,10 @@ function InternalForm<T extends FieldValues, S>({
     },
   });
 
+  const onLayout = (event: LayoutChangeEvent) => {
+    setMessageBannerHeight(event.nativeEvent.layout.height);
+  };
+
   const styles = useStyles();
 
   const { edgeToEdgeEnabled } = useAtlantisFormContext();
@@ -164,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
@@ -183,11 +185,7 @@ function InternalForm<T extends FieldValues, S>({
                 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/InputFieldWrapper/InputFieldWrapper.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import type {
-  LayoutChangeEvent,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
+import type { 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";
@@ -117,8 +112,6 @@ 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 =
@@ -145,7 +138,6 @@ export function InputFieldWrapper({
   toolbarVisibility = "while-editing",
   loading = false,
   loadingType = "spinner",
-  scrollViewHackOnLayout,
 }: InputFieldWrapperProps) {
   fieldAffixRequiredPropsCheck([prefix, suffix]);
   const handleClear = onClear ?? noopClear;
@@ -172,7 +164,6 @@ export function InputFieldWrapper({
           disabled && styles.disabled,
           styleOverride?.container,
         ]}
-        onLayout={scrollViewHackOnLayout}
       >
         <View style={styles.field}>
           {prefix?.icon && (

package/src/InputText/InputText.tsx

@@ -1,7 +1,6 @@
 import type { Ref, SyntheticEvent } from "react";
 import React, {
   forwardRef,
-  useDeferredValue,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -23,23 +22,13 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
-import { useFormController, useKeyboardVisibility } from "../hooks";
+import { useFormController } 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";
-
-/**
- * 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 = 40;
 
 export interface InputTextProps
   extends Pick<
@@ -383,25 +372,9 @@ function InputTextInternal(
 
   const styles = useStyles();
   const commonInputStyles = useCommonInputStyles();
-  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}
@@ -447,11 +420,13 @@ function InputTextInternal(
         autoFocus={autoFocus}
         autoComplete={autoComplete}
         multiline={multiline}
+        // TODO: JOB-147156 This is a HACK for multiline inputs on iOS scrolling issue.
+        // This hack should be removed once we swap keyboard aware libraries in JOB-147156
+        // If this is needed then we need to figure out a better solution.
         // 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" && enableScroll}
+        scrollEnabled={Platform.OS === "ios" && multiline}
         textContentType={textContentType}
         onChangeText={handleChangeText}
         onSubmitEditing={handleOnSubmitEditing}

package/src/InputText/context/InputAccessoriesProvider.test.tsx

@@ -8,7 +8,6 @@ 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/hooks/index.ts

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