@terreno/ui 0.14.0 → 0.14.1

package/src/Utilities.tsx

@@ -6,10 +6,10 @@ import {Platform} from "react-native";
 import type {APIError, BaseProfile, IconSize} from "./Common";
 import {COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES} from "./Constants";
 
-export function mergeInlineStyles(
+export const mergeInlineStyles = (
   inlineStyle?: {__style?: Record<string, unknown>} | undefined,
   newStyle?: Record<string, unknown> | undefined
-) {
+) => {
   const inline = get(inlineStyle, "__style");
   return {
     __style: {
@@ -17,14 +17,14 @@ export function mergeInlineStyles(
       ...newStyle,
     },
   };
-}
+};
 
-export function isTestUser(profile?: BaseProfile) {
+export const isTestUser = (profile?: BaseProfile) => {
   return (
     profile?.email &&
     (profile.email.indexOf("nang.io") > -1 || profile.email.indexOf("example.com") > -1)
   );
-}
+};
 
 export const iconNumberToSize = (size = 16): IconSize => {
   let iconSize: IconSize;
@@ -170,17 +170,17 @@ export const rangeWithoutZero =
 // Binds a string classname to the value in an object. Useful when interacting
 // with ranges that need to come dynamically from a style object. This is
 // similar to the NPM package 'classnames/bind'.
-export function bind<T>(
+export const bind = <T,>(
   fn: Functor<T>,
   scope:
     | {
         readonly [key: string]: string;
       }
     | Record<string, string>
-): (val: T) => Style {
+): ((val: T) => Style) => {
   const map = mapClassName((name) => scope[name]);
   return (val: T): Style => map(fn(val));
-}
+};
 
 // This takes a series of the previously defined functors, runs them all
 // against a value and returns the set of their classnames.
@@ -294,15 +294,13 @@ export const isValidGoogleApiKey = (apiKey: string): boolean => {
   return true;
 };
 
-export function formattedCountyCode(state: string, countyName: string): string {
-  // Remove whitespace and convert to lowercase for comparison
+export const formattedCountyCode = (state: string, countyName: string): string => {
   const stateKey = state
     .replace(/\s+/g, "")
     .toLowerCase() as keyof typeof COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES;
 
   const stateData = COUNTY_AND_COUNTY_EQUIVALENT_ENTITIES[stateKey];
 
-  // Remove whitespace, periods, apostrophes, and dashes for comparison
   const countyKey = countyName
     .trim()
     .toLowerCase()
@@ -317,16 +315,16 @@ export function formattedCountyCode(state: string, countyName: string): string {
   }
 
   return `${countyData.stateFP}${countyData.countyFP}`;
-}
+};
 
-export function isAPIError(error: unknown): error is APIError {
+export const isAPIError = (error: unknown): error is APIError => {
   return Boolean((error as {data?: {title?: unknown}} | null | undefined)?.data?.title);
-}
+};
 
-export function printAPIError(error: APIError, details = true): string {
+export const printAPIError = (error: APIError, details = true): string => {
   let message = error.data?.title;
   if (error.data?.detail && details) {
     message = `${message}: ${error.data?.detail}`;
   }
   return message;
-}
+};

package/src/WebAddressAutocomplete.test.tsx

@@ -313,5 +313,143 @@ describe("WebAddressAutocomplete", () => {
       // The .catch path warns and falls back to plain TextField.
       expect(warnings.length).toBeGreaterThan(0);
     });
+
+    it("cleans up the global callback on unmount", async () => {
+      const {unmount} = renderWithTheme(
+        <WebAddressAutocomplete
+          googleMapsApiKey="my-api-key"
+          handleAddressChange={() => {}}
+          handleAutoCompleteChange={() => {}}
+          inputValue=""
+        />
+      );
+
+      const win = testGlobal.window as GoogleMapsWindow;
+      expect(win.initAutocomplete).toBeDefined();
+
+      unmount();
+
+      expect(win.initAutocomplete).toBeNull();
+    });
+
+    it("re-runs effect when googleMapsApiKey changes", async () => {
+      const handleAutoCompleteChange = mock((_arg: AddressInterface) => {});
+
+      renderWithTheme(
+        <WebAddressAutocomplete
+          googleMapsApiKey="key-1"
+          handleAddressChange={() => {}}
+          handleAutoCompleteChange={handleAutoCompleteChange}
+          inputValue=""
+        />
+      );
+
+      expect(appendedScripts.length).toBe(1);
+
+      // Simulate successful load for the second key
+      const win = testGlobal.window as GoogleMapsWindow;
+      const autocompleteConstructor = mock((_input: unknown, _opts: unknown) => ({
+        addListener: () => {},
+        getPlace: () => null,
+      }));
+      win.google = {
+        maps: {
+          places: {
+            Autocomplete: autocompleteConstructor,
+          },
+        },
+      };
+
+      await act(async () => {
+        (win.initAutocomplete as () => void)?.();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      expect(autocompleteConstructor).toHaveBeenCalled();
+    });
+
+    it("processes address components with includeCounty", async () => {
+      const handleAutoCompleteChange = mock((_arg: AddressInterface) => {});
+      let placeChangedCb: (() => void) | undefined;
+      let localPlaceResult: PlaceResult | null = null;
+
+      const autocompleteConstructor = mock((_input: unknown, _opts: unknown) => ({
+        addListener: (event: string, cb: () => void) => {
+          if (event === "place_changed") {
+            placeChangedCb = cb;
+          }
+        },
+        getPlace: () => localPlaceResult,
+      }));
+
+      testGlobal.window = {
+        google: {
+          maps: {
+            places: {
+              Autocomplete: autocompleteConstructor,
+            },
+          },
+        },
+      };
+
+      renderWithTheme(
+        <WebAddressAutocomplete
+          googleMapsApiKey="test-key"
+          handleAddressChange={() => {}}
+          handleAutoCompleteChange={handleAutoCompleteChange}
+          includeCounty
+          inputValue=""
+        />
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      localPlaceResult = {
+        address_components: [
+          {long_name: "10", short_name: "10", types: ["street_number"]},
+          {long_name: "Main St", short_name: "Main St", types: ["route"]},
+          {long_name: "Springfield", short_name: "Springfield", types: ["locality"]},
+          {
+            long_name: "Sangamon County",
+            short_name: "Sangamon County",
+            types: ["administrative_area_level_2"],
+          },
+          {long_name: "Illinois", short_name: "IL", types: ["administrative_area_level_1"]},
+          {long_name: "62701", short_name: "62701", types: ["postal_code"]},
+        ],
+      };
+
+      await act(async () => {
+        placeChangedCb?.();
+      });
+
+      expect(handleAutoCompleteChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("no API key behavior", () => {
+    it("sets scriptLoaded to false and renders plain TextField", async () => {
+      const handleAddressChange = mock(() => {});
+      const {UNSAFE_getAllByType} = renderWithTheme(
+        <WebAddressAutocomplete
+          handleAddressChange={handleAddressChange}
+          handleAutoCompleteChange={() => {}}
+          inputValue="test"
+        />
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const {TextInput} = require("react-native");
+      const inputs = UNSAFE_getAllByType(TextInput);
+      expect(inputs.length).toBeGreaterThan(0);
+      const {fireEvent: fe} = require("@testing-library/react-native");
+      fe.changeText(inputs[0], "new value");
+      expect(handleAddressChange).toHaveBeenCalledWith("new value");
+    });
   });
 });

package/src/WebDropdownMenu.test.tsx

@@ -141,6 +141,29 @@ describe("WebDropdownMenu", () => {
     expect(getByText("Placeholder").props.style.fontWeight).toBe("400");
     expect(getByText("Real").props.style.fontWeight).toBe("400");
   });
+
+  it("applies dynamic background via the Pressable style callback", () => {
+    const {getByTestId} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={anchor}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={options}
+        selectedValue="b"
+        visible
+      />
+    );
+    const optionPressable = getByTestId("web_dropdown_option_a");
+    const styleFn = optionPressable.props.style;
+    expect(typeof styleFn).toBe("function");
+    const defaultStyle = styleFn({hovered: false, pressed: false});
+    const hoveredStyle = styleFn({hovered: true, pressed: false});
+    const pressedStyle = styleFn({hovered: false, pressed: true});
+    expect(defaultStyle.paddingHorizontal).toBe(12);
+    expect(defaultStyle.paddingVertical).toBe(10);
+    expect(hoveredStyle.backgroundColor).toBeDefined();
+    expect(pressedStyle.backgroundColor).toBeDefined();
+  });
 });
 
 describe("useWebDropdownAnchor", () => {

package/src/index.tsx

@@ -87,7 +87,7 @@ export * from "./TextArea";
 export * from "./TextField";
 export * from "./Theme";
 export * from "./Toast";
-export * from "./Tooltip";
+export {Tooltip} from "./Tooltip";
 export * from "./table/Table";
 export * from "./table/Table";
 export * from "./table/TableBadge";

package/src/login/LoginScreen.test.tsx

@@ -1,5 +1,5 @@
 import {describe, expect, it, mock} from "bun:test";
-import {fireEvent} from "@testing-library/react-native";
+import {act, fireEvent, waitFor} from "@testing-library/react-native";
 import {renderWithTheme} from "../test-utils";
 import {LoginScreen} from "./LoginScreen";
 
@@ -145,4 +145,26 @@ describe("LoginScreen", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls onSubmit with form values when submit button is pressed", async () => {
+    const onSubmit = mock(() => Promise.resolve());
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={onSubmit} />
+    );
+
+    await act(async () => {
+      fireEvent.changeText(getByTestId("login-screen-email-input"), "user@test.com");
+    });
+    await act(async () => {
+      fireEvent.changeText(getByTestId("login-screen-password-input"), "secret123");
+    });
+    await act(async () => {
+      fireEvent.press(getByTestId("login-screen-submit-button"));
+    });
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+    });
+    expect(onSubmit.mock.calls[0][0]).toEqual({email: "user@test.com", password: "secret123"});
+  });
 });

package/src/signUp/PasswordRequirements.tsx

@@ -1,6 +1,6 @@
 import type {FC} from "react";
-import {View} from "react-native";
 
+import {Box} from "../Box";
 import {Icon} from "../Icon";
 import {Text} from "../Text";
 import type {PasswordRequirement} from "./signUpTypes";
@@ -23,13 +23,16 @@ export const PasswordRequirements: FC<PasswordRequirementsProps> = ({
   testID = "password-requirements",
 }) => {
   return (
-    <View testID={testID}>
+    <Box testID={testID}>
       {requirements.map((req) => {
         const isMet = password.length > 0 && req.validate(password);
         return (
-          <View
+          <Box
+            alignItems="center"
+            direction="row"
+            gap={2}
             key={req.key}
-            style={{alignItems: "center", flexDirection: "row", gap: 8, marginBottom: 4}}
+            marginBottom={1}
             testID={`${testID}-${req.key}`}
           >
             <Icon
@@ -41,9 +44,9 @@ export const PasswordRequirements: FC<PasswordRequirementsProps> = ({
             <Text color={isMet ? "success" : "secondaryLight"} size="sm">
               {req.label}
             </Text>
-          </View>
+          </Box>
         );
       })}
-    </View>
+    </Box>
   );
 };

package/src/signUp/__snapshots__/PasswordRequirements.test.tsx.snap

@@ -34,11 +34,15 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-minLength",
         },
         "testID": "password-requirements-minLength",
       },
@@ -74,11 +78,15 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-uppercase",
         },
         "testID": "password-requirements-uppercase",
       },
@@ -114,11 +122,15 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-lowercase",
         },
         "testID": "password-requirements-lowercase",
       },
@@ -154,11 +166,15 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-number",
         },
         "testID": "password-requirements-number",
       },
@@ -194,11 +210,15 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-special",
         },
         "testID": "password-requirements-special",
       },
@@ -206,7 +226,11 @@ exports[`PasswordRequirements renders correctly with empty password 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "onPointerEnter": [Function: AsyncFunction],
+    "onPointerLeave": [Function: AsyncFunction],
+    "style": {
+      "testID": "password-requirements",
+    },
     "testID": "password-requirements",
   },
   "type": "View",
@@ -247,11 +271,15 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-minLength",
         },
         "testID": "password-requirements-minLength",
       },
@@ -287,11 +315,15 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-uppercase",
         },
         "testID": "password-requirements-uppercase",
       },
@@ -327,11 +359,15 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-lowercase",
         },
         "testID": "password-requirements-lowercase",
       },
@@ -367,11 +403,15 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-number",
         },
         "testID": "password-requirements-number",
       },
@@ -407,11 +447,15 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
         },
       ],
       "props": {
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
         "style": {
           "alignItems": "center",
+          "display": "flex",
           "flexDirection": "row",
           "gap": 8,
           "marginBottom": 4,
+          "testID": "password-requirements-special",
         },
         "testID": "password-requirements-special",
       },
@@ -419,7 +463,11 @@ exports[`PasswordRequirements renders correctly with a strong password 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "onPointerEnter": [Function: AsyncFunction],
+    "onPointerLeave": [Function: AsyncFunction],
+    "style": {
+      "testID": "password-requirements",
+    },
     "testID": "password-requirements",
   },
   "type": "View",

package/src/signUp/__snapshots__/SignUpScreen.test.tsx.snap

@@ -397,11 +397,15 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                 },
                               ],
                               "props": {
+                                "onPointerEnter": [Function: AsyncFunction],
+                                "onPointerLeave": [Function: AsyncFunction],
                                 "style": {
                                   "alignItems": "center",
+                                  "display": "flex",
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "marginBottom": 4,
+                                  "testID": "signup-screen-password-requirements-minLength",
                                 },
                                 "testID": "signup-screen-password-requirements-minLength",
                               },
@@ -437,11 +441,15 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                 },
                               ],
                               "props": {
+                                "onPointerEnter": [Function: AsyncFunction],
+                                "onPointerLeave": [Function: AsyncFunction],
                                 "style": {
                                   "alignItems": "center",
+                                  "display": "flex",
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "marginBottom": 4,
+                                  "testID": "signup-screen-password-requirements-uppercase",
                                 },
                                 "testID": "signup-screen-password-requirements-uppercase",
                               },
@@ -477,11 +485,15 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                 },
                               ],
                               "props": {
+                                "onPointerEnter": [Function: AsyncFunction],
+                                "onPointerLeave": [Function: AsyncFunction],
                                 "style": {
                                   "alignItems": "center",
+                                  "display": "flex",
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "marginBottom": 4,
+                                  "testID": "signup-screen-password-requirements-lowercase",
                                 },
                                 "testID": "signup-screen-password-requirements-lowercase",
                               },
@@ -517,11 +529,15 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                 },
                               ],
                               "props": {
+                                "onPointerEnter": [Function: AsyncFunction],
+                                "onPointerLeave": [Function: AsyncFunction],
                                 "style": {
                                   "alignItems": "center",
+                                  "display": "flex",
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "marginBottom": 4,
+                                  "testID": "signup-screen-password-requirements-number",
                                 },
                                 "testID": "signup-screen-password-requirements-number",
                               },
@@ -557,11 +573,15 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                 },
                               ],
                               "props": {
+                                "onPointerEnter": [Function: AsyncFunction],
+                                "onPointerLeave": [Function: AsyncFunction],
                                 "style": {
                                   "alignItems": "center",
+                                  "display": "flex",
                                   "flexDirection": "row",
                                   "gap": 8,
                                   "marginBottom": 4,
+                                  "testID": "signup-screen-password-requirements-special",
                                 },
                                 "testID": "signup-screen-password-requirements-special",
                               },
@@ -569,7 +589,11 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                             },
                           ],
                           "props": {
-                            "style": undefined,
+                            "onPointerEnter": [Function: AsyncFunction],
+                            "onPointerLeave": [Function: AsyncFunction],
+                            "style": {
+                              "testID": "signup-screen-password-requirements",
+                            },
                             "testID": "signup-screen-password-requirements",
                           },
                           "type": "View",

package/src/table/TableHeaderCell.tsx

@@ -1,7 +1,6 @@
 // TableHeaderCell.tsx
 import {FontAwesome6} from "@expo/vector-icons";
 import {type ReactElement, useCallback} from "react";
-import {View} from "react-native";
 
 import {Box} from "../Box";
 import type {AlignItems, TableHeaderCellProps} from "../Common";
@@ -69,15 +68,13 @@ export const TableHeaderCell = ({
       {Boolean(sort) && (
         <Box alignSelf="end" paddingX={2}>
           {/* Make it look like an IconButton, but we can't nest buttons and the whole row is clickable. */}
-          <View
-            style={{
-              alignItems: "center",
-              backgroundColor: theme.surface.primary,
-              borderRadius: theme.radius.rounded,
-              height: 16,
-              justifyContent: "center",
-              width: 16,
-            }}
+          <Box
+            alignItems="center"
+            color="primary"
+            height={16}
+            justifyContent="center"
+            rounding="rounded"
+            width={16}
           >
             <FontAwesome6
               color={theme.text.inverted}
@@ -86,7 +83,7 @@ export const TableHeaderCell = ({
               size={10}
               solid
             />
-          </View>
+          </Box>
         </Box>
       )}
     </Box>