@terreno/ui 0.14.0 → 0.14.2

package/src/DateUtilities.tsx

@@ -7,7 +7,7 @@ const getErrorMessage = (error: unknown): string => {
   return String(error);
 };
 
-function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
+const getDate = (date: string, {timezone}: {timezone?: string} = {}): DateTime => {
   if (!date) {
     throw new Error("Passed undefined");
   }
@@ -19,48 +19,48 @@ function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
     throw new Error(`Invalid date: ${date}`);
   }
   return clonedDate;
-}
+};
 
-export function isTomorrow(date: string, {timezone}: {timezone?: string} = {}): boolean {
+export const isTomorrow = (date: string, {timezone}: {timezone?: string} = {}): boolean => {
   const clonedDate = getDate(date, {timezone});
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
   return diff.days <= -1 && diff.days > -2;
-}
+};
 
-export function isYesterday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+export const isYesterday = (date: string, {timezone}: {timezone?: string} = {}): boolean => {
   const clonedDate = getDate(date, {timezone});
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
   return diff.days <= 1 && diff.days > -1;
-}
+};
 
-export function isToday(date: string, {timezone}: {timezone?: string} = {}): boolean {
+export const isToday = (date: string, {timezone}: {timezone?: string} = {}): boolean => {
   const clonedDate = getDate(date, {timezone});
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
   return diff.days === 0;
-}
+};
 
-export function isThisYear(date: string, {timezone}: {timezone?: string} = {}): boolean {
+export const isThisYear = (date: string, {timezone}: {timezone?: string} = {}): boolean => {
   const clonedDate = getDate(date, {timezone});
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   return clonedDate.year === now.year;
-}
+};
 
-export function isWithinWeek(date: string, {timezone}: {timezone?: string} = {}): boolean {
+export const isWithinWeek = (date: string, {timezone}: {timezone?: string} = {}): boolean => {
   const clonedDate = getDate(date, {timezone});
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.startOf("day").diff(clonedDate.startOf("day"), "days");
   return diff.days > -7 && diff.days < 7;
-}
+};
 
 // Prints a human friendly date, e.g. "Tomorrow", "Yesterday", "Monday", "June 19", "December 25,
 // 2022".
-export function humanDate(
+export const humanDate = (
   date: string,
   {timezone, dontShowTime}: {timezone?: string; dontShowTime?: boolean} = {}
-): string {
+): string => {
   let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
@@ -87,14 +87,14 @@ export function humanDate(
     // December 25, 2022
     return clonedDate.toFormat("MMM d, yyyy");
   }
-}
+};
 
 // Prints a human friendly date and time, e.g. "Tomorrow 9:00 AM", "Yesterday 9:00 AM", "Monday
 // 9:00 AM", "June 19 9:00 AM", "December 25, 2022 9:00 AM".
-export function humanDateAndTime(
+export const humanDateAndTime = (
   date: string,
   {timezone, showTimezone = true}: {timezone?: string; showTimezone?: boolean} = {}
-): string {
+): string => {
   let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
@@ -128,7 +128,7 @@ export function humanDateAndTime(
     // December 25, 2022
     return `${clonedDate.toFormat("MMM d, yyyy")} ${time}`;
   }
-}
+};
 
 // Print date in the format of M/D/YY, taking timezones into account.
 export const printDate = (
@@ -199,7 +199,7 @@ export const printOnlyDate = (
 };
 
 // Print time in the format of HH:mm A, taking timezones into account.
-export function printTime(
+export const printTime = (
   date?: string,
   {
     timezone,
@@ -210,7 +210,7 @@ export function printTime(
     showTimezone?: boolean;
     defaultValue?: string;
   } = {defaultValue: "Invalid Date", timezone: "America/New_York"}
-): string {
+): string => {
   if (!date) {
     return defaultValue ?? "Invalid Date";
   }
@@ -232,10 +232,10 @@ export function printTime(
   } else {
     return clonedDate.toLocaleString(DateTime.TIME_SIMPLE);
   }
-}
+};
 
 // Print date in the format of M/D/YY HH:mm A, taking timezones into account.
-export function printDateAndTime(
+export const printDateAndTime = (
   date?: string,
   {
     timezone,
@@ -246,7 +246,7 @@ export function printDateAndTime(
     showTimezone?: boolean;
     defaultValue?: string;
   } = {}
-): string {
+): string => {
   if (!date) {
     return defaultValue ?? "Invalid Datetime";
   }
@@ -268,12 +268,12 @@ export function printDateAndTime(
   } else {
     return clonedDate.toLocaleString(DateTime.DATETIME_SHORT);
   }
-}
+};
 
 // Prints a date range in the format of M/D/YY HH:mm A - M/D/YY HH:mm A EST, taking timezones into
 // account. If the dates are the same, it will print the date only once, e.g. M/D/YY HH:mm A - HH:mm
 // A EST.
-export function printDateRange(
+export const printDateRange = (
   start: string,
   end: string,
   {
@@ -281,7 +281,7 @@ export function printDateRange(
     showTimezone = true,
     timeOnly,
   }: {timezone: string; showTimezone?: boolean; timeOnly?: boolean}
-): string {
+): string => {
   const startDate = printDate(start, {showTimezone: false, timezone});
   const endDate = printDate(end, {showTimezone: false, timezone});
 
@@ -299,14 +299,14 @@ export function printDateRange(
   } else {
     return `${startDate} ${startTime} - ${endDate} ${endTime}`;
   }
-}
+};
 
 // Print since nicely. If less than 2 months, print days, otherwise print months. If over 1 year,
 // print years.
-export function printSince(
+export const printSince = (
   date: string,
   {timezone, showAgo = true}: {timezone?: string; showAgo?: boolean} = {}
-): string {
+): string => {
   let clonedDate: DateTime;
   const ago = showAgo ? " ago" : "";
   try {
@@ -326,20 +326,20 @@ export function printSince(
     const years = Math.floor(now.diff(clonedDate, "years").years);
     return `${years} ${years === 1 ? "year" : "years"}${ago}`;
   }
-}
+};
 
-export function convertNullToUndefined(value: string | null): string | undefined {
+export const convertNullToUndefined = (value: string | null): string | undefined => {
   return value ?? undefined;
-}
+};
 
 // Get the ISO date string from a date string. If the date string is undefined,
 // return undefined instead of null so MongoDB can handle it.
-export function getIsoDate(date: string | undefined): string | undefined {
+export const getIsoDate = (date: string | undefined): string | undefined => {
   if (!date) {
     return undefined;
   }
   return convertNullToUndefined(DateTime.fromISO(date).toUTC().toISO());
-}
+};
 
 const usTimezoneOptions = [
   {label: "Eastern", value: "America/New_York"},
@@ -351,7 +351,7 @@ const usTimezoneOptions = [
   {label: "Arizona", value: "America/Phoenix"},
 ];
 
-export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone = false) {
+export const getTimezoneOptions = (location: "USA" | "Worldwide", shortTimezone = false) => {
   let timezones: [string, string][];
   if (location === "USA") {
     timezones = usTimezoneOptions.map((tz) => [tz.label, tz.value]);
@@ -366,9 +366,8 @@ export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone
   }
   return timezones.map(([name, tz]) => {
     const dateTime = DateTime.now().setZone(tz);
-    let tzAbbr = dateTime.toFormat("ZZZZ"); // Gets timezone abbreviation like "EST", "CST", etc.
+    let tzAbbr = dateTime.toFormat("ZZZZ");
 
-    // Special case for Arizona which returns MST during standard time
     if (tz === "America/Phoenix") {
       tzAbbr = "AZ";
     }
@@ -378,4 +377,4 @@ export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone
       value: tz,
     };
   });
-}
+};

package/src/HeightActionSheet.test.tsx

@@ -1,8 +1,9 @@
 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";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {ThemeProvider} from "./Theme";
 
@@ -86,4 +87,19 @@ describe("HeightActionSheet", () => {
     });
     expect(handleChange).toHaveBeenCalled();
   });
+
+  it("calls the Done button onClick handler directly", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {UNSAFE_root} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={() => {}} value="60" />
+      </ThemeProvider>
+    );
+    const buttons = UNSAFE_root.findAllByType(Button as never);
+    const doneBtn = buttons.find((b) => b.props.text === "Done");
+    expect(doneBtn).toBeTruthy();
+    act(() => {
+      doneBtn!.props.onClick();
+    });
+  });
 });

package/src/HeightField.test.tsx

@@ -1,8 +1,9 @@
-import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {afterEach, beforeEach, describe, expect, it, mock, spyOn} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
 import {HeightActionSheet} from "./HeightActionSheet";
 import {HeightField} from "./HeightField";
 import {renderWithTheme} from "./test-utils";
+import * as Utilities from "./Utilities";
 
 describe("HeightField", () => {
   let mockOnChange: ReturnType<typeof mock>;
@@ -207,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.
@@ -274,3 +310,107 @@ describe("HeightField - Android platform", () => {
     expect(onChange).toHaveBeenCalledWith("63");
   });
 });
+
+describe("HeightField - Desktop platform", () => {
+  const {Platform} = require("react-native") as {Platform: {OS: string}};
+  const originalOS = Platform.OS;
+  let isNativeSpy: ReturnType<typeof spyOn>;
+
+  beforeEach(() => {
+    Platform.OS = "web";
+    isNativeSpy = spyOn(Utilities, "isNative").mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    Platform.OS = originalOS;
+    isNativeSpy.mockRestore();
+  });
+
+  it("fires handleBlur on HeightSegment and calls onChange", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent(feetInput, "blur");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles text input change in feet segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "6");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles clearing feet input to empty", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("calls onChange with empty when both feet and inches are cleared", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "");
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("renders HeightSegment in disabled state", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(
+      <HeightField disabled onChange={onChange} value="70" />
+    );
+    expect(getByLabelText("ft input")).toBeTruthy();
+  });
+
+  it("renders HeightSegment with error text", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(
+      <HeightField errorText="Required" onChange={onChange} value="70" />
+    );
+    expect(getByLabelText("ft input")).toBeTruthy();
+  });
+
+  it("fires focus on feet segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent(feetInput, "focus");
+    expect(feetInput).toBeTruthy();
+  });
+
+  it("fires focus on inches segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const inInput = getByLabelText("in input");
+    fireEvent(inInput, "focus");
+    expect(inInput).toBeTruthy();
+  });
+
+  it("handles text input change in inches segment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const inInput = getByLabelText("in input");
+    fireEvent.changeText(inInput, "3");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("handles non-numeric input in HeightSegment", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "abc");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("clamps to max value in HeightSegment handleChange", () => {
+    const onChange = mock(() => {});
+    const {getByLabelText} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const feetInput = getByLabelText("ft input");
+    fireEvent.changeText(feetInput, "99");
+    expect(feetInput).toBeTruthy();
+  });
+});

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/MediaQuery.ts

@@ -1,6 +1,6 @@
 import {Dimensions} from "react-native";
 
-export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
+export const mediaQuery = (): "xs" | "sm" | "md" | "lg" => {
   const width = Dimensions.get("window").width;
   if (width < 576) {
     return "xs";
@@ -11,9 +11,9 @@ export function mediaQuery(): "xs" | "sm" | "md" | "lg" {
   } else {
     return "lg";
   }
-}
+};
 
-export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+export const mediaQueryLargerThan = (size: "xs" | "sm" | "md" | "lg"): boolean => {
   const media = mediaQuery();
   if (size === "xs") {
     return true;
@@ -25,9 +25,9 @@ export function mediaQueryLargerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
     return ["lg"].includes(media);
   }
   return false;
-}
+};
 
-export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean {
+export const mediaQuerySmallerThan = (size: "xs" | "sm" | "md" | "lg"): boolean => {
   const media = mediaQuery();
   if (size === "lg") {
     return true;
@@ -39,8 +39,8 @@ export function mediaQuerySmallerThan(size: "xs" | "sm" | "md" | "lg"): boolean
     return ["xs"].includes(media);
   }
   return false;
-}
+};
 
-export function isMobileDevice(): boolean {
+export const isMobileDevice = (): boolean => {
   return !mediaQueryLargerThan("sm");
-}
+};

package/src/MobileAddressAutoComplete.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it, mock} from "bun:test";
-import {fireEvent} from "@testing-library/react-native";
+import {act, fireEvent} from "@testing-library/react-native";
 import {forwardRef, useImperativeHandle, useRef} from "react";
 import {Pressable, Text, View} from "react-native";
 
@@ -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", () => {
@@ -185,4 +189,23 @@ describe("MobileAddressAutocomplete", () => {
     expect(wrapper).toBeTruthy();
     expect(() => wrapper.props.onPress?.()).not.toThrow();
   });
+
+  it("fires handleAddressChange from the fallback TextField onChange", () => {
+    const handleAddressChange = mock(() => {});
+    const {TextField} = require("./TextField") as {
+      TextField: React.ComponentType<{onChange?: (v: string) => void}>;
+    };
+    const {UNSAFE_getByType} = renderWithTheme(
+      <MobileAddressAutocomplete
+        handleAddressChange={handleAddressChange}
+        handleAutoCompleteChange={() => {}}
+        inputValue=""
+      />
+    );
+    const textField = UNSAFE_getByType(TextField);
+    act(() => {
+      textField.props.onChange?.("789 Elm St");
+    });
+    expect(handleAddressChange).toHaveBeenCalledWith("789 Elm St");
+  });
 });