@terreno/ui 0.14.2 → 0.15.1

package/src/TapToEdit.test.tsx

@@ -375,4 +375,37 @@ describe("TapToEdit - additional function coverage", () => {
     });
     expect(queryByText("Save")).toBeTruthy();
   });
+
+  it("renders textarea in editing mode with grow and row defaults", async () => {
+    const setValue = mock(() => {});
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <TapToEdit setValue={setValue} title="Notes" type="textarea" value="Some notes" />
+    );
+    await act(async () => {
+      fireEvent.press(getByLabelText("Edit"));
+    });
+    expect(queryByText("Save")).toBeTruthy();
+    expect(queryByText("Cancel")).toBeTruthy();
+  });
+
+  it("hides helperText in title when onlyShowHelperTextWhileEditing is true (default)", () => {
+    const {queryByText} = renderWithTheme(
+      <TapToEdit
+        editable={false}
+        helperText="Should be hidden in title"
+        title="Field"
+        value="val"
+      />
+    );
+    expect(queryByText("Field")).toBeTruthy();
+    expect(queryByText("Should be hidden in title")).toBeNull();
+  });
+
+  it("renders non-editable textarea with display value below title", () => {
+    const {getByText} = renderWithTheme(
+      <TapToEdit editable={false} title="Bio" type="textarea" value="A long bio text" />
+    );
+    expect(getByText("Bio")).toBeTruthy();
+    expect(getByText("A long bio text")).toBeTruthy();
+  });
 });

package/src/TapToEdit.tsx

@@ -116,7 +116,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
                   }
                 : undefined
             }
-            onChange={setValue ?? (() => {})}
+            onChange={setValue as NonNullable<typeof setValue>}
             row={fieldProps?.type === "textarea" ? 5 : undefined}
             type={(fieldProps?.type ?? "text") as NonNullable<FieldProps["type"]>}
             value={value}

package/src/Toast.tsx

@@ -11,15 +11,17 @@ import {isAPIError, printAPIError} from "./Utilities";
 
 const TOAST_DURATION_MS = 3 * 1000;
 
-type UseToastVariantOptions = {
+interface UseToastVariantOptions {
   persistent?: ToastProps["persistent"];
   secondary?: ToastProps["secondary"];
   size?: ToastProps["size"];
   onDismiss?: ToastProps["onDismiss"];
   subtitle?: ToastProps["subtitle"];
-};
+}
 
-type UseToastOptions = {variant?: ToastProps["variant"]} & UseToastVariantOptions;
+interface UseToastOptions extends UseToastVariantOptions {
+  variant?: ToastProps["variant"];
+}
 
 export const useToast = (): {
   hide: (id: string) => void;

package/src/ToastNotifications.test.tsx

@@ -3,7 +3,7 @@ import {act, render, waitFor} from "@testing-library/react-native";
 import React from "react";
 import {Text} from "react-native";
 
-import {
+import ToastContainer, {
   GlobalToast,
   type ToastContainerRef,
   type ToastOptions,
@@ -2260,4 +2260,77 @@ describe("ToastNotifications", () => {
       }
     });
   });
+
+  describe("update map callback with toast in state", () => {
+    it("should invoke the map callback inside update when toasts exist", async () => {
+      let toastRef: ToastType | null = null;
+
+      const TestComponent = () => {
+        const toast = useToastNotifications();
+        toastRef = toast;
+        return <Text>Test</Text>;
+      };
+
+      render(
+        <ToastProvider swipeEnabled={false}>
+          <TestComponent />
+        </ToastProvider>
+      );
+
+      await waitFor(() => {
+        expect(toastRef?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        toastRef?.show("Original", {duration: 0, id: "update-map-test"});
+      });
+
+      // Flush RAF so the toast is actually in state before calling update
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      // Now update — the map callback will iterate over the non-empty toasts array
+      await act(async () => {
+        toastRef?.update("update-map-test", "Updated");
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+    });
+  });
+
+  describe("isOpen some callback with toast in state", () => {
+    it("should invoke the some callback inside isOpen when toasts exist", async () => {
+      // Use ToastContainer directly via ref to get the latest isOpen closure
+      // (the context-based ref from ToastProvider captures stale toasts)
+      const containerRef = React.createRef<ToastContainerRef>();
+
+      render(<ToastContainer ref={containerRef} />);
+
+      await waitFor(() => {
+        expect(containerRef.current?.show).toBeDefined();
+      });
+
+      await act(async () => {
+        containerRef.current?.show("IsOpen test", {duration: 0, id: "isopen-some-test"});
+      });
+
+      // Flush RAF so the toast is actually in state
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+      }
+
+      // Now isOpen — the some callback will iterate over the non-empty toasts array.
+      // Using the ref directly ensures we get the latest isOpen with updated toasts.
+      await waitFor(() => {
+        expect(containerRef.current?.isOpen("isopen-some-test")).toBe(true);
+      });
+    });
+  });
 });

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

@@ -1710,16 +1710,17 @@ exports[`CustomSelectField renders disabled state 1`] = `
                       "children": [
                         {
                           "$$typeof": Symbol(react.test.json),
-                          "children": null,
+                          "children": [
+                            "Option A",
+                          ],
                           "props": {
-                            "readOnly": true,
                             "style": {
                               "color": "#686868",
+                              "flex": 1,
                             },
                             "testID": "text_input",
-                            "value": "Option A",
                           },
-                          "type": "TextInput",
+                          "type": "Text",
                         },
                         {
                           "$$typeof": Symbol(react.test.json),

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

@@ -8,7 +8,9 @@ exports[`DismissButton renders correctly with default props 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",
@@ -38,7 +40,9 @@ exports[`DismissButton renders with primary color (default) 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",
@@ -68,7 +72,9 @@ exports[`DismissButton renders with inverted color 1`] = `
       "$$typeof": Symbol(react.test.json),
       "children": null,
       "props": {
-        "style": undefined,
+        "onPointerEnter": [Function: AsyncFunction],
+        "onPointerLeave": [Function: AsyncFunction],
+        "style": {},
         "testID": undefined,
       },
       "type": "View",

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

@@ -4666,3 +4666,382 @@ exports[`Field renders phoneNumber field 1`] = `
   "type": "View",
 }
 `;
+
+exports[`Field renders customSelect field 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            {
+              "$$typeof": Symbol(react.test.json),
+              "children": [
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        {
+                          "$$typeof": Symbol(react.test.json),
+                          "children": null,
+                          "props": {
+                            "readOnly": true,
+                            "style": {
+                              "color": "#1C1C1C",
+                            },
+                            "testID": "text_input",
+                            "value": "Option A",
+                          },
+                          "type": "TextInput",
+                        },
+                        {
+                          "$$typeof": Symbol(react.test.json),
+                          "children": null,
+                          "props": {
+                            "style": {
+                              "pointerEvents": "none",
+                            },
+                            "testID": "icon_container",
+                          },
+                          "type": "View",
+                        },
+                      ],
+                      "props": {
+                        "style": {
+                          "flexDirection": "row",
+                          "justifyContent": "space-between",
+                          "pointerEvents": "box-only",
+                          "width": "100%",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "View",
+                    },
+                  ],
+                  "props": {
+                    "onPress": [Function],
+                    "style": {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "minHeight": 40,
+                      "width": "95%",
+                    },
+                    "testID": "ios_touchable_wrapper",
+                  },
+                  "type": "Pressable",
+                },
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": null,
+                      "props": {
+                        "aria-role": "button",
+                        "onPress": [Function],
+                        "style": {
+                          "flex": 1,
+                        },
+                        "testID": "ios_modal_top",
+                      },
+                      "type": "Pressable",
+                    },
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        {
+                          "$$typeof": Symbol(react.test.json),
+                          "children": null,
+                          "props": {
+                            "style": {
+                              "flexDirection": "row",
+                            },
+                            "testID": undefined,
+                          },
+                          "type": "View",
+                        },
+                        {
+                          "$$typeof": Symbol(react.test.json),
+                          "children": [
+                            {
+                              "$$typeof": Symbol(react.test.json),
+                              "children": [
+                                {
+                                  "$$typeof": Symbol(react.test.json),
+                                  "children": [
+                                    "Done",
+                                  ],
+                                  "props": {
+                                    "allowFontScaling": false,
+                                    "style": [
+                                      {
+                                        "color": "#007aff",
+                                        "fontSize": 17,
+                                        "fontWeight": "600",
+                                        "paddingRight": 11,
+                                        "paddingTop": 1,
+                                      },
+                                      {},
+                                    ],
+                                    "testID": "done_text",
+                                  },
+                                  "type": "Text",
+                                },
+                              ],
+                              "props": {
+                                "style": undefined,
+                                "testID": "needed_for_touchable",
+                              },
+                              "type": "View",
+                            },
+                          ],
+                          "props": {
+                            "hitSlop": {
+                              "bottom": 4,
+                              "left": 4,
+                              "right": 4,
+                              "top": 4,
+                            },
+                            "onPress": [Function],
+                            "onPressIn": [Function],
+                            "onPressOut": [Function],
+                            "testID": "done_button",
+                          },
+                          "type": "Pressable",
+                        },
+                      ],
+                      "props": {
+                        "style": {
+                          "alignItems": "center",
+                          "backgroundColor": "#f8f8f8",
+                          "borderTopColor": "#dedede",
+                          "borderTopWidth": 1,
+                          "flexDirection": "row",
+                          "height": 45,
+                          "justifyContent": "space-between",
+                          "paddingHorizontal": 10,
+                          "zIndex": 2,
+                        },
+                        "testID": "input_accessory_view",
+                      },
+                      "type": "View",
+                    },
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        {
+                          "$$typeof": Symbol(react.test.json),
+                          "children": [
+                            {
+                              "$$typeof": Symbol(react.test.json),
+                              "children": null,
+                              "props": {
+                                "color": undefined,
+                                "label": "Please select an option.",
+                                "value": "",
+                              },
+                              "type": "Picker.Item",
+                            },
+                            {
+                              "$$typeof": Symbol(react.test.json),
+                              "children": null,
+                              "props": {
+                                "color": undefined,
+                                "label": "Option A",
+                                "value": "a",
+                              },
+                              "type": "Picker.Item",
+                            },
+                            {
+                              "$$typeof": Symbol(react.test.json),
+                              "children": null,
+                              "props": {
+                                "color": undefined,
+                                "label": "Option B",
+                                "value": "b",
+                              },
+                              "type": "Picker.Item",
+                            },
+                            {
+                              "$$typeof": Symbol(react.test.json),
+                              "children": null,
+                              "props": {
+                                "color": undefined,
+                                "label": "Custom",
+                                "value": "custom",
+                              },
+                              "type": "Picker.Item",
+                            },
+                          ],
+                          "props": {
+                            "onValueChange": [Function],
+                            "selectedValue": "a",
+                            "testID": "ios_picker",
+                          },
+                          "type": "Picker",
+                        },
+                      ],
+                      "props": {
+                        "style": [
+                          {
+                            "backgroundColor": "#d0d4da",
+                            "justifyContent": "center",
+                          },
+                          {
+                            "height": 215,
+                          },
+                        ],
+                        "testID": undefined,
+                      },
+                      "type": "View",
+                    },
+                  ],
+                  "props": {
+                    "animationType": undefined,
+                    "onOrientationChange": [Function],
+                    "supportedOrientations": [
+                      "portrait",
+                      "landscape",
+                    ],
+                    "testID": "ios_modal",
+                    "transparent": true,
+                    "visible": false,
+                  },
+                  "type": "Modal",
+                },
+              ],
+              "props": {
+                "style": [
+                  {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "minHeight": 40,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderColor": "#9A9A9A",
+                  },
+                  false,
+                ],
+                "testID": undefined,
+              },
+              "type": "View",
+            },
+          ],
+          "props": {
+            "style": {
+              "width": "100%",
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+      ],
+      "props": {
+        "accessibilityHint": "Opens a dropdown menu. Select an option, or select custom to trigger popup to input a custom value",
+        "aria-label": "Select dropdown",
+        "aria-role": "button",
+        "style": undefined,
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "accessibilityHint": "Select an option or input a custom value",
+    "aria-label": "Select dropdown with popup text input field",
+    "aria-role": "combobox",
+    "style": {
+      "width": "100%",
+    },
+    "testID": undefined,
+  },
+  "type": "View",
+}
+`;
+
+exports[`Field renders signature field 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": null,
+          "props": {
+            "height": 180,
+            "onPointerDown": [Function],
+            "onPointerLeave": [Function],
+            "onPointerMove": [Function],
+            "onPointerUp": [Function],
+            "ref": {
+              "current": null,
+            },
+            "style": {
+              "display": "block",
+              "height": 180,
+              "maxWidth": "100%",
+              "touchAction": "none",
+              "width": "100%",
+            },
+            "width": 300,
+          },
+          "type": "canvas",
+        },
+      ],
+      "props": {
+        "style": {
+          "borderColor": "#9A9A9A",
+          "borderWidth": 1,
+          "maxWidth": 300,
+          "width": "100%",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Clear",
+          ],
+          "props": {
+            "onPress": [Function],
+            "style": {
+              "color": "#0A7092",
+              "textDecorationLine": "underline",
+            },
+          },
+          "type": "Text",
+        },
+      ],
+      "props": {
+        "style": undefined,
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "style": undefined,
+    "testID": undefined,
+  },
+  "type": "View",
+}
+`;

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

@@ -540,16 +540,17 @@ exports[`PickerSelect renders disabled state 1`] = `
           "children": [
             {
               "$$typeof": Symbol(react.test.json),
-              "children": null,
+              "children": [
+                "Select an option",
+              ],
               "props": {
-                "readOnly": true,
                 "style": {
                   "color": "#686868",
+                  "flex": 1,
                 },
                 "testID": "text_input",
-                "value": "Select an option",
               },
-              "type": "TextInput",
+              "type": "Text",
             },
             {
               "$$typeof": Symbol(react.test.json),

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

@@ -768,6 +768,9 @@ exports[`SegmentedControl renders with badges 1`] = `
                             "paddingVertical": 4,
                             "width": "auto",
                           },
+                          {
+                            "minWidth": 20,
+                          },
                           false,
                           false,
                         ],
@@ -859,6 +862,9 @@ exports[`SegmentedControl renders with badges 1`] = `
                             "paddingVertical": 4,
                             "width": "auto",
                           },
+                          {
+                            "minWidth": 20,
+                          },
                           false,
                           false,
                         ],
@@ -950,6 +956,9 @@ exports[`SegmentedControl renders with badges 1`] = `
                             "paddingVertical": 4,
                             "width": "auto",
                           },
+                          {
+                            "minWidth": 20,
+                          },
                           false,
                           false,
                         ],

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

@@ -1134,16 +1134,17 @@ exports[`SelectField renders disabled state 1`] = `
               "children": [
                 {
                   "$$typeof": Symbol(react.test.json),
-                  "children": null,
+                  "children": [
+                    "Please select an option.",
+                  ],
                   "props": {
-                    "readOnly": true,
                     "style": {
                       "color": "#686868",
+                      "flex": 1,
                     },
                     "testID": "text_input",
-                    "value": "Please select an option.",
                   },
-                  "type": "TextInput",
+                  "type": "Text",
                 },
                 {
                   "$$typeof": Symbol(react.test.json),