@jobber/components-native 0.90.1-JOB-142149-547612b.8 → 0.91.1

package/dist/types/src/InputDate/InputDate.d.ts

@@ -2,7 +2,8 @@ import type { UseControllerProps } from "react-hook-form";
 import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
-interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+import type { InputPressableProps } from "../InputPressable/InputPressable";
+interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">, Pick<InputPressableProps, "showMiniLabel"> {
     /**
      * Defaulted to "always" so user can clear the dates whenever there's a value.
      */

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.d.ts

@@ -26,7 +26,14 @@ export interface InputFieldWrapperProps {
      * Text that goes below the input to help the user understand the input
      */
     readonly assistiveText?: string;
-    readonly hasMiniLabel?: boolean;
+    /**
+     * Controls how the placeholder text is displayed.
+     * - normal: the placeholder text will be displayed in the normal placeholder position
+     * - mini: the placeholder text will float above the input value
+     * - hidden: the placeholder text will not be displayed
+     * @default "normal"
+     */
+    readonly placeholderMode?: "normal" | "mini" | "hidden";
     readonly hasValue?: boolean;
     /**
      * Symbol to display before the text input
@@ -78,4 +85,4 @@ export interface InputFieldWrapperProps {
 }
 export declare const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export declare const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;
+export declare function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode, hasValue, error, focused, children, onClear, showClearAction, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }: InputFieldWrapperProps): JSX.Element;

package/dist/types/src/InputFieldWrapper/components/Prefix/Prefix.d.ts

@@ -3,18 +3,17 @@ import type { IconNames } from "@jobber/design";
 export interface PrefixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: boolean;
     readonly inputInvalid: boolean;
     readonly label: string;
     readonly styleOverride?: StyleProp<TextStyle>;
 }
 export declare const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export declare const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
-export declare function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
+export declare function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }: PrefixLabelProps): JSX.Element;
 export interface PrefixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
     readonly inputInvalid?: boolean;
     readonly icon: IconNames;
     readonly styleOverride?: StyleProp<ViewStyle>;

package/dist/types/src/InputFieldWrapper/components/Suffix/Suffix.d.ts

@@ -3,7 +3,7 @@ import type { IconNames } from "@jobber/design";
 export interface SuffixLabelProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
+    readonly miniLabelActive: boolean;
     readonly inputInvalid?: boolean;
     readonly label: string;
     readonly hasLeftMargin?: boolean;
@@ -11,11 +11,10 @@ export interface SuffixLabelProps {
 }
 export declare const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export declare const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
-export declare function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
+export declare function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin, styleOverride, }: SuffixLabelProps): JSX.Element;
 export interface SuffixIconProps {
     readonly focused: boolean;
     readonly disabled?: boolean;
-    readonly hasMiniLabel: boolean;
     readonly inputInvalid?: boolean;
     readonly icon: IconNames;
     readonly hasLeftMargin?: boolean;

package/dist/types/src/InputPressable/InputPressable.d.ts

@@ -39,6 +39,14 @@ export interface InputPressableProps {
      * Indicates the current selection is invalid
      */
     readonly invalid?: boolean | string;
+    /**
+     * Controls the visibility of the mini label that appears inside the input
+     * when a value is entered. By default, the placeholder text moves up to
+     * become a mini label. Set to false to disable this behavior.
+     *
+     * @default true
+     */
+    readonly showMiniLabel?: boolean;
     /**
      * Callback that is called when the text input is focused
      * @param event
@@ -79,5 +87,5 @@ export interface InputPressableProps {
 }
 export type InputPressableRef = NativeText;
 export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
-export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, focused, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
 export {};

package/dist/types/src/InputPressable/InputPressable.style.d.ts

@@ -15,4 +15,7 @@ export declare const useStyles: () => {
     inputInvalid: {
         borderColor: string;
     };
+    withoutMiniLabel: {
+        paddingTop: number;
+    };
 };

package/dist/types/src/InputSearch/InputSearch.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { InputTextProps, InputTextRef } from "../InputText";
 export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProps & React.RefAttributes<InputTextRef>>;
-export interface InputSearchProps extends Pick<InputTextProps, "accessibilityHint" | "accessibilityLabel" | "autoFocus" | "placeholder" | "prefix"> {
+export interface InputSearchProps extends Pick<InputTextProps, "accessibilityHint" | "accessibilityLabel" | "autoFocus" | "placeholder" | "prefix" | "showMiniLabel"> {
     /**
      * A callback function that handles the update of the new value of the property value.
      */

package/dist/types/src/InputText/InputText.d.ts

@@ -31,6 +31,14 @@ export interface InputTextProps extends Pick<InputFieldWrapperProps, "toolbar" |
      * Text that helps the user understand the input
      */
     readonly assistiveText?: string;
+    /**
+     * Controls the visibility of the mini label that appears inside the input
+     * when a value is entered. By default, the placeholder text moves up to
+     * become a mini label. Set to false to disable this behavior.
+     *
+     * @default true
+     */
+    readonly showMiniLabel?: boolean;
     /**
      * Determines what keyboard is shown
      */

package/dist/types/src/InputText/InputText.style.d.ts

@@ -14,4 +14,8 @@ export declare const useStyles: () => {
     multilineInputiOS: {
         paddingTop: number;
     };
+    multilineWithoutMiniLabel: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
 };

package/dist/types/src/InputTime/InputTime.d.ts

@@ -2,7 +2,8 @@ import type { UseControllerProps } from "react-hook-form";
 import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
-interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+import type { InputPressableProps } from "../InputPressable/InputPressable";
+interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">, Pick<InputPressableProps, "showMiniLabel"> {
     /**
      * Defaulted to "always" so user can clear the time whenever there's a value.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.90.1-JOB-142149-547612b.8+547612b28",
+  "version": "0.91.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "547612b28b6ea97cd710210ecbbe6917da0c9734"
+  "gitHead": "5f68cfee448c36f14f589edd6359c9cb30c8ab79"
 }

package/src/Form/Form.tsx

@@ -174,6 +174,7 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
+            extraScrollHeight={edgeToEdgeEnabled ? tokens["space-large"] : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/Form/components/FormBody/FormBody.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useStyles } from "./FormBody.style";
 import { useScreenInformation } from "../../hooks/useScreenInformation";
 import type { FormActionBarProps } from "../FormActionBar";
@@ -26,12 +25,13 @@ export function FormBody({
   setSaveButtonHeight,
   saveButtonOffset,
 }: FormBodyProps): JSX.Element {
-  const { bottom: paddingBottom } = useSafeAreaInsets();
+  const paddingBottom = useBottomPadding();
+  const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
   const styles = useStyles();
 
   return (
     <>
-      <View style={styles.container}>
+      <View style={[styles.container]}>
         {children}
         {shouldRenderActionBar && (
           <FormActionBar
@@ -47,9 +47,9 @@ export function FormBody({
         )}
       </View>
 
-      {!saveButtonOffset && (
+      {shouldRenderActionBar && !saveButtonOffset && (
         <View
-          style={[{ paddingBottom }, styles.safeArea]}
+          style={[fullViewPadding, styles.safeArea]}
           testID="ATL-FormSafeArea"
         />
       )}

package/src/FormatFile/components/MediaView/MediaView.test.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { MediaView } from "./MediaView";
+import type { FormattedFile } from "../../types";
+import { StatusCode } from "../../types";
+import { AtlantisFormatFileContext } from "../../context/FormatFileContext";
+
+jest.mock("../../../hooks/useAtlantisI18n", () => ({
+  useAtlantisI18n: () => ({ t: (key: string) => key }),
+}));
+
+describe("MediaView", () => {
+  const mockFile: FormattedFile = {
+    showPreview: true,
+    source: "https://example.com/image1.jpg",
+    thumbnailUrl: undefined,
+    name: "test.jpg",
+    size: 1024,
+    external: false,
+    progress: 0,
+    status: StatusCode.Completed,
+    error: false,
+    type: "image/jpeg",
+    isMedia: true,
+    showFileTypeIndicator: false,
+  };
+
+  const defaultProps = {
+    accessibilityLabel: "Test image",
+    showOverlay: false,
+    showError: false,
+    file: mockFile,
+    styleInGrid: false,
+    onUploadComplete: jest.fn(),
+  };
+
+  const mockContextValue = {
+    useCreateThumbnail: () => ({ thumbnail: undefined, error: false }),
+  };
+
+  const renderWithContext = (props = defaultProps) => {
+    return render(
+      <AtlantisFormatFileContext.Provider value={mockContextValue}>
+        <MediaView {...props} />
+      </AtlantisFormatFileContext.Provider>,
+    );
+  };
+
+  describe("Normal loading flow", () => {
+    it("shows loading indicator when onLoadStart fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+    });
+
+    it("hides loading indicator when onLoadEnd fires", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("Race condition handling (cached images)", () => {
+    it("does not get stuck loading when onLoadEnd fires before onLoadStart", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Simulate cached image: LoadEnd fires BEFORE LoadStart
+      fireEvent(image, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      fireEvent(image, "loadStart");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+
+    it("does not show infinite spinner when load events fire out of order", () => {
+      const { getByTestId, queryByTestId } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // Race condition scenario
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      fireEvent(image, "loadEnd");
+
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+    });
+  });
+
+  describe("URI changes", () => {
+    it("shows loading indicator when URI changes to a new image", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+      const image = getByTestId("test-image");
+
+      // First image: simulate cached load (LoadEnd before LoadStart)
+      fireEvent(image, "loadEnd");
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Change URI to a new image
+      const newFile = {
+        ...mockFile,
+        source: "https://example.com/image2.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={newFile} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const updatedImage = getByTestId("test-image");
+
+        // New image starts loading
+        fireEvent(updatedImage, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on second URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("shows loading indicator on third URI change", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+      const image2 = getByTestId("test-image");
+      fireEvent(image2, "loadEnd");
+
+      const file3 = { ...mockFile, source: "https://example.com/image3.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file3} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image3 = getByTestId("test-image");
+        fireEvent(image3, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+
+    it("handles URI change from cached to uncached image correctly", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First image: cached (LoadEnd before LoadStart)
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadEnd");
+      fireEvent(image1, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Second image: uncached (normal LoadStart then LoadEnd)
+      const file2 = { ...mockFile, source: "https://example.com/image2.jpg" };
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={file2} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+        fireEvent(image2, "loadEnd");
+        expect(queryByTestId("ActivityIndicator")).toBeNull();
+      });
+    });
+  });
+
+  describe("thumbnailUrl changes", () => {
+    it("shows loading indicator when thumbnailUrl changes", async () => {
+      const { getByTestId, queryByTestId, rerender } = renderWithContext();
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Thumbnail URL changes (common when thumbnail generation completes)
+      const fileWithThumbnail = {
+        ...mockFile,
+        thumbnailUrl: "https://example.com/thumbnail.jpg",
+      };
+
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} file={fileWithThumbnail} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+
+  describe("Context thumbnail changes", () => {
+    it("shows loading indicator when context thumbnail changes", async () => {
+      const mockContextWithThumbnail = {
+        useCreateThumbnail: () => ({
+          thumbnail: "https://example.com/context-thumbnail.jpg",
+          error: false,
+        }),
+      };
+
+      const { getByTestId, queryByTestId, rerender } = render(
+        <AtlantisFormatFileContext.Provider value={mockContextValue}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      // First load completes
+      const image1 = getByTestId("test-image");
+      fireEvent(image1, "loadStart");
+      fireEvent(image1, "loadEnd");
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+
+      // Context provides a new thumbnail
+      rerender(
+        <AtlantisFormatFileContext.Provider value={mockContextWithThumbnail}>
+          <MediaView {...defaultProps} />
+        </AtlantisFormatFileContext.Provider>,
+      );
+
+      await waitFor(() => {
+        const image2 = getByTestId("test-image");
+        fireEvent(image2, "loadStart");
+
+        expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+      });
+    });
+  });
+});

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -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 type { FormattedFile } from "../../types";
@@ -32,6 +32,12 @@ export function MediaView({
   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,
@@ -40,10 +46,25 @@ export function MediaView({
     t,
   });
 
-  const hasError = showError || error;
-  const uri = thumbnail || file.thumbnailUrl || file.source;
+  const hasError = showError || error,
+    uri = thumbnail || file.thumbnailUrl || file.source,
+    styles = useStyles();
 
-  const styles = useStyles();
+  const handleLoadStart = () => {
+    if (!hasLoadedRef.current) {
+      setIsLoading(true);
+    }
+  };
+
+  const handleLoadEnd = () => {
+    hasLoadedRef.current = true;
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    hasLoadedRef.current = false;
+    setIsLoading(false);
+  }, [uri]);
 
   return (
     <View accessible={true} accessibilityLabel={a11yLabel}>
@@ -55,8 +76,8 @@ export function MediaView({
         resizeMode={styleInGrid ? "cover" : "contain"}
         source={{ uri }}
         testID={"test-image"}
-        onLoadStart={() => setIsLoading(true)}
-        onLoadEnd={() => setIsLoading(false)}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
       >
         <Overlay
           isLoading={isLoading}

package/src/InputDate/InputDate.tsx

@@ -8,9 +8,11 @@ import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import type { InputPressableProps } from "../InputPressable/InputPressable";
 
 interface BaseInputDateProps
-  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">,
+    Pick<InputPressableProps, "showMiniLabel"> {
   /**
    * Defaulted to "always" so user can clear the dates whenever there's a value.
    */
@@ -145,6 +147,7 @@ function InternalInputDate({
   minDate,
   placeholder,
   value,
+  showMiniLabel = true,
   name,
   onChange,
   accessibilityLabel,
@@ -174,6 +177,7 @@ function InternalInputDate({
   return (
     <>
       <InputPressable
+        showMiniLabel={showMiniLabel}
         focused={showPicker}
         clearable={canClearDate}
         disabled={disabled}

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import type { RenderAPI } from "@testing-library/react-native";
-import { fireEvent, render, renderHook } from "@testing-library/react-native";
+import {
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react-native";
 import type { ViewStyle } from "react-native";
 import { Text } from "react-native";
 import type { InputFieldWrapperProps } from ".";
@@ -311,4 +316,46 @@ describe("InputFieldWrapper", () => {
       expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
     });
   });
+
+  describe("placeholderMode", () => {
+    it("renders the placeholder in its normal position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "normal",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.defaultSize,
+      );
+    });
+
+    it("renders the placeholder in its mini label position", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "mini",
+      });
+      const placeholder = screen.getByText("placeholder", {
+        includeHiddenElements: true,
+      });
+      expect(placeholder).toBeDefined();
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.smallSize,
+      );
+    });
+
+    it("does not render the placeholder", () => {
+      renderInputFieldWrapper({
+        placeholder: "placeholder",
+        placeholderMode: "hidden",
+      });
+      expect(
+        screen.queryByText("placeholder", {
+          includeHiddenElements: true,
+        }),
+      ).toBeNull();
+    });
+  });
 });