@terreno/ui 0.11.1 → 0.11.3

package/src/WebDropdownMenu.test.tsx

@@ -0,0 +1,180 @@
+import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, renderHook} from "@testing-library/react-native";
+
+import {renderWithTheme} from "./test-utils";
+import {useWebDropdownAnchor, WebDropdownMenu} from "./WebDropdownMenu";
+
+describe("WebDropdownMenu", () => {
+  const anchor = {height: 40, width: 200, x: 16, y: 32};
+  const options = [
+    {label: "Option A", value: "a"},
+    {label: "Option B", value: "b"},
+    {label: "Option C", value: "c"},
+  ];
+
+  it("marks the underlying Modal hidden when not visible", () => {
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        visible={false}
+      />
+    );
+    expect(getByTestId("web_dropdown_modal").props.visible).toBe(false);
+  });
+
+  it("marks the underlying Modal visible when open", () => {
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        visible
+      />
+    );
+    expect(getByTestId("web_dropdown_modal").props.visible).toBe(true);
+  });
+
+  it("renders every option when visible", () => {
+    const {getByText} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        selectedValue="b"
+        visible
+      />
+    );
+    expect(getByText("Option A")).toBeTruthy();
+    expect(getByText("Option B")).toBeTruthy();
+    expect(getByText("Option C")).toBeTruthy();
+  });
+
+  it("invokes onSelect with value and index when an option is pressed", () => {
+    const onSelect = mock(() => {});
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={onSelect}
+        options={options}
+        visible
+      />
+    );
+    fireEvent.press(getByTestId("web_dropdown_option_b"));
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect.mock.calls[0]).toEqual(["b", 1]);
+  });
+
+  it("invokes onClose when the backdrop is pressed", () => {
+    const onClose = mock(() => {});
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={onClose}
+        onSelect={() => {}}
+        options={options}
+        visible
+      />
+    );
+    fireEvent.press(getByTestId("web_dropdown_backdrop"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("anchors the menu below the trigger using the provided anchor", () => {
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        visible
+      />
+    );
+    const menu = getByTestId("web_dropdown_menu");
+    const style = Array.isArray(menu.props.style)
+      ? Object.assign({}, ...menu.props.style)
+      : menu.props.style;
+    expect(style.left).toBe(anchor.x);
+    expect(style.top).toBe(anchor.y + anchor.height + 4);
+    expect(style.width).toBe(anchor.width);
+  });
+
+  it("uses the custom testID prefix when provided", () => {
+    const {getByTestId, queryByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        testIDPrefix="badge_menu"
+        visible
+      />
+    );
+    expect(getByTestId("badge_menu_menu")).toBeTruthy();
+    expect(getByTestId("badge_menu_backdrop")).toBeTruthy();
+    expect(getByTestId("badge_menu_option_a")).toBeTruthy();
+    expect(queryByTestId("web_dropdown_menu")).toBeNull();
+  });
+
+  it("highlights the option matched by selectedIndex regardless of duplicated values", () => {
+    const dupOptions = [
+      {label: "Placeholder", value: ""},
+      {label: "Blank option", value: ""},
+      {label: "Real", value: "real"},
+    ];
+    const {getByText} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={dupOptions}
+        selectedIndex={1}
+        visible
+      />
+    );
+    expect(getByText("Blank option").props.style.fontWeight).toBe("600");
+    expect(getByText("Placeholder").props.style.fontWeight).toBe("400");
+    expect(getByText("Real").props.style.fontWeight).toBe("400");
+  });
+});
+
+describe("useWebDropdownAnchor", () => {
+  it("exposes a default zero-sized anchor before measuring", () => {
+    const {result} = renderHook(() => useWebDropdownAnchor());
+    expect(result.current.anchor).toEqual({height: 0, width: 0, x: 0, y: 0});
+    expect(result.current.triggerRef.current).toBeNull();
+  });
+
+  it("invokes the callback synchronously with the existing anchor when the ref is empty", () => {
+    const {result} = renderHook(() => useWebDropdownAnchor());
+    const onMeasured = mock(() => {});
+    act(() => {
+      result.current.measure(onMeasured);
+    });
+    expect(onMeasured).toHaveBeenCalledTimes(1);
+    expect(onMeasured.mock.calls[0][0]).toEqual({height: 0, width: 0, x: 0, y: 0});
+  });
+
+  it("measures the trigger and updates anchor state when the ref has measureInWindow", () => {
+    const {result} = renderHook(() => useWebDropdownAnchor());
+    // Simulate a mounted native View by assigning a measureInWindow shim to the
+    // ref. The hook does not care whether the node is a real View instance.
+    const measureInWindow = mock((cb: (x: number, y: number, w: number, h: number) => void) => {
+      cb(10, 20, 100, 40);
+    });
+    (result.current.triggerRef as {current: unknown}).current = {measureInWindow};
+    const onMeasured = mock(() => {});
+    act(() => {
+      result.current.measure(onMeasured);
+    });
+    expect(measureInWindow).toHaveBeenCalledTimes(1);
+    expect(onMeasured).toHaveBeenCalledTimes(1);
+    expect(onMeasured.mock.calls[0][0]).toEqual({height: 40, width: 100, x: 10, y: 20});
+    expect(result.current.anchor).toEqual({height: 40, width: 100, x: 10, y: 20});
+  });
+});

package/src/WebDropdownMenu.tsx

@@ -0,0 +1,183 @@
+import {type ReactElement, useRef, useState} from "react";
+import {
+  type DimensionValue,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  type TextStyle,
+  View,
+} from "react-native";
+
+import {useTheme} from "./Theme";
+
+export interface WebDropdownMenuOption {
+  key?: string | number;
+  label: string;
+  value: string;
+  color?: string;
+}
+
+export interface WebDropdownAnchor {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface WebDropdownMenuProps {
+  /** Controls visibility of the popup. */
+  visible: boolean;
+  /** Position of the trigger element so the menu can be anchored beneath it. */
+  anchor: WebDropdownAnchor;
+  /** Options to render in the list. */
+  options: WebDropdownMenuOption[];
+  /** Currently selected value (used to highlight the matching option). */
+  selectedValue?: string;
+  /**
+   * Optional index of the currently selected option. When provided, takes
+   * precedence over `selectedValue` — useful when option values aren't
+   * unique (e.g. a placeholder with an empty value sharing the same string
+   * representation as another option).
+   */
+  selectedIndex?: number;
+  /** Called when an option is chosen. */
+  onSelect: (value: string, index: number) => void;
+  /** Called when the backdrop is pressed or Escape is hit. */
+  onClose: () => void;
+  /** Optional fixed width for the menu. Defaults to the trigger width. */
+  width?: DimensionValue;
+  /** Optional minimum width for the menu. */
+  minWidth?: DimensionValue;
+  /** Additional style applied to each option's label. */
+  optionTextStyle?: TextStyle;
+  /** Prefix for the testIDs on the menu / backdrop / option nodes. */
+  testIDPrefix?: string;
+}
+
+interface PressableWebState {
+  pressed: boolean;
+  hovered?: boolean;
+  focused?: boolean;
+}
+
+/**
+ * Shared web-only popup used by `RNPickerSelect` and `SelectBadge` so every
+ * browser renders the same styled dropdown instead of falling back to the
+ * platform-native `<select>` UI. Must be anchored to a trigger element via
+ * `useWebDropdownAnchor` (or an equivalent measurement).
+ */
+export const WebDropdownMenu = ({
+  visible,
+  anchor,
+  options,
+  selectedValue,
+  selectedIndex,
+  onSelect,
+  onClose,
+  width,
+  minWidth,
+  optionTextStyle,
+  testIDPrefix = "web_dropdown",
+}: WebDropdownMenuProps): ReactElement => {
+  const {theme} = useTheme();
+
+  return (
+    <Modal
+      animationType="none"
+      onRequestClose={onClose}
+      testID={`${testIDPrefix}_modal`}
+      transparent
+      visible={visible}
+    >
+      <Pressable
+        aria-role="button"
+        onPress={onClose}
+        style={{flex: 1}}
+        testID={`${testIDPrefix}_backdrop`}
+      />
+      <View
+        style={{
+          backgroundColor: theme.surface.base,
+          borderColor: theme.border.dark,
+          borderRadius: 4,
+          borderWidth: 1,
+          left: anchor.x,
+          maxHeight: 300,
+          minWidth,
+          overflow: "hidden",
+          position: "absolute",
+          shadowColor: "#000",
+          shadowOffset: {height: 2, width: 0},
+          shadowOpacity: 0.15,
+          shadowRadius: 8,
+          top: anchor.y + anchor.height + 4,
+          width: width ?? anchor.width,
+        }}
+        testID={`${testIDPrefix}_menu`}
+      >
+        <ScrollView>
+          {options.map((item, idx) => {
+            const isSelected =
+              selectedIndex !== undefined ? idx === selectedIndex : item.value === selectedValue;
+            return (
+              <Pressable
+                aria-role="button"
+                key={item.key ?? idx}
+                onPress={() => onSelect(item.value, idx)}
+                style={(state: PressableWebState) => ({
+                  backgroundColor:
+                    isSelected || state.hovered || state.pressed
+                      ? theme.surface.neutralLight
+                      : theme.surface.base,
+                  paddingHorizontal: 12,
+                  paddingVertical: 10,
+                })}
+                testID={`${testIDPrefix}_option_${item.value}`}
+              >
+                <Text
+                  style={{
+                    color: item.color ?? theme.text.primary,
+                    fontWeight: isSelected ? "600" : "400",
+                    ...optionTextStyle,
+                  }}
+                >
+                  {item.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+};
+
+/**
+ * Hook that wires up a `View` ref + anchor state for use with
+ * `WebDropdownMenu`. Measure the trigger via `measure()` before opening so
+ * the menu lines up beneath it across browsers.
+ */
+export const useWebDropdownAnchor = (): {
+  triggerRef: React.RefObject<View | null>;
+  anchor: WebDropdownAnchor;
+  measure: (onMeasured: (anchor: WebDropdownAnchor) => void) => void;
+} => {
+  const triggerRef = useRef<View>(null);
+  const [anchor, setAnchor] = useState<WebDropdownAnchor>({height: 0, width: 0, x: 0, y: 0});
+
+  const measure = (onMeasured: (next: WebDropdownAnchor) => void): void => {
+    const node = triggerRef.current;
+    if (node && typeof node.measureInWindow === "function") {
+      node.measureInWindow((x, y, w, h) => {
+        const next = {height: h, width: w, x, y};
+        setAnchor(next);
+        onMeasured(next);
+      });
+      return;
+    }
+    onMeasured(anchor);
+  };
+
+  return {anchor, measure, triggerRef};
+};

package/src/__snapshots__/SelectBadge.test.tsx.snap

@@ -254,6 +254,9 @@ exports[`SelectBadge renders correctly with default props 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -518,6 +521,9 @@ exports[`SelectBadge renders with info status (default) 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -782,6 +788,9 @@ exports[`SelectBadge renders with success status 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -1046,6 +1055,9 @@ exports[`SelectBadge renders with warning status 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -1310,6 +1322,9 @@ exports[`SelectBadge renders with error status 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -1574,6 +1589,9 @@ exports[`SelectBadge renders with neutral status 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -1838,6 +1856,9 @@ exports[`SelectBadge renders with secondary style 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -2102,6 +2123,9 @@ exports[`SelectBadge renders with custom colors 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 1,
@@ -2366,6 +2390,9 @@ exports[`SelectBadge renders disabled state 1`] = `
     },
   ],
   "props": {
+    "ref": {
+      "current": null,
+    },
     "style": {
       "alignItems": "flex-start",
       "opacity": 0.5,

package/src/useConsentForms.test.ts

@@ -1,32 +1,53 @@
 import {describe, expect, it, mock} from "bun:test";
 import {renderHook} from "@testing-library/react-native";
 
+import type {ConsentFormPublic} from "./useConsentForms";
 import {detectLocale, useConsentForms} from "./useConsentForms";
 
+type ConsentFormsApi = Parameters<typeof useConsentForms>[0];
+
+interface GlobalThisWithNavigator {
+  navigator: {language: string} | undefined;
+}
+
+interface MockQueryDef {
+  onQueryStarted?: (
+    _arg: unknown,
+    helpers: {queryFulfilled: Promise<{data: ConsentFormPublic[]}> | Promise<never>}
+  ) => Promise<void>;
+  query: () => string;
+}
+
+interface MockInjectOpts {
+  endpoints: (build: {query: (def: MockQueryDef) => string}) => Record<string, unknown>;
+}
+
 mock.module("expo-localization", () => ({
   getLocales: () => [{languageTag: "es-ES"}],
 }));
 
 describe("detectLocale", () => {
   it("returns locale from expo-localization in native test env", () => {
-    const originalNavigator = (globalThis as any).navigator;
-    (globalThis as any).navigator = undefined;
+    const g = globalThis as unknown as GlobalThisWithNavigator;
+    const originalNavigator = g.navigator;
+    g.navigator = undefined;
     const locale = detectLocale();
-    (globalThis as any).navigator = originalNavigator;
+    g.navigator = originalNavigator;
     expect(typeof locale).toBe("string");
     expect(locale.length).toBeGreaterThan(0);
   });
 
   it("falls back to en when expo-localization throws and no navigator", () => {
-    const originalNavigator = (globalThis as any).navigator;
-    (globalThis as any).navigator = undefined;
+    const g = globalThis as unknown as GlobalThisWithNavigator;
+    const originalNavigator = g.navigator;
+    g.navigator = undefined;
     mock.module("expo-localization", () => ({
       getLocales: () => {
         throw new Error("not available");
       },
     }));
     const locale = detectLocale();
-    (globalThis as any).navigator = originalNavigator;
+    g.navigator = originalNavigator;
     // Reset mock
     mock.module("expo-localization", () => ({
       getLocales: () => [{languageTag: "es-ES"}],
@@ -35,10 +56,11 @@ describe("detectLocale", () => {
   });
 
   it("returns navigator.language when available", () => {
-    const originalNavigator = (globalThis as any).navigator;
-    (globalThis as any).navigator = {language: "fr-FR"};
+    const g = globalThis as unknown as GlobalThisWithNavigator;
+    const originalNavigator = g.navigator;
+    g.navigator = {language: "fr-FR"};
     const locale = detectLocale();
-    (globalThis as any).navigator = originalNavigator;
+    g.navigator = originalNavigator;
     expect(locale).toBe("fr-FR");
   });
 });
@@ -54,10 +76,10 @@ describe("useConsentForms", () => {
     }));
     const api = {
       enhanceEndpoints: mock(() => ({
-        injectEndpoints: mock((opts: any) => {
+        injectEndpoints: mock((opts: MockInjectOpts) => {
           // Call endpoint builder to exercise provides/onQueryStarted
           const build = {
-            query: mock((def: any) => {
+            query: mock((def: MockQueryDef) => {
               // Call onQueryStarted with a successful result
               if (def.onQueryStarted) {
                 void def.onQueryStarted(undefined, {
@@ -78,21 +100,21 @@ describe("useConsentForms", () => {
   };
 
   it("returns an array of forms when response is an array", () => {
-    const {api} = buildApi({data: [{id: "1", title: "Form 1"} as any]});
-    const {result} = renderHook(() => useConsentForms(api as any));
+    const {api} = buildApi({data: [{id: "1", title: "Form 1"} as unknown as ConsentFormPublic]});
+    const {result} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi));
     expect(result.current.forms).toBeDefined();
     expect(Array.isArray(result.current.forms)).toBe(true);
   });
 
   it("unwraps .data property when response is object shape", () => {
-    const {api} = buildApi({data: {data: [{id: "2"} as any]}});
-    const {result} = renderHook(() => useConsentForms(api as any, "/api"));
+    const {api} = buildApi({data: {data: [{id: "2"} as unknown as ConsentFormPublic]}});
+    const {result} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi, "/api"));
     expect(Array.isArray(result.current.forms)).toBe(true);
   });
 
   it("returns empty array when no data is present", () => {
     const {api} = buildApi({data: undefined, isLoading: true});
-    const {result} = renderHook(() => useConsentForms(api as any));
+    const {result} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi));
     expect(result.current.forms).toEqual([]);
     expect(result.current.isLoading).toBe(true);
   });
@@ -101,9 +123,9 @@ describe("useConsentForms", () => {
     const refetch = mock(() => {});
     const api = {
       enhanceEndpoints: mock(() => ({
-        injectEndpoints: mock((opts: any) => {
+        injectEndpoints: mock((opts: MockInjectOpts) => {
           const build = {
-            query: mock((def: any) => {
+            query: mock((def: MockQueryDef) => {
               if (def.onQueryStarted) {
                 void def.onQueryStarted(undefined, {
                   queryFulfilled: Promise.reject(new Error("failed")),
@@ -124,7 +146,7 @@ describe("useConsentForms", () => {
         }),
       })),
     };
-    const {result} = renderHook(() => useConsentForms(api as any));
+    const {result} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi));
     expect(result.current.error).toBe("error");
   });
 });

package/src/useSubmitConsent.test.ts

@@ -1,8 +1,19 @@
 import {describe, expect, it, mock} from "bun:test";
 import {renderHook} from "@testing-library/react-native";
 
+import type {SubmitConsentBody} from "./useSubmitConsent";
 import {useSubmitConsent} from "./useSubmitConsent";
 
+type SubmitConsentApi = Parameters<typeof useSubmitConsent>[0];
+
+interface MockMutationDef {
+  query: (body: SubmitConsentBody) => {method: string; url: string};
+}
+
+interface MockInjectOpts {
+  endpoints: (build: {mutation: (def: MockMutationDef) => string}) => Record<string, unknown>;
+}
+
 describe("useSubmitConsent", () => {
   const buildApi = () => {
     const unwrap = mock(async () => ({success: true}));
@@ -13,9 +24,9 @@ describe("useSubmitConsent", () => {
     ]);
     const api = {
       enhanceEndpoints: mock(() => ({
-        injectEndpoints: mock((opts: any) => {
+        injectEndpoints: mock((opts: MockInjectOpts) => {
           const build = {
-            mutation: mock((def: any) => {
+            mutation: mock((def: MockMutationDef) => {
               // Exercise the query builder
               const result = def.query({
                 agreed: true,
@@ -37,7 +48,7 @@ describe("useSubmitConsent", () => {
 
   it("returns submit function and state", () => {
     const {api} = buildApi();
-    const {result} = renderHook(() => useSubmitConsent(api as any));
+    const {result} = renderHook(() => useSubmitConsent(api as unknown as SubmitConsentApi));
     expect(typeof result.current.submit).toBe("function");
     expect(result.current.isSubmitting).toBe(false);
     expect(result.current.error).toBeUndefined();
@@ -45,7 +56,7 @@ describe("useSubmitConsent", () => {
 
   it("calls submit mutation when submit is invoked", async () => {
     const {api, submitMutation, unwrap} = buildApi();
-    const {result} = renderHook(() => useSubmitConsent(api as any, "/api"));
+    const {result} = renderHook(() => useSubmitConsent(api as unknown as SubmitConsentApi, "/api"));
     const response = await result.current.submit({
       agreed: true,
       consentFormId: "f1",
@@ -58,7 +69,7 @@ describe("useSubmitConsent", () => {
 
   it("uses empty baseUrl when none provided", () => {
     const {api} = buildApi();
-    const {result} = renderHook(() => useSubmitConsent(api as any));
+    const {result} = renderHook(() => useSubmitConsent(api as unknown as SubmitConsentApi));
     expect(result.current.submit).toBeDefined();
   });
 });