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

package/dist/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/dist/src/AutoLink/hooks/useTokenGenerator.js

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

package/dist/src/AutoLink/hooks/useTokenGenerator.test.js

@@ -0,0 +1,24 @@
+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 < 10000; i++) {
+            try {
+                uuid.v1();
+            }
+            catch (_a) {
+                break;
+            }
+        }
+        expect(() => renderHook(() => useTokenGenerator())).not.toThrow();
+    });
+});

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.

package/dist/src/hooks/useFormController.js

@@ -23,7 +23,7 @@ export function useFormController({ name, value, validations, }) {
     return { error, field };
 }
 function useControlName(name) {
-    const [identifier] = useState(uuid.v1());
+    const [identifier] = useState(() => uuid.v4());
     const prefix = `generatedName--${identifier}`;
     return `${name || prefix}`;
 }

package/dist/src/hooks/useFormController.test.js

@@ -0,0 +1,29 @@
+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 < 10000; i++) {
+        try {
+            uuid.v1();
+        }
+        catch (_a) {
+            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();
+    });
+});