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

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { render, renderHook } from "@testing-library/react-native";
+import { render, renderHook, screen } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
 import type { ReactTestInstance } from "react-test-renderer";
+import { Path } from "react-native-svg";
 import type { PrefixIconProps, PrefixLabelProps } from "./Prefix";
 import {
   PrefixIcon,
@@ -12,9 +13,6 @@ import {
 import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 import { tokens } from "../../../utils/design";
-import * as IconComponent from "../../../Icon/Icon";
-
-const iconSpy = jest.spyOn(IconComponent, "Icon");
 
 const mockLabel = "$";
 
@@ -32,7 +30,7 @@ beforeAll(() => {
 function setupLabel({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
+  miniLabelActive = false,
   inputInvalid = false,
   label = mockLabel,
   styleOverride,
@@ -41,7 +39,7 @@ function setupLabel({
     <PrefixLabel
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
+      miniLabelActive={miniLabelActive}
       inputInvalid={inputInvalid}
       label={label}
       styleOverride={styleOverride}
@@ -52,7 +50,6 @@ function setupLabel({
 function setupIcon({
   disabled = false,
   focused = false,
-  hasMiniLabel = false,
   inputInvalid = false,
   icon = "invoice",
 }: Partial<PrefixIconProps>) {
@@ -60,7 +57,6 @@ function setupIcon({
     <PrefixIcon
       disabled={disabled}
       focused={focused}
-      hasMiniLabel={hasMiniLabel}
       inputInvalid={inputInvalid}
       icon={icon}
     />,
@@ -152,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;
@@ -180,13 +176,9 @@ describe("Prefix", () => {
       setupIcon({
         disabled: true,
       });
-      expect(iconSpy).toHaveBeenCalledWith(
-        {
-          customColor: tokens["color-disabled"],
-          name: "invoice",
-        },
-        {},
-      );
+      const icon = screen.getByTestId("invoice");
+      const path = icon.findByType(Path);
+      expect(path.props.fill).toEqual(tokens["color-disabled"]);
     });
   });
 

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,11 +23,11 @@ export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
 export function PrefixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   styleOverride,
-}: PrefixLabelProps): JSX.Element {
+}: PrefixLabelProps) {
   const styles = useStyles();
   const typographyStyles = useTypographyStyles();
 
@@ -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>;
@@ -78,7 +80,7 @@ export function PrefixIcon({
   disabled,
   inputInvalid,
   icon,
-}: PrefixIconProps): JSX.Element {
+}: PrefixIconProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
 

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,12 +24,12 @@ export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
 export function SuffixLabel({
   focused,
   disabled,
-  hasMiniLabel,
+  miniLabelActive,
   inputInvalid,
   label,
   hasLeftMargin = true,
   styleOverride,
-}: SuffixLabelProps): JSX.Element {
+}: SuffixLabelProps) {
   const styles = useStyles();
   const typographyStyles = useTypographyStyles();
 
@@ -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;
@@ -84,7 +86,7 @@ export function SuffixIcon({
   icon,
   hasLeftMargin = false,
   onPress,
-}: SuffixIconProps): JSX.Element {
+}: SuffixIconProps) {
   const styles = useStyles();
   const { tokens } = useAtlantisTheme();
 

package/src/InputNumber/InputNumber.tsx

@@ -46,6 +46,16 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
   const { inputTransform: convertToString, outputTransform: convertToNumber } =
     useNumberTransform(props.value);
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -58,13 +68,7 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       value={props.value?.toString()}
       defaultValue={props.defaultValue?.toString()}
       onChangeText={handleChange}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/InputPassword/InputPassword.tsx

@@ -23,7 +23,7 @@ export interface InputPasswordProps
 function InputPasswordInternal(
   { usePrivacyEye = true, ...props }: InputPasswordProps,
   ref: Ref<InputTextRef>,
-): JSX.Element {
+) {
   const { t } = useAtlantisI18n();
   const [passwordHidden, setPasswordHidden] = useState(true);
   const [privacyEye, setPrivacyEye] = useState<IconNames>("eye");

package/src/InputPressable/InputPressable.style.ts

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

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,
@@ -115,13 +126,10 @@ export function InputPressableInternal(
     focused,
   }: InputPressableProps,
   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 showClear = useShowClear({
     clearable,
@@ -139,7 +147,7 @@ export function InputPressableInternal(
       prefix={prefix}
       suffix={suffix}
       hasValue={hasValue}
-      hasMiniLabel={hasMiniLabel}
+      placeholderMode={placeholderMode}
       focused={focused}
       error={error}
       invalid={invalid}
@@ -160,7 +168,8 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            !hasMiniLabel && commonInputStyles.inputEmpty,
+            placeholderMode === "normal" && commonInputStyles.inputEmpty,
+            placeholderMode === "hidden" && styles.withoutMiniLabel,
             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";
+  }
+}

package/src/InputSearch/InputSearch.tsx

@@ -1,7 +1,7 @@
 import type { Ref } from "react";
 import React, { forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import { useDebounce } from "@jobber/hooks/useDebounce";
+import { useDebounce } from "@jobber/hooks";
 import { styles } from "./InputSearch.style";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";
@@ -16,6 +16,7 @@ export interface InputSearchProps
     | "autoFocus"
     | "placeholder"
     | "prefix"
+    | "showMiniLabel"
   > {
   /**
    * A callback function that handles the update of the new value of the property value.

package/src/InputSearch/components/FilterButton.tsx

@@ -10,7 +10,7 @@ interface FilterButtonProps {
 export function FilterButton({
   accessibilityLabel,
   onClick,
-}: FilterButtonProps): JSX.Element {
+}: FilterButtonProps) {
   return (
     <IconButton
       onPress={() => {

package/src/InputText/InputText.style.ts

@@ -27,5 +27,10 @@ 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,10 +4,11 @@ import {
   fireEvent,
   render,
   renderHook,
+  screen,
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
-import { Platform } from "react-native";
+import { Button, Platform } from "react-native";
 import { FormProvider, useForm } from "react-hook-form";
 import type { InputTextProps } from "./InputText";
 import { InputText } from "./InputText";
@@ -548,6 +549,194 @@ 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("with FormProvider", () => {
+    const mockOnSubmit = jest.fn();
+    const inputName = "testInput";
+    const inputAccessibilityLabel = "Test Input";
+    const saveButtonText = "Save";
+
+    function FormWithProvider({
+      defaultValue,
+    }: {
+      readonly defaultValue?: string;
+    }) {
+      const formMethods = useForm();
+
+      return (
+        <FormProvider {...formMethods}>
+          <InputText
+            name={inputName}
+            defaultValue={defaultValue}
+            accessibilityLabel={inputAccessibilityLabel}
+          />
+          <Button
+            onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+            title={saveButtonText}
+            accessibilityLabel={saveButtonText}
+          />
+        </FormProvider>
+      );
+    }
+
+    beforeEach(() => {
+      mockOnSubmit.mockClear();
+    });
+
+    describe("defaultValue prop sets form value", () => {
+      it("sets form value to string when defaultValue is provided", async () => {
+        const testValue = "test value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is undefined", async () => {
+        const { getByLabelText } = render(<FormWithProvider />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is empty string", async () => {
+        const { getByLabelText } = render(<FormWithProvider defaultValue="" />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+    });
+
+    describe("input value updates form value", () => {
+      it("updates form value when input text is changed", async () => {
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue="initial" />,
+        );
+
+        const input = getByLabelText(inputAccessibilityLabel);
+        fireEvent.changeText(input, "new value");
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: "new value",
+        });
+      });
+
+      it("preserves defaultValue when input is not interacted with", async () => {
+        const testValue = "preserved value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+    });
+  });
 });
 
 describe("Transform", () => {