@terreno/ui 0.14.1 → 0.15.0

package/src/Field.test.tsx

@@ -125,4 +125,27 @@ describe("Field", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders customSelect field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field
+        label="Custom"
+        onChange={() => {}}
+        options={[
+          {label: "Option A", value: "a"},
+          {label: "Option B", value: "b"},
+        ]}
+        type="customSelect"
+        value="a"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders signature field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field label="Sign here" onChange={() => {}} type="signature" value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/HeightActionSheet.test.tsx

@@ -1,6 +1,6 @@
 import {describe, expect, it, mock} from "bun:test";
 import {act, render} from "@testing-library/react-native";
-import {createRef} from "react";
+import React, {createRef} from "react";
 
 import type {ActionSheet} from "./ActionSheet";
 import {Button} from "./Button";

package/src/HeightField.test.tsx

@@ -208,6 +208,41 @@ describe("HeightField", () => {
   });
 });
 
+describe("HeightField - HeightSegment callbacks", () => {
+  it("exercises HeightSegment onChangeText for feet and inches when rendered", () => {
+    const RN = require("react-native") as {Platform: {OS: string}};
+    const origOS = RN.Platform.OS;
+    RN.Platform.OS = "web";
+    try {
+      const onChange = mock(() => {});
+      const {root} = renderWithTheme(<HeightField onChange={onChange} title="Height" value="70" />);
+      const ftInputs = root.findAll(
+        (n) => n.props["aria-label"] === "ft input" && n.props.onChangeText
+      );
+      const inInputs = root.findAll(
+        (n) => n.props["aria-label"] === "in input" && n.props.onChangeText
+      );
+      if (ftInputs.length === 0) {
+        console.warn(
+          "Platform.OS override to 'web' did not take effect; skipping HeightSegment assertions"
+        );
+        return;
+      }
+      expect(inInputs.length).toBeGreaterThan(0);
+
+      // Exercise the callbacks to cover HeightSegment.handleChange
+      ftInputs[0].props.onChangeText("6");
+      expect(onChange).toHaveBeenCalled();
+
+      inInputs[0].props.onChangeText("3");
+      ftInputs[0].props.onChangeText("abc");
+      ftInputs[0].props.onChangeText("");
+    } finally {
+      RN.Platform.OS = origOS;
+    }
+  });
+});
+
 describe("HeightField - Android platform", () => {
   // Toggle Platform.OS to "android" to exercise the Android rendering branch
   // that uses SelectField pickers instead of the Pressable+ActionSheet path.

package/src/HeightFieldDesktop.test.tsx

@@ -126,6 +126,25 @@ describe("HeightField (desktop/web path)", () => {
       expect(mockOnChange).not.toHaveBeenCalled();
     });
 
+    it("tracks focused segment when inputs are focused", () => {
+      const {getAllByLabelText, toJSON} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value="70" />
+      );
+      const feetInput = getAllByLabelText("ft input")[0];
+      const inchesInput = getAllByLabelText("in input")[0];
+
+      fireEvent(feetInput, "focus");
+      const snapshotFeetFocused = toJSON();
+      fireEvent(feetInput, "blur");
+
+      fireEvent(inchesInput, "focus");
+      const snapshotInchesFocused = toJSON();
+      fireEvent(inchesInput, "blur");
+
+      expect(snapshotFeetFocused).toBeTruthy();
+      expect(snapshotInchesFocused).toBeTruthy();
+    });
+
     it("does not call onChange with values exceeding max feet", () => {
       const {getAllByLabelText} = renderWithTheme(
         <HeightField max={95} onChange={mockOnChange} value="" />

package/src/MarkdownView.test.tsx

@@ -1,4 +1,5 @@
 import {describe, expect, it} from "bun:test";
+import assert from "node:assert";
 
 import {MarkdownView} from "./MarkdownView";
 import {renderWithTheme} from "./test-utils";
@@ -38,6 +39,33 @@ describe("MarkdownView", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it("keeps long consent ordered list markers on one line", () => {
+    const longConsentList = Array.from({length: 17}, (_, index) => {
+      return `${index + 1}. This consent item has enough text to wrap on narrow mobile screens.`;
+    }).join("\n");
+    const {toJSON} = renderWithTheme(<MarkdownView>{longConsentList}</MarkdownView>);
+    const serialized = JSON.stringify(toJSON());
+
+    assert.ok(serialized.includes('"minWidth":32'));
+    assert.ok(serialized.includes('"flexShrink":0'));
+    assert.ok(serialized.includes('"textAlign":"right"'));
+    assert.ok(serialized.includes("17"));
+  });
+
+  it("uses explicit markdown paragraph line height for wrapped mobile text", () => {
+    const {toJSON} = renderWithTheme(
+      <MarkdownView>
+        {
+          "This consent paragraph is intentionally long so it wraps across multiple lines on Android and keeps its measured height."
+        }
+      </MarkdownView>
+    );
+    const serialized = JSON.stringify(toJSON());
+
+    assert.ok(serialized.includes('"fontSize":14'));
+    assert.ok(serialized.includes('"lineHeight":20'));
+  });
+
   it("renders code blocks", () => {
     const {toJSON} = renderWithTheme(<MarkdownView>{"```\ncode block\n```"}</MarkdownView>);
     expect(toJSON()).toMatchSnapshot();

package/src/MarkdownView.tsx

@@ -49,11 +49,29 @@ export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boole
   });
 
   const monoFont = isWeb ? "monospace" : Platform.select({android: "monospace", ios: "Menlo"});
+  const textFontSize = isWeb ? 16 : 14;
+  const textLineHeight = isWeb ? 24 : 20;
+  const markdownTextStyle = {
+    fontFamily: "text-regular",
+    fontSize: textFontSize,
+    lineHeight: textLineHeight,
+    ...color,
+  };
 
   return (
     <Markdown
       style={{
-        body: {fontFamily: "text", ...color},
+        body: {width: "100%", ...markdownTextStyle},
+        bullet_list: {width: "100%"},
+        bullet_list_content: {flex: 1, flexShrink: 1, minWidth: 0},
+        bullet_list_icon: {
+          flexShrink: 0,
+          marginLeft: 0,
+          marginRight: 8,
+          minWidth: 16,
+          textAlign: "center",
+          ...markdownTextStyle,
+        },
         code_block: {
           backgroundColor: theme.surface.neutralLight,
           borderColor: theme.border.default,
@@ -85,13 +103,57 @@ export const MarkdownView: React.FC<{children: React.ReactNode; inverted?: boole
           padding: 8,
           ...color,
         },
-        heading1: {fontFamily: "heading-bold", fontSize: sizes.xl, ...color},
-        heading2: {fontFamily: "heading-bold", fontSize: sizes.lg, ...color},
-        heading3: {fontFamily: "heading-bold", fontSize: sizes.md, ...color},
-        heading4: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        heading1: {
+          fontFamily: "heading-bold",
+          fontSize: sizes.xl,
+          lineHeight: sizes.xl * 1.25,
+          ...color,
+        },
+        heading2: {
+          fontFamily: "heading-bold",
+          fontSize: sizes.lg,
+          lineHeight: sizes.lg * 1.25,
+          ...color,
+        },
+        heading3: {
+          fontFamily: "heading-bold",
+          fontSize: sizes.md,
+          lineHeight: sizes.md * 1.25,
+          ...color,
+        },
+        heading4: {
+          fontFamily: "heading-semibold",
+          fontSize: sizes.sm,
+          lineHeight: sizes.sm * 1.25,
+          ...color,
+        },
         // h5/h6 map to small as well for consistency, slightly smaller visually handled by weight
-        heading5: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
-        heading6: {fontFamily: "heading-semibold", fontSize: sizes.sm, ...color},
+        heading5: {
+          fontFamily: "heading-semibold",
+          fontSize: sizes.sm,
+          lineHeight: sizes.sm * 1.25,
+          ...color,
+        },
+        heading6: {
+          fontFamily: "heading-semibold",
+          fontSize: sizes.sm,
+          lineHeight: sizes.sm * 1.25,
+          ...color,
+        },
+        list_item: {alignItems: "flex-start", flexDirection: "row", width: "100%"},
+        ordered_list: {width: "100%"},
+        ordered_list_content: {flex: 1, flexShrink: 1, minWidth: 0},
+        ordered_list_icon: {
+          flexShrink: 0,
+          marginLeft: 0,
+          marginRight: 8,
+          minWidth: 32,
+          textAlign: "right",
+          ...markdownTextStyle,
+        },
+        paragraph: {flexShrink: 1, width: "100%", ...markdownTextStyle},
+        text: color,
+        textgroup: {flexShrink: 1, minWidth: 0},
       }}
     >
       {children}

package/src/MobileAddressAutoComplete.test.tsx

@@ -160,7 +160,7 @@ describe("MobileAddressAutocomplete", () => {
 
   it("falls back to the TextField and propagates its onChange without an API key", () => {
     const handleAddressChange = mock(() => {});
-    const {UNSAFE_root} = renderWithTheme(
+    const {root} = renderWithTheme(
       <MobileAddressAutocomplete
         handleAddressChange={handleAddressChange}
         handleAutoCompleteChange={() => {}}
@@ -168,7 +168,11 @@ describe("MobileAddressAutocomplete", () => {
         testID="mobile-fallback"
       />
     );
-    expect(UNSAFE_root).toBeTruthy();
+    // Find the TextField component with nativeID="address1" and trigger its onChange callback
+    const textFields = root.findAll((n) => n.props.nativeID === "address1" && n.props.onChangeText);
+    expect(textFields.length).toBeGreaterThan(0);
+    textFields[0].props.onChangeText("123 Main St");
+    expect(handleAddressChange).toHaveBeenCalledWith("123 Main St");
   });
 
   it("wrapping TouchableOpacity clears focus when pressed", () => {

package/src/PickerSelect.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {act, fireEvent} from "@testing-library/react-native";
 
@@ -160,6 +161,270 @@ describe("PickerSelect", () => {
     expect(toJSON()).toBeTruthy();
   });
 
+  describe("web rendering (Platform.OS === 'web')", () => {
+    const PlatformModule = require("react-native").Platform;
+    let savedOS: any;
+
+    let hadDocument = false;
+    let savedDocument: any;
+
+    const ensureDocument = () => {
+      hadDocument = "document" in globalThis;
+      savedDocument = (globalThis as any).document;
+      if (typeof (globalThis as any).HTMLElement === "undefined") {
+        (globalThis as any).HTMLElement = class HTMLElement {};
+      }
+      const el = new (globalThis as any).HTMLElement();
+      el.blur = () => {};
+      (globalThis as any).document = {activeElement: el};
+    };
+
+    const restoreDocument = () => {
+      if (hadDocument) {
+        (globalThis as any).document = savedDocument;
+      } else {
+        delete (globalThis as any).document;
+      }
+    };
+
+    it("renders web dropdown with display label", () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const {getByTestId} = renderWithTheme(<RNPickerSelect {...defaultProps} value="2" />);
+        expect(getByTestId("text_input")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("renders web dropdown and opens on press", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const onOpen = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onOpen={onOpen} value="1" />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        expect(onOpen).toHaveBeenCalled();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("does not open web menu when disabled", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const onOpen = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} disabled onOpen={onOpen} />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        expect(onOpen).not.toHaveBeenCalled();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("calls onClose when closing web menu", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const onClose = mock(() => {});
+        const onOpen = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onClose={onClose} onOpen={onOpen} value="1" />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        expect(onOpen).toHaveBeenCalled();
+        await act(async () => {
+          fireEvent.press(getByTestId("web_dropdown_backdrop"));
+        });
+        expect(onClose).toHaveBeenCalled();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("renders disabled web dropdown with correct styling", () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const {getByTestId} = renderWithTheme(<RNPickerSelect {...defaultProps} disabled />);
+        expect(getByTestId("web_picker")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("renders web dropdown with inputLabel when available", () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const items = [
+          {inputLabel: "Opt 1 short", label: "Option 1 long", value: "1"},
+          {label: "Option 2", value: "2"},
+        ];
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} items={items} value="1" />
+        );
+        expect(getByTestId("text_input")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("renders web dropdown with no placeholder (empty object)", () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} placeholder={{}} value="1" />
+        );
+        expect(getByTestId("web_picker")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+
+    it("calls onValueChange when a web dropdown option is selected", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const mockOnValueChange = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        await act(async () => {
+          fireEvent.press(getByTestId("web_dropdown_option_2"));
+        });
+        expect(mockOnValueChange).toHaveBeenCalledWith("2", 2);
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
+  });
+
+  describe("android rendering", () => {
+    const PlatformModule = require("react-native").Platform;
+    let savedOS: any;
+
+    it("renders android headless when useNativeAndroidPickerStyle is false", () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} useNativeAndroidPickerStyle={false} value="1" />
+        );
+        expect(getByTestId("android_touchable_wrapper")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+
+    it("renders android headless with fixAndroidTouchableBug", () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect
+            {...defaultProps}
+            fixAndroidTouchableBug
+            useNativeAndroidPickerStyle={false}
+            value="1"
+          />
+        );
+        expect(getByTestId("android_touchable_wrapper")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+
+    it("renders android headless with children", () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} value="1">
+            <>Custom child</>
+          </RNPickerSelect>
+        );
+        expect(getByTestId("android_touchable_wrapper")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+
+    it("renders native android picker style", () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const {getByTestId} = renderWithTheme(<RNPickerSelect {...defaultProps} value="1" />);
+        expect(getByTestId("android_picker")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+
+    it("renders native android picker disabled", () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} disabled value="1" />
+        );
+        expect(getByTestId("android_picker")).toBeTruthy();
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+
+    it("calls onValueChange on android native picker change", async () => {
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "android";
+        const mockOnValueChange = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+        );
+        const picker = getByTestId("android_picker");
+        await act(async () => {
+          picker.props.onValueChange?.("2", 1);
+        });
+        expect(mockOnValueChange).toHaveBeenCalledWith("2", 1);
+      } finally {
+        PlatformModule.OS = savedOS;
+      }
+    });
+  });
+
   describe("interactions on iOS", () => {
     it("fires onOpen when the iOS wrapper is pressed and onClose when Done is pressed", async () => {
       const onOpen = mock(() => {});

package/src/PickerSelect.tsx

@@ -38,6 +38,7 @@ import {
   Text,
   TextInput,
   type TextInputProps,
+  type TextProps,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -388,6 +389,7 @@ export const RNPickerSelect = ({
       return <View style={{pointerEvents: "box-only"}}>{children}</View>;
     }
 
+    const textProps = textInputProps as Partial<TextProps> | undefined;
     return (
       <View
         style={{
@@ -397,13 +399,27 @@ export const RNPickerSelect = ({
           width: "100%",
         }}
       >
-        <TextInput
-          readOnly
-          style={{color: disabled ? theme.text.secondaryLight : theme.text.primary}}
-          testID="text_input"
-          value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
-          {...textInputProps}
-        />
+        {disabled ? (
+          <Text
+            {...textProps}
+            style={
+              textProps?.style
+                ? [{color: theme.text.secondaryLight, flex: 1}, textProps.style]
+                : {color: theme.text.secondaryLight, flex: 1}
+            }
+            testID={textInputProps?.testID ?? "text_input"}
+          >
+            {selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+          </Text>
+        ) : (
+          <TextInput
+            readOnly
+            style={{color: theme.text.primary}}
+            testID="text_input"
+            value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+            {...textInputProps}
+          />
+        )}
         {renderIcon()}
       </View>
     );
@@ -629,7 +645,7 @@ export const RNPickerSelect = ({
           {...touchableWrapperProps}
         >
           <Text
-            numberOfLines={1}
+            numberOfLines={disabled ? undefined : 1}
             style={{
               color: disabled ? theme.text.secondaryLight : theme.text.primary,
               flex: 1,