@jobber/components-native 0.116.0 → 0.116.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.116.0",
+    "version": "0.116.1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -125,5 +125,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "d58819450555e691966244925a7152575316b0f5"
+    "gitHead": "d324e138d0e3c27cf0e54dac5d40b2c2d7e9ab82"
 }

package/dist/src/Select/SelectRoot.test.js

@@ -1,6 +1,6 @@
 import React from "react";
+import { Pressable, StyleSheet } from "react-native";
 import { fireEvent, render, screen, within, } from "@testing-library/react-native";
-import { Pressable } from "react-native";
 import { SelectRoot } from "./SelectRoot";
 import { SelectTrigger } from "./components/SelectTrigger";
 import { SelectLabel } from "./components/SelectLabel";
@@ -117,10 +117,44 @@ describe("SelectRoot label placement", () => {
             React.createElement(SelectTrigger, null,
                 React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
     }
+    function getTriggerContent() {
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        const content = trigger.children[0];
+        // Unwrap the mocked View to return its native host element.
+        return content.children[0];
+    }
+    it.each([
+        { labelPlacement: "inside" },
+        { labelPlacement: "above" },
+        { readOnly: true },
+        { disabled: true },
+    ])("centers a value without an inside label (%j)", props => {
+        var _a;
+        renderRoot(Object.assign(Object.assign({}, props), { defaultValue: { value: "tor", label: "Toronto" } }));
+        const content = getTriggerContent();
+        expect(content).toHaveStyle({
+            flexDirection: "row",
+            alignItems: "center",
+        });
+        expect((_a = StyleSheet.flatten(content.props.style).paddingTop) !== null && _a !== void 0 ? _a : 0).toBe(0);
+    });
+    it("centers the placeholder when the composed label is above the trigger", () => {
+        renderComposed({ labelPlacement: "above" });
+        expect(getTriggerContent()).toHaveStyle({
+            flexDirection: "row",
+            alignItems: "center",
+        });
+    });
     it("places the label inside the trigger by default (labelPlacement inside)", () => {
         renderComposed();
         const trigger = screen.getByTestId("ATL-Select-Trigger");
         expect(within(trigger).getByText("City", hidden)).toBeDefined();
+        expect(getTriggerContent()).toHaveStyle({
+            paddingTop: tokens["space-small"] - tokens["space-smallest"],
+        });
+        expect(getTriggerContent()).not.toHaveStyle({
+            flexDirection: "row",
+        });
     });
     it("places the label above the trigger with labelPlacement='above'", () => {
         renderComposed({ labelPlacement: "above" });

package/dist/src/Select/components/SelectTrigger.js

@@ -14,13 +14,16 @@ import { Icon } from "../../Icon";
  */
 export function SelectTrigger({ children, testID, ref, }) {
     const styles = useStyles();
-    const { invalid, readOnly, accessibilityLabel, labelPlacement } = useSelectFieldState();
+    const { invalid, readOnly, accessibilityLabel, labelPlacement, labelContent, } = useSelectFieldState();
     const { open, value, disabled } = useRootContext();
     const isDisabled = disabled !== null && disabled !== void 0 ? disabled : false;
     // `disabled` wins over `readOnly`.
     const isReadOnly = !isDisabled && (readOnly !== null && readOnly !== void 0 ? readOnly : false);
-    const isInsideLabel = labelPlacement === "inside";
-    const content = (React.createElement(View, { style: [styles.content, isInsideLabel && styles.contentInside] },
+    const isInsideLabel = labelPlacement === "inside" && labelContent != null;
+    const content = (React.createElement(View, { style: [
+            styles.content,
+            isInsideLabel ? styles.contentInside : styles.contentWithoutLabel,
+        ] },
         isInsideLabel && React.createElement(FieldLabel, null),
         children));
     if (isReadOnly) {

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

@@ -4,6 +4,11 @@ export const useStyles = buildThemedStyles(tokens => ({
         flex: 1,
         justifyContent: "center",
     },
+    // Keep the Value's flex horizontal when there is no label to stack above it.
+    contentWithoutLabel: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
     // Inside-label placement: the Value's flex fills the column vertically and
     // would otherwise pin the label flush to the top. This top inset gives the
     // label the same breathing room as the shared input chrome's mini-label.