@jobber/components-native 0.85.1-JOB-124062-569fcb4.27 → 0.85.1-JOB-136074-0fe613a.28

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.85.1-JOB-124062-569fcb4.27+569fcb4b6",
+    "version": "0.85.1-JOB-136074-0fe613a.28+0fe613a84",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -43,7 +43,7 @@
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
-        "react-hook-form": "^7.52.0",
+        "react-hook-form": "^7.30.0",
         "react-intl": "^6.4.2",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modalize": "^2.0.13",
@@ -86,6 +86,7 @@
         "react": "^18.2.0",
         "react-intl": "^6.4.2",
         "react-native": ">=0.76.0",
+        "react-native-build-config": "^0.3.2",
         "react-native-gesture-handler": ">=2.10.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modal-datetime-picker": " >=13.0.0",
@@ -95,5 +96,10 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "569fcb4b6d2ef0068470ad901519b1a01de00ba5"
+    "peerDependenciesMeta": {
+        "react-native-build-config": {
+            "optional": true
+        }
+    },
+    "gitHead": "0fe613a84c9d804a249c128d7cd35ea5a6cbda38"
 }

package/dist/src/Form/Form.js

@@ -38,6 +38,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { isEdgeToEdgeEnabled } from "../utils/buildConfig/isEdgeToEdgeEnabled";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -102,12 +103,14 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
     const styles = useStyles();
+    // Check if edge-to-edge is enabled using utility function
+    const edgeToEdgeEnabled = isEdgeToEdgeEnabled();
     return (React.createElement(FormProvider, Object.assign({}, formMethods),
         React.createElement(React.Fragment, null,
             (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, keyboardOpeningTime: Platform.OS === "ios" ? tokens["timing-slowest"] : 0, keyboardShouldPersistTaps: "handled", ref: scrollViewRef }, keyboardProps, { extraHeight: headerHeight, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
+                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 ? 20 : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },

package/dist/src/Form/components/FormCache/FormCache.js

@@ -28,6 +28,5 @@ export function FormCache({ localCacheExclude, localCacheKey, setLocalCache, })
             setLocalCache(formData);
         }
     }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
-    // eslint-disable-next-line react/jsx-no-useless-fragment
     return React.createElement(React.Fragment, null);
 }

package/dist/src/InputCurrency/InputCurrency.js

@@ -24,31 +24,6 @@ const getKeyboard = (props) => {
         return "numeric";
     }
 };
-const computeDisplayFromNumericInput = (numberedValue, decimalNumbers, decimalCount, maxLength, maxDecimalPlaces, decimalPlaces, formatNumber) => {
-    const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
-    const stringValue = decimalNumbers !== ""
-        ? transformedValue.toString() + "." + decimalNumbers.slice(1)
-        : transformedValue.toString();
-    if (checkLastChar(stringValue)) {
-        const roundedDecimal = configureDecimal(decimalCount, maxDecimalPlaces, stringValue, decimalPlaces);
-        const internationalizedValueToDisplay = formatNumber(roundedDecimal, {
-            maximumFractionDigits: maxDecimalPlaces,
-        });
-        return {
-            onChangeValue: roundedDecimal,
-            displayValue: internationalizedValueToDisplay,
-        };
-    }
-    else {
-        const internationalizedValueToDisplay = formatNumber(transformedValue, {
-            maximumFractionDigits: maxDecimalPlaces,
-        }) + decimalNumbers;
-        return {
-            onChangeValue: transformedValue.toString() + "." + decimalNumbers.slice(1),
-            displayValue: internationalizedValueToDisplay,
-        };
-    }
-};
 export function InputCurrency(props) {
     var _a, _b;
     const { showCurrencySymbol = true, maxDecimalPlaces = 5, decimalPlaces = 2, maxLength = 10, } = props;
@@ -60,39 +35,52 @@ export function InputCurrency(props) {
     });
     const internalValue = getInternalValue(props, field, intl.formatNumber);
     const [displayValue, setDisplayValue] = useState(internalValue);
+    const setOnChangeAndDisplayValues = (onChangeValue, valueToDisplay) => {
+        var _a;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, onChangeValue);
+        setDisplayValue(valueToDisplay);
+    };
+    const checkDecimalAndI18nOfDisplayValue = (numberedValue, decimalNumbers, decimalCount) => {
+        const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+        const stringValue = decimalNumbers !== ""
+            ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+            : transformedValue.toString();
+        if (checkLastChar(stringValue)) {
+            const roundedDecimal = configureDecimal(decimalCount, maxDecimalPlaces, stringValue, decimalPlaces);
+            const internationalizedValueToDisplay = intl.formatNumber(roundedDecimal, {
+                maximumFractionDigits: maxDecimalPlaces,
+            });
+            setOnChangeAndDisplayValues(roundedDecimal, internationalizedValueToDisplay);
+        }
+        else {
+            const internationalizedValueToDisplay = intl.formatNumber(transformedValue, {
+                maximumFractionDigits: maxDecimalPlaces,
+            }) + decimalNumbers;
+            setOnChangeAndDisplayValues(transformedValue.toString() + "." + decimalNumbers.slice(1), internationalizedValueToDisplay);
+        }
+    };
     const handleChange = (newValue) => {
-        var _a, _b;
         const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(newValue, floatSeparators.decimal);
         const numberedValue = wholeIntegerValue
             ? convertToNumber(wholeIntegerValue)
             : wholeIntegerValue;
         if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-            const result = computeDisplayFromNumericInput(numberedValue, decimalNumbers, decimalCount, maxLength, maxDecimalPlaces, decimalPlaces, intl.formatNumber);
-            const { onChangeValue, displayValue: valueToDisplay } = result;
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, onChangeValue);
-            setDisplayValue(valueToDisplay);
+            checkDecimalAndI18nOfDisplayValue(numberedValue, decimalNumbers, decimalCount);
         }
         else {
             const value = (numberedValue === null || numberedValue === void 0 ? void 0 : numberedValue.toString()) + decimalNumbers;
-            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value);
-            setDisplayValue(value);
+            setOnChangeAndDisplayValues(value, value);
         }
     };
     const { t } = useAtlantisI18n();
-    const defaultValidations = {
-        pattern: {
-            value: NUMBER_VALIDATION_REGEX,
-            message: t("errors.notANumber"),
-        },
-    };
-    const mergedValidations = props.validations
-        ? Object.assign({}, defaultValidations, props.validations)
-        : defaultValidations;
     return (React.createElement(InputText, Object.assign({}, props, { prefix: showCurrencySymbol ? { label: currencySymbol } : undefined, keyboard: getKeyboard(props), value: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || displayValue, defaultValue: (_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.toString(), onChangeText: handleChange, transform: {
             output: val => {
                 return val === null || val === void 0 ? void 0 : val.split(floatSeparators.group).join("").replace(floatSeparators.decimal, ".");
             },
-        }, validations: mergedValidations, onBlur: () => {
+        }, validations: Object.assign({ pattern: {
+                value: NUMBER_VALIDATION_REGEX,
+                message: t("errors.notANumber"),
+            } }, props.validations), onBlur: () => {
             var _a;
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
             if (field.value === 0 ||

package/dist/src/InputEmail/InputEmail.js

@@ -2,14 +2,8 @@ import React, { forwardRef } from "react";
 import { InputText } from "../InputText";
 export const InputEmail = forwardRef(InputEmailInternal);
 function InputEmailInternal(props, ref) {
-    const defaultValidations = {
-        pattern: {
-            value: /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
-            message: "Enter a valid email address (email@example.com)",
-        },
-    };
-    const mergedValidations = props.validations
-        ? Object.assign({}, defaultValidations, props.validations)
-        : defaultValidations;
-    return (React.createElement(InputText, Object.assign({}, props, { ref: ref, autoCapitalize: "none", autoCorrect: false, keyboard: "email-address", validations: mergedValidations })));
+    return (React.createElement(InputText, Object.assign({}, props, { ref: ref, autoCapitalize: "none", autoCorrect: false, keyboard: "email-address", validations: Object.assign({ pattern: {
+                value: /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
+                message: "Enter a valid email address (email@example.com)",
+            } }, props.validations) })));
 }

package/dist/src/InputNumber/InputNumber.js

@@ -24,19 +24,13 @@ function InputNumberInternal(props, ref) {
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
     };
     const { inputTransform: convertToString, outputTransform: convertToNumber } = useNumberTransform(props.value);
-    const defaultValidations = {
-        pattern: {
-            value: NUMBER_VALIDATION_REGEX,
-            message: t("errors.notANumber"),
-        },
-    };
-    const mergedValidations = props.validations
-        ? Object.assign({}, defaultValidations, props.validations)
-        : defaultValidations;
     return (React.createElement(InputText, Object.assign({}, props, { keyboard: getKeyboard(), transform: {
             input: flow(convertToString, ((_a = props.transform) === null || _a === void 0 ? void 0 : _a.input) || identity),
             output: flow(convertToNumber, ((_b = props.transform) === null || _b === void 0 ? void 0 : _b.output) || identity),
-        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: mergedValidations })));
+        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: Object.assign({ pattern: {
+                value: NUMBER_VALIDATION_REGEX,
+                message: t("errors.notANumber"),
+            } }, props.validations) })));
 }
 function hasPeriodAtEnd(value) {
     // matches patterns like ".", "0.", "12.", "+1.", and "-0."

package/dist/src/hooks/useFormController.js

@@ -1,7 +1,8 @@
 import { v1 } from "react-native-uuid";
-import { get, useController, useForm, useFormContext } from "react-hook-form";
+import { useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 export function useFormController({ name, value, validations, }) {
+    var _a, _b;
     const fieldName = useControlName(name);
     const form = useForm({
         mode: "onTouched",
@@ -16,10 +17,18 @@ export function useFormController({ name, value, validations, }) {
         defaultValue: value || undefined,
     });
     // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
-    // Preserve original behavior: only treat three-part names as nested paths.
-    // For anything else, perform a flat lookup to avoid behavioral changes.
-    const identifiers = fieldName.split(".");
-    const error = identifiers.length === 3 ? get(errors, fieldName) : errors[fieldName];
+    // This corresponds to the structure of the error object, e.g. { emails: { 0: { description: "foobar" } } }
+    // We assume here that fields will either follow this period-delimited three-part convention, or else that they are simple and indivisible (e.g. "city").
+    // TODO: Add support for two-part identifiers (e.g. "property.province")
+    const fieldIdentifiers = fieldName.split(".");
+    let error;
+    if (fieldIdentifiers.length === 3) {
+        const [section, item, identifier] = fieldIdentifiers;
+        error = (_b = (_a = errors[section]) === null || _a === void 0 ? void 0 : _a[item]) === null || _b === void 0 ? void 0 : _b[identifier];
+    }
+    else {
+        error = errors[fieldName];
+    }
     return { error, field };
 }
 function useControlName(name) {

package/dist/src/utils/buildConfig/isEdgeToEdgeEnabled.js

@@ -0,0 +1,18 @@
+import { Platform } from "react-native";
+function loadBuildConfig() {
+    var _a;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const mod = require("react-native-build-config");
+        return ((_a = mod === null || mod === void 0 ? void 0 : mod.default) !== null && _a !== void 0 ? _a : mod);
+    }
+    catch (_b) {
+        return null; // module not installed or not linked
+    }
+}
+export function isEdgeToEdgeEnabled() {
+    if (Platform.OS !== "android")
+        return false;
+    const cfg = loadBuildConfig();
+    return !!(cfg === null || cfg === void 0 ? void 0 : cfg.IS_EDGE_TO_EDGE_ENABLED);
+}