@terreno/ui 0.12.2 → 0.13.3

package/src/PickerSelect.tsx

@@ -25,15 +25,18 @@
 
 import {Picker} from "@react-native-picker/picker";
 import isEqual from "lodash/isEqual";
-import {useCallback, useEffect, useMemo, useState} from "react";
+import {type ComponentType, type ReactNode, useCallback, useEffect, useMemo, useState} from "react";
 import {
   Keyboard,
   Modal,
+  type ModalProps,
   Platform,
   Pressable,
+  type PressableProps,
   StyleSheet,
   Text,
   TextInput,
+  type TextInputProps,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -67,14 +70,23 @@ export const defaultStyles = StyleSheet.create({
   },
 });
 
+/** A single option for the picker select component. */
+export interface PickerSelectItem {
+  label: string;
+  value: string | number | null;
+  key?: string | number;
+  color?: string;
+  inputLabel?: string;
+}
+
 export interface RNPickerSelectProps {
-  onValueChange: (value: any, index: any) => void;
-  items: any[];
-  value?: any;
-  placeholder?: any;
+  onValueChange: (value: string | number | null, index: number) => void;
+  items: PickerSelectItem[];
+  value?: string | number | null;
+  placeholder?: Partial<PickerSelectItem>;
   disabled?: boolean;
   itemKey?: string | number;
-  children?: any;
+  children?: ReactNode;
   onOpen?: () => void;
   useNativeAndroidPickerStyle?: boolean;
   fixAndroidTouchableBug?: boolean;
@@ -87,18 +99,18 @@ export interface RNPickerSelectProps {
   onClose?: () => void;
 
   // Modal props (iOS only)
-  modalProps?: any;
+  modalProps?: Partial<ModalProps>;
 
   // TextInput props
-  textInputProps?: any;
+  textInputProps?: Partial<TextInputProps>;
 
   // Touchable Done props (iOS only)
-  touchableDoneProps?: any;
+  touchableDoneProps?: Partial<PressableProps>;
 
   // Touchable wrapper props
-  touchableWrapperProps?: any;
+  touchableWrapperProps?: Partial<PressableProps>;
 
-  InputAccessoryView?: any;
+  InputAccessoryView?: ComponentType<{testID?: string}>;
 }
 
 export function RNPickerSelect({
@@ -125,7 +137,9 @@ export function RNPickerSelect({
   InputAccessoryView,
 }: RNPickerSelectProps) {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [animationType, setAnimationType] = useState(undefined);
+  const [animationType, setAnimationType] = useState<"none" | "slide" | "fade" | undefined>(
+    undefined
+  );
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
   const {theme} = useTheme();
@@ -159,12 +173,12 @@ export function RNPickerSelect({
   }, [items, placeholder]);
 
   const getSelectedItem = useCallback(
-    (key: any, val: any) => {
-      let idx = options.findIndex((item: any) => {
-        if (item.key && key) {
+    (key: string | number | undefined, val: string | number | null | undefined) => {
+      let idx = options.findIndex((item) => {
+        if (item?.key && key) {
           return isEqual(item.key, key);
         }
-        return isEqual(item.value, val);
+        return isEqual(item?.value, val);
       });
       if (idx === -1) {
         idx = 0;
@@ -177,7 +191,7 @@ export function RNPickerSelect({
     [options]
   );
 
-  const [selectedItem, setSelectedItem] = useState<any>(() => {
+  const [selectedItem, setSelectedItem] = useState<Partial<PickerSelectItem>>(() => {
     return getSelectedItem(itemKey, value).selectedItem;
   });
 
@@ -195,13 +209,17 @@ export function RNPickerSelect({
     togglePicker(false, onDownArrow);
   };
 
-  const onValueChangeEvent = (val: any, index: any) => {
+  const onValueChangeEvent = (val: string | number | null, index: number) => {
     const item = getSelectedItem(itemKey, val);
     onValueChange(val, index);
     setSelectedItem(item.selectedItem);
   };
 
-  const onOrientationChange = ({nativeEvent}: any) => {
+  const onOrientationChange = ({
+    nativeEvent,
+  }: {
+    nativeEvent: {orientation: "portrait" | "landscape"};
+  }) => {
     setOrientation(nativeEvent.orientation);
   };
 
@@ -215,7 +233,7 @@ export function RNPickerSelect({
     }
   };
 
-  const togglePicker = (animate = false, postToggleCallback?: any) => {
+  const togglePicker = (animate = false, postToggleCallback?: () => void) => {
     if (disabled) {
       return;
     }
@@ -237,13 +255,13 @@ export function RNPickerSelect({
   };
 
   const renderPickerItems = () => {
-    return options?.map((item: any) => {
+    return options?.map((item) => {
       return (
         <Picker.Item
-          color={item.color}
-          key={item.key || item.label}
-          label={item.label}
-          value={item.value}
+          color={item?.color}
+          key={item?.key || item?.label}
+          label={item?.label}
+          value={item?.value}
         />
       );
     });
@@ -408,7 +426,6 @@ export function RNPickerSelect({
         ]}
       >
         <Pressable
-          activeOpacity={1}
           onPress={() => {
             togglePicker(true);
           }}
@@ -467,14 +484,11 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    const Component: any = fixAndroidTouchableBug ? View : Pressable;
+    // noExplicitAny: Component is View or Pressable depending on a bug workaround flag. View
+    // ignores Pressable-specific props (onPress) at runtime. A type-safe union cannot express this.
+    const Component = (fixAndroidTouchableBug ? View : Pressable) as unknown as typeof Pressable;
     return (
-      <Component
-        activeOpacity={1}
-        onPress={onOpen}
-        testID="android_touchable_wrapper"
-        {...touchableWrapperProps}
-      >
+      <Component onPress={onOpen} testID="android_touchable_wrapper" {...touchableWrapperProps}>
         <View>
           {renderTextInputOrChildren()}
           <Picker
@@ -636,7 +650,7 @@ export function RNPickerSelect({
             // Pass the original (non-stringified) value through so lodash
             // `isEqual` matching in `getSelectedItem` works for number /
             // object values.
-            const originalValue = options[originalIndex]?.value;
+            const originalValue = options[originalIndex]?.value ?? null;
             onValueChangeEvent(originalValue, originalIndex);
             closeWebMenu();
           }}

package/src/SelectBadge.tsx

@@ -3,7 +3,7 @@ import type React from "react";
 import {useCallback, useMemo, useState} from "react";
 import {Modal, Platform, Text, TouchableOpacity, View} from "react-native";
 
-import type {FieldOption, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
+import type {FieldOption, IconColor, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
 import {Icon} from "./Icon";
 import {useTheme} from "./Theme";
 import {useWebDropdownAnchor, WebDropdownMenu, type WebDropdownMenuOption} from "./WebDropdownMenu";
@@ -98,7 +98,7 @@ export const SelectBadge = ({
   );
 
   const renderPickerItems = useCallback(() => {
-    return options?.map((item: any) => (
+    return options?.map((item: FieldOption) => (
       <Picker.Item key={item.key || item.label} label={item.label} value={item.value} />
     ));
   }, [options]);
@@ -321,7 +321,11 @@ export const SelectBadge = ({
             }}
           >
             <Icon
-              color={textColor as any}
+              // noExplicitAny: textColor is a resolved hex string from the theme, but Icon's
+              // color prop expects an IconColor key. Icon falls back to the raw string at runtime
+              // (theme.text[color] ?? color), but the type cannot be narrowed without changing
+              // Icon's type signature to accept arbitrary strings.
+              color={textColor as unknown as IconColor}
               iconName={showPicker ? "chevron-up" : "chevron-down"}
               size="sm"
             />

package/src/SelectField.tsx

@@ -26,10 +26,10 @@ export const SelectField: FC<SelectFieldProps> = ({
         disabled={disabled}
         items={options}
         onValueChange={(v) => {
-          if (v === undefined || v === "") {
+          if (v === undefined || v === null || v === "") {
             onChange("");
           } else {
-            onChange(v);
+            onChange(String(v));
           }
         }}
         placeholder={!requireValue ? clearOption : {}}

package/src/SidebarNavigation.native.tsx

@@ -5,7 +5,7 @@ import {Navigator, Slot} from "expo-router";
 // update the import path here — this is the only place in the codebase that references it.
 // eslint-disable-next-line import/no-internal-modules
 import {Screen} from "expo-router/build/views/Screen";
-import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {type FC, type ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {
   Animated,
   Dimensions,
@@ -361,7 +361,11 @@ const SidebarHeader: FC<{onOpen: () => void}> = ({onOpen}) => {
   const insets = useSafeAreaInsets();
   const {state, descriptors} = Navigator.useContext();
   const activeRoute = state.routes[state.index];
-  const {headerLeft, headerRight, title} = (descriptors[activeRoute?.key]?.options ?? {}) as any;
+  const {headerLeft, headerRight, title} = (descriptors[activeRoute?.key]?.options ?? {}) as {
+    headerLeft?: (props: object) => ReactNode;
+    headerRight?: (props: object) => ReactNode;
+    title?: string;
+  };
 
   return (
     <View

package/src/Signature.native.tsx

@@ -18,6 +18,10 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
 
   const handleClear = () => {
     ref.current?.clearSignature();
+    // `clearSignature` on the underlying canvas does not fire `onOK`, so the
+    // parent never learns the signature is gone. Push an empty value so any
+    // "signature required" gating reflects the cleared state immediately.
+    onChange("");
   };
 
   const onBegin = () => {

package/src/Signature.test.tsx

@@ -49,6 +49,16 @@ describe("Signature", () => {
     expect(clearMock).toHaveBeenCalledTimes(1);
   });
 
+  it("notifies the parent with an empty value when Clear is pressed", () => {
+    clearMock.mockClear();
+    const mockOnChange = mock(() => {});
+    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    fireEvent.press(getByText("Clear"));
+    // Without this, "signature required" gating in parents would never reset
+    // because the underlying canvas clear() does not fire onEnd/onOK.
+    expect(mockOnChange).toHaveBeenCalledWith("");
+  });
+
   it("calls onChange with the data URL when a stroke ends", () => {
     toDataURLReturn = "data:image/png;base64,abc";
     const mockOnChange = mock(() => {});

package/src/Signature.tsx

@@ -17,6 +17,10 @@ export const Signature = ({onChange}: SignatureProps): ReactElement | null => {
 
   const onClear = () => {
     ref.current?.clear();
+    // `clear()` on the underlying canvas does not fire `onEnd`, so the parent
+    // never learns the signature is gone. Push an empty value so any
+    // "signature required" gating reflects the cleared state immediately.
+    onChange("");
   };
 
   const onUpdatedSignature = () => {

package/src/Theme.tsx

@@ -172,18 +172,21 @@ const computeTheme = (
       return acc;
     }
     const value = themeConfig[key as keyof TerrenoThemeConfig] ?? {};
-    acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
-      const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
-      if (key === "font") {
-        accKey[valueKey] = primitiveKey;
-      } else {
-        if (primitives[primitiveKey] === undefined) {
-          console.error(`Primitive ${primitiveKey} not found in theme.`);
+    (acc as unknown as Record<string, unknown>)[key] = Object.keys(value).reduce(
+      (accKey, valueKey) => {
+        const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
+        if (key === "font") {
+          accKey[valueKey] = primitiveKey;
+        } else {
+          if (primitives[primitiveKey] === undefined) {
+            console.error(`Primitive ${primitiveKey} not found in theme.`);
+          }
+          accKey[valueKey] = primitives[primitiveKey];
         }
-        accKey[valueKey as keyof typeof accKey] = primitives[primitiveKey];
-      }
-      return accKey;
-    }, {} as any);
+        return accKey;
+      },
+      {} as Record<string, string | number>
+    );
     return acc;
   }, {} as TerrenoTheme);
   return {...theme, primitives};
@@ -199,7 +202,7 @@ export const ThemeContext = createContext({
 });
 
 interface ThemeProviderProps {
-  children: any;
+  children: React.ReactNode;
 }
 
 export const ThemeProvider = ({children}: ThemeProviderProps) => {
@@ -225,12 +228,12 @@ export const ThemeProvider = ({children}: ThemeProviderProps) => {
           const prevSubTheme = prev[key as keyof TerrenoThemeConfig];
 
           if (newSubTheme && typeof newSubTheme === "object") {
-            (mergedTheme as any)[key as keyof TerrenoThemeConfig] = {
+            (mergedTheme as Record<string, unknown>)[key] = {
               ...prevSubTheme,
               ...newSubTheme,
             };
           } else {
-            mergedTheme[key as keyof TerrenoThemeConfig] = newSubTheme as any;
+            (mergedTheme as Record<string, unknown>)[key] = newSubTheme;
           }
         }
       }

package/src/Tooltip.test.tsx

@@ -6,6 +6,20 @@ import {Text} from "./Text";
 import {Tooltip} from "./Tooltip";
 import {renderWithTheme} from "./test-utils";
 
+// Minimal shape of the tree returned by toJSON() that we rely on here.
+interface TestNode {
+  type: string;
+  props: {
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    onTouchStart?: (event?: {nativeEvent: object}) => void;
+    onLayout?: (event: {
+      nativeEvent: {layout: {height: number; width: number; x: number; y: number}};
+    }) => void;
+  };
+  children: null | Array<TestNode | string>;
+}
+
 // Mock react-native-portalize so Portal renders inline in tests
 mock.module("react-native-portalize", () => ({
   Host: ({children}: {children: React.ReactNode}) => <View testID="portal-host">{children}</View>,
@@ -13,10 +27,10 @@ mock.module("react-native-portalize", () => ({
 }));
 
 beforeAll(() => {
-  (global as any).requestAnimationFrame = (callback: FrameRequestCallback) => {
+  globalThis.requestAnimationFrame = (callback: FrameRequestCallback) => {
     return setTimeout(() => callback(Date.now()), 0) as unknown as number;
   };
-  (global as any).cancelAnimationFrame = (id: number) => {
+  globalThis.cancelAnimationFrame = (id: number) => {
     clearTimeout(id);
   };
 });
@@ -111,14 +125,14 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const wrapper = toJSON() as any;
+    const wrapper = toJSON();
     expect(wrapper).toBeTruthy();
     expect(queryByTestId("tooltip-container")).toBeNull();
 
-    const tree = toJSON();
+    const tree = toJSON() as TestNode | null;
     await act(async () => {
       // Trigger pointer enter on the wrapper
-      const root = (tree as any).children?.[0];
+      const root = tree?.children?.[0] as TestNode | undefined;
       if (root?.props?.onPointerEnter) {
         root.props.onPointerEnter();
       }
@@ -138,8 +152,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onTouchStart?.({nativeEvent: {}});
@@ -151,8 +165,10 @@ describe("Tooltip", () => {
     expect(queryByTestId("tooltip-container")).toBeTruthy();
 
     // Second touch should hide
-    const treeAfterShow = toJSON() as any;
-    const updatedRoot = treeAfterShow.children?.[treeAfterShow.children.length - 1];
+    const treeAfterShow = toJSON() as TestNode;
+    const updatedRoot = (treeAfterShow.children as Array<TestNode | string>)[
+      (treeAfterShow.children as Array<TestNode | string>).length - 1
+    ] as TestNode;
     await act(async () => {
       updatedRoot.props.onTouchStart?.({nativeEvent: {}});
     });
@@ -167,8 +183,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onPointerEnter?.();
@@ -179,8 +195,10 @@ describe("Tooltip", () => {
 
     expect(queryByTestId("tooltip-container")).toBeTruthy();
 
-    const treeAfter = toJSON() as any;
-    const wrapper = treeAfter.children?.[treeAfter.children.length - 1];
+    const treeAfter = toJSON() as TestNode;
+    const wrapper = (treeAfter.children as Array<TestNode | string>)[
+      (treeAfter.children as Array<TestNode | string>).length - 1
+    ] as TestNode;
     await act(async () => {
       wrapper.props.onPointerLeave?.();
     });
@@ -206,8 +224,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onPointerEnter?.();
@@ -227,8 +245,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     // Show the tooltip
     await act(async () => {
@@ -241,11 +259,12 @@ describe("Tooltip", () => {
 
     // Find any views with onLayout to simulate layout event
     const {View: ViewComp} = await import("react-native");
-    const allViews = UNSAFE_getAllByType(ViewComp as any);
+    const allViews = UNSAFE_getAllByType(ViewComp);
     for (const v of allViews) {
-      if ((v.props as any).onLayout) {
+      const props = v.props as TestNode["props"];
+      if (props.onLayout) {
         await act(async () => {
-          (v.props as any).onLayout({
+          props.onLayout?.({
             nativeEvent: {
               layout: {height: 100, width: 200, x: 0, y: 0},
             },
@@ -280,8 +299,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
     await act(async () => {
       root.props.onPointerEnter?.();
     });

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

@@ -421,7 +421,6 @@ exports[`AddressField renders correctly with default props 1`] = `
                   },
                 ],
                 "props": {
-                  "activeOpacity": 1,
                   "onPress": [Function],
                   "style": {
                     "alignItems": "center",

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

@@ -57,7 +57,6 @@ exports[`CustomSelectField renders correctly with default props 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -385,7 +384,6 @@ exports[`CustomSelectField renders with title 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -698,7 +696,6 @@ exports[`CustomSelectField renders with placeholder 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1011,7 +1008,6 @@ exports[`CustomSelectField renders with selected value 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1324,7 +1320,6 @@ exports[`CustomSelectField renders with custom value (not in options) 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1741,7 +1736,6 @@ exports[`CustomSelectField renders disabled state 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -2056,7 +2050,6 @@ exports[`CustomSelectField includes custom option in dropdown 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",

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

@@ -1224,7 +1224,6 @@ exports[`Field renders time field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -1494,7 +1493,6 @@ exports[`Field renders time field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2219,7 +2217,6 @@ exports[`Field renders datetime field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2489,7 +2486,6 @@ exports[`Field renders datetime field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2860,7 +2856,6 @@ exports[`Field renders select field 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -3737,7 +3732,6 @@ exports[`Field renders address field 1`] = `
                   },
                 ],
                 "props": {
-                  "activeOpacity": 1,
                   "onPress": [Function],
                   "style": {
                     "alignItems": "center",

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

@@ -48,7 +48,6 @@ exports[`PickerSelect renders correctly with default props 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -313,7 +312,6 @@ exports[`PickerSelect renders with selected value 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -578,7 +576,6 @@ exports[`PickerSelect renders disabled state 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -845,7 +842,6 @@ exports[`PickerSelect renders without placeholder when placeholder is empty obje
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1100,7 +1096,6 @@ exports[`PickerSelect matches items by itemKey 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1355,7 +1350,6 @@ exports[`PickerSelect renders custom InputAccessoryView 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1541,7 +1535,6 @@ exports[`PickerSelect passes textInputProps to TextInput 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",