@jobber/components-native 0.90.0 → 0.90.1-JOB-140976-20bb6ae.11

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.90.0",
+  "version": "0.90.1-JOB-140976-20bb6ae.11+20bb6ae6a",
   "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": "39c1c0fc8175f82c32c7636b972712a710fbf527"
+  "gitHead": "20bb6ae6a51997e8306d4f4ddf12295b33ca16be"
 }

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();
+    });
+  });
 });

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -43,7 +43,14 @@ export interface InputFieldWrapperProps {
    */
   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;
 
@@ -119,7 +126,7 @@ export function InputFieldWrapper({
   assistiveText,
   prefix,
   suffix,
-  hasMiniLabel = false,
+  placeholderMode = "normal",
   hasValue = false,
   error,
   focused = false,
@@ -143,6 +150,9 @@ export function InputFieldWrapper({
   const showLoadingGlimmer = loading && loadingType === "glimmer";
   const styles = useStyles();
 
+  const placeholderVisible = placeholderMode !== "hidden";
+  const miniLabelActive = placeholderMode === "mini";
+
   return (
     <ErrorMessageWrapper message={getMessage({ invalid, error })}>
       <View
@@ -160,35 +170,36 @@ export function InputFieldWrapper({
             <PrefixIcon
               disabled={disabled}
               focused={focused}
-              hasMiniLabel={hasMiniLabel}
               inputInvalid={inputInvalid}
               icon={prefix.icon}
             />
           )}
           <View style={[styles.inputContainer]}>
-            <View
-              style={[
-                !!placeholder && styles.label,
-                hasMiniLabel && styles.miniLabel,
-                disabled && styles.disabled,
-                hasMiniLabel &&
-                  showClearAction &&
-                  styles.miniLabelShowClearAction,
-              ]}
-              pointerEvents="none"
-            >
-              <Placeholder
-                placeholder={placeholder}
-                labelVariation={getLabelVariation(error, invalid, disabled)}
-                hasMiniLabel={hasMiniLabel}
-                styleOverride={styleOverride?.placeholderText}
-              />
-            </View>
+            {placeholderVisible && (
+              <View
+                style={[
+                  !!placeholder && styles.label,
+                  miniLabelActive && styles.miniLabel,
+                  disabled && styles.disabled,
+                  miniLabelActive &&
+                    showClearAction &&
+                    styles.miniLabelShowClearAction,
+                ]}
+                pointerEvents="none"
+              >
+                <Placeholder
+                  placeholder={placeholder}
+                  labelVariation={getLabelVariation(error, invalid, disabled)}
+                  miniLabelActive={miniLabelActive}
+                  styleOverride={styleOverride?.placeholderText}
+                />
+              </View>
+            )}
             {prefix?.label && hasValue && (
               <PrefixLabel
                 disabled={disabled}
                 focused={focused}
-                hasMiniLabel={hasMiniLabel}
+                miniLabelActive={miniLabelActive}
                 inputInvalid={inputInvalid}
                 label={prefix.label}
                 styleOverride={styleOverride?.prefixLabel}
@@ -225,7 +236,7 @@ export function InputFieldWrapper({
                   <SuffixLabel
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
+                    miniLabelActive={miniLabelActive}
                     inputInvalid={inputInvalid}
                     label={suffix.label}
                     hasLeftMargin={!showClearAction}
@@ -245,7 +256,6 @@ export function InputFieldWrapper({
                   <SuffixIcon
                     disabled={disabled}
                     focused={focused}
-                    hasMiniLabel={hasMiniLabel}
                     hasLeftMargin={!!(!showClearAction || suffix?.label)}
                     inputInvalid={inputInvalid}
                     icon={suffix.icon}
@@ -332,12 +342,12 @@ function Placeholder({
   placeholder,
   styleOverride,
   labelVariation,
-  hasMiniLabel,
+  miniLabelActive,
 }: {
   readonly placeholder?: string;
   readonly styleOverride: StyleProp<TextStyle>;
   readonly labelVariation: TextVariation;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
 }) {
   const typographyStyles = useTypographyStyles();
 
@@ -348,7 +358,7 @@ function Placeholder({
           hideFromScreenReader={true}
           maxLines="single"
           variation={labelVariation}
-          level={hasMiniLabel ? "textSupporting" : "text"}
+          level={miniLabelActive ? "textSupporting" : "text"}
         >
           {placeholder}
         </Text>
@@ -361,7 +371,7 @@ function Placeholder({
           style={[
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
               ? typographyStyles.smallSize
               : typographyStyles.defaultSize,
             styleOverride,

package/src/InputFieldWrapper/components/Prefix/Prefix.test.tsx

@@ -30,7 +30,7 @@ beforeAll(() => {
 function setupLabel({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
+  miniLabelActive = false,
   inputInvalid = false,
   label = mockLabel,
   styleOverride,
@@ -39,7 +39,7 @@ function setupLabel({
     <PrefixLabel
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
+      miniLabelActive={miniLabelActive}
       inputInvalid={inputInvalid}
       label={label}
       styleOverride={styleOverride}
@@ -50,7 +50,6 @@ function setupLabel({
 function setupIcon({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
   inputInvalid = false,
   icon = "invoice",
 }: Partial<PrefixIconProps>) {
@@ -58,7 +57,6 @@ function setupIcon({
     <PrefixIcon
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
       inputInvalid={inputInvalid}
       icon={icon}
     />,
@@ -150,7 +148,7 @@ describe("Prefix", () => {
 
   it("updates the position of the label when a value is entered", () => {
     const tree = setupLabel({
-      hasMiniLabel: true,
+      miniLabelActive: true,
     });
     const prefixLabel = tree.getByTestId(prefixLabelTestId);
     const labelWrapper = prefixLabel.children[0] as ReactTestInstance;

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -11,7 +11,7 @@ import { useStyles } from "../../InputFieldWrapper.style";
 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>;
@@ -23,7 +23,7 @@ export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
 export function PrefixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   styleOverride,
@@ -41,7 +41,10 @@ export function PrefixLabel({
       testID={prefixLabelTestId}
     >
       <View
-        style={[styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+        style={[
+          styles.prefixLabel,
+          miniLabelActive && styles.fieldAffixMiniLabel,
+        ]}
       >
         {!styleOverride ? (
           <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
@@ -67,7 +70,6 @@ export function PrefixLabel({
 export interface PrefixIconProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
   readonly inputInvalid?: boolean;
   readonly icon: IconNames;
   readonly styleOverride?: StyleProp<ViewStyle>;

package/src/InputFieldWrapper/components/Suffix/Suffix.test.tsx

@@ -10,7 +10,7 @@ const mockLabel = "$";
 function setupLabel({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
+  miniLabelActive = false,
   inputInvalid = false,
   label = mockLabel,
   styleOverride,
@@ -19,7 +19,7 @@ function setupLabel({
     <SuffixLabel
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
+      miniLabelActive={miniLabelActive}
       inputInvalid={inputInvalid}
       label={label}
       styleOverride={styleOverride}
@@ -30,7 +30,6 @@ function setupLabel({
 function setupIcon({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
   inputInvalid = false,
   icon = "invoice",
 }: Partial<SuffixIconProps>) {
@@ -38,7 +37,6 @@ function setupIcon({
     <SuffixIcon
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
       inputInvalid={inputInvalid}
       icon={icon}
     />,

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -11,7 +11,7 @@ import { useStyles } from "../../InputFieldWrapper.style";
 export interface SuffixLabelProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
+  readonly miniLabelActive: boolean;
   readonly inputInvalid?: boolean;
   readonly label: string;
   readonly hasLeftMargin?: boolean;
@@ -24,7 +24,7 @@ export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export function SuffixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   hasLeftMargin = true,
@@ -44,7 +44,10 @@ export function SuffixLabel({
       ]}
     >
       <View
-        style={[styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+        style={[
+          styles.suffixLabel,
+          miniLabelActive && styles.fieldAffixMiniLabel,
+        ]}
       >
         {!styleOverride ? (
           <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
@@ -70,7 +73,6 @@ export function SuffixLabel({
 export interface SuffixIconProps {
   readonly focused: boolean;
   readonly disabled?: boolean;
-  readonly hasMiniLabel: boolean;
   readonly inputInvalid?: boolean;
   readonly icon: IconNames;
   readonly hasLeftMargin?: boolean;

package/src/InputPressable/InputPressable.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { InputPressable } from ".";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 
@@ -120,6 +120,80 @@ describe("InputPressable", () => {
       expect(getByText(value, { includeHiddenElements: true })).toBeDefined();
     });
   });
+
+  describe("showMiniLabel", () => {
+    it("defaults to true", () => {
+      const props = { placeholder: "placeholder", value: "value" };
+      render(<InputPressable {...props} />);
+      expect(
+        screen.getByText("placeholder", { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining({
+          placeholderMode: "mini",
+        }),
+      );
+    });
+
+    describe("when true", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: true, placeholder: "placeholder" };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("renders the placeholder as a mini label when the input has a value", () => {
+        const props = {
+          showMiniLabel: true,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "mini",
+          }),
+        );
+      });
+    });
+
+    describe("when false", () => {
+      it("renders the placeholder in its normal position when the input has no value", () => {
+        const props = { showMiniLabel: false, placeholder: "placeholder" };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.getByText("placeholder", { includeHiddenElements: true }),
+        ).toBeDefined();
+        expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+          expect.objectContaining({
+            placeholderMode: "normal",
+          }),
+        );
+      });
+
+      it("does not render the placeholder when the input has a value", () => {
+        const props = {
+          showMiniLabel: false,
+          placeholder: "placeholder",
+          value: "value",
+        };
+        render(<InputPressable {...props} />);
+        expect(
+          screen.queryByText("placeholder", { includeHiddenElements: true }),
+        ).toBeNull();
+      });
+    });
+  });
 });
 
 describe("accessibilityLabel", () => {

package/src/InputPressable/InputPressable.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from "react";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
@@ -7,6 +7,7 @@ import type { Clearable } from "@jobber/hooks";
 import { useShowClear } from "@jobber/hooks";
 import type { XOR } from "ts-xor";
 import { useStyles } from "./InputPressable.style";
+import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 
 interface BasicSuffix {
@@ -51,6 +52,15 @@ export interface InputPressableProps {
    */
   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
@@ -105,6 +115,7 @@ export function InputPressableInternal(
     disabled,
     invalid,
     error,
+    showMiniLabel = true,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -117,11 +128,9 @@ export function InputPressableInternal(
   ref: Ref<InputPressableRef>,
 ): JSX.Element {
   const hasValue = !!value;
-  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
 
-  useEffect(() => {
-    setHasMiniLabel(Boolean(value));
-  }, [value]);
+  const placeholderMode = getPlaceholderMode(showMiniLabel, value);
+  const miniLabelActive = placeholderMode === "mini";
 
   const showClear = useShowClear({
     clearable,
@@ -139,7 +148,7 @@ export function InputPressableInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       focused={focused}
       error={error}
       invalid={invalid}
@@ -160,7 +169,7 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            !hasMiniLabel && commonInputStyles.inputEmpty,
+            !miniLabelActive && commonInputStyles.inputEmpty,
             disabled && commonInputStyles.inputDisabled,
             (Boolean(invalid) || error) && styles.inputInvalid,
           ]}
@@ -176,3 +185,20 @@ export function InputPressableInternal(
     </InputFieldWrapper>
   );
 }
+
+function getPlaceholderMode(
+  isMiniLabelAllowed: boolean,
+  internalValue: string | undefined,
+): InputFieldWrapperProps["placeholderMode"] {
+  const hasValue = Boolean(internalValue);
+
+  if (hasValue) {
+    if (isMiniLabelAllowed) {
+      return "mini";
+    } else {
+      return "hidden";
+    }
+  } else {
+    return "normal";
+  }
+}