@terreno/ui 0.14.0 → 0.14.2

package/src/bunSetup.ts

@@ -1189,10 +1189,6 @@ mock.module("react-native/Libraries/vendor/core/ErrorUtils", () => ({
   },
 }));
 
-mock.module("react-native/Libraries/Core/ReactNativeVersion", () => ({
-  version: {major: 0, minor: 81, patch: 5},
-}));
-
 mock.module("react-native/Libraries/Core/NativeExceptionsManager", () => ({
   default: null,
 }));

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";
 
@@ -131,6 +131,18 @@ describe("LoginScreen", () => {
     expect(queryByTestId("login-screen-signup-link")).toBeNull();
   });
 
+  it("calls onSubmit when submit button is pressed and fields filled", async () => {
+    const onSubmit = mock(() => Promise.resolve());
+    const {getByTestId} = renderWithTheme(
+      <LoginScreen fields={defaultFields} onSubmit={onSubmit} />
+    );
+    fireEvent.changeText(getByTestId("login-screen-email-input"), "user@test.com");
+    fireEvent.changeText(getByTestId("login-screen-password-input"), "secret123");
+    fireEvent.press(getByTestId("login-screen-submit-button"));
+    await new Promise((r) => setTimeout(r, 600));
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
   it("renders correctly with all props", () => {
     const {toJSON} = renderWithTheme(
       <LoginScreen
@@ -145,4 +157,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>

package/src/table/TableRow.test.tsx

@@ -1,5 +1,7 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, type mock} from "bun:test";
+import {act} from "@testing-library/react-native";
 
+import {IconButton} from "../IconButton";
 import {Text} from "../Text";
 import {renderWithTheme} from "../test-utils";
 import {Table} from "./Table";
@@ -113,4 +115,32 @@ describe("TableRow", () => {
     // Snapshot captures the blank placeholder cell for the row without drawer contents
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("toggles drawer contents when the expand button is pressed", () => {
+    const iconButtonMock = IconButton as unknown as ReturnType<typeof mock>;
+    iconButtonMock.mockClear();
+
+    const {queryByText} = renderWithTheme(
+      <Table columns={[100]}>
+        <TableHeader>
+          <TableHeaderCell index={0} title="Name" />
+        </TableHeader>
+        <TableRow drawerContents={<Text>Hidden content</Text>}>
+          <TableText value="Row" />
+        </TableRow>
+      </Table>
+    );
+
+    expect(queryByText("Hidden content")).toBeNull();
+
+    act(() => {
+      iconButtonMock.mock.calls[iconButtonMock.mock.calls.length - 1][0].onClick();
+    });
+    expect(queryByText("Hidden content")).toBeTruthy();
+
+    act(() => {
+      iconButtonMock.mock.calls[iconButtonMock.mock.calls.length - 1][0].onClick();
+    });
+    expect(queryByText("Hidden content")).toBeNull();
+  });
 });

package/src/table/__snapshots__/TableHeaderCell.test.tsx.snap

@@ -1544,6 +1544,8 @@ exports[`TableHeaderCell renders sortable header with sort indicator when sorted
                                       "$$typeof": Symbol(react.test.json),
                                       "children": null,
                                       "props": {
+                                        "onPointerEnter": [Function: AsyncFunction],
+                                        "onPointerLeave": [Function: AsyncFunction],
                                         "style": {
                                           "alignItems": "center",
                                           "backgroundColor": "#0E9DCD",

package/src/table/tableContext.tsx

@@ -45,7 +45,7 @@ export const TableContextProvider = ({
   );
 };
 
-export function useTableContext(): TableContextType {
+export const useTableContext = (): TableContextType => {
   const {
     columns,
     hasDrawerContents,
@@ -64,4 +64,4 @@ export function useTableContext(): TableContextType {
     sortColumn,
     stickyHeader,
   };
-}
+};

package/src/useConsentHistory.test.ts

@@ -25,17 +25,22 @@ describe("useConsentHistory", () => {
       refetch,
     }));
     const api = {
-      injectEndpoints: mock((opts: MockInjectOpts) => {
-        const build = {
-          query: mock((def: MockQueryDef) => {
-            // Exercise the URL builder so the closure captures `base`
-            const url = def.query();
-            expect(url).toContain("/consents/my");
-            return "my-consents-query";
+      enhanceEndpoints: mock((opts: {addTagTypes: string[]}) => {
+        expect(opts.addTagTypes).toContain("MyConsents");
+        return {
+          injectEndpoints: mock((injectOpts: MockInjectOpts) => {
+            const build = {
+              query: mock((def: MockQueryDef) => {
+                // Exercise the URL builder so the closure captures `base`
+                const url = def.query();
+                expect(url).toContain("/consents/my");
+                return "my-consents-query";
+              }),
+            };
+            injectOpts.endpoints(build);
+            return {useGetMyConsentsQuery};
           }),
         };
-        opts.endpoints(build);
-        return {useGetMyConsentsQuery};
       }),
     };
     return {api, refetch};
@@ -84,10 +89,12 @@ describe("useConsentHistory", () => {
       refetch,
     }));
     const api = {
-      injectEndpoints: () => {
-        injectCallCount += 1;
-        return {useGetMyConsentsQuery};
-      },
+      enhanceEndpoints: () => ({
+        injectEndpoints: () => {
+          injectCallCount += 1;
+          return {useGetMyConsentsQuery};
+        },
+      }),
     };
     const {rerender} = renderHook(() => useConsentHistory(api as unknown as ConsentHistoryApi));
     rerender(undefined);

package/src/useConsentHistory.ts

@@ -39,13 +39,17 @@ interface ConsentHistoryEnhancedApi {
   useGetMyConsentsQuery: () => ConsentHistoryHookState;
 }
 
-interface ConsentHistoryApi {
+interface ConsentHistoryApiWithTags {
   injectEndpoints: (options: {
     endpoints: (build: ConsentHistoryQueryBuilder) => {getMyConsents: unknown};
     overrideExisting: boolean;
   }) => ConsentHistoryEnhancedApi;
 }
 
+interface ConsentHistoryApi {
+  enhanceEndpoints: (options: {addTagTypes: string[]}) => ConsentHistoryApiWithTags;
+}
+
 /**
  * Cache the enhanced api per (api, baseUrl). `injectEndpoints` logs a console
  * error in development whenever an endpoint with the same name is re-injected
@@ -65,7 +69,8 @@ const getEnhancedApi = (api: ConsentHistoryApi, base: string): ConsentHistoryEnh
   if (cached) {
     return cached;
   }
-  const enhanced = api.injectEndpoints({
+  const apiWithConsentTags = api.enhanceEndpoints({addTagTypes: ["MyConsents"]});
+  const enhanced = apiWithConsentTags.injectEndpoints({
     endpoints: (build) => ({
       getMyConsents: build.query({
         providesTags: ["MyConsents"],

package/src/useStoredState.test.tsx

@@ -140,4 +140,51 @@ describe("useStoredState", () => {
     expect(result.current[0]).toBe("initial value");
     expect(result.current[2]).toBe(true);
   });
+
+  it("should handle the outer catch when fetchData rejects unexpectedly", async () => {
+    const originalConsoleError = console.error;
+    console.error = mock((...args: unknown[]) => {
+      const msg = String(args[0]);
+      if (msg.includes("Error reading data from AsyncStorage")) {
+        throw new Error("unexpected failure in error handler");
+      }
+    });
+
+    getItemMock = mock(() => Promise.reject(new Error("Storage read failure")));
+    Unifier.storage.getItem = getItemMock;
+
+    const {result} = renderHook(() => useStoredState("testKey", "fallback"));
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(result.current[2]).toBe(false);
+    console.error = originalConsoleError;
+  });
+
+  it("should not update state in outer catch if unmounted", async () => {
+    const originalConsoleError = console.error;
+    console.error = mock((...args: unknown[]) => {
+      const msg = String(args[0]);
+      if (msg.includes("Error reading data from AsyncStorage")) {
+        throw new Error("force outer catch");
+      }
+    });
+
+    getItemMock = mock(() => Promise.reject(new Error("fail")));
+    Unifier.storage.getItem = getItemMock;
+
+    const {result, unmount} = renderHook(() => useStoredState("testKey", "init"));
+
+    unmount();
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(result.current[0]).toBe("init");
+    expect(result.current[2]).toBe(true);
+    console.error = originalConsoleError;
+  });
 });