@terreno/ui 0.14.0 → 0.14.1

package/src/Page.test.tsx

@@ -2,6 +2,7 @@ import {afterAll, describe, expect, it, mock} from "bun:test";
 import {act, fireEvent, waitFor} from "@testing-library/react-native";
 import React, {type ReactNode} from "react";
 import {Pressable, Text as RNText} from "react-native";
+import {SafeAreaView} from "react-native-safe-area-context";
 
 // Override the IconButton mock so the inline onClick arrows fire when pressed.
 mock.module("./IconButton", () => ({
@@ -273,6 +274,33 @@ describe("Page", () => {
     expect(routerBack).toHaveBeenCalled();
   });
 
+  it("wraps content in SafeAreaView when safeArea is true", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation} safeArea>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView).length).toBeGreaterThan(0);
+  });
+
+  it("does not wrap content in SafeAreaView when safeArea is omitted", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation}>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView)).toHaveLength(0);
+  });
+
+  it("does not wrap content in SafeAreaView when safeArea is false", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation} safeArea={false}>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView)).toHaveLength(0);
+  });
+
   it("safely handles a missing rightButtonOnClick callback", async () => {
     const {getByText} = renderWithTheme(
       <Page navigation={mockNavigation} rightButton="Go" title="Page">

package/src/Page.tsx

@@ -1,5 +1,6 @@
 import {router} from "expo-router";
 import React from "react";
+import {SafeAreaView} from "react-native-safe-area-context";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
@@ -58,9 +59,9 @@ export class Page extends React.Component<PageProps, {}> {
     );
   }
 
-  render() {
+  renderBody() {
     return (
-      <ErrorBoundary onError={this.props.onError}>
+      <>
         <Box
           alignSelf="center"
           avoidKeyboard
@@ -112,6 +113,20 @@ export class Page extends React.Component<PageProps, {}> {
             {this.props.footer}
           </Box>
         )}
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <ErrorBoundary onError={this.props.onError}>
+        {this.props.safeArea ? (
+          <SafeAreaView edges={["top", "bottom"]} style={{flex: 1}}>
+            {this.renderBody()}
+          </SafeAreaView>
+        ) : (
+          this.renderBody()
+        )}
       </ErrorBoundary>
     );
   }

package/src/PickerSelect.tsx

@@ -114,7 +114,7 @@ export interface RNPickerSelectProps {
   InputAccessoryView?: ComponentType<{testID?: string}>;
 }
 
-export function RNPickerSelect({
+export const RNPickerSelect = ({
   onValueChange,
   value,
   items,
@@ -136,7 +136,7 @@ export function RNPickerSelect({
   touchableWrapperProps,
 
   InputAccessoryView,
-}: RNPickerSelectProps) {
+}: RNPickerSelectProps) => {
   const [showPicker, setShowPicker] = useState<boolean>(false);
   const [animationType, setAnimationType] = useState<ModalProps["animationType"]>(undefined);
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
@@ -683,4 +683,4 @@ export function RNPickerSelect({
   };
 
   return render();
-}
+};

package/src/TapToEdit.test.tsx

@@ -332,3 +332,34 @@ describe("formatAddress", () => {
     expect(result).toContain("(113)");
   });
 });
+
+describe("TapToEdit - additional function coverage", () => {
+  it("shows Clear button for date type and invokes setValue and onSave", async () => {
+    const setValue = mock(() => {});
+    const onSave = mock(() => Promise.resolve());
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit onSave={onSave} setValue={setValue} title="Date" type="date" value="2024-01-01" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(getByText("Clear")).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(getByText("Clear"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+    expect(setValue).toHaveBeenCalledWith("");
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("assigns inputRef for text type in editing mode", async () => {
+    const setValue = mock(() => {});
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" type="text" value="Alice" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(queryByText("Save")).toBeTruthy();
+  });
+});

package/src/TapToEdit.tsx

@@ -26,7 +26,7 @@ const TapToEditTitle: FC<{
   );
 };
 
-export function formatAddress(address: AddressInterface, asString = false): string {
+export const formatAddress = (address: AddressInterface, asString = false): string => {
   let city = "";
   if (address?.city) {
     city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
@@ -49,7 +49,6 @@ export function formatAddress(address: AddressInterface, asString = false): stri
   const addressLineFour = `${countyName}${address?.countyCode ? ` (${countyCode})` : ""}`;
 
   if (!asString) {
-    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
     return `${addressLineOne}${
       addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
     }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}${
@@ -62,7 +61,7 @@ export function formatAddress(address: AddressInterface, asString = false): stri
       addressLineThree && addressLineFour ? `, ` : ""
     }${addressLineFour}`;
   }
-}
+};
 
 export const TapToEdit: FC<TapToEditProps> = ({
   value,