@terreno/ui 0.14.0 → 0.14.1

package/src/DataTable.test.tsx

@@ -1,5 +1,6 @@
 // biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
+import {act} from "@testing-library/react-native";
 
 import {DataTable} from "./DataTable";
 import {Text} from "./Text";
@@ -131,4 +132,220 @@ describe("DataTable", () => {
     const {toJSON} = renderWithTheme(<DataTable columns={sampleColumns} data={[]} />);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("handles sort cycling: none -> asc -> desc -> none", () => {
+    const sortableColumns = [
+      {columnType: "text", sortable: true, title: "Name", width: 150},
+      {columnType: "text", sortable: false, title: "Age", width: 100},
+    ];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}, {value: "28"}]]}
+        setSortColumn={setSortColumn}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    // Find the sort pressable (has hitSlop=16)
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+    expect(sortPressable).toBeTruthy();
+
+    const {fireEvent} = require("@testing-library/react-native");
+    // First click: none -> asc
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "asc"});
+  });
+
+  it("handles sort from asc to desc", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "asc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+
+    const {fireEvent} = require("@testing-library/react-native");
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "desc"});
+  });
+
+  it("handles sort from desc to none", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "desc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+
+    const {fireEvent} = require("@testing-library/react-native");
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith(undefined);
+  });
+
+  it("handles sort on non-sortable column (no-op)", () => {
+    const columns = [{columnType: "text", sortable: false, title: "Name", width: 150}];
+    const setSortColumn = mock(() => {});
+    renderWithTheme(
+      <DataTable columns={columns} data={[[{value: "Alice"}]]} setSortColumn={setSortColumn} />
+    );
+    // No sort pressable rendered for non-sortable columns, so no action needed
+    expect(setSortColumn).not.toHaveBeenCalled();
+  });
+
+  it("syncs scroll between header and body via refs", () => {
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sampleColumns} data={sampleData} pinnedColumns={1} />
+    );
+
+    const {ScrollView: ScrollViewComp} = require("react-native");
+    const scrollViews = UNSAFE_getAllByType(ScrollViewComp);
+    expect(scrollViews.length).toBeGreaterThan(0);
+
+    // Inject mock scrollTo on the refs so handleScroll branches execute
+    const mockScrollTo = mock((_opts: {animated: boolean; x: number}) => {});
+    for (const sv of scrollViews) {
+      if (sv.props.horizontal) {
+        const fiber = (sv as unknown as {_fiber?: {ref?: {current: unknown}}})._fiber;
+        if (fiber?.ref && typeof fiber.ref === "object") {
+          fiber.ref.current = {scrollTo: mockScrollTo};
+        }
+      }
+    }
+
+    const {fireEvent} = require("@testing-library/react-native");
+    // Find header scroll (onScroll passes isHeader=true)
+    const headerScroll = scrollViews.find(
+      (sv: {props: {horizontal?: boolean; showsHorizontalScrollIndicator?: boolean}}) =>
+        sv.props.horizontal && sv.props.showsHorizontalScrollIndicator === false
+    );
+    // Find body scroll (onScroll passes isHeader=false)
+    const bodyScroll = scrollViews.find(
+      (sv: {props: {horizontal?: boolean; showsHorizontalScrollIndicator?: boolean}}) =>
+        sv.props.horizontal && sv.props.showsHorizontalScrollIndicator === true
+    );
+
+    if (headerScroll) {
+      fireEvent.scroll(headerScroll, {
+        nativeEvent: {contentOffset: {x: 50, y: 0}},
+      });
+    }
+    if (bodyScroll) {
+      fireEvent.scroll(bodyScroll, {
+        nativeEvent: {contentOffset: {x: 75, y: 0}},
+      });
+    }
+
+    expect(mockScrollTo).toHaveBeenCalled();
+  });
+
+  it("renders with custom column component map", () => {
+    const CustomComponent = ({cellData}: {cellData: {value: unknown}}) => (
+      <Text>Custom: {String(cellData.value)}</Text>
+    );
+    const customColumns = [{columnType: "custom", title: "Custom Col", width: 150}];
+    const customData = [[{value: "test"}]];
+    const {getByText} = renderWithTheme(
+      <DataTable
+        columns={customColumns}
+        customColumnComponentMap={{custom: CustomComponent as any}}
+        data={customData}
+      />
+    );
+    expect(getByText("Custom: test")).toBeTruthy();
+  });
+
+  it("renders with infoModalText on column header", () => {
+    const columnsWithInfo = [
+      {columnType: "text", infoModalText: "**Help text**", title: "Name", width: 150},
+    ];
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={columnsWithInfo} data={[[{value: "Alice"}]]} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders with cell highlight", () => {
+    const highlightData = [[{highlight: "primary", value: "Highlighted"}]];
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={[{columnType: "text", title: "Name", width: 150}]} data={highlightData} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders with moreContentExtraData", () => {
+    const MoreContent = ({rowIndex, extraInfo}: {rowIndex: number; extraInfo?: string}) => (
+      <Text>
+        Row {rowIndex}: {extraInfo}
+      </Text>
+    );
+    const {toJSON} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as any}
+        moreContentExtraData={[{extraInfo: "info1"}, {extraInfo: "info2"}, {extraInfo: "info3"}]}
+      />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("opens and dismisses more content modal via MoreButtonCell press", async () => {
+    const MoreContent = ({rowIndex}: {rowIndex: number}) => <Text>Detail for row {rowIndex}</Text>;
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as any}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const {fireEvent} = require("@testing-library/react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+
+    // Find the info/eye icon pressable (MoreButtonCell has accessibilityHint="View details")
+    const moreBtn = pressables.find(
+      (p: {props: {accessibilityHint?: string}}) => p.props.accessibilityHint === "View details"
+    );
+    expect(moreBtn).toBeTruthy();
+
+    // Press to open modal
+    await act(async () => {
+      fireEvent.press(moreBtn!);
+    });
+
+    // Find the modal dismiss pressable and press it
+    const {Modal: ModalComp} = require("./Modal");
+    const modals = UNSAFE_getAllByType(ModalComp);
+    if (modals.length > 0 && modals[0].props.onDismiss) {
+      await act(async () => {
+        modals[0].props.onDismiss();
+      });
+    }
+  });
 });

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

@@ -3,6 +3,7 @@ import {act, render} from "@testing-library/react-native";
 import {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>;
@@ -274,3 +275,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/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";
 
@@ -185,4 +185,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");
+  });
 });