@jobber/components-native 0.90.1-JOB-140976-20bb6ae.11 → 0.90.1-JOB-140976-676a3bc.17

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/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/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-140976-20bb6ae.11+20bb6ae6a",
+  "version": "0.90.1-JOB-140976-676a3bc.17+676a3bc2e",
   "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": "20bb6ae6a51997e8306d4f4ddf12295b33ca16be"
+  "gitHead": "676a3bc2eb3879aa5fda68db6121d30c9bf4828f"
 }

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/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.tsx

@@ -130,7 +130,6 @@ export function InputPressableInternal(
   const hasValue = !!value;
 
   const placeholderMode = getPlaceholderMode(showMiniLabel, value);
-  const miniLabelActive = placeholderMode === "mini";
 
   const showClear = useShowClear({
     clearable,
@@ -169,7 +168,8 @@ export function InputPressableInternal(
           style={[
             commonInputStyles.input,
             styles.inputPressableStyles,
-            !miniLabelActive && commonInputStyles.inputEmpty,
+            placeholderMode === "normal" && commonInputStyles.inputEmpty,
+            placeholderMode === "hidden" && styles.withoutMiniLabel,
             disabled && commonInputStyles.inputDisabled,
             (Boolean(invalid) || error) && styles.inputInvalid,
           ]}

package/src/InputSearch/InputSearch.tsx

@@ -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/InputTime/InputTime.tsx

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