@jobber/components-native 0.115.5 → 0.116.1

package/dist/types/src/Select/components/SelectTrigger.style.d.ts

@@ -3,6 +3,10 @@ export declare const useStyles: () => {
         flex: number;
         justifyContent: "center";
     };
+    contentWithoutLabel: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
     contentInside: {
         paddingTop: number;
     };

package/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/src/ActivityIndicator/ActivityIndicator.test.tsx

@@ -5,9 +5,13 @@ import { useReducedMotion } from "react-native-reanimated";
 import type { ReactTestInstance } from "react-test-renderer";
 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", () => ({
+  __esModule: true,
+  ...jest.requireActual("react-native-reanimated"),
+  useReducedMotion: jest.fn(() => false),
+}));
 
 const testId = "ActivityIndicator";
 

package/src/ActivityIndicator/guide.md

@@ -102,7 +102,7 @@ does not require keyboard or screen-reader interaction.
 
 The default (`base`) presentation renders Material Design 3's three-layer
 indeterminate ring. The implementation uses `react-native-svg` for the ring
-geometry and `react-native-reanimated` 3 for the motion — all worklet-driven so
+geometry and `react-native-reanimated` 4 for the motion — all worklet-driven so
 the animation runs on the UI thread regardless of JS thread load.
 
 The three concurrent animations (base only):

package/src/ContentOverlay/BottomSheetKeyboardAwareScrollView.tsx

@@ -17,10 +17,9 @@ import Reanimated from "react-native-reanimated";
  *
  * @see https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view#gorhombottom-sheet
  */
-const AnimatedScrollView =
-  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
-    KeyboardAwareScrollView,
-  );
+const AnimatedScrollView = Reanimated.createAnimatedComponent(
+  KeyboardAwareScrollView,
+);
 
 const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
   BottomSheetScrollViewMethods,

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -17,7 +17,6 @@ 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/src/Select/Select.guide.md

@@ -104,6 +104,12 @@ A few decisions shape how the composable parts fit together:
   `Select.Trigger` renders it in the inside slot. So the part's JSX position is
   irrelevant; only `labelPlacement` matters.
 
+- **Only an actual inside label uses the stacked layout.** With no composed
+  label, or with `labelPlacement="above"`, the trigger centers its value or
+  placeholder vertically alongside the chevron. Its content uses a row so the
+  primitive Value's `flex: 1` fills width rather than stretching the text box
+  vertically. The inside-label inset only applies when label content exists.
+
 - **Accessibility names the trigger directly.** The accessible name is applied
   as the trigger's `accessibilityLabel` — not via the rn-primitives `Label` / a
   `nativeID`+`accessibilityLabelledBy` association (unsupported on iOS). It is

package/src/Select/SelectRoot.test.tsx

@@ -1,11 +1,12 @@
 import React from "react";
+import { Pressable, StyleSheet } from "react-native";
+import type { ReactTestInstance } from "react-test-renderer";
 import {
   fireEvent,
   render,
   screen,
   within,
 } from "@testing-library/react-native";
-import { Pressable } from "react-native";
 import type { TriggerRef } from "@rn-primitives/select";
 import { SelectRoot } from "./SelectRoot";
 import { SelectTrigger } from "./components/SelectTrigger";
@@ -190,11 +191,53 @@ describe("SelectRoot label placement", () => {
     );
   }
 
+  function getTriggerContent() {
+    const trigger = screen.getByTestId("ATL-Select-Trigger");
+    const content = trigger.children[0] as ReactTestInstance;
+
+    // Unwrap the mocked View to return its native host element.
+    return content.children[0] as ReactTestInstance;
+  }
+
+  it.each([
+    { labelPlacement: "inside" as const },
+    { labelPlacement: "above" as const },
+    { readOnly: true },
+    { disabled: true },
+  ])("centers a value without an inside label (%j)", props => {
+    renderRoot({
+      ...props,
+      defaultValue: { value: "tor", label: "Toronto" },
+    });
+
+    const content = getTriggerContent();
+    expect(content).toHaveStyle({
+      flexDirection: "row",
+      alignItems: "center",
+    });
+    expect(StyleSheet.flatten(content.props.style).paddingTop ?? 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'", () => {

package/src/Select/components/SelectTrigger.style.ts

@@ -6,6 +6,12 @@ export const useStyles = buildThemedStyles(tokens => ({
     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.

package/src/Select/components/SelectTrigger.tsx

@@ -35,18 +35,28 @@ export function SelectTrigger({
   ref,
 }: SelectTriggerProps): ReactElement {
   const styles = useStyles();
-  const { invalid, readOnly, accessibilityLabel, labelPlacement } =
-    useSelectFieldState();
+  const {
+    invalid,
+    readOnly,
+    accessibilityLabel,
+    labelPlacement,
+    labelContent,
+  } = useSelectFieldState();
   const { open, value, disabled } = useRootContext();
 
   const isDisabled = disabled ?? false;
   // `disabled` wins over `readOnly`.
   const isReadOnly = !isDisabled && (readOnly ?? false);
 
-  const isInsideLabel = labelPlacement === "inside";
+  const isInsideLabel = labelPlacement === "inside" && labelContent != null;
 
   const content = (
-    <View style={[styles.content, isInsideLabel && styles.contentInside]}>
+    <View
+      style={[
+        styles.content,
+        isInsideLabel ? styles.contentInside : styles.contentWithoutLabel,
+      ]}
+    >
       {isInsideLabel && <FieldLabel />}
       {children}
     </View>