@terreno/ui 0.11.1 → 0.11.3

package/src/Common.ts

@@ -1,7 +1,14 @@
 import type {CountryCode} from "libphonenumber-js";
 import type React from "react";
 import type {ReactElement, ReactNode} from "react";
-import type {ListRenderItemInfo, StyleProp, TextStyle, ViewStyle} from "react-native";
+import type {
+  ImageStyle,
+  ListRenderItemInfo,
+  StyleProp,
+  TextInput,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
 import type {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 import type {Styles} from "react-native-google-places-autocomplete";
 import type {SvgProps} from "react-native-svg";
@@ -456,6 +463,7 @@ export interface BoxPropsBase {
   lgColumn?: UnsignedUpTo12;
   dangerouslySetInlineStyle?: {
     __style: {
+      // noExplicitAny: escape hatch for arbitrary inline style values
       [key: string]: any;
     };
   };
@@ -528,7 +536,7 @@ export interface BoxPropsBase {
 
   onClick?: () => void | Promise<void>;
   className?: string;
-  style?: any;
+  style?: StyleProp<ViewStyle>;
   onHoverStart?: () => void | Promise<void>;
   onHoverEnd?: () => void | Promise<void>;
   scroll?: boolean;
@@ -554,7 +562,7 @@ export type BoxProps =
 export type BoxColor = SurfaceColor | "transparent";
 
 export interface ErrorBoundaryProps {
-  onError?: (error: Error, stack: any) => void;
+  onError?: (error: Error, stack: string) => void;
   children?: ReactNode;
 }
 
@@ -652,7 +660,7 @@ export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTe
   multiline?: boolean;
   rows?: number;
 
-  inputRef?: any;
+  inputRef?: (ref: TextInput | null) => void;
   trimOnBlur?: boolean;
 
   aiSuggestion?: AiSuggestionProps;
@@ -782,7 +790,7 @@ export interface ImageProps {
   size?: string;
   srcSet?: string;
   fullWidth?: boolean;
-  style?: any;
+  style?: ImageStyle;
 }
 
 export interface BackButtonInterface {
@@ -850,14 +858,17 @@ export interface SplitPageProps {
   loading?: boolean;
   color?: SurfaceColor;
   keyboardOffset?: number;
+  // noExplicitAny: ListRenderItemInfo generic type depends on the consumer's data shape
   renderListViewItem: (itemInfo: ListRenderItemInfo<any>) => ReactElement | null;
   renderListViewHeader?: () => ReactElement | null;
   renderContent?: (index?: number) => ReactElement | ReactElement[] | null;
+  // noExplicitAny: list data type varies by consumer's data model
   listViewData: any[];
-  listViewExtraData?: any;
+  listViewExtraData?: unknown;
   listViewWidth?: number;
   listViewMaxWidth?: number;
   renderChild?: () => ReactChild;
+  // noExplicitAny: callback value type varies by consumer's data model
   onSelectionChange?: (value?: any) => void | Promise<void>;
 }
 
@@ -896,7 +907,7 @@ export interface AddressInterface {
 export interface TransformValueOptions {
   func?: (value: string) => string;
   options?: {
-    [key: string]: any;
+    [key: string]: unknown;
   };
 }
 
@@ -1745,6 +1756,7 @@ export interface HeightActionSheetProps {
 
 export interface HyperlinkProps {
   linkDefault?: boolean;
+  // noExplicitAny: type comes from external linkify-it library which lacks an exported type
   linkify?: any;
   linkStyle?: StyleProp<any>;
   linkText?: string | ((url: string) => string);
@@ -1901,10 +1913,12 @@ export interface ModalProps {
   /**
    * The function to call when the primary button is clicked.
    */
+  // noExplicitAny: callback value type varies by consumer context
   primaryButtonOnClick?: (value?: any) => void | Promise<void>;
   /**
    * The function to call when the secondary button is clicked.
    */
+  // noExplicitAny: callback value type varies by consumer context
   secondaryButtonOnClick?: (value?: any) => void | Promise<void>;
 }
 
@@ -1917,6 +1931,7 @@ export interface NumberPickerActionSheetProps {
 }
 
 export interface PageProps {
+  // noExplicitAny: React Navigation type varies by navigation stack configuration
   navigation?: any;
   scroll?: boolean;
   loading?: boolean;
@@ -1930,11 +1945,11 @@ export interface PageProps {
   color?: SurfaceColor;
   maxWidth?: number | string;
   keyboardOffset?: number;
-  footer?: any;
+  footer?: ReactNode;
   rightButton?: string;
   rightButtonOnClick?: () => void;
-  children?: any;
-  onError?: (error: Error, stack: any) => void;
+  children?: ReactChildren;
+  onError?: (error: Error, stack: string) => void;
 }
 
 export interface ProgressBarProps {
@@ -1957,7 +1972,7 @@ export interface RadioFieldProps {
 export interface SignatureFieldProps {
   disabled?: boolean; // default "default"
   value?: string;
-  onChange: (value: any) => void;
+  onChange: (value: string) => void;
   title?: string; // default "Signature"
   onStart?: () => void;
   onEnd?: () => void;
@@ -2356,16 +2371,19 @@ export type TapToEditProps =
 
 export interface BaseTapToEditProps extends Omit<FieldProps, "onChange" | "value"> {
   title: string;
+  // noExplicitAny: value type varies across TapToEdit field types (text, number, date, etc.)
   value: any;
 
   /**
    * Not required if not editable.
    */
+  // noExplicitAny: value type varies across TapToEdit field types
   setValue?: (value: any) => void;
 
   /**
    * Not required if not editable.
    */
+  // noExplicitAny: value type varies across TapToEdit field types
   onSave?: (value: any) => void | Promise<void>;
 
   /**
@@ -2378,6 +2396,7 @@ export interface BaseTapToEditProps extends Omit<FieldProps, "onChange" | "value
    * Enable edit mode from outside the component.
    */
   isEditing?: boolean;
+  // noExplicitAny: input value type varies across TapToEdit field types
   transform?: (value: any) => string;
   /**
    * Show a confirmation modal before saving the value.
@@ -2433,7 +2452,7 @@ export interface APIError {
     source?: string;
     pointer?: string;
     parameter?: string;
-    meta?: {[id: string]: any};
+    meta?: {[id: string]: unknown};
   };
 }
 
@@ -2466,6 +2485,7 @@ export interface ModelFields {
 
 export interface OpenAPISpec {
   paths: {
+    // noExplicitAny: OpenAPI path items are deeply accessed with chained property lookups
     [key: string]: any;
   };
 }
@@ -2498,7 +2518,8 @@ export interface ModelAdminFieldConfig {
 
 // The props for a custom column component for ModelAdmin.
 export interface ModelAdminCustomComponentProps extends Omit<FieldProps, "name"> {
-  doc: any; // The rest of the document.
+  // noExplicitAny: document shape varies by model used with ModelAdmin
+  doc: any;
   fieldKey: string; // Dot notation representation of the field.
   // user: User;
   editing: boolean; // Allow for inline editing of the field.

package/src/Modal.test.tsx

@@ -1,6 +1,7 @@
-import {describe, expect, it, mock} from "bun:test";
+import {afterEach, describe, expect, it, mock} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
 
+import {isMobileDevice} from "./MediaQuery";
 import {Modal} from "./Modal";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
@@ -355,3 +356,47 @@ describe("Modal", () => {
     expect(stopPropagation).not.toHaveBeenCalled();
   });
 });
+
+describe("Modal mobile branch", () => {
+  afterEach(() => {
+    (isMobileDevice as ReturnType<typeof mock>).mockImplementation(() => false);
+  });
+
+  it("renders ActionSheet when isMobileDevice is true", () => {
+    (isMobileDevice as ReturnType<typeof mock>).mockImplementation(() => true);
+    const {toJSON} = renderWithTheme(
+      <Modal onDismiss={() => {}} title="Mobile Modal" visible>
+        <Text>Mobile Content</Text>
+      </Modal>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders ActionSheet with title and buttons on mobile", () => {
+    (isMobileDevice as ReturnType<typeof mock>).mockImplementation(() => true);
+    const {toJSON} = renderWithTheme(
+      <Modal
+        onDismiss={() => {}}
+        primaryButtonOnClick={() => {}}
+        primaryButtonText="Save"
+        secondaryButtonOnClick={() => {}}
+        secondaryButtonText="Cancel"
+        title="Mobile Actions"
+        visible
+      >
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders ActionSheet with persistOnBackgroundClick enabled", () => {
+    (isMobileDevice as ReturnType<typeof mock>).mockImplementation(() => true);
+    const {toJSON} = renderWithTheme(
+      <Modal onDismiss={() => {}} persistOnBackgroundClick title="Persistent Mobile" visible>
+        <Text>Content</Text>
+      </Modal>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+});

package/src/PickerSelect.tsx

@@ -40,6 +40,7 @@ import {
 
 import {Icon} from "./Icon";
 import {useTheme} from "./Theme";
+import {useWebDropdownAnchor, WebDropdownMenu, type WebDropdownMenuOption} from "./WebDropdownMenu";
 
 export const defaultStyles = StyleSheet.create({
   chevron: {
@@ -129,6 +130,15 @@ export function RNPickerSelect({
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
   const {theme} = useTheme();
 
+  // Web-only: anchor the custom dropdown menu to the trigger element so that
+  // Safari/Firefox/Chrome all render the same styled menu instead of the
+  // browser's native <select> UI.
+  const {
+    anchor: webAnchor,
+    measure: measureWebAnchor,
+    triggerRef: webTriggerRef,
+  } = useWebDropdownAnchor();
+
   // On web, blur the active element before the picker modal opens to prevent
   // "aria-hidden on a focused element" warnings from React Native Web.
   useEffect(() => {
@@ -520,10 +530,61 @@ export function RNPickerSelect({
     );
   };
 
-  // TODO: Create custom React component for web in order to apply library style rules
+  // Custom web dropdown. Rendering the native <Picker> on web delegates
+  // styling to each browser (Safari in particular looks very different from
+  // Chrome/Firefox). Instead, we render a styled trigger + popup menu so the
+  // dropdown looks identical across browsers and matches the Terreno design.
+  const openWebMenu = (): void => {
+    if (disabled) {
+      return;
+    }
+    measureWebAnchor(() => {
+      setShowPicker(true);
+      if (onOpen) {
+        onOpen();
+      }
+    });
+  };
+
+  const closeWebMenu = (): void => {
+    setShowPicker(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  // Build the dropdown option list AND track each option's original index in
+  // `options` so `onValueChange` receives the same index that the native
+  // Picker would have reported (needed when a placeholder is present).
+  const {menuOptions: webMenuOptions, originalIndexes: webMenuOptionIndexes} = useMemo<{
+    menuOptions: WebDropdownMenuOption[];
+    originalIndexes: number[];
+  }>(() => {
+    const menuOptions: WebDropdownMenuOption[] = [];
+    const originalIndexes: number[] = [];
+    for (let i = 0; i < options.length; i++) {
+      const item = options[i];
+      if (!item || typeof item !== "object" || typeof item.label !== "string") {
+        continue;
+      }
+      menuOptions.push({
+        color: item.color,
+        key: item.key,
+        label: item.label,
+        value: String(item.value ?? ""),
+      });
+      originalIndexes.push(i);
+    }
+    return {menuOptions, originalIndexes};
+  }, [options]);
+
   const renderWeb = () => {
+    const displayLabel = selectedItem?.inputLabel ?? selectedItem?.label ?? "";
+    const selectedOriginalIdx = getSelectedItem(itemKey, value).idx;
+    const webSelectedIndex = webMenuOptionIndexes.indexOf(selectedOriginalIdx);
     return (
       <View
+        ref={webTriggerRef}
         style={[
           defaultStyles.viewContainer,
           {
@@ -535,31 +596,55 @@ export function RNPickerSelect({
           },
         ]}
       >
-        <Picker
-          enabled={!disabled}
-          onValueChange={onValueChangeEvent}
-          selectedValue={selectedItem?.value}
-          style={[
-            {
-              backgroundColor: theme.surface.base,
-              borderColor: "black",
-              borderRadius: 4,
-              borderWidth: 0,
-              height: "100%",
-              paddingHorizontal: 8,
-              paddingVertical: 8,
-              width: "100%",
-            },
-            disabled && {
-              backgroundColor: theme.surface.neutralLight,
-              color: theme.text.secondaryLight,
-              opacity: 1,
-            },
-          ]}
+        <Pressable
+          aria-role="button"
+          disabled={disabled}
+          onPress={openWebMenu}
+          style={{
+            alignItems: "center",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            minHeight: 40,
+            paddingHorizontal: 8,
+            width: "100%",
+          }}
           testID="web_picker"
+          {...touchableWrapperProps}
         >
-          {renderPickerItems()}
-        </Picker>
+          <Text
+            numberOfLines={1}
+            style={{
+              color: disabled ? theme.text.secondaryLight : theme.text.primary,
+              flex: 1,
+              paddingRight: 8,
+            }}
+            testID="text_input"
+          >
+            {displayLabel}
+          </Text>
+          <Icon
+            color={disabled ? "secondaryLight" : "primary"}
+            iconName={showPicker ? "angle-up" : "angle-down"}
+            size="sm"
+          />
+        </Pressable>
+        <WebDropdownMenu
+          anchor={webAnchor}
+          onClose={closeWebMenu}
+          onSelect={(_val, idx) => {
+            const originalIndex = webMenuOptionIndexes[idx] ?? idx;
+            // Pass the original (non-stringified) value through so lodash
+            // `isEqual` matching in `getSelectedItem` works for number /
+            // object values.
+            const originalValue = options[originalIndex]?.value;
+            onValueChangeEvent(originalValue, originalIndex);
+            closeWebMenu();
+          }}
+          options={webMenuOptions}
+          selectedIndex={webSelectedIndex >= 0 ? webSelectedIndex : undefined}
+          testIDPrefix="web_dropdown"
+          visible={showPicker}
+        />
       </View>
     );
   };

package/src/SelectBadge.tsx

@@ -6,6 +6,7 @@ import {Modal, Platform, Text, TouchableOpacity, View} from "react-native";
 import type {FieldOption, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
 import {Icon} from "./Icon";
 import {useTheme} from "./Theme";
+import {useWebDropdownAnchor, WebDropdownMenu, type WebDropdownMenuOption} from "./WebDropdownMenu";
 
 export const SelectBadge = ({
   value,
@@ -24,6 +25,15 @@ export const SelectBadge = ({
   // Assures the badge display value persists when user scrolls through options
   const [iosDisplayValue, setIosDisplayValue] = useState<string | undefined>(value);
 
+  // Web-only: anchor the custom dropdown menu to the trigger element so that
+  // Safari/Firefox/Chrome all render the same styled menu instead of the
+  // browser's native <select> UI.
+  const {
+    anchor: webAnchor,
+    measure: measureWebAnchor,
+    triggerRef: webTriggerRef,
+  } = useWebDropdownAnchor();
+
   const secondaryBorderColors = {
     custom: "#AAAAAA",
     error: "#F39E9E",
@@ -190,14 +200,13 @@ export const SelectBadge = ({
         selectedValue={findSelectedItem(value)?.value ?? undefined}
         style={[
           {
+            backgroundColor: "transparent",
             color: "transparent",
             height: "100%",
             opacity: 0,
             position: "absolute",
             width: "100%",
           },
-          // Android headless picker: transparent overlay to capture touches without visible UI.
-          Platform.OS !== "web" && {backgroundColor: "transparent"},
         ]}
       >
         {renderPickerItems()}
@@ -205,14 +214,59 @@ export const SelectBadge = ({
     );
   }, [disabled, findSelectedItem, value, handleOnChange, renderPickerItems]);
 
+  // Custom web dropdown. Rendering the native <Picker> on web delegates
+  // styling to each browser (Safari in particular looks very different from
+  // Chrome/Firefox). Instead, we render a styled popup menu anchored to the
+  // badge so the dropdown looks identical across browsers.
+  const webMenuOptions = useMemo<WebDropdownMenuOption[]>(
+    () => options.map((item) => ({key: item.key, label: item.label, value: item.value})),
+    [options]
+  );
+
+  const renderWebPicker = useCallback(() => {
+    return (
+      <WebDropdownMenu
+        anchor={webAnchor}
+        minWidth={160}
+        onClose={() => setShowPicker(false)}
+        onSelect={(val) => handleOnChange(val)}
+        options={webMenuOptions}
+        optionTextStyle={{fontFamily: "text", fontSize: 12}}
+        selectedValue={value}
+        testIDPrefix="web_badge"
+        visible={showPicker}
+        width={undefined}
+      />
+    );
+  }, [showPicker, webAnchor, webMenuOptions, value, handleOnChange]);
+
+  const openWebMenu = (): void => {
+    if (disabled) {
+      return;
+    }
+    measureWebAnchor(() => {
+      setShowPicker(true);
+    });
+  };
+
   return (
-    <View style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
+    <View ref={webTriggerRef} style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
       <TouchableOpacity
         accessibilityHint="Opens the options picker"
         accessibilityLabel="Open select badge options"
         aria-role="button"
         disabled={disabled}
-        onPress={() => setShowPicker(!showPicker)}
+        onPress={() => {
+          if (Platform.OS === "web") {
+            if (showPicker) {
+              setShowPicker(false);
+            } else {
+              openWebMenu();
+            }
+            return;
+          }
+          setShowPicker(!showPicker);
+        }}
       >
         <View
           style={{
@@ -274,7 +328,11 @@ export const SelectBadge = ({
           </View>
         </View>
       </TouchableOpacity>
-      {Platform.OS === "ios" ? renderIosPicker() : renderPicker()}
+      {Platform.OS === "ios"
+        ? renderIosPicker()
+        : Platform.OS === "web"
+          ? renderWebPicker()
+          : renderPicker()}
     </View>
   );
 };

package/src/SelectBadge.web.test.tsx

@@ -0,0 +1,75 @@
+import {afterAll, beforeAll, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import {Platform} from "react-native";
+
+import {SelectBadge} from "./SelectBadge";
+import {renderWithTheme} from "./test-utils";
+
+// Force Platform.OS to "web" for this file so SelectBadge takes the web
+// rendering branch (custom WebDropdownMenu instead of the native iOS Picker).
+const originalOS = Platform.OS;
+beforeAll(() => {
+  Object.defineProperty(Platform, "OS", {configurable: true, value: "web"});
+});
+afterAll(() => {
+  Object.defineProperty(Platform, "OS", {configurable: true, value: originalOS});
+});
+
+describe("SelectBadge (web)", () => {
+  const options = [
+    {label: "Option A", value: "a"},
+    {label: "Option B", value: "b"},
+    {label: "Option C", value: "c"},
+  ];
+
+  it("renders the styled web dropdown menu (not the native picker) when opened", () => {
+    const {getByLabelText, getByTestId} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={options} value="a" />
+    );
+    expect(getByTestId("web_badge_modal").props.visible).toBe(false);
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+    expect(getByTestId("web_badge_modal").props.visible).toBe(true);
+    expect(getByTestId("web_badge_menu")).toBeTruthy();
+  });
+
+  it("invokes onChange with the selected value when an option is pressed", () => {
+    const handleChange = mock((_val: string) => {});
+    const {getByLabelText, getByTestId} = renderWithTheme(
+      <SelectBadge onChange={handleChange} options={options} value="a" />
+    );
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+    act(() => {
+      fireEvent.press(getByTestId("web_badge_option_b"));
+    });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith("b");
+  });
+
+  it("closes the menu when the backdrop is pressed", () => {
+    const {getByLabelText, getByTestId} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={options} value="a" />
+    );
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+    expect(getByTestId("web_badge_modal").props.visible).toBe(true);
+    act(() => {
+      fireEvent.press(getByTestId("web_badge_backdrop"));
+    });
+    expect(getByTestId("web_badge_modal").props.visible).toBe(false);
+  });
+
+  it("does not open the dropdown when disabled", () => {
+    const {getByLabelText, getByTestId} = renderWithTheme(
+      <SelectBadge disabled onChange={() => {}} options={options} value="a" />
+    );
+    act(() => {
+      fireEvent.press(getByLabelText("Open select badge options"));
+    });
+    expect(getByTestId("web_badge_modal").props.visible).toBe(false);
+  });
+});