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

package/dist/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/dist/src/ContentOverlay/ContentOverlay.js

@@ -2,10 +2,11 @@ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, u
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AccessibilityInfo, Platform, View, findNodeHandle, 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 { 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/dist/src/Form/Form.js

@@ -18,7 +18,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { FormProvider } from "react-hook-form";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { Keyboard, Platform, View, findNodeHandle } from "react-native";
@@ -49,7 +49,7 @@ export function Form(_a) {
         React.createElement(ErrorMessageProvider, null, child)));
 }
 // eslint-disable-next-line max-statements
-function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSubmitSuccess, bannerErrors, bannerMessages, initialValues, mode = "onTouched", reValidateMode = "onChange", formRef, saveButtonLabel, renderStickySection, localCacheKey, localCacheExclude, localCacheId, secondaryActions, saveButtonOffset, showStickySaveButton = false, renderFooter, UNSAFE_allowDiscardLocalCacheWhenOffline, }) {
+function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSubmitSuccess, bannerErrors, bannerMessages, initialValues, mode = "onTouched", reValidateMode = "onChange", formRef, saveButtonLabel, renderStickySection, localCacheKey, localCacheExclude, localCacheId, secondaryActions, saveButtonOffset, showStickySaveButton = false, disableKeyboardAwareScroll = false, renderFooter, UNSAFE_allowDiscardLocalCacheWhenOffline, }) {
     var _a;
     const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
     const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -81,11 +81,8 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         keyboardScreenY,
     });
     const [isSecondaryActionLoading, setIsSecondaryActionLoading] = useState(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,
         refNode: findNodeHandle(scrollViewRef.current),
@@ -103,6 +100,9 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
             onKeyboardDidShow: handleKeyboardShow,
         },
     });
+    const onLayout = (event) => {
+        setMessageBannerHeight(event.nativeEvent.layout.height);
+    };
     const styles = useStyles();
     const { edgeToEdgeEnabled } = useAtlantisFormContext();
     return (React.createElement(FormProvider, Object.assign({}, formMethods),
@@ -110,13 +110,11 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
             (isSubmitting || isSecondaryActionLoading) && React.createElement(FormMask, null),
             React.createElement(FormCache, { localCacheKey: localCacheKey, localCacheExclude: localCacheExclude, setLocalCache: setLocalCache }),
             React.createElement(FormBody, { keyboardHeight: calculateSaveButtonOffset(), submit: handleSubmit(internalSubmit), isFormSubmitting: isSubmitting, saveButtonLabel: saveButtonLabel, shouldRenderActionBar: saveButtonPosition === "sticky", renderStickySection: renderStickySection, secondaryActions: secondaryActions, setSecondaryActionLoading: setIsSecondaryActionLoading, setSaveButtonHeight: setSaveButtonHeight, saveButtonOffset: saveButtonOffset },
-                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: true, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
+                React.createElement(KeyboardAwareScrollView, Object.assign({ enableResetScrollToCoords: false, enableAutomaticScroll: !disableKeyboardAwareScroll, enableOnAndroid: edgeToEdgeEnabled, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, extraScrollHeight: edgeToEdgeEnabled ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },
-                        React.createElement(View, { onLayout: ({ nativeEvent }) => {
-                                setMessageBannerHeight(nativeEvent.layout.height);
-                            } },
+                        React.createElement(View, { onLayout: onLayout },
                             React.createElement(FormMessageBanner, { bannerMessages: bannerMessages }),
                             React.createElement(FormErrorBanner, { networkError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.networkError, bannerError: bannerErrors === null || bannerErrors === void 0 ? void 0 : bannerErrors.bannerError })),
                         React.createElement(View, { style: styles.formChildContainer },

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -11,7 +11,7 @@ import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode = "normal", hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", scrollViewHackOnLayout, }) {
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode = "normal", hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", }) {
     fieldAffixRequiredPropsCheck([prefix, suffix]);
     const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
     warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -29,7 +29,7 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                 (Boolean(invalid) || error) && styles.inputInvalid,
                 disabled && styles.disabled,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
-            ], onLayout: scrollViewHackOnLayout },
+            ] },
             React.createElement(View, { style: styles.field },
                 (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, inputInvalid: inputInvalid, icon: prefix.icon })),
                 React.createElement(View, { style: [styles.inputContainer] },

package/dist/src/InputText/InputText.js

@@ -1,21 +1,12 @@
-import React, { forwardRef, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Platform, TextInput } from "react-native";
 import identity from "lodash/identity";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
-import { useFormController, useKeyboardVisibility } from "../hooks";
+import { useFormController } from "../hooks";
 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 const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
 function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, showMiniLabel = true, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
@@ -84,20 +75,7 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     }
     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 (React.createElement(InputFieldWrapper, { scrollViewHackOnLayout: event => {
-            var _a;
-            (_a = event.target) === null || _a === void 0 ? void 0 : _a.measureInWindow((_, y, __, height) => {
-                setInputHeight(height);
-            });
-        }, prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
         React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,
                 styles.inputPaddingTop,
@@ -112,11 +90,13 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
                 loading && loadingType === "glimmer" && { color: "transparent" },
             ], readOnly: readonly, editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), 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, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+            scrollEnabled: Platform.OS === "ios" && multiline, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
                 _name && setFocusedInput(_name);
                 setFocused(true);
                 onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);

package/dist/src/hooks/index.js

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