@jobber/components-native 0.90.1-JOB-140976-fc0b992.18 → 0.90.1-JOB-142149-547612b.8

package/src/InputPressable/InputPressable.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react-native";
+import { fireEvent, render } from "@testing-library/react-native";
 import { InputPressable } from ".";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 
@@ -120,80 +120,6 @@ 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 } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import type { IconNames } from "@jobber/design";
 import type { FieldError } from "react-hook-form";
 import { Text as NativeText, Pressable } from "react-native";
@@ -7,7 +7,6 @@ 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 {
@@ -52,15 +51,6 @@ 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
@@ -115,7 +105,6 @@ export function InputPressableInternal(
     disabled,
     invalid,
     error,
-    showMiniLabel = true,
     onPress,
     accessibilityLabel,
     accessibilityHint,
@@ -128,8 +117,11 @@ export function InputPressableInternal(
   ref: Ref<InputPressableRef>,
 ): JSX.Element {
   const hasValue = !!value;
+  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
 
-  const placeholderMode = getPlaceholderMode(showMiniLabel, value);
+  useEffect(() => {
+    setHasMiniLabel(Boolean(value));
+  }, [value]);
 
   const showClear = useShowClear({
     clearable,
@@ -147,7 +139,7 @@ export function InputPressableInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      placeholderMode={placeholderMode}
+      hasMiniLabel={hasMiniLabel}
       focused={focused}
       error={error}
       invalid={invalid}
@@ -168,8 +160,7 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            placeholderMode === "normal" && commonInputStyles.inputEmpty,
-            placeholderMode === "hidden" && styles.withoutMiniLabel,
+            !hasMiniLabel && commonInputStyles.inputEmpty,
             disabled && commonInputStyles.inputDisabled,
             (Boolean(invalid) || error) && styles.inputInvalid,
           ]}
@@ -185,20 +176,3 @@ 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";
-  }
-}

package/src/InputSearch/InputSearch.tsx

@@ -16,7 +16,6 @@ export interface InputSearchProps
     | "autoFocus"
     | "placeholder"
     | "prefix"
-    | "showMiniLabel"
   > {
   /**
    * A callback function that handles the update of the new value of the property value.

package/src/InputText/InputText.style.ts

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

package/src/InputText/InputText.test.tsx

@@ -4,7 +4,6 @@ import {
   fireEvent,
   render,
   renderHook,
-  screen,
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
@@ -549,80 +548,6 @@ describe("InputText", () => {
       expect(styleOverride.inputText.color).toEqual(flattenedStyle.color);
     });
   });
-
-  describe("showMiniLabel", () => {
-    it("defaults to true", () => {
-      const props = { placeholder: "placeholder", value: "value" };
-      renderInputText(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" };
-        renderInputText(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",
-        };
-        renderInputText(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" };
-        renderInputText(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",
-        };
-        renderInputText(props);
-        expect(
-          screen.queryByText("placeholder", { includeHiddenElements: true }),
-        ).toBeNull();
-      });
-    });
-  });
 });
 
 describe("Transform", () => {

package/src/InputText/InputText.tsx

@@ -65,15 +65,6 @@ export interface InputTextProps
    */
   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
    */
@@ -254,7 +245,6 @@ function InputTextInternal(
     name,
     placeholder,
     assistiveText,
-    showMiniLabel = true,
     keyboard,
     value: controlledValue,
     defaultValue,
@@ -302,8 +292,7 @@ function InputTextInternal(
 
   const hasValue = internalValue !== "" && internalValue !== undefined;
   const [focused, setFocused] = useState(false);
-  const placeholderMode = getPlaceholderMode(showMiniLabel, internalValue);
-  const miniLabelActive = placeholderMode === "mini";
+  const { hasMiniLabel } = useMiniLabel(internalValue);
 
   const textInputRef = useTextInputRef({ ref, onClear: handleClear });
 
@@ -378,7 +367,7 @@ function InputTextInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      placeholderMode={placeholderMode}
+      hasMiniLabel={hasMiniLabel}
       assistiveText={assistiveText}
       focused={focused}
       error={error}
@@ -402,14 +391,11 @@ function InputTextInternal(
         style={[
           commonInputStyles.input,
           styles.inputPaddingTop,
-          !miniLabelActive && commonInputStyles.inputEmpty,
+          !hasMiniLabel && commonInputStyles.inputEmpty,
           disabled && commonInputStyles.inputDisabled,
           multiline && styles.multiLineInput,
           multiline && Platform.OS === "ios" && styles.multilineInputiOS,
-          multiline && miniLabelActive && styles.multiLineInputWithMini,
-          multiline &&
-            placeholderMode === "hidden" &&
-            styles.multilineWithoutMiniLabel,
+          multiline && hasMiniLabel && styles.multiLineInputWithMini,
           styleOverride?.inputText,
           loading && loadingType === "glimmer" && { color: "transparent" },
         ]}
@@ -524,19 +510,13 @@ function useTextInputRef({ ref, onClear }: UseTextInputRefProps) {
   return textInputRef;
 }
 
-function getPlaceholderMode(
-  isMiniLabelAllowed: boolean,
-  internalValue: string,
-): InputFieldWrapperProps["placeholderMode"] {
-  const hasValue = Boolean(internalValue);
+function useMiniLabel(internalValue: string): {
+  hasMiniLabel: boolean;
+} {
+  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
+  useEffect(() => {
+    setHasMiniLabel(Boolean(internalValue));
+  }, [internalValue]);
 
-  if (hasValue) {
-    if (isMiniLabelAllowed) {
-      return "mini";
-    } else {
-      return "hidden";
-    }
-  } else {
-    return "normal";
-  }
+  return { hasMiniLabel };
 }

package/src/InputTime/InputTime.tsx

@@ -11,11 +11,9 @@ import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
 import type { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import type { InputPressableProps } from "../InputPressable/InputPressable";
 
 interface InputTimeBaseProps
-  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder">,
-    Pick<InputPressableProps, "showMiniLabel"> {
+  extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
   /**
    * Defaulted to "always" so user can clear the time whenever there's a value.
    */
@@ -131,7 +129,6 @@ function InternalInputTime({
   value,
   name,
   type = "scheduling",
-  showMiniLabel = true,
   onChange,
   showIcon = true,
 }: InputTimeProps): JSX.Element {
@@ -159,7 +156,6 @@ function InternalInputTime({
   return (
     <View style={styles.container}>
       <InputPressable
-        showMiniLabel={showMiniLabel}
         clearable={canClearTime}
         disabled={disabled}
         invalid={invalid}