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

package/dist/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/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -11,7 +11,7 @@ import { Text } from "../Text";
 import { ActivityIndicator } from "../ActivityIndicator";
 export const INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID = "ATL-InputFieldWrapper-Glimmers";
 export const INPUT_FIELD_WRAPPER_SPINNER_TEST_ID = "ATL-InputFieldWrapper-Spinner";
-export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, hasMiniLabel = false, hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", }) {
+export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveText, prefix, suffix, placeholderMode = "normal", hasValue = false, error, focused = false, children, onClear, showClearAction = false, styleOverride, toolbar, toolbarVisibility = "while-editing", loading = false, loadingType = "spinner", }) {
     fieldAffixRequiredPropsCheck([prefix, suffix]);
     const handleClear = onClear !== null && onClear !== void 0 ? onClear : noopClear;
     warnIfClearActionWithNoOnClear(onClear, showClearAction);
@@ -20,6 +20,8 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
     const showLoadingSpinner = loading && loadingType === "spinner";
     const showLoadingGlimmer = loading && loadingType === "glimmer";
     const styles = useStyles();
+    const placeholderVisible = placeholderMode !== "hidden";
+    const miniLabelActive = placeholderMode === "mini";
     return (React.createElement(ErrorMessageWrapper, { message: getMessage({ invalid, error }) },
         React.createElement(View, { testID: "ATL-InputFieldWrapper", style: [
                 styles.container,
@@ -29,18 +31,18 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.container,
             ] },
             React.createElement(View, { style: styles.field },
-                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, icon: prefix.icon })),
+                (prefix === null || prefix === void 0 ? void 0 : prefix.icon) && (React.createElement(PrefixIcon, { disabled: disabled, focused: focused, inputInvalid: inputInvalid, icon: prefix.icon })),
                 React.createElement(View, { style: [styles.inputContainer] },
-                    React.createElement(View, { style: [
+                    placeholderVisible && (React.createElement(View, { style: [
                             !!placeholder && styles.label,
-                            hasMiniLabel && styles.miniLabel,
+                            miniLabelActive && styles.miniLabel,
                             disabled && styles.disabled,
-                            hasMiniLabel &&
+                            miniLabelActive &&
                                 showClearAction &&
                                 styles.miniLabelShowClearAction,
                         ], pointerEvents: "none" },
-                        React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
-                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
+                        React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, disabled), miniLabelActive: miniLabelActive, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText }))),
+                    (prefix === null || prefix === void 0 ? void 0 : prefix.label) && hasValue && (React.createElement(PrefixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: prefix.label, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.prefixLabel })),
                     children,
                     showLoadingGlimmer && (React.createElement(View, { testID: INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID, style: [
                             styles.loadingGlimmers,
@@ -54,10 +56,10 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                         (suffix === null || suffix === void 0 ? void 0 : suffix.icon) ||
                         showLoadingSpinner) && (React.createElement(View, { style: styles.inputEndContainer },
                         showClearAction && (React.createElement(ClearAction, { hasMarginRight: !!(suffix === null || suffix === void 0 ? void 0 : suffix.icon) || !!(suffix === null || suffix === void 0 ? void 0 : suffix.label), onPress: handleClear })),
-                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.label) && hasValue && (React.createElement(SuffixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: suffix.label, hasLeftMargin: !showClearAction, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.suffixLabel })),
                         showLoadingSpinner && (React.createElement(View, { style: styles.loadingSpinner },
                             React.createElement(ActivityIndicator, { testID: INPUT_FIELD_WRAPPER_SPINNER_TEST_ID }))),
-                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasMiniLabel: hasMiniLabel, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
+                        (suffix === null || suffix === void 0 ? void 0 : suffix.icon) && (React.createElement(SuffixIcon, { disabled: disabled, focused: focused, hasLeftMargin: !!(!showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label)), inputInvalid: inputInvalid, icon: suffix.icon, onPress: suffix.onPress })))))),
             isToolbarVisible && React.createElement(View, { style: styles.toolbar }, toolbar)),
         assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
 }
@@ -93,12 +95,12 @@ function getMessage({ invalid, error, }) {
         messages.push(invalid);
     return messages.join("\n");
 }
-function Placeholder({ placeholder, styleOverride, labelVariation, hasMiniLabel, }) {
+function Placeholder({ placeholder, styleOverride, labelVariation, miniLabelActive, }) {
     const typographyStyles = useTypographyStyles();
-    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: hasMiniLabel ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
+    return (React.createElement(React.Fragment, null, !styleOverride ? (React.createElement(Text, { hideFromScreenReader: true, maxLines: "single", variation: labelVariation, level: miniLabelActive ? "textSupporting" : "text" }, placeholder)) : (React.createElement(RNText, { accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants", numberOfLines: 1, style: [
             typographyStyles[labelVariation],
             typographyStyles.baseRegularRegular,
-            hasMiniLabel
+            miniLabelActive
                 ? typographyStyles.smallSize
                 : typographyStyles.defaultSize,
             styleOverride,

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -7,7 +7,7 @@ import { useTypographyStyles } from "../../../Typography";
 import { useStyles } from "../../InputFieldWrapper.style";
 export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
 export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
-export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, styleOverride, }) {
+export function PrefixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, styleOverride, }) {
     const styles = useStyles();
     const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { style: [
@@ -15,7 +15,10 @@ export function PrefixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             focused && styles.inputFocused,
             inputInvalid && styles.inputInvalid,
         ], testID: prefixLabelTestId },
-        React.createElement(View, { style: [styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+        React.createElement(View, { style: [
+                styles.prefixLabel,
+                miniLabelActive && styles.fieldAffixMiniLabel,
+            ] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
                 typographyStyles.baseRegularRegular,
                 typographyStyles.base,
                 typographyStyles.defaultSize,

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -7,7 +7,7 @@ import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 import { useStyles } from "../../InputFieldWrapper.style";
 export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
 export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
-export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
+export function SuffixLabel({ focused, disabled, miniLabelActive, inputInvalid, label, hasLeftMargin = true, styleOverride, }) {
     const styles = useStyles();
     const typographyStyles = useTypographyStyles();
     return (React.createElement(View, { testID: suffixLabelTestId, style: [
@@ -16,7 +16,10 @@ export function SuffixLabel({ focused, disabled, hasMiniLabel, inputInvalid, lab
             inputInvalid && styles.inputInvalid,
             hasLeftMargin && styles.suffixLabelMargin,
         ] },
-        React.createElement(View, { style: [styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
+        React.createElement(View, { style: [
+                styles.suffixLabel,
+                miniLabelActive && styles.fieldAffixMiniLabel,
+            ] }, !styleOverride ? (React.createElement(Text, { variation: disabled ? "disabled" : "base" }, label)) : (React.createElement(RNText, { allowFontScaling: true, style: [
                 typographyStyles.baseRegularRegular,
                 typographyStyles.base,
                 typographyStyles.defaultSize,

package/dist/src/InputPressable/InputPressable.js

@@ -1,15 +1,13 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import { Text as NativeText, Pressable } from "react-native";
 import { useShowClear } from "@jobber/hooks";
 import { useStyles } from "./InputPressable.style";
 import { InputFieldWrapper, useCommonInputStyles } from "../InputFieldWrapper";
 export const InputPressable = forwardRef(InputPressableInternal);
-export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
+export function InputPressableInternal({ value, placeholder, disabled, invalid, error, showMiniLabel = true, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
     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,
         multiline: false,
@@ -19,13 +17,27 @@ export function InputPressableInternal({ value, placeholder, disabled, invalid,
     });
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
         React.createElement(Pressable, { style: styles.pressable, onPress: onPress, disabled: disabled, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityValue: { text: value } },
             React.createElement(NativeText, { style: [
                     commonInputStyles.input,
                     styles.inputPressableStyles,
-                    !hasMiniLabel && commonInputStyles.inputEmpty,
+                    !miniLabelActive && commonInputStyles.inputEmpty,
                     disabled && commonInputStyles.inputDisabled,
                     (Boolean(invalid) || error) && styles.inputInvalid,
                 ], testID: "inputPressableText", ref: ref, accessibilityRole: "none", accessible: false, importantForAccessibility: "no-hide-descendants" }, value))));
 }
+function getPlaceholderMode(isMiniLabelAllowed, internalValue) {
+    const hasValue = Boolean(internalValue);
+    if (hasValue) {
+        if (isMiniLabelAllowed) {
+            return "mini";
+        }
+        else {
+            return "hidden";
+        }
+    }
+    else {
+        return "normal";
+    }
+}

package/dist/src/InputText/InputText.js

@@ -9,7 +9,7 @@ import { InputFieldWrapper } from "../InputFieldWrapper";
 import { useCommonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements
-function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
+function InputTextInternal({ invalid, disabled, readonly = false, name, placeholder, assistiveText, showMiniLabel = true, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, toolbar, toolbarVisibility, loading, loadingType, }, ref) {
     var _a;
     const isAndroid = Platform.OS === "android";
     const isIOS = Platform.OS === "ios";
@@ -22,7 +22,8 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     const internalValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString();
     const hasValue = internalValue !== "" && internalValue !== undefined;
     const [focused, setFocused] = useState(false);
-    const { hasMiniLabel } = useMiniLabel(internalValue);
+    const placeholderMode = getPlaceholderMode(showMiniLabel, internalValue);
+    const miniLabelActive = placeholderMode === "mini";
     const textInputRef = useTextInputRef({ ref, onClear: handleClear });
     const showClear = useShowClear({
         clearable,
@@ -74,15 +75,15 @@ function InputTextInternal({ invalid, disabled, readonly = false, name, placehol
     }
     const styles = useStyles();
     const commonInputStyles = useCommonInputStyles();
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, placeholderMode: placeholderMode, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride, toolbar: toolbar, toolbarVisibility: toolbarVisibility, loading: loading, loadingType: loadingType },
         React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
                 commonInputStyles.input,
                 styles.inputPaddingTop,
-                !hasMiniLabel && commonInputStyles.inputEmpty,
+                !miniLabelActive && commonInputStyles.inputEmpty,
                 disabled && commonInputStyles.inputDisabled,
                 multiline && styles.multiLineInput,
                 multiline && Platform.OS === "ios" && styles.multilineInputiOS,
-                multiline && hasMiniLabel && styles.multiLineInputWithMini,
+                multiline && miniLabelActive && styles.multiLineInputWithMini,
                 styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
                 loading && loadingType === "glimmer" && { color: "transparent" },
             ], readOnly: readonly, editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityState: { busy: loading }, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
@@ -149,10 +150,17 @@ function useTextInputRef({ ref, onClear }) {
     }), [onClear]);
     return textInputRef;
 }
-function useMiniLabel(internalValue) {
-    const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
-    useEffect(() => {
-        setHasMiniLabel(Boolean(internalValue));
-    }, [internalValue]);
-    return { hasMiniLabel };
+function getPlaceholderMode(isMiniLabelAllowed, internalValue) {
+    const hasValue = Boolean(internalValue);
+    if (hasValue) {
+        if (isMiniLabelAllowed) {
+            return "mini";
+        }
+        else {
+            return "hidden";
+        }
+    }
+    else {
+        return "normal";
+    }
 }