@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-match-mobi-540af48.10

package/dist/src/Form/hooks/useInternalForm.js

@@ -1,7 +1,7 @@
 import { useForm } from "react-hook-form";
 import { useAtlantisContext } from "../../AtlantisContext";
 import { useAtlantisFormContext } from "../context/AtlantisFormContext";
-export function useInternalForm({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }) {
+export function useInternalForm({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, UNSAFE_allowDiscardLocalCacheWhenOffline = false, }) {
     const { useConfirmBeforeBack, useInternalFormLocalCache } = useAtlantisFormContext();
     const { isOnline } = useAtlantisContext();
     const formMethods = useForm({
@@ -20,11 +20,14 @@ export function useInternalForm({ mode, reValidateMode, initialValues, formRef,
             messageBannerHeight,
             scrollViewRef });
     }
+    const shouldRemoveCacheOnBack = UNSAFE_allowDiscardLocalCacheWhenOffline
+        ? true
+        : isOnline;
     const removeListenerRef = useConfirmBeforeBack({
         alwaysPreventBack: isSubmitting,
         shouldShowAlert: isDirty,
-        onAcceptEvent: isOnline ? removeLocalCache : undefined,
-        showLostProgressMessage: isOnline || !clientSideSaveOn ? true : false,
+        onAcceptEvent: shouldRemoveCacheOnBack ? removeLocalCache : undefined,
+        showLostProgressMessage: shouldRemoveCacheOnBack || !clientSideSaveOn ? true : false,
     });
     return {
         setLocalCache,

package/dist/src/FormatFile/components/MediaView/MediaView.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ImageBackground, View } from "react-native";
 import { useStyles } from "./MediaView.style";
 import { StatusCode } from "../../types";
@@ -14,20 +14,37 @@ export function MediaView({ accessibilityLabel, showOverlay, showError, file, st
     const { useCreateThumbnail } = useAtlantisFormatFileContext();
     const { thumbnail, error } = useCreateThumbnail(file);
     const [isLoading, setIsLoading] = useState(false);
+    /**
+     * Tracks whether onLoadEnd has fired to prevent race conditions.
+     * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
+     * which would cause isLoading to get stuck at true, showing an infinite spinner.
+     */
+    const hasLoadedRef = useRef(false);
     const a11yLabel = computeA11yLabel({
         accessibilityLabel,
         showOverlay,
         showError,
         t,
     });
-    const hasError = showError || error;
-    const uri = thumbnail || file.thumbnailUrl || file.source;
-    const styles = useStyles();
+    const hasError = showError || error, uri = thumbnail || file.thumbnailUrl || file.source, styles = useStyles();
+    const handleLoadStart = () => {
+        if (!hasLoadedRef.current) {
+            setIsLoading(true);
+        }
+    };
+    const handleLoadEnd = () => {
+        hasLoadedRef.current = true;
+        setIsLoading(false);
+    };
+    useEffect(() => {
+        hasLoadedRef.current = false;
+        setIsLoading(false);
+    }, [uri]);
     return (React.createElement(View, { accessible: true, accessibilityLabel: a11yLabel },
         React.createElement(ImageBackground, { style: [
                 styles.imageBackground,
                 styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
-            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: () => setIsLoading(true), onLoadEnd: () => setIsLoading(false) },
+            ], resizeMode: styleInGrid ? "cover" : "contain", source: { uri }, testID: "test-image", onLoadStart: handleLoadStart, onLoadEnd: handleLoadEnd },
             React.createElement(Overlay, { isLoading: isLoading, showOverlay: showOverlay, hasError: hasError, file: file, onUploadComplete: onUploadComplete, styles: styles }))));
 }
 function Overlay({ isLoading, showOverlay, hasError, file, onUploadComplete, styles, }) {

package/dist/src/FormatFile/utils/createUseCreateThumbnail.js

@@ -1,4 +1,4 @@
-import { useIsMounted } from "@jobber/hooks/useIsMounted";
+import { useIsMounted } from "@jobber/hooks";
 import { useCallback, useEffect, useState } from "react";
 export function createUseCreateThumbnail(createThumbnail) {
     const useCreateThumbnail = useCallback((file) => {

package/dist/src/InputCurrency/InputCurrency.js

@@ -24,6 +24,31 @@ 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;
@@ -35,52 +60,39 @@ 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") {
-            checkDecimalAndI18nOfDisplayValue(numberedValue, decimalNumbers, decimalCount);
+            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);
         }
         else {
             const value = (numberedValue === null || numberedValue === void 0 ? void 0 : numberedValue.toString()) + decimalNumbers;
-            setOnChangeAndDisplayValues(value, value);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value);
+            setDisplayValue(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: Object.assign({ pattern: {
-                value: NUMBER_VALIDATION_REGEX,
-                message: t("errors.notANumber"),
-            } }, props.validations), onBlur: () => {
+        }, validations: mergedValidations, onBlur: () => {
             var _a;
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
             if (field.value === 0 ||

package/dist/src/InputDate/InputDate.js

@@ -27,7 +27,7 @@ export function InputDate(props) {
     }
     return React.createElement(InternalInputDate, Object.assign({}, props));
 }
-function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, name, onChange, accessibilityLabel, accessibilityHint, }) {
+function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, showMiniLabel = true, name, onChange, accessibilityLabel, accessibilityHint, }) {
     const [showPicker, setShowPicker] = useState(false);
     const { t, locale, formatDate } = useAtlantisI18n();
     const date = useMemo(() => {
@@ -44,7 +44,7 @@ function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, in
     const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
     const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : t("date");
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputPressable, { focused: showPicker, clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
+        React.createElement(InputPressable, { showMiniLabel: showMiniLabel, focused: showPicker, clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
         React.createElement(DateTimePicker, { testID: "inputDate-datePicker", date: date || undefined, display: display, isVisible: showPicker, maximumDate: maxDate, minimumDate: minDate, mode: "date", confirmTextIOS: t("confirm"), cancelTextIOS: t("cancel"), locale: locale, onCancel: handleCancel, onConfirm: handleConfirm })));
     function showDatePicker() {
         Keyboard.dismiss();

package/dist/src/InputEmail/InputEmail.js

@@ -1,9 +1,17 @@
 import React, { forwardRef } from "react";
 import { InputText } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export const InputEmail = forwardRef(InputEmailInternal);
 function InputEmailInternal(props, ref) {
-    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) })));
+    const { t } = useAtlantisI18n();
+    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: t("InputEmail.enterEmail"),
+        },
+    };
+    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 })));
 }

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, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "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", }) {
     fieldAffixRequiredPropsCheck([prefix, suffix]);
     const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
     warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -20,6 +20,8 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
     const showLoadingSpinner = loading && loadingType === "spinner";
     const showLoadingGlimmer = loading && loadingType === "glimmer";
     const styles = useStyles();
+    const placeholderVisible = placeholderMode !== "hidden";
+    const miniLabelActive = placeholderMode === "mini";
     return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
         React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
                 styles.container,
@@ -29,18 +31,18 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
             ] },
             React.createElement(View, { style: styles.field },
-                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
+                (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] },
-                    React.createElement(View, { style: [
+                    placeholderVisible && (React.createElement(View, { style: [
                             !!placeholder && styles.label,
-                            hasMiniLabel && styles.miniLabel,
+                            miniLabelActive && styles.miniLabel,
                             disabled && styles.disabled,
-                            hasMiniLabel &&
+                            miniLabelActive &&
                                 showClearAction &&
                                 styles.miniLabelShowClearAction,
                         ], pointerEvents: "none" },
-                        React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
-                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
+                        React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), miniLabelActive: miniLabelActive, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText }))),
+                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
                     children,
                     showLoadingGlimmer && (React.createElement(View, { testID: INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID, style: [
                             styles.loadingGlimmers,
@@ -54,10 +56,10 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                         (suffix === null || suffix === void 0 ? void 0 : suffix.icon) ||
                         showLoadingSpinner) && (React.createElement(View, { style: styles.inputEndContainer },
                         showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
-                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
                         showLoadingSpinner && (React.createElement(View, { style: styles.loadingSpinner },
                             React.createElement(ActivityIndicator, { testID: INPUT_FIELD_WRAPPER_SPINNER_TEST_ID }))),
-                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
             isToolbarVisible && React.createElement(View, { style: styles.toolbar }, toolbar)),
         assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
 }
@@ -93,12 +95,12 @@ function getMessage({ invalid, error, }) {
         messages.push(invalid);
     return messages.join("\n");
 }
-function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+function Placeholder({ placeholder, styleOverride, labelVariation, miniLabelActive, }) {
     const typographyStyles = useTypographyStyles();
-    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
+    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: miniLabelActive ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
                 ? typographyStyles.smallSize
                 : typographyStyles.defaultSize,
             styleOverride,

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -36,6 +36,7 @@ export const useStyles = buildThemedStyles(tokens => {
             right: 0,
             bottom: 0,
             left: 0,
+            zIndex: 1,
         },
         miniLabel: {
             top: 0,
@@ -44,7 +45,6 @@ export const useStyles = buildThemedStyles(tokens => {
             marginRight: tokens["space-small"],
             maxHeight: (typographyStyles.defaultSize.lineHeight || 0) +
                 tokens["space-smaller"],
-            zIndex: 1,
         },
         // Prevents the miniLabel from cutting off the ClearAction button
         miniLabelShowClearAction: {

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -7,7 +7,7 @@ import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
-export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }) {
+export function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }) {
     const styles = useStyles();
     const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { style: [
@@ -15,7 +15,10 @@ export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             focused && styles.inputFocused,
             inputInvalid && styles.inputInvalid,
         ], testID: prefixLabelTestId },
-        React.createElement(View, { style: [styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+        React.createElement(View, { style: [
+                styles.prefixLabel,
+                miniLabelActive && styles.fieldAffixMiniLabel,
+            ] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
                 typographyStyles.baseRegularRegular,
                 typographyStyles.base,
                 typographyStyles.defaultSize,

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -7,7 +7,7 @@ import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 import { useStyles } from "../../InputFieldWrapper.style";
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
-export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
+export function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
     const styles = useStyles();
     const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { testID: suffixLabelTestId, style: [
@@ -16,7 +16,10 @@ export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             inputInvalid && styles.inputInvalid,
             hasLeftMargin && styles.suffixLabelMargin,
         ] },
-        React.createElement(View, { style: [styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+        React.createElement(View, { style: [
+                styles.suffixLabel,
+                miniLabelActive && styles.fieldAffixMiniLabel,
+            ] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
                 typographyStyles.baseRegularRegular,
                 typographyStyles.base,
                 typographyStyles.defaultSize,

package/dist/src/InputNumber/InputNumber.js

@@ -24,13 +24,19 @@ 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: Object.assign({ pattern: {
-                value: NUMBER_VALIDATION_REGEX,
-                message: t("errors.notANumber"),
-            } }, props.validations) })));
+        }, 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 })));
 }
 function hasPeriodAtEnd(value) {
     // matches patterns like ".", "0.", "12.", "+1.", and "-0."

package/dist/src/InputPressable/InputPressable.js

@@ -1,15 +1,12 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import { Text as NativeText, Pressable } from "react-native";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputPressable.style";
 import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 export const InputPressable = forwardRef(InputPressableInternal);
-export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
+export function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel = true, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
     const hasValue = !!value;
-    const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
-    useEffect(() => {
-        setHasMiniLabel(Boolean(value));
-    }, [value]);
+    const placeholderMode = getPlaceholderMode(showMiniLabel, value);
     const showClear = useShowClear({
         clearable,
         multiline: false,
@@ -19,13 +16,28 @@ export function InputPressableInternal({ value, placeholder, disabled, invalid,
     });
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
         React.createElement(Pressable, { style: styles.pressable, onPress: onPress, disabled: disabled, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityValue: { text: value } },
             React.createElement(NativeText, { style: [
                     commonInputStyles.input,
                     styles.inputPressableStyles,
-                    !hasMiniLabel && commonInputStyles.inputEmpty,
+                    placeholderMode === "normal" && commonInputStyles.inputEmpty,
+                    placeholderMode === "hidden" && styles.withoutMiniLabel,
                     disabled && commonInputStyles.inputDisabled,
                     (Boolean(invalid) || error) && styles.inputInvalid,
                 ], testID: "inputPressableText", ref: ref, accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants" }, value))));
 }
+function getPlaceholderMode(isMiniLabelAllowed, internalValue) {
+    const hasValue = Boolean(internalValue);
+    if (hasValue) {
+        if (isMiniLabelAllowed) {
+            return "mini";
+        }
+        else {
+            return "hidden";
+        }
+    }
+    else {
+        return "normal";
+    }
+}

package/dist/src/InputPressable/InputPressable.style.js

@@ -21,5 +21,8 @@ export const useStyles = buildThemedStyles(tokens => {
         inputInvalid: {
             borderColor: tokens["color-critical"],
         },
+        withoutMiniLabel: {
+            paddingTop: tokens["space-base"] + tokens["space-smallest"],
+        },
     };
 });

package/dist/src/InputSearch/InputSearch.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import { useDebounce } from "@jobber/hooks/useDebounce";
+import { useDebounce } from "@jobber/hooks";
 import { styles } from "./InputSearch.style";
 import { InputText } from "../InputText";
 export const InputSearch = forwardRef(SearchInputInternal);

package/dist/src/InputText/InputText.js

@@ -9,7 +9,7 @@ import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
-function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, 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) {
+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) {
     var _a;
     const isAndroid = Platform.OS === "android";
     const isIOS = Platform.OS === "ios";
@@ -22,7 +22,8 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     const internalValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString();
     const hasValue = internalValue !== "" && internalValue !== undefined;
     const [focused, setFocused] = useState(false);
-    const { hasMiniLabel } = useMiniLabel(internalValue);
+    const placeholderMode = getPlaceholderMode(showMiniLabel, internalValue);
+    const miniLabelActive = placeholderMode === "mini";
     const textInputRef = useTextInputRef({ ref, onClear: handleClear });
     const showClear = useShowClear({
         clearable,
@@ -74,25 +75,28 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     }
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, 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,
-                !hasMiniLabel && commonInputStyles.inputEmpty,
+                !miniLabelActive && commonInputStyles.inputEmpty,
                 disabled && commonInputStyles.inputDisabled,
                 multiline && styles.multiLineInput,
                 multiline && Platform.OS === "ios" && styles.multilineInputiOS,
-                multiline && hasMiniLabel && styles.multiLineInputWithMini,
+                multiline && miniLabelActive && styles.multiLineInputWithMini,
+                multiline &&
+                    placeholderMode === "hidden" &&
+                    styles.multilineWithoutMiniLabel,
                 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, scrollEnabled: false, 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);
-            }, onBlur: () => {
+            }, onBlur: event => {
                 _name && setFocusedInput("");
                 setFocused(false);
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                 field.onBlur();
                 trimWhitespace(inputTransform(field.value), updateFormAndState);
             }, ref: (instance) => {
@@ -149,10 +153,17 @@ function useTextInputRef({ ref, onClear }) {
     }), [onClear]);
     return textInputRef;
 }
-function useMiniLabel(internalValue) {
-    const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
-    useEffect(() => {
-        setHasMiniLabel(Boolean(internalValue));
-    }, [internalValue]);
-    return { hasMiniLabel };
+function getPlaceholderMode(isMiniLabelAllowed, internalValue) {
+    const hasValue = Boolean(internalValue);
+    if (hasValue) {
+        if (isMiniLabelAllowed) {
+            return "mini";
+        }
+        else {
+            return "hidden";
+        }
+    }
+    else {
+        return "normal";
+    }
 }

package/dist/src/InputText/InputText.style.js

@@ -20,5 +20,9 @@ export const useStyles = buildThemedStyles(tokens => {
         multilineInputiOS: {
             paddingTop: (typographyStyles.defaultSize.fontSize || 0) + tokens["space-smallest"],
         },
+        multilineWithoutMiniLabel: {
+            paddingTop: tokens["space-base"] + tokens["space-smallest"],
+            paddingBottom: tokens["space-base"] + tokens["space-smallest"],
+        },
     };
 });

package/dist/src/InputTime/InputTime.js

@@ -28,7 +28,7 @@ export function InputTime(props) {
     }
     return React.createElement(InternalInputTime, Object.assign({}, props));
 }
-function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, invalid, placeholder, value, name, type = "scheduling", onChange, showIcon = true, }) {
+function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, invalid, placeholder, value, name, type = "scheduling", showMiniLabel = true, onChange, showIcon = true, }) {
     const [showPicker, setShowPicker] = useState(false);
     const { t, formatTime } = useAtlantisI18n();
     const { timeZone, timeFormat } = useAtlantisContext();
@@ -42,7 +42,7 @@ function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, in
     }, [dateTime, emptyValueLabel]);
     const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
     return (React.createElement(View, { style: styles.container },
-        React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, focused: showPicker, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
+        React.createElement(InputPressable, { showMiniLabel: showMiniLabel, clearable: canClearTime, disabled: disabled, invalid: invalid, focused: showPicker, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
         React.createElement(DateTimePicker, { testID: "inputTime-Picker", minuteInterval: getMinuteInterval(type), date: getInitialPickerDate(dateTime), timeZoneOffsetInMinutes: getTimeZoneOffsetInMinutes(timeZone, dateTime), isVisible: showPicker, mode: "time", onCancel: handleCancel, onConfirm: handleConfirm, is24Hour: is24Hour, locale: is24Hour ? LOCALE_24_HOURS : LOCALE_12_HOURS })));
     function showDatePicker() {
         Keyboard.dismiss();

package/dist/src/Menu/Menu.js

@@ -14,8 +14,8 @@ import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Menu({ menuOptions, customActivator }) {
     const [open, setOpen] = useState(false);
     const [menuPosition, setMenuPosition] = useState();
-    const activatorLayout = useRef();
-    const menuButtonRef = useRef();
+    const activatorLayout = useRef(null);
+    const menuButtonRef = useRef(null);
     const screenInfo = useScreenInformation();
     const { t } = useAtlantisI18n();
     const styles = useStyles();

package/dist/src/ProgressBar/ProgressBar.js

@@ -6,17 +6,21 @@ import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 import { useAtlantisTheme } from "../AtlantisThemeContext";
-export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", }) {
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", size = "base", UNSAFE_style, }) {
     const { t } = useAtlantisI18n();
     const styles = useStyles();
     const { tokens } = useAtlantisTheme();
-    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel(), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
         header,
-        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress })) : (React.createElement(View, { style: [styles.progressBarContainer, sizeStyles[size]] },
-            React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"] }),
+        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-interactive--background"], loading: loading, inProgress: inProgress, UNSAFE_style: UNSAFE_style })) : (React.createElement(View, { testID: "progressbar-container", style: [
+                styles.progressBarContainer,
+                sizeStyles[size],
+                UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.progressBarContainer,
+            ] },
+            React.createElement(ProgressBarInner, { testID: "progressbar-track", width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-interactive--background"], style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.track }),
             !loading && (React.createElement(React.Fragment, null,
-                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
-                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 })))))));
+                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { testID: "progressbar-inprogress", width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.inProgressFill })) : (React.createElement(React.Fragment, null)),
+                React.createElement(ProgressBarInner, { testID: "progressbar-fill", width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fill })))))));
     function getA11yLabel() {
         const a11yLabelValues = {
             current: String(current),