@jobber/components-native 0.115.5 → 0.116.1

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.115.5",
+    "version": "0.116.1",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -96,11 +96,12 @@
         "react-native-gesture-handler": "^2.29.1",
         "react-native-keyboard-controller": "^1.12.0",
         "react-native-modal-datetime-picker": "^18.0.0",
-        "react-native-reanimated": "^3.7.1",
+        "react-native-reanimated": "4.2.3",
         "react-native-safe-area-context": "^5.4.0",
         "react-native-screens": "^4.18.0",
         "react-native-svg": "^15.1.0",
         "react-native-web": "^0.20.0",
+        "react-native-worklets": "0.7.4",
         "react-test-renderer": "19.1.1",
         "storybook": "10.3.5",
         "vite": "^8.0.9"
@@ -119,10 +120,10 @@
         "react-native-gesture-handler": ">=2.22.0",
         "react-native-keyboard-controller": "^1.20.7",
         "react-native-modal-datetime-picker": " >=13.0.0",
-        "react-native-reanimated": "^3.0.0",
+        "react-native-reanimated": "^4.0.0",
         "react-native-safe-area-context": "^5.4.0",
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "9b27100be34c36aa1d4717f298cea4388ab9277d"
+    "gitHead": "d324e138d0e3c27cf0e54dac5d40b2c2d7e9ab82"
 }

package/dist/src/ActivityIndicator/ActivityIndicator.test.js

@@ -3,9 +3,9 @@ import { AccessibilityInfo } from "react-native";
 import { render } from "@testing-library/react-native";
 import { useReducedMotion } from "react-native-reanimated";
 import { ActivityIndicator } from "./index";
-// `useReducedMotion` is mocked globally in src/__mocks__/__mocks.ts and
-// defaults to returning `false`. Tests that exercise the reduced-motion
-// branch override the return value below.
+// Reanimated's `useReducedMotion` reads the OS setting once at module load,
+// so it is mocked to let tests toggle the reduced-motion branch.
+jest.mock("react-native-reanimated", () => (Object.assign(Object.assign({ __esModule: true }, jest.requireActual("react-native-reanimated")), { useReducedMotion: jest.fn(() => false) })));
 const testId = "ActivityIndicator";
 describe("ActivityIndicator", () => {
     beforeEach(() => {

package/dist/src/ContentOverlay/ContentOverlay.test.js

@@ -17,7 +17,6 @@ import { Button } from "../Button";
 import { Content } from "../Content";
 import { Text } from "../Text";
 jest.unmock("../hooks/useIsScreenReaderEnabled");
-jest.unmock("react-native-reanimated");
 jest.unmock("@gorhom/bottom-sheet");
 jest.mock("@gorhom/bottom-sheet/lib/commonjs/hooks/useAnimatedLayout", () => ({
     // Fix for reanimated not actually running in the test environment.

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.