@terreno/ui 0.13.3 → 0.14.1

package/src/Common.ts

@@ -4,6 +4,7 @@ import type {ReactElement, ReactNode} from "react";
 import type {
   ImageStyle,
   ListRenderItemInfo,
+  ScrollView,
   StyleProp,
   TextInput,
   TextStyle,
@@ -394,12 +395,12 @@ export const SPACING_MAP = {
   12: 80,
 };
 
-export function getSpacing(spacing: SignedUpTo12) {
+export const getSpacing = (spacing: SignedUpTo12) => {
   if (spacing < 0) {
     return SPACING_MAP[Math.abs(spacing) as UnsignedUpTo12] * -1;
   }
   return SPACING_MAP[spacing as UnsignedUpTo12];
-}
+};
 
 export type TextFieldType =
   | "date"
@@ -463,7 +464,7 @@ export interface BoxPropsBase {
   lgColumn?: UnsignedUpTo12;
   dangerouslySetInlineStyle?: {
     __style: {
-      // noExplicitAny: escape hatch for arbitrary inline style values
+      // biome-ignore lint/suspicious/noExplicitAny: escape hatch for arbitrary inline style values that users may need to set
       [key: string]: any;
     };
   };
@@ -549,7 +550,7 @@ export interface BoxPropsBase {
 
   avoidKeyboard?: boolean;
   keyboardOffset?: number;
-  scrollRef?: React.RefObject<any>;
+  scrollRef?: React.RefObject<ScrollView | null>;
   onScroll?: (offsetY: number) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
   testID?: string;
@@ -752,9 +753,9 @@ const ROUNDING_MAP = {
   xl: 32,
 };
 
-export function getRounding(rounding: Rounding) {
+export const getRounding = (rounding: Rounding) => {
   return ROUNDING_MAP[rounding];
-}
+};
 
 export interface HeadingProps {
   align?: "left" | "right" | "center" | "justify"; // default "left"
@@ -858,17 +859,17 @@ export interface SplitPageProps {
   loading?: boolean;
   color?: SurfaceColor;
   keyboardOffset?: number;
-  // noExplicitAny: ListRenderItemInfo generic type depends on the consumer's data shape
+  // biome-ignore lint/suspicious/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
+  // biome-ignore lint/suspicious/noExplicitAny: list data type varies by consumer's data model
   listViewData: any[];
   listViewExtraData?: unknown;
   listViewWidth?: number;
   listViewMaxWidth?: number;
   renderChild?: () => ReactChild;
-  // noExplicitAny: callback value type varies by consumer's data model
+  // biome-ignore lint/suspicious/noExplicitAny: callback value type varies by consumer's data model
   onSelectionChange?: (value?: any) => void | Promise<void>;
 }
 
@@ -1500,6 +1501,8 @@ export interface BodyProps {
   children?: ReactNode;
 }
 
+export type ButtonPressAnimation = "scale" | "opacity" | "none";
+
 export interface ButtonProps {
   /**
    * The text content of the confirmation modal.
@@ -1538,6 +1541,11 @@ export interface ButtonProps {
    * The subtitle of the confirmation modal.
    */
   modalSubTitle?: string;
+  /**
+   * The press animation to use when the button is touched.
+   * @default "scale"
+   */
+  pressAnimation?: ButtonPressAnimation;
   /**
    * The test ID for the button, used for testing purposes.
    */
@@ -1675,6 +1683,7 @@ export interface DateTimeActionSheetProps {
   type?: "date" | "time" | "datetime";
   // Returns an ISO 8601 string. If mode is "time", the date portion is today.
   onChange: OnChangeCallback;
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class lives in ActionSheet.tsx which imports from Common.ts; typing this would create a circular import
   actionSheetRef: React.RefObject<any>;
   visible: boolean;
   onDismiss: () => void;
@@ -1686,6 +1695,7 @@ export interface DecimalRangeActionSheetProps {
   min: number;
   max: number;
   onChange: OnChangeCallback;
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class lives in ActionSheet.tsx which imports from Common.ts; typing this would create a circular import
   actionSheetRef: React.RefObject<any>;
 }
 
@@ -1745,6 +1755,7 @@ export type FieldProps =
 export interface HeightActionSheetProps {
   value?: string;
   onChange: OnChangeCallback;
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class lives in ActionSheet.tsx which imports from Common.ts; typing this would create a circular import
   actionSheetRef: React.RefObject<any>;
   /** Minimum height in total inches */
   min?: number;
@@ -1756,14 +1767,17 @@ export interface HeightActionSheetProps {
 
 export interface HyperlinkProps {
   linkDefault?: boolean;
-  // noExplicitAny: type comes from external linkify-it library which lacks an exported type
+  // biome-ignore lint/suspicious/noExplicitAny: linkify-it library's main export lacks a TypeScript type definition
   linkify?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: StyleProp's generic is heterogeneous (TextStyle | ViewStyle) for link contexts
   linkStyle?: StyleProp<any>;
   linkText?: string | ((url: string) => string);
   onPress?: (url: string) => void;
   onLongPress?: (url: string, text: string) => void;
+  // biome-ignore lint/suspicious/noExplicitAny: returned view props are spread onto a heterogeneous View; consumers pass arbitrary props
   injectViewProps?: (url: string) => any;
   children?: React.ReactNode;
+  // biome-ignore lint/suspicious/noExplicitAny: StyleProp's generic is heterogeneous for the container which holds mixed Text/View children
   style?: StyleProp<any>;
 }
 
@@ -1913,12 +1927,12 @@ export interface ModalProps {
   /**
    * The function to call when the primary button is clicked.
    */
-  // noExplicitAny: callback value type varies by consumer context
+  // biome-ignore lint/suspicious/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
+  // biome-ignore lint/suspicious/noExplicitAny: callback value type varies by consumer context
   secondaryButtonOnClick?: (value?: any) => void | Promise<void>;
 }
 
@@ -1927,11 +1941,12 @@ export interface NumberPickerActionSheetProps {
   min: number;
   max: number;
   onChange: OnChangeCallback;
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class lives in ActionSheet.tsx which imports from Common.ts; typing this would create a circular import
   actionSheetRef: React.RefObject<any>;
 }
 
 export interface PageProps {
-  // noExplicitAny: React Navigation type varies by navigation stack configuration
+  // biome-ignore lint/suspicious/noExplicitAny: React Navigation type varies by navigation stack configuration
   navigation?: any;
   scroll?: boolean;
   loading?: boolean;
@@ -1950,6 +1965,12 @@ export interface PageProps {
   rightButtonOnClick?: () => void;
   children?: ReactChildren;
   onError?: (error: Error, stack: string) => void;
+  /**
+   * When true, wraps content in SafeAreaView so it respects top/bottom device
+   * insets (camera notches, home indicator, status bar). Opt-in to avoid
+   * regressing existing screens that handle insets at the navigation level.
+   */
+  safeArea?: boolean;
 }
 
 export interface ProgressBarProps {
@@ -2252,6 +2273,7 @@ export interface TextFieldPickerActionSheetProps {
   value?: string;
   mode?: "date" | "time";
   onChange: OnChangeCallback;
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class lives in ActionSheet.tsx which imports from Common.ts; typing this would create a circular import
   actionSheetRef: React.RefObject<any>;
 }
 
@@ -2371,19 +2393,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.)
+  // biome-ignore lint/suspicious/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
+  // biome-ignore lint/suspicious/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
+  // biome-ignore lint/suspicious/noExplicitAny: value type varies across TapToEdit field types
   onSave?: (value: any) => void | Promise<void>;
 
   /**
@@ -2396,7 +2418,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
+  // biome-ignore lint/suspicious/noExplicitAny: input value type varies across TapToEdit field types
   transform?: (value: any) => string;
   /**
    * Show a confirmation modal before saving the value.
@@ -2485,11 +2507,12 @@ export interface ModelFields {
 
 export interface OpenAPISpec {
   paths: {
-    // noExplicitAny: OpenAPI path items are deeply accessed with chained property lookups
+    // biome-ignore lint/suspicious/noExplicitAny: OpenAPI path items are deeply accessed with chained property lookups
     [key: string]: any;
   };
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: ModelFieldConfig is a passthrough for arbitrary field configuration objects from various model contexts
 export type ModelFieldConfig = any;
 
 export interface OpenAPIProviderProps {
@@ -2518,7 +2541,7 @@ export interface ModelAdminFieldConfig {
 
 // The props for a custom column component for ModelAdmin.
 export interface ModelAdminCustomComponentProps extends Omit<FieldProps, "name"> {
-  // noExplicitAny: document shape varies by model used with ModelAdmin
+  // biome-ignore lint/suspicious/noExplicitAny: document shape varies by model used with ModelAdmin
   doc: any;
   fieldKey: string; // Dot notation representation of the field.
   // user: User;

package/src/ConsentFormScreen.test.tsx

@@ -2,6 +2,7 @@ import {describe, expect, it, mock} from "bun:test";
 import {act, fireEvent} from "@testing-library/react-native";
 
 import {ConsentFormScreen} from "./ConsentFormScreen";
+import {SignatureField} from "./SignatureField";
 import {renderWithTheme} from "./test-utils";
 import type {ConsentFormPublic} from "./useConsentForms";
 
@@ -208,6 +209,108 @@ describe("ConsentFormScreen", () => {
     expect(queryByTestId("consent-form-required-legend")).toBeNull();
   });
 
+  it("confirms the modal and toggles the checkbox on", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      checkboxes: [{confirmationPrompt: "Are you sure?", label: "Tricky", required: true}],
+    };
+    const {getByTestId, getByText, queryByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+    });
+    expect(getByText("Are you sure?")).toBeTruthy();
+    // Press the "Confirm" button inside the modal
+    act(() => {
+      fireEvent.press(getByText("Confirm"));
+    });
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        // Checkbox hint should be gone because the required checkbox was toggled on
+        expect(queryByTestId("consent-footer-checkboxes-hint")).toBeNull();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("dismisses the modal without toggling the checkbox", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      checkboxes: [{confirmationPrompt: "Are you sure?", label: "Tricky", required: true}],
+    };
+    const {getByTestId, getByText} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    act(() => {
+      fireEvent.press(getByTestId("consent-form-checkbox-0"));
+    });
+    expect(getByText("Are you sure?")).toBeTruthy();
+    // Press the "Cancel" button inside the modal
+    act(() => {
+      fireEvent.press(getByText("Cancel"));
+    });
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        // The checkbox hint should still show because the checkbox was not toggled
+        expect(getByTestId("consent-footer-checkboxes-hint")).toBeTruthy();
+        resolve();
+      }, 600);
+    });
+  });
+
+  it("auto-satisfies scroll requirement when content fits the viewport via contentSizeChange", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId, queryByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const scroll = getByTestId("consent-form-scroll-view");
+    // First set the layout height, then content size smaller than layout
+    act(() => {
+      fireEvent(scroll, "layout", {nativeEvent: {layout: {height: 500}}});
+    });
+    act(() => {
+      fireEvent(scroll, "contentSizeChange", 0, 400);
+    });
+    expect(queryByTestId("consent-form-scroll-hint")).toBeNull();
+  });
+
+  it("auto-satisfies scroll requirement when content fits the viewport via layout", () => {
+    const form = {...baseForm, requireScrollToBottom: true};
+    const {getByTestId, queryByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const scroll = getByTestId("consent-form-scroll-view");
+    // First set the content size, then layout height larger than content
+    act(() => {
+      fireEvent(scroll, "contentSizeChange", 0, 300);
+    });
+    act(() => {
+      fireEvent(scroll, "layout", {nativeEvent: {layout: {height: 500}}});
+    });
+    expect(queryByTestId("consent-form-scroll-hint")).toBeNull();
+  });
+
+  it("handleScroll returns early when already scrolled to bottom", () => {
+    const form = {...baseForm, requireScrollToBottom: false};
+    const {getByTestId} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const scroll = getByTestId("consent-form-scroll-view");
+    // requireScrollToBottom is false so hasScrolledToBottom starts as true.
+    // Firing scroll should hit the early return at line 81.
+    act(() => {
+      fireEvent(scroll, "scroll", {
+        nativeEvent: {
+          contentOffset: {y: 0},
+          contentSize: {height: 1000},
+          layoutMeasurement: {height: 500},
+        },
+      });
+    });
+    expect(scroll).toBeTruthy();
+  });
+
   it("shows the checkbox footer hint when a required checkbox is unchecked", () => {
     const form: ConsentFormPublic = {
       ...baseForm,
@@ -232,4 +335,25 @@ describe("ConsentFormScreen", () => {
     });
     expect(queryByTestId("consent-footer-checkboxes-hint")).toBeNull();
   });
+
+  it("exercises SignatureField onChange, onStart, and onEnd callbacks", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      captureSignature: true,
+    };
+    const {UNSAFE_getByType} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const sig = UNSAFE_getByType(SignatureField);
+    act(() => {
+      sig.props.onChange("data:image/png;base64,abc");
+    });
+    act(() => {
+      sig.props.onStart();
+    });
+    act(() => {
+      sig.props.onEnd();
+    });
+    expect(sig).toBeTruthy();
+  });
 });

package/src/ConsentFormScreen.tsx

@@ -1,5 +1,13 @@
 import React, {useState} from "react";
-import {Pressable, ScrollView} from "react-native";
+import {
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Platform,
+  Pressable,
+  ScrollView,
+  View,
+} from "react-native";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
@@ -62,7 +70,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
     }
   };
 
-  const handleLayout = (event: any) => {
+  const handleLayout = (event: LayoutChangeEvent) => {
     const h = event.nativeEvent.layout.height;
     setLayoutHeight(h);
     if (!hasScrolledToBottom && contentHeight > 0 && h > 0 && contentHeight <= h) {
@@ -70,7 +78,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
     }
   };
 
-  const handleScroll = (event: any) => {
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     if (hasScrolledToBottom) {
       return;
     }
@@ -160,7 +168,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
   );
 
   return (
-    <Page color="base" footer={footer} maxWidth="100%" scroll={false} title={form.title}>
+    <Page color="base" footer={footer} maxWidth="100%" safeArea scroll={false} title={form.title}>
       <ScrollView
         onContentSizeChange={handleContentSizeChange}
         onLayout={handleLayout}
@@ -206,7 +214,11 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
           )}
 
           {Boolean(form.captureSignature) && (
-            <Box direction="column" gap={2} testID="consent-form-signature">
+            <View
+              onTouchEnd={Platform.OS === "ios" ? () => setScrollEnabled(true) : undefined}
+              onTouchStart={Platform.OS === "ios" ? () => setScrollEnabled(false) : undefined}
+              testID="consent-form-signature"
+            >
               <SignatureField
                 onChange={(value) => setSignatureValue(value)}
                 onEnd={() => setScrollEnabled(true)}
@@ -214,7 +226,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
                 title="Signature"
                 value={signatureValue}
               />
-            </Box>
+            </View>
           )}
 
           {Boolean(form.requireScrollToBottom && !hasScrolledToBottom) && (

package/src/ConsentNavigator.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import React from "react";
 import {Pressable} from "react-native";

package/src/ConsentNavigator.tsx

@@ -10,11 +10,12 @@ import type {SubmitConsentBody} from "./useSubmitConsent";
 import {useSubmitConsent} from "./useSubmitConsent";
 
 interface ConsentNavigatorProps {
+  // biome-ignore lint/suspicious/noExplicitAny: RTK Query api instance is a complex generic type that varies per consumer
   api: any;
   baseUrl?: string;
   children: React.ReactNode;
   extraScreens?: React.ReactNode[];
-  onError?: (error: any) => void;
+  onError?: (error: unknown) => void;
   variables?: Record<string, string>;
 }
 
@@ -48,7 +49,8 @@ export const ConsentNavigator: React.FC<ConsentNavigatorProps> = ({
   }
 
   if (error) {
-    const status = (error as any)?.status ?? (error as any)?.originalStatus;
+    const errorObj = error as {status?: number; originalStatus?: number};
+    const status = errorObj?.status ?? errorObj?.originalStatus;
     console.warn("[ConsentNavigator] Error fetching pending consents:", {error, status});
     // On auth errors, pass through to let the app handle re-authentication
     if (status === 401 || status === 403) {
@@ -80,7 +82,7 @@ export const ConsentNavigator: React.FC<ConsentNavigatorProps> = ({
         `[ConsentNavigator] Showing extra screen ${extraScreenIndex + 1}/${validExtraScreens.length}`
       );
       if (React.isValidElement(currentScreen)) {
-        return React.cloneElement(currentScreen as React.ReactElement<any>, {
+        return React.cloneElement(currentScreen as React.ReactElement<{onNext?: () => void}>, {
           onNext: () => setExtraScreenIndex((i) => i + 1),
         });
       }

package/src/CustomSelectField.tsx

@@ -101,7 +101,9 @@ export const CustomSelectField: FC<CustomSelectFieldProps> = ({
           <TextField
             disabled={disabled}
             id="customOptions"
-            inputRef={(ref: any) => (textInputRef.current = ref)}
+            inputRef={(ref: TextInput | null) => {
+              textInputRef.current = ref;
+            }}
             onChange={onChange}
             placeholder="None selected"
             type="text"