@terreno/ui 0.13.3 → 0.14.1

package/src/OfflineBanner.tsx

@@ -0,0 +1,54 @@
+import type React from "react";
+
+import {Banner} from "./Banner";
+import {Box} from "./Box";
+
+export interface OfflineBannerProps {
+  /** Whether the server is currently reachable */
+  isOnline: boolean;
+  /** Number of mutations waiting to be synced */
+  queueLength: number;
+  /** Whether mutations are currently being replayed */
+  isSyncing: boolean;
+  /** testID for the root element */
+  testID?: string;
+}
+
+/**
+ * Displays offline/syncing status banners. Renders nothing when online and idle.
+ *
+ * @example
+ * ```typescript
+ * const {isOnline, queueLength, isSyncing} = useServerStatus();
+ * <OfflineBanner isOnline={isOnline} queueLength={queueLength} isSyncing={isSyncing} />
+ * ```
+ */
+export const OfflineBanner: React.FC<OfflineBannerProps> = ({
+  isOnline,
+  queueLength,
+  isSyncing,
+  testID = "offline-banner",
+}) => {
+  if (isSyncing) {
+    return (
+      <Box marginBottom={4} testID={testID}>
+        <Banner id="syncing-status" status="info" text="Syncing offline changes..." />
+      </Box>
+    );
+  }
+
+  if (!isOnline) {
+    const suffix =
+      queueLength > 0
+        ? ` ${queueLength} pending change${queueLength !== 1 ? "s" : ""} will sync when you reconnect.`
+        : "";
+
+    return (
+      <Box marginBottom={4} testID={testID}>
+        <Banner id="offline-status" status="warning" text={`You're offline.${suffix}`} />
+      </Box>
+    );
+  }
+
+  return null;
+};

package/src/OpenAPIContext.tsx

@@ -8,6 +8,7 @@ import type {
   OpenAPIContextType,
   OpenAPIProviderProps,
   OpenAPISpec,
+  OpenApiProperty,
 } from "./Common";
 
 const OpenAPIContext = createContext<OpenAPIContextType | null>(null);
@@ -39,7 +40,7 @@ export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): Reac
     }
 
     for (const dotField of dotFields.slice(1)) {
-      field = (field?.properties as any)?.[dotField];
+      field = (field?.properties as Record<string, OpenApiProperty> | undefined)?.[dotField];
     }
     return field;
   };
@@ -55,7 +56,7 @@ export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): Reac
         const data = (await response.json()) as OpenAPISpec;
         setSpec(data);
       })
-      .catch((error: any) => console.error(`Error fetching OpenAPI spec: ${error}`));
+      .catch((error: unknown) => console.error(`Error fetching OpenAPI spec: ${String(error)}`));
   }, [specUrl]);
 
   return (

package/src/Page.test.tsx

@@ -2,6 +2,7 @@ import {afterAll, describe, expect, it, mock} from "bun:test";
 import {act, fireEvent, waitFor} from "@testing-library/react-native";
 import React, {type ReactNode} from "react";
 import {Pressable, Text as RNText} from "react-native";
+import {SafeAreaView} from "react-native-safe-area-context";
 
 // Override the IconButton mock so the inline onClick arrows fire when pressed.
 mock.module("./IconButton", () => ({
@@ -273,6 +274,33 @@ describe("Page", () => {
     expect(routerBack).toHaveBeenCalled();
   });
 
+  it("wraps content in SafeAreaView when safeArea is true", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation} safeArea>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView).length).toBeGreaterThan(0);
+  });
+
+  it("does not wrap content in SafeAreaView when safeArea is omitted", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation}>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView)).toHaveLength(0);
+  });
+
+  it("does not wrap content in SafeAreaView when safeArea is false", () => {
+    const {UNSAFE_root} = renderWithTheme(
+      <Page navigation={mockNavigation} safeArea={false}>
+        <Text>Content</Text>
+      </Page>
+    );
+    expect(UNSAFE_root.findAllByType(SafeAreaView)).toHaveLength(0);
+  });
+
   it("safely handles a missing rightButtonOnClick callback", async () => {
     const {getByText} = renderWithTheme(
       <Page navigation={mockNavigation} rightButton="Go" title="Page">

package/src/Page.tsx

@@ -1,5 +1,6 @@
 import {router} from "expo-router";
 import React from "react";
+import {SafeAreaView} from "react-native-safe-area-context";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
@@ -11,6 +12,7 @@ import {Spinner} from "./Spinner";
 import {Text} from "./Text";
 
 export class Page extends React.Component<PageProps, {}> {
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class is defined in ActionSheet.tsx which imports from Common.ts indirectly; using its type here would create a circular dependency
   actionSheetRef: React.RefObject<any> = React.createRef();
 
   renderHeader() {
@@ -57,9 +59,9 @@ export class Page extends React.Component<PageProps, {}> {
     );
   }
 
-  render() {
+  renderBody() {
     return (
-      <ErrorBoundary onError={this.props.onError}>
+      <>
         <Box
           alignSelf="center"
           avoidKeyboard
@@ -111,6 +113,20 @@ export class Page extends React.Component<PageProps, {}> {
             {this.props.footer}
           </Box>
         )}
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <ErrorBoundary onError={this.props.onError}>
+        {this.props.safeArea ? (
+          <SafeAreaView edges={["top", "bottom"]} style={{flex: 1}}>
+            {this.renderBody()}
+          </SafeAreaView>
+        ) : (
+          this.renderBody()
+        )}
       </ErrorBoundary>
     );
   }

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

@@ -30,6 +30,7 @@ import {
   Keyboard,
   Modal,
   type ModalProps,
+  type NativeSyntheticEvent,
   Platform,
   Pressable,
   type PressableProps,
@@ -113,7 +114,7 @@ export interface RNPickerSelectProps {
   InputAccessoryView?: ComponentType<{testID?: string}>;
 }
 
-export function RNPickerSelect({
+export const RNPickerSelect = ({
   onValueChange,
   value,
   items,
@@ -135,11 +136,9 @@ export function RNPickerSelect({
   touchableWrapperProps,
 
   InputAccessoryView,
-}: RNPickerSelectProps) {
+}: RNPickerSelectProps) => {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [animationType, setAnimationType] = useState<"none" | "slide" | "fade" | undefined>(
-    undefined
-  );
+  const [animationType, setAnimationType] = useState<ModalProps["animationType"]>(undefined);
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
   const {theme} = useTheme();
@@ -185,7 +184,7 @@ export function RNPickerSelect({
       }
       return {
         idx,
-        selectedItem: options[idx] || {},
+        selectedItem: (options[idx] || {}) as Partial<PickerSelectItem>,
       };
     },
     [options]
@@ -217,9 +216,7 @@ export function RNPickerSelect({
 
   const onOrientationChange = ({
     nativeEvent,
-  }: {
-    nativeEvent: {orientation: "portrait" | "landscape"};
-  }) => {
+  }: NativeSyntheticEvent<{orientation: "portrait" | "landscape"}>) => {
     setOrientation(nativeEvent.orientation);
   };
 
@@ -256,12 +253,13 @@ export function RNPickerSelect({
 
   const renderPickerItems = () => {
     return options?.map((item) => {
+      if (!item) return null;
       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}
         />
       );
     });
@@ -484,9 +482,14 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    // 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;
+    // `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 onPress={onOpen} testID="android_touchable_wrapper" {...touchableWrapperProps}>
         <View>
@@ -680,4 +683,4 @@ export function RNPickerSelect({
   };
 
   return render();
-}
+};

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

@@ -19,7 +19,7 @@ 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

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";

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());
@@ -315,3 +332,34 @@ describe("formatAddress", () => {
     expect(result).toContain("(113)");
   });
 });
+
+describe("TapToEdit - additional function coverage", () => {
+  it("shows Clear button for date type and invokes setValue and onSave", async () => {
+    const setValue = mock(() => {});
+    const onSave = mock(() => Promise.resolve());
+    const {getByLabelText, getByText} = renderWithTheme(
+      <TapToEdit onSave={onSave} setValue={setValue} title="Date" type="date" value="2024-01-01" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(getByText("Clear")).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(getByText("Clear"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+    expect(setValue).toHaveBeenCalledWith("");
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("assigns inputRef for text type in editing mode", async () => {
+    const setValue = mock(() => {});
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Name" type="text" value="Alice" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(queryByText("Save")).toBeTruthy();
+  });
+});

package/src/TapToEdit.tsx

@@ -26,7 +26,7 @@ const TapToEditTitle: FC<{
   );
 };
 
-export function formatAddress(address: AddressInterface, asString = false): string {
+export const formatAddress = (address: AddressInterface, asString = false): string => {
   let city = "";
   if (address?.city) {
     city = address?.state || address.zipcode ? `${address.city}, ` : `${address.city}`;
@@ -49,7 +49,6 @@ export function formatAddress(address: AddressInterface, asString = false): stri
   const addressLineFour = `${countyName}${address?.countyCode ? ` (${countyCode})` : ""}`;
 
   if (!asString) {
-    // Only add new lines if lines before and after are not empty to avoid awkward whitespace
     return `${addressLineOne}${
       addressLineOne && (addressLineTwo || addressLineThree) ? `\n` : ""
     }${addressLineTwo}${addressLineTwo && addressLineThree ? `\n` : ""}${addressLineThree}${
@@ -62,7 +61,7 @@ export function formatAddress(address: AddressInterface, asString = false): stri
       addressLineThree && addressLineFour ? `, ` : ""
     }${addressLineFour}`;
   }
-}
+};
 
 export const TapToEdit: FC<TapToEditProps> = ({
   value,
@@ -81,15 +80,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 +111,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 +128,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
               <Button
                 onClick={(): void => {
                   if (setValue) {
-                    setValue(initialValue);
+                    setValue(initialValueRef.current);
                   }
                   setEditing(false);
                 }}
@@ -142,7 +140,6 @@ export const TapToEdit: FC<TapToEditProps> = ({
                   onClick={(): void => {
                     if (setValue) {
                       setValue("");
-                      setInitialValue("" as any);
                     }
                     if (onSave) {
                       onSave("");
@@ -161,7 +158,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 +267,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/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)}`;