@terreno/ui 0.13.0 → 0.14.0

package/src/Pagination.tsx

@@ -134,7 +134,7 @@ export const Pagination: FC<PaginationProps> = ({totalPages, page, setPage}) =>
         alignItems: "center",
         display: "flex",
         flexDirection: "row",
-        gap: theme.spacing.xs as any,
+        gap: theme.spacing.xs,
       }}
     >
       <PaginationButton

package/src/Permissions.ts

@@ -10,6 +10,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;
 
   //   let k = kind;
+  //   // noExplicitAny: Dead commented-out code; types cannot be resolved without the full uncommented context and Permissions library types
   //   let options: any = undefined;
   //   if (kind === "locationAlways") {
   //     k = "location";
@@ -21,6 +22,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
 
   //   // TODO check soft request status.
 
+  //   // noExplicitAny: Dead commented-out code; MAP[k] type depends on unreferenced MAP constant
   //   const current = await Permissions.check(MAP[k] as any);
   //   // Tracking.log(`[permissions] ${k} permissions are ${current}`);
   //   if (current === "denied" || current === "limited") {
@@ -31,6 +33,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
   //     return resolve("authorized");
   //   }
 
+  //   // noExplicitAny: Dead commented-out code; MAP[k] type depends on unreferenced MAP constant
   //   const response = await Permissions.request(MAP[k] as any, options);
   //   if (response === "granted") {
   //     // Tracking.setUserProperty(userPropertyKey, "true");

package/src/PickerSelect.tsx

@@ -25,15 +25,19 @@
 
 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,
+  type NativeSyntheticEvent,
   Platform,
   Pressable,
+  type PressableProps,
   StyleSheet,
   Text,
   TextInput,
+  type TextInputProps,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -67,14 +71,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 +100,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 +138,7 @@ export function RNPickerSelect({
   InputAccessoryView,
 }: RNPickerSelectProps) {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [animationType, setAnimationType] = useState(undefined);
+  const [animationType, setAnimationType] = useState<ModalProps["animationType"]>(undefined);
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
   const {theme} = useTheme();
@@ -159,25 +172,25 @@ 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;
       }
       return {
         idx,
-        selectedItem: options[idx] || {},
+        selectedItem: (options[idx] || {}) as Partial<PickerSelectItem>,
       };
     },
     [options]
   );
 
-  const [selectedItem, setSelectedItem] = useState<any>(() => {
+  const [selectedItem, setSelectedItem] = useState<Partial<PickerSelectItem>>(() => {
     return getSelectedItem(itemKey, value).selectedItem;
   });
 
@@ -195,13 +208,15 @@ 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,
+  }: NativeSyntheticEvent<{orientation: "portrait" | "landscape"}>) => {
     setOrientation(nativeEvent.orientation);
   };
 
@@ -215,7 +230,7 @@ export function RNPickerSelect({
     }
   };
 
-  const togglePicker = (animate = false, postToggleCallback?: any) => {
+  const togglePicker = (animate = false, postToggleCallback?: () => void) => {
     if (disabled) {
       return;
     }
@@ -237,7 +252,8 @@ export function RNPickerSelect({
   };
 
   const renderPickerItems = () => {
-    return options?.map((item: any) => {
+    return options?.map((item) => {
+      if (!item) return null;
       return (
         <Picker.Item
           color={item.color}
@@ -408,7 +424,6 @@ export function RNPickerSelect({
         ]}
       >
         <Pressable
-          activeOpacity={1}
           onPress={() => {
             togglePicker(true);
           }}
@@ -467,14 +482,16 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    const Component: any = fixAndroidTouchableBug ? View : Pressable;
+    // `View` and `Pressable` accept disjoint prop sets; the fork swaps between them to work
+    // around an Android touchable bug, so we cast to a structural component type that accepts
+    // the union of props actually used in JSX below.
+    const Component = (fixAndroidTouchableBug ? View : Pressable) as ComponentType<{
+      onPress?: PressableProps["onPress"];
+      testID?: string;
+      children?: ReactNode;
+    }>;
     return (
-      <Component
-        activeOpacity={1}
-        onPress={onOpen}
-        testID="android_touchable_wrapper"
-        {...touchableWrapperProps}
-      >
+      <Component onPress={onOpen} testID="android_touchable_wrapper" {...touchableWrapperProps}>
         <View>
           {renderTextInputOrChildren()}
           <Picker
@@ -636,7 +653,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.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";
 

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

@@ -19,17 +19,17 @@ export const SelectField: FC<SelectFieldProps> = ({
   const clearOption = {label: placeholder ?? "---", value: ""};
 
   return (
-    <View>
+    <View style={{width: "100%"}}>
       {Boolean(title) && <FieldTitle text={title!} />}
       {Boolean(errorText) && <FieldError text={errorText!} />}
       <RNPickerSelect
         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

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
 import {forwardRef, useImperativeHandle} from "react";
@@ -49,6 +50,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/SplitPage.native.tsx

@@ -34,6 +34,7 @@ export const SplitPage = ({
   const {width} = Dimensions.get("window");
 
   const onItemSelect = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
     async (item: ListRenderItemInfo<any>) => {
       setSelectedId(item.index);
       await onSelectionChange(item);
@@ -58,6 +59,7 @@ export const SplitPage = ({
     return null;
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
   const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box

package/src/SplitPage.tsx

@@ -40,6 +40,7 @@ export const SplitPage = ({
   const elementArray = Children.toArray(children).filter((c) => c !== null);
 
   const onItemSelect = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
     async (item: ListRenderItemInfo<any>): Promise<void> => {
       setSelectedId(item.index);
       await onSelectionChange(item);
@@ -69,6 +70,7 @@ export const SplitPage = ({
     return null;
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
   const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box
@@ -297,7 +299,10 @@ export const SplitPage = ({
       padding={2}
       width="100%"
     >
-      {loading === true && <Spinner color={theme.text.primary as any} size="md" />}
+      {loading === true && (
+        // biome-ignore lint/suspicious/noExplicitAny: Spinner color is a token enum but the legacy code passes theme.text.primary (a resolved hex string); preserving original behavior
+        <Spinner color={theme.text.primary as any} size="md" />
+      )}
       {isMobileDevice ? renderMobileSplitPage() : renderSplitPage()}
     </Box>
   );

package/src/TapToEdit.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";
 import {Linking} from "react-native";
@@ -211,6 +212,22 @@ describe("TapToEdit", () => {
     expect(setValue).toHaveBeenCalled();
   });
 
+  it("reverts to original value (not edited value) when Cancel is pressed", async () => {
+    const setValue = mock((_v: unknown) => {});
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" value="Jane" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    // Simulate user having changed the value during editing
+    setValue("Edited Value");
+    await act(async () => {
+      fireEvent.press(getByText("Cancel"));
+    });
+    expect(setValue).toHaveBeenLastCalledWith("Jane");
+  });
+
   it("clears value when Clear button is pressed", async () => {
     const setValue = mock(() => {});
     const onSave = mock(() => Promise.resolve());

package/src/TapToEdit.tsx

@@ -81,15 +81,11 @@ export const TapToEdit: FC<TapToEditProps> = ({
   ...fieldProps
 }) => {
   const [editing, setEditing] = useState(false);
-  const [initialValue, setInitialValue] = useState();
+  const initialValueRef = useRef<unknown>(undefined);
   const helperText: string | undefined = propsHelperText;
-  // setInitialValue is called after initial render to handle the case where the value is updated
-  useEffect(() => {
-    setInitialValue(value);
-    // do not update if value changes
-  }, [value]);
 
   // TODO: Auto focus on input when editing for field types other than text for accessibility
+  // biome-ignore lint/suspicious/noExplicitAny: inputRef references various RN input components (TextInput, etc.) depending on the field type
   const inputRef = useRef<any>(null);
 
   // bring the bring the input into focus when editing from within the component,
@@ -116,13 +112,16 @@ export const TapToEdit: FC<TapToEditProps> = ({
             helperText={helperText}
             inputRef={
               ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
-                ? (ref: any) => (inputRef.current = ref)
+                ? (ref: unknown) => {
+                    inputRef.current = ref;
+                  }
                 : undefined
             }
             onChange={setValue ?? (() => {})}
             row={fieldProps?.type === "textarea" ? 5 : undefined}
             type={(fieldProps?.type ?? "text") as NonNullable<FieldProps["type"]>}
             value={value}
+            // biome-ignore lint/suspicious/noExplicitAny: fieldProps is a discriminated union (FieldProps) but the spread loses narrowing; type-checking each variant individually is impractical here
             {...(fieldProps as any)}
           />
           {editing && !isEditing && (
@@ -130,7 +129,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
               <Button
                 onClick={(): void => {
                   if (setValue) {
-                    setValue(initialValue);
+                    setValue(initialValueRef.current);
                   }
                   setEditing(false);
                 }}
@@ -142,7 +141,6 @@ export const TapToEdit: FC<TapToEditProps> = ({
                   onClick={(): void => {
                     if (setValue) {
                       setValue("");
-                      setInitialValue("" as any);
                     }
                     if (onSave) {
                       onSave("");
@@ -161,7 +159,6 @@ export const TapToEdit: FC<TapToEditProps> = ({
                     if (!onSave) {
                       console.error("No onSave provided for editable TapToEdit");
                     } else {
-                      setInitialValue(value);
                       await onSave(value);
                     }
                     setEditing(false);
@@ -271,7 +268,10 @@ export const TapToEdit: FC<TapToEditProps> = ({
                 accessibilityHint=""
                 accessibilityLabel="Edit"
                 marginLeft={2}
-                onClick={(): void => setEditing(true)}
+                onClick={(): void => {
+                  initialValueRef.current = value;
+                  setEditing(true);
+                }}
                 width={16}
               >
                 <Icon iconName="pencil" size="md" />

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/Toast.tsx

@@ -48,7 +48,7 @@ export const useToast = (): {
   };
   return {
     catch: (error: unknown, message?: string, options?: UseToastVariantOptions): void => {
-      let exceptionMsg;
+      let exceptionMsg: string;
       if (isAPIError(error)) {
         // Get the error without details.
         exceptionMsg = `${message}: ${printAPIError(error)}`;

package/src/ToastNotifications.tsx

@@ -177,10 +177,7 @@ export interface ToastOptions {
   /**
    * Payload data for custom toasts. You can pass whatever you want
    */
-  // noExplicitAny: This is the public API of a vendored 3rd-party library
-  // (react-native-toast-notifications); the `data` field is an opaque
-  // user-provided payload. Tightening to `unknown` breaks downstream consumers
-  // that spread `data` into `Toast` (e.g. TerrenoProvider) without refactor.
+  // biome-ignore lint/suspicious/noExplicitAny: This is the public API of a vendored 3rd-party library (react-native-toast-notifications); the data field is an opaque user-provided payload. Tightening to unknown breaks downstream consumers that spread data into Toast (e.g. TerrenoProvider) without refactor.
   data?: any;
 
   swipeEnabled?: boolean;