@jobber/components-native 0.84.4-JOB-134681-8086ad4.25 → 0.84.4-JOB-138679-b1552ab.68

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.84.4-JOB-134681-8086ad4.25+8086ad474",
+    "version": "0.84.4-JOB-138679-b1552ab.68+b1552ab31",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -32,7 +32,7 @@
         "build": "npm run build:clean && npm run compile",
         "bootstrap": "npm run build",
         "prepack": "npm run build",
-        "compile": "tsc -b",
+        "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
         "storybook": "storybook dev -p 6008 --disable-telemetry",
         "storybook:build": "storybook build --disable-telemetry"
@@ -43,8 +43,8 @@
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
         "lodash": "^4.17.21",
-        "react-hook-form": "^7.30.0",
-        "react-intl": "^6.4.2",
+        "react-hook-form": "^7.52.0",
+        "react-intl": "^7.1.11",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modalize": "^2.0.13",
         "react-native-portalize": "^1.0.7",
@@ -53,18 +53,27 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@react-native-community/datetimepicker": "^8.4.5",
+        "@react-native/babel-preset": "^0.81.1",
         "@storybook/addon-a11y": "^9.1.2",
         "@storybook/react": "^9.1.2",
         "@storybook/react-native-web-vite": "^9.1.2",
-        "@testing-library/jest-native": "^5.4.2",
-        "@testing-library/react-native": "^12.0.1",
+        "@testing-library/react-native": "^13.3.3",
         "@types/lodash.chunk": "^4.2.7",
         "@types/lodash.debounce": "^4.0.7",
         "@types/lodash.identity": "^3.0.7",
-        "@types/react": "^18.0.28",
         "@types/react-native-uuid": "^1.4.0",
-        "metro-react-native-babel-preset": "^0.76.0",
-        "react-test-renderer": "^18.2.0",
+        "@types/react-test-renderer": "19.1.0",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "react-native": "^0.82.1",
+        "react-native-gesture-handler": "^2.29.1",
+        "react-native-modal-datetime-picker": "^18.0.0",
+        "react-native-reanimated": "^3.7.1",
+        "react-native-safe-area-context": "^5.4.0",
+        "react-native-svg": "^15.1.0",
+        "react-native-web": "^0.20.0",
+        "react-test-renderer": "^19.1.1",
         "storybook": "^9.1.2"
     },
     "peerDependencies": {
@@ -73,10 +82,10 @@
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
-        "react": "^18.2.0",
-        "react-intl": "^6.4.2",
-        "react-native": ">=0.76.0",
-        "react-native-gesture-handler": ">=2.10.0",
+        "react": "^19",
+        "react-intl": "^6 || ^7",
+        "react-native": ">=0.79.5",
+        "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-modal-datetime-picker": " >=13.0.0",
         "react-native-modalize": "^2.0.13",
@@ -85,5 +94,5 @@
         "react-native-safe-area-context": "^5.4.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "8086ad474bae8138621804bd18aed5d9c88dd6bf"
+    "gitHead": "b1552ab319204ce883046ea2c22d875952746675"
 }

package/dist/src/ActionItem/ActionItemGroup.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ActionItem.style";
 import { Divider } from "../Divider";
-export function ActionItemGroup({ children, }) {
+export function ActionItemGroup({ children }) {
     return React.createElement(View, null, renderChildren(children));
 }
 function renderChildren(children) {

package/dist/src/AutoLink/components/Link/Link.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text as RNText } from "react-native";
 import { Text } from "../../../Text";
-export function Link({ children, onPress, onLongPress, }) {
+export function Link({ children, onPress, onLongPress }) {
     return (React.createElement(RNText, { onPress: onPress, onLongPress: onLongPress },
         React.createElement(Text, { variation: "interactive" }, children)));
 }

package/dist/src/Banner/Banner.js

@@ -48,5 +48,7 @@ function getBannerIcon(type) {
             return "help";
         case "error":
             return "alert";
+        case "success":
+            return "checkmark";
     }
 }

package/dist/src/Banner/components/BannerIcon/BannerIcon.style.js

@@ -14,5 +14,8 @@ export const useStyles = buildThemedStyles(tokens => {
         notice: {
             backgroundColor: tokens["color-informative"],
         },
+        success: {
+            backgroundColor: tokens["color-success"],
+        },
     };
 });

package/dist/src/BottomSheet/BottomSheet.js

@@ -1,9 +1,9 @@
 import React, { forwardRef, useState } from "react";
-import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
 import { useStyles } from "./BottomSheet.style";
+import { UNSAFE_WrappedModalize } from "../ContentOverlay/UNSAFE_WrappedModalize";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -15,7 +15,7 @@ function BottomSheetInternal({ children, showCancel, loading = false, heading, o
     const styles = useStyles();
     return (React.createElement(React.Fragment, null,
         open && React.createElement(Overlay, { styles: styles }),
-        React.createElement(Modalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading, styles: styles }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
+        React.createElement(UNSAFE_WrappedModalize, { ref: ref, adjustToContentHeight: true, modalStyle: styles.modal, overlayStyle: styles.overlayModalize, HeaderComponent: heading && React.createElement(Header, { heading: heading, styles: styles }), FooterComponent: React.createElement(Footer, { cancellable: (showCancel && !loading) || isScreenReaderEnabled, onCancel: () => {
                     var _a;
                     (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.close();
                 }, styles: styles }), withHandle: false, withReactModal: isScreenReaderEnabled, onOpen: openModal, onClose: closeModal },

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -8,7 +8,6 @@ const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
 const leftOffset = -1 * offset;
 // looks like deprecation for FlatList in reanimated is cascading down to other exports
 // This is not createAnimatedComponent(FlatList), we are fine
-// eslint-disable-next-line import/no-deprecated
 const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
 function InternalButtonLoadingInternal({ variation, type, }) {
     const translateX = useSharedValue(0);

package/dist/src/ButtonGroup/ButtonGroup.js

@@ -9,7 +9,7 @@ import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 export function ButtonGroup({ children, showCancelInBottomSheet, bottomSheetHeading, onOpenBottomSheet, onCloseBottomSheet, allowTapWhenOffline = false, }) {
     const { t } = useAtlantisI18n();
     const { handlePress } = usePreventTapWhenOffline();
-    const secondaryActionsRef = useRef();
+    const secondaryActionsRef = useRef(null);
     const { primaryActions, secondaryActions } = getActions(children);
     const styles = useStyles();
     return (React.createElement(View, { style: styles.buttonGroup },

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
-import { Modalize } from "react-native-modalize";
 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 } from "../hooks";
 import { IconButton } from "../IconButton";
 import { Heading } from "../Heading";
@@ -26,8 +26,8 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
     const isFullScreenOrTopPosition = fullScreen || (!adjustToContentHeight && position === "top");
     const shouldShowDismiss = showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
     const [showHeaderShadow, setShowHeaderShadow] = useState(false);
-    const overlayHeader = useRef();
-    const internalRef = useRef();
+    const overlayHeader = useRef(null);
+    const internalRef = useRef(null);
     const [modalizeMethods, setModalizeMethods] = useState();
     const callbackInternalRef = useCallback((instance) => {
         if (instance && !internalRef.current) {
@@ -86,7 +86,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
         }
     };
     return (React.createElement(React.Fragment, null,
-        headerHeightKnown && childrenHeightKnown && (React.createElement(Modalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
+        headerHeightKnown && childrenHeightKnown && (React.createElement(UNSAFE_WrappedModalize, { ref: callbackInternalRef, overlayStyle: styles.overlay, handleStyle: styles.handle, handlePosition: "inside", modalStyle: modalStyle, modalTopOffset: tokens["space-larger"], snapPoint: snapPoint, closeSnapPointStraightEnabled: false, withHandle: isDraggable, panGestureEnabled: isDraggable, adjustToContentHeight: adjustToContentHeight, disableScrollIfPossible: !adjustToContentHeight, onClose: onClose, onOpen: onOpen, keyboardAvoidingBehavior: keyboardAvoidingBehavior, avoidKeyboardLikeIOS: avoidKeyboardLikeIOS, childrenStyle: styles.childrenStyle, onBackButtonPress: onCloseController, closeOnOverlayTap: isCloseableOnOverlayTap, onOpened: () => {
                 if (overlayHeader.current) {
                     const reactTag = findNodeHandle(overlayHeader.current);
                     if (reactTag) {
@@ -124,9 +124,7 @@ function ContentOverlayInternal({ children, title, accessibilityLabel, fullScree
                             : styles.titleWithoutDismiss,
                     ] },
                     React.createElement(Heading, { level: "subtitle", variation: loading ? "subdued" : "heading", align: "start" }, title)),
-                shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, 
-                    // @ts-expect-error tsc-ci
-                    ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
+                shouldShowDismiss && (React.createElement(View, { style: styles.dismissButton, ref: overlayHeader, accessibilityLabel: accessibilityLabel || closeOverlayA11YLabel, accessible: true },
                     React.createElement(IconButton, { name: "cross", customColor: loading ? tokens["color-disabled"] : tokens["color-heading"], onPress: () => onCloseController(), accessibilityLabel: closeOverlayA11YLabel, testID: "ATL-Overlay-CloseButton" }))))));
     }
     function renderChildren() {

package/dist/src/ContentOverlay/UNSAFE_WrappedModalize.js

@@ -0,0 +1,23 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState, } from "react";
+import { Modalize } from "react-native-modalize";
+export const UNSAFE_WrappedModalize = forwardRef((props, ref) => {
+    const innerRef = useRef(null);
+    const [openRenderId, setOpenRenderId] = useState(0);
+    useImperativeHandle(ref, () => ({
+        open(dest) {
+            setOpenRenderId(id => id + 1);
+            // Open on a fresh tick for additional safety
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.open(dest);
+            });
+        },
+        close(dest) {
+            var _a;
+            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.close(dest);
+        },
+    }), []);
+    // Use a unique key to force a remount, ensuring we get fresh gesture handler nodes within modalize
+    return (React.createElement(Modalize, Object.assign({ key: `modalize-${openRenderId}`, ref: innerRef }, props)));
+});
+UNSAFE_WrappedModalize.displayName = "UNSAFE_WrappedModalize";

package/dist/src/ErrorMessageWrapper/context/ErrorMessageProvider.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { AccessibilityInfo, findNodeHandle } from "react-native";
 import { ErrorMessageContext } from "./ErrorMessageContext";
-export function ErrorMessageProvider({ children, }) {
+export function ErrorMessageProvider({ children }) {
     const [elements, setElements] = useState({});
     return (React.createElement(ErrorMessageContext.Provider, { value: {
             elements,

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 { useAtlantisFormContext } from "./context/AtlantisFormContext";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -48,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, }) {
+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, }) {
     var _a;
     const { scrollViewRef, bottomViewRef, scrollToTop } = useFormViewRefs();
     const [saveButtonHeight, setSaveButtonHeight] = useState(0);
@@ -64,6 +65,7 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         scrollViewRef,
         saveButtonHeight,
         messageBannerHeight,
+        UNSAFE_allowDiscardLocalCacheWhenOffline,
     });
     const { windowHeight, headerHeight } = useScreenInformation();
     const [keyboardHeight, setKeyboardHeight] = useState(0);
@@ -102,12 +104,13 @@ function InternalForm({ children, onBeforeSubmit, onSubmit, onSubmitError, onSub
         setMessageBannerHeight(event.nativeEvent.layout.height);
     };
     const styles = useStyles();
+    const { edgeToEdgeEnabled } = useAtlantisFormContext();
     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 ? tokens["space-large"] : 0, contentContainerStyle: !keyboardHeight && styles.scrollContentContainer }),
                     React.createElement(View, { onLayout: ({ nativeEvent }) => {
                             setFormContentHeight(nativeEvent.layout.height);
                         } },

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

@@ -28,5 +28,6 @@ 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/Form/components/FormMessageBanner/FormMessageBanner.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { FormBannerMessageType } from "../../types";
 import { Banner } from "../../../Banner";
-export function FormMessageBanner({ bannerMessages, }) {
+export function FormMessageBanner({ bannerMessages }) {
     return (React.createElement(React.Fragment, null, bannerMessages === null || bannerMessages === void 0 ? void 0 : bannerMessages.map((message, index) => (React.createElement(Banner, { key: index, text: message.message, type: getBannerType(message.messageType) })))));
 }
 function getBannerType(messageType) {

package/dist/src/Form/context/AtlantisFormContext.js

@@ -8,6 +8,7 @@ export const atlantisFormContextDefaultValues = {
         setLocalCache: () => undefined,
         removeLocalCache: () => undefined,
     }),
+    edgeToEdgeEnabled: false,
 };
 export const AtlantisFormContext = createContext(atlantisFormContextDefaultValues);
 export function useAtlantisFormContext() {

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,