@jobber/components-native 0.51.5 → 0.51.6-JOB-88274.7

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.51.5",
+    "version": "0.51.6-JOB-88274.7+b7b85ba2",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -84,5 +84,5 @@
         "react-native-reanimated": "^2.17.0",
         "react-native-safe-area-context": "^4.5.2"
     },
-    "gitHead": "3caaa43e03388b7d034d0606dc803218394929c2"
+    "gitHead": "b7b85ba202558ffdcb7ecad60cdd1104575e81d3"
 }

package/dist/src/InputDate/InputDate.js

@@ -44,7 +44,7 @@ function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, in
     const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
     const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : t("date");
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputPressable, { clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
+        React.createElement(InputPressable, { focused: showPicker, clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
         React.createElement(DateTimePicker, { testID: "inputDate-datePicker", date: date || undefined, display: display, isVisible: showPicker, maximumDate: maxDate, minimumDate: minDate, mode: "date", confirmTextIOS: t("confirm"), cancelTextIOS: t("cancel"), locale: locale, onCancel: handleCancel, onConfirm: handleConfirm })));
     function showDatePicker() {
         setShowPicker(true);

package/dist/src/InputFieldWrapper/CommonInputStyles.style.js

@@ -26,8 +26,9 @@ export const commonInputStyles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "space-between",
         width: "100%",
-        borderColor: tokens["color-grey"],
+        borderColor: tokens["color-border"],
         borderStyle: "solid",
-        borderBottomWidth: tokens["border-base"],
+        borderWidth: tokens["border-base"],
+        paddingLeft: tokens["space-base"],
     },
 });

package/dist/src/InputFieldWrapper/InputFieldWrapper.js

@@ -32,7 +32,7 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                             showClearAction &&
                             styles.miniLabelShowClearAction,
                     ], pointerEvents: "none" },
-                    React.createElement(Placeholder, { placeholder: placeholder, labelVariation: getLabelVariation(error, invalid, focused, disabled), hasMiniLabel: hasMiniLabel, styleOverride: styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.placeholderText })),
+                    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 })),
                 children,
                 (showClearAction || (suffix === null || suffix === void 0 ? void 0 : suffix.label) || (suffix === null || suffix === void 0 ? void 0 : suffix.icon)) && (React.createElement(View, { style: styles.inputEndContainer },
@@ -41,16 +41,13 @@ export function InputFieldWrapper({ invalid, disabled, placeholder, assistiveTex
                     (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 })))))),
         assistiveText && !error && !invalid && (React.createElement(Text, { level: "textSupporting", variation: disabled ? "disabled" : focused ? "interactive" : "subdued" }, assistiveText))));
 }
-function getLabelVariation(error, invalid, focused, disabled) {
+function getLabelVariation(error, invalid, disabled) {
     if (invalid || error) {
         return "error";
     }
     else if (disabled) {
         return "disabled";
     }
-    else if (focused) {
-        return "interactive";
-    }
     return "subdued";
 }
 function fieldAffixRequiredPropsCheck(affixPair) {

package/dist/src/InputFieldWrapper/InputFieldWrapper.style.js

@@ -61,10 +61,12 @@ export const styles = StyleSheet.create({
     },
     suffixIcon: {
         justifyContent: "center",
+        paddingRight: tokens["space-small"],
     },
     suffixLabel: {
         justifyContent: "center",
         paddingTop: tokens["space-minuscule"],
+        paddingRight: tokens["space-small"],
     },
     suffixIconMargin: {
         marginLeft: tokens["space-small"] + tokens["space-smaller"],

package/dist/src/InputPressable/InputPressable.js

@@ -4,7 +4,7 @@ import { useShowClear } from "@jobber/hooks";
 import { styles } from "./InputPressable.style";
 import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
 export const InputPressable = forwardRef(InputPressableInternal);
-export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, }, ref) {
+export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, focused, }, ref) {
     const hasValue = !!value;
     const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
     useEffect(() => {
@@ -17,7 +17,7 @@ export function InputPressableInternal({ value, placeholder, disabled, invalid,
         hasValue,
         disabled,
     });
-    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, focused: false, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, showClearAction: showClear, onClear: onClear },
+    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 },
         React.createElement(Pressable, { style: styles.pressable, onPress: onPress, disabled: disabled, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, accessibilityValue: { text: value } },
             React.createElement(NativeText, { style: [
                     commonInputStyles.input,

package/dist/src/InputSearch/InputSearch.style.js

@@ -1,8 +1,6 @@
 import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
 export const styles = StyleSheet.create({
     container: {
         width: "100%",
-        paddingHorizontal: tokens["space-base"],
     },
 });

package/dist/src/InputTime/InputTime.js

@@ -42,7 +42,7 @@ function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, in
     }, [dateTime, emptyValueLabel]);
     const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
     return (React.createElement(View, { style: styles.container },
-        React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
+        React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, focused: showPicker, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
         React.createElement(DateTimePicker, { testID: "inputTime-Picker", minuteInterval: getMinuteInterval(type), date: getInitialPickerDate(dateTime), timeZoneOffsetInMinutes: getTimeZoneOffsetInMinutes(timeZone, dateTime), isVisible: showPicker, mode: "time", onCancel: handleCancel, onConfirm: handleConfirm, is24Hour: is24Hour, locale: is24Hour ? LOCALE_24_HOURS : LOCALE_12_HOURS })));
     function showDatePicker() {
         setShowPicker(true);

package/dist/src/Select/Select.js

@@ -22,7 +22,7 @@ export function Select({ value, defaultValue, onChange, children, placeholder, l
     const valueTextVariation = disabled ? "disabled" : undefined;
     const hasValue = internalValue && (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) > 0;
     return (React.createElement(InputFieldWrapper, { error: error, invalid: invalid || !!error, hasValue: hasValue, styleOverride: {
-            container: { borderBottomWidth: undefined },
+            container: { paddingLeft: undefined },
         } },
         React.createElement(View, { testID: getTestID(testID), accessible: true, accessibilityLabel: getA11yLabel(), accessibilityValue: { text: getValue() }, accessibilityHint: t("Select.a11yHint"), accessibilityRole: "button", accessibilityState: { disabled: disabled } },
             React.createElement(SelectInternalPicker, { disabled: disabled, options: getOptions(), onChange: handleChange },

package/dist/src/Select/Select.style.js

@@ -8,6 +8,8 @@ export const styles = StyleSheet.create({
             flexDirection: "column",
             justifyContent: "flex-end",
             minHeight: tokens["space-largest"] + tokens["border-base"],
+            marginVertical: 0,
+            borderWidth: 0,
         },
     ]),
     input: StyleSheet.flatten([
@@ -18,6 +20,7 @@ export const styles = StyleSheet.create({
             paddingBottom: tokens["space-smaller"],
             minHeight: 0,
             minWidth: "100%",
+            paddingRight: tokens["space-small"],
         },
     ]),
     value: {