@terreno/ui 0.13.3 → 0.14.1

package/src/__snapshots__/SelectField.test.tsx.snap

@@ -267,7 +267,9 @@ exports[`SelectField renders correctly with default props 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -556,7 +558,9 @@ exports[`SelectField renders with title 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -830,7 +834,9 @@ exports[`SelectField renders with selected value 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1104,7 +1110,9 @@ exports[`SelectField renders with custom placeholder 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1380,7 +1388,9 @@ exports[`SelectField renders disabled state 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1644,7 +1654,9 @@ exports[`SelectField renders with requireValue (no clear option) 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",

package/src/__snapshots__/TerrenoProvider.test.tsx.snap

@@ -27,7 +27,6 @@ exports[`TerrenoProvider renders correctly with default props 1`] = `
       },
     ],
     "props": {
-      "style": undefined,
       "testID": "portal-host",
     },
     "type": "View",
@@ -116,7 +115,6 @@ exports[`TerrenoProvider renders with openAPISpecUrl 1`] = `
       },
     ],
     "props": {
-      "style": undefined,
       "testID": "portal-host",
     },
     "type": "View",

package/src/__snapshots__/TimezonePicker.test.tsx.snap

@@ -322,7 +322,9 @@ exports[`TimezonePicker renders correctly with default props 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -636,7 +638,9 @@ exports[`TimezonePicker hides title when hideTitle is true 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -965,7 +969,9 @@ exports[`TimezonePicker renders with selected timezone 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1294,7 +1300,9 @@ exports[`TimezonePicker renders USA timezones by default 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1623,7 +1631,9 @@ exports[`TimezonePicker renders with short timezone labels 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",
@@ -1952,7 +1962,9 @@ exports[`TimezonePicker calls onChange when timezone is selected 1`] = `
     },
   ],
   "props": {
-    "style": undefined,
+    "style": {
+      "width": "100%",
+    },
     "testID": undefined,
   },
   "type": "View",

package/src/bunSetup.ts

@@ -6,6 +6,10 @@ type MockComponentProps = Record<string, unknown> & {
   style?: unknown;
   testID?: string;
 };
+type MockPresstoPressableProps = MockComponentProps & {
+  enabled?: boolean;
+  onPress?: (...args: unknown[]) => unknown;
+};
 type MockStyleValue = unknown;
 type MockAnimation = {
   start?: (callback?: (result: {finished: boolean}) => void) => void;
@@ -447,6 +451,25 @@ mock.module("react-native", () => {
   };
 });
 
+const createMockPresstoPressable = (name: string): React.FC<MockPresstoPressableProps> => {
+  return ({children, enabled = true, onPress, ...props}) =>
+    React.createElement(
+      name,
+      {
+        ...props,
+        disabled: !enabled,
+        onPress: enabled ? onPress : undefined,
+      },
+      children
+    );
+};
+
+mock.module("pressto", () => ({
+  PressableOpacity: createMockPresstoPressable("PressableOpacity"),
+  PressableScale: createMockPresstoPressable("PressableScale"),
+  PressableWithoutFeedback: createMockPresstoPressable("PressableWithoutFeedback"),
+}));
+
 // Initialize globalThis.expo early for expo-modules-core
 if (typeof globalThis.expo === "undefined") {
   const EventEmitterClass = class EventEmitter {
@@ -547,9 +570,9 @@ mock.module("react-signature-canvas", () => {
 // mock used by Tooltip.test.tsx so the two don't disagree.
 mock.module("react-native-portalize", () => ({
   Host: ({children}: MockComponentProps) =>
-    React.createElement("View", {style: undefined, testID: "portal-host"}, children),
+    React.createElement("View", {testID: "portal-host"}, children),
   Portal: ({children}: MockComponentProps) =>
-    React.createElement("View", {style: undefined, testID: "portal"}, children),
+    React.createElement("View", {testID: "portal"}, children),
 }));
 
 // Mock IconButton component

package/src/index.tsx

@@ -58,6 +58,7 @@ export * from "./ModalSheet";
 export * from "./MultiselectField";
 export * from "./NumberField";
 export * from "./NumberPickerActionSheet";
+export * from "./OfflineBanner";
 export * from "./OpenAPIContext";
 export * from "./Page";
 export * from "./Pagination";
@@ -86,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/login/__snapshots__/LoginScreen.test.tsx.snap

@@ -354,8 +354,11 @@ exports[`LoginScreen renders correctly with all props 1`] = `
                               ],
                               "props": {
                                 "accessibilityHint": "Press to perform action",
-                                "aria-label": "Log In",
-                                "aria-role": "button",
+                                "accessibilityLabel": "Log In",
+                                "accessibilityRole": "button",
+                                "accessibilityState": {
+                                  "disabled": true,
+                                },
                                 "disabled": true,
                                 "onPress": [Function: debounced],
                                 "style": {
@@ -433,8 +436,11 @@ exports[`LoginScreen renders correctly with all props 1`] = `
                               ],
                               "props": {
                                 "accessibilityHint": "Press to perform action",
-                                "aria-label": "Forgot password?",
-                                "aria-role": "button",
+                                "accessibilityLabel": "Forgot password?",
+                                "accessibilityRole": "button",
+                                "accessibilityState": {
+                                  "disabled": true,
+                                },
                                 "disabled": true,
                                 "onPress": [Function: debounced],
                                 "style": {
@@ -513,8 +519,11 @@ exports[`LoginScreen renders correctly with all props 1`] = `
                               ],
                               "props": {
                                 "accessibilityHint": "Press to perform action",
-                                "aria-label": "Need an account? Sign Up",
-                                "aria-role": "button",
+                                "accessibilityLabel": "Need an account? Sign Up",
+                                "accessibilityRole": "button",
+                                "accessibilityState": {
+                                  "disabled": true,
+                                },
                                 "disabled": true,
                                 "onPress": [Function: debounced],
                                 "style": {

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",
@@ -669,8 +693,11 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                               ],
                               "props": {
                                 "accessibilityHint": "Press to perform action",
-                                "aria-label": "Sign Up",
-                                "aria-role": "button",
+                                "accessibilityLabel": "Sign Up",
+                                "accessibilityRole": "button",
+                                "accessibilityState": {
+                                  "disabled": true,
+                                },
                                 "disabled": true,
                                 "onPress": [Function: debounced],
                                 "style": {
@@ -748,8 +775,11 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                               ],
                               "props": {
                                 "accessibilityHint": "Press to perform action",
-                                "aria-label": "Already have an account? Log in",
-                                "aria-role": "button",
+                                "accessibilityLabel": "Already have an account? Log in",
+                                "accessibilityRole": "button",
+                                "accessibilityState": {
+                                  "disabled": true,
+                                },
                                 "disabled": true,
                                 "onPress": [Function: debounced],
                                 "style": {

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>