@terreno/ui 0.14.0 → 0.14.2

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.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,248 @@ 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();
+      }
+    });
+  });
+
+  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

@@ -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();
-}
+};