@jobber/components-native 0.116.0 → 0.116.2-large-chec-aaeb9fd.2

package/dist/types/src/AutoLink/hooks/useTokenGenerator.test.d.ts

@@ -0,0 +1 @@
+export {};

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/dist/types/src/hooks/useFormController.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.116.0",
+  "version": "0.116.2-large-chec-aaeb9fd.2+aaeb9fde",
   "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": "aaeb9fdef9e69599b84e28de7ed82ed5ac7f26f7"
 }

package/src/AutoLink/hooks/useTokenGenerator.test.ts

@@ -0,0 +1,28 @@
+import { renderHook } from "@testing-library/react-native";
+import uuid from "react-native-uuid";
+import { useTokenGenerator } from "./useTokenGenerator";
+
+describe("useTokenGenerator", () => {
+  it("generates tokens that its pattern matches", () => {
+    const { result } = renderHook(() => useTokenGenerator());
+    const [generateToken, tokenRegexp] = result.current;
+
+    const text = `${generateToken()} and ${generateToken()}`;
+
+    expect(text.match(tokenRegexp)).toHaveLength(2);
+  });
+
+  it("still renders late in a long session", () => {
+    // Exhaust react-native-uuid's argument-less v1() budget, which throws on
+    // its 10,000th call in a JS session.
+    for (let i = 0; i < 10_000; i++) {
+      try {
+        uuid.v1();
+      } catch {
+        break;
+      }
+    }
+
+    expect(() => renderHook(() => useTokenGenerator())).not.toThrow();
+  });
+});

package/src/AutoLink/hooks/useTokenGenerator.ts

@@ -3,7 +3,7 @@ import uuid from "react-native-uuid";
 
 export function useTokenGenerator(): [() => string, RegExp] {
   let counter = 0;
-  const [identifier] = useState(uuid.v1());
+  const [identifier] = useState(() => uuid.v4());
 
   return [
     () => `@__ELEMENT-${identifier}-${counter++}__@`,

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>

package/src/hooks/useFormController.test.tsx

@@ -0,0 +1,38 @@
+import { renderHook } from "@testing-library/react-native";
+import uuid from "react-native-uuid";
+import { useFormController } from "./useFormController";
+
+// react-native-uuid's v1() only resets its counter when given options, so its
+// 10,000th argument-less call in a JS session throws. Exhaust it the way a long
+// session with large forms does.
+function exhaustUuidV1Budget() {
+  for (let i = 0; i < 10_000; i++) {
+    try {
+      uuid.v1();
+    } catch {
+      return;
+    }
+  }
+}
+
+describe("useFormController", () => {
+  it("keeps the generated field name stable across re-renders", () => {
+    const { result, rerender } = renderHook(() =>
+      useFormController({ value: "" }),
+    );
+    const initialName = result.current.field.name;
+
+    rerender({});
+
+    expect(initialName).toMatch(/^generatedName--/);
+    expect(result.current.field.name).toBe(initialName);
+  });
+
+  it("still renders unnamed fields late in a long session", () => {
+    exhaustUuidV1Budget();
+
+    expect(() =>
+      renderHook(() => useFormController({ value: "" })),
+    ).not.toThrow();
+  });
+});

package/src/hooks/useFormController.ts

@@ -54,7 +54,7 @@ export function useFormController<T>({
 }
 
 function useControlName(name?: string): UseControllerReturn["field"]["name"] {
-  const [identifier] = useState(uuid.v1());
+  const [identifier] = useState(() => uuid.v4());
   const prefix = `generatedName--${identifier}`;
 
   return `${name || prefix}` as const;