@terreno/ui 0.14.1 → 0.15.0

package/src/WebAddressAutocomplete.test.tsx

@@ -451,5 +451,104 @@ describe("WebAddressAutocomplete", () => {
       fe.changeText(inputs[0], "new value");
       expect(handleAddressChange).toHaveBeenCalledWith("new value");
     });
+
+    it("cleans up the global callback on unmount", async () => {
+      const handleAutoCompleteChange = mock((_arg: AddressInterface) => {});
+
+      const {unmount} = renderWithTheme(
+        <WebAddressAutocomplete
+          googleMapsApiKey="cleanup-key"
+          handleAddressChange={() => {}}
+          handleAutoCompleteChange={handleAutoCompleteChange}
+          inputValue=""
+        />
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const win = (globalThis as Record<string, Record<string, unknown>>).window;
+      expect(win.initAutocomplete).toBeDefined();
+
+      unmount();
+
+      expect(win.initAutocomplete).toBeNull();
+    });
+
+    it("handles place_changed with includeCounty flag", async () => {
+      const handleAutoCompleteChange = mock((_arg: AddressInterface) => {});
+
+      let placeChangedCb: (() => void) | undefined;
+      const autocompleteConstructor = mock((_input: unknown, _opts: unknown) => ({
+        addListener: (event: string, cb: () => void) => {
+          if (event === "place_changed") {
+            placeChangedCb = cb;
+          }
+        },
+        getPlace: () => ({
+          address_components: [
+            {long_name: "10", short_name: "10", types: ["street_number"]},
+            {long_name: "Oak St", short_name: "Oak St", types: ["route"]},
+            {long_name: "Portland", short_name: "Portland", types: ["locality"]},
+            {long_name: "Oregon", short_name: "OR", types: ["administrative_area_level_1"]},
+            {long_name: "97201", short_name: "97201", types: ["postal_code"]},
+            {
+              long_name: "Multnomah County",
+              short_name: "Multnomah",
+              types: ["administrative_area_level_2"],
+            },
+          ],
+        }),
+      }));
+
+      const win = (globalThis as Record<string, Record<string, unknown>>).window;
+      win.google = {
+        maps: {places: {Autocomplete: autocompleteConstructor}},
+      };
+
+      renderWithTheme(
+        <WebAddressAutocomplete
+          googleMapsApiKey="county-key"
+          handleAddressChange={() => {}}
+          handleAutoCompleteChange={handleAutoCompleteChange}
+          includeCounty
+          inputValue=""
+        />
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      });
+
+      expect(autocompleteConstructor).toHaveBeenCalled();
+      expect(placeChangedCb).toBeDefined();
+
+      placeChangedCb?.();
+      expect(handleAutoCompleteChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("without googleMapsApiKey", () => {
+    it("sets scriptLoaded to false and renders plain TextField", async () => {
+      const handleAddressChange = mock(() => {});
+      const {UNSAFE_getAllByType} = renderWithTheme(
+        <WebAddressAutocomplete
+          handleAddressChange={handleAddressChange}
+          handleAutoCompleteChange={() => {}}
+          inputValue="test value"
+        />
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      });
+
+      const {TextInput} = require("react-native");
+      const inputs = UNSAFE_getAllByType(TextInput);
+      expect(inputs.length).toBeGreaterThan(0);
+      fireEvent.changeText(inputs[0], "new value");
+      expect(handleAddressChange).toHaveBeenCalledWith("new value");
+    });
   });
 });

package/src/WebDropdownMenu.test.tsx

@@ -185,8 +185,6 @@ describe("useWebDropdownAnchor", () => {
 
   it("measures the trigger and updates anchor state when the ref has measureInWindow", () => {
     const {result} = renderHook(() => useWebDropdownAnchor());
-    // Simulate a mounted native View by assigning a measureInWindow shim to the
-    // ref. The hook does not care whether the node is a real View instance.
     const measureInWindow = mock((cb: (x: number, y: number, w: number, h: number) => void) => {
       cb(10, 20, 100, 40);
     });
@@ -200,4 +198,32 @@ describe("useWebDropdownAnchor", () => {
     expect(onMeasured.mock.calls[0][0]).toEqual({height: 40, width: 100, x: 10, y: 20});
     expect(result.current.anchor).toEqual({height: 40, width: 100, x: 10, y: 20});
   });
+
+  it("exercises the Pressable style callback for hover/pressed states", () => {
+    const {root} = renderWithTheme(
+      <WebDropdownMenu
+        anchor={{height: 40, width: 100, x: 0, y: 50}}
+        onClose={() => {}}
+        onSelect={() => {}}
+        options={[
+          {label: "A", value: "a"},
+          {label: "B", value: "b"},
+        ]}
+        visible
+      />
+    );
+    // Find a Pressable with the style callback
+    const pressables = root.findAll(
+      (n) => typeof n.props.style === "function" && n.props["aria-role"] === "button"
+    );
+    expect(pressables.length).toBeGreaterThan(0);
+    // Call the style function with different states to exercise all branches
+    const styleFn = pressables[0].props.style;
+    const normalStyle = styleFn({hovered: false, pressed: false});
+    expect(normalStyle).toHaveProperty("paddingHorizontal");
+    const hoveredStyle = styleFn({hovered: true, pressed: false});
+    expect(hoveredStyle).toHaveProperty("paddingHorizontal");
+    const pressedStyle = styleFn({hovered: false, pressed: true});
+    expect(pressedStyle).toHaveProperty("paddingHorizontal");
+  });
 });

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

@@ -544,3 +544,128 @@ exports[`Banner renders with button and icon 1`] = `
   "type": "View",
 }
 `;
+
+exports[`Banner renders with button loading state 1`] = `
+{
+  "$$typeof": Symbol(react.test.json),
+  "children": [
+    {
+      "$$typeof": Symbol(react.test.json),
+      "children": [
+        {
+          "$$typeof": Symbol(react.test.json),
+          "children": [
+            "Banner loading",
+          ],
+          "props": {
+            "style": {
+              "color": "#FFFFFF",
+              "flexShrink": 1,
+              "flexWrap": "wrap",
+              "fontWeight": "bold",
+              "textAlign": "center",
+            },
+          },
+          "type": "Text",
+        },
+        {
+          "$$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": [
+                            "Loading",
+                          ],
+                          "props": {
+                            "style": {
+                              "fontSize": 12,
+                            },
+                          },
+                          "type": "Text",
+                        },
+                      ],
+                      "props": {
+                        "style": {
+                          "flexDirection": "row-reverse",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "View",
+                    },
+                  ],
+                  "props": {
+                    "style": {
+                      "flexDirection": "row",
+                    },
+                    "testID": undefined,
+                  },
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "accessibilityHint": "Press to perform action Loading",
+                "aria-label": "Loading",
+                "aria-role": "button",
+                "onPress": [Function: debounced],
+                "style": {
+                  "alignItems": "center",
+                  "alignSelf": "stretch",
+                  "backgroundColor": "#FFFFFF",
+                  "borderRadius": 360,
+                  "flexDirection": "column",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 4,
+                },
+              },
+              "type": "Pressable",
+            },
+          ],
+          "props": {
+            "style": {
+              "paddingLeft": 16,
+              "paddingRight": 10,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+      ],
+      "props": {
+        "style": {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "center",
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "style": {
+      "alignItems": "center",
+      "backgroundColor": "#2B6072",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "height": "auto",
+      "margin": "auto",
+      "minHeight": 32,
+      "padding": 4,
+      "width": "100%",
+    },
+    "testID": undefined,
+  },
+  "type": "View",
+}
+`;

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__/DataTable.test.tsx.snap

@@ -9498,3 +9498,369 @@ exports[`DataTable renders empty data 1`] = `
   "type": "View",
 }
 `;
+
+exports[`DataTable renders with custom column component map 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": [
+                        "Custom",
+                      ],
+                      "props": {
+                        "aria-label": "Table title: Custom",
+                        "aria-role": "header",
+                        "ellipsizeMode": "tail",
+                        "numberOfLines": 3,
+                        "style": {
+                          "color": "#1C1C1C",
+                          "flexWrap": "wrap",
+                          "fontFamily": "text",
+                          "fontSize": 10,
+                          "fontWeight": "700",
+                          "lineHeight": 16,
+                          "overflow": "hidden",
+                          "textAlign": "left",
+                          "textTransform": "uppercase",
+                        },
+                      },
+                      "type": "Text",
+                    },
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": null,
+                      "props": {
+                        "style": {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "View",
+                    },
+                  ],
+                  "props": {
+                    "style": {
+                      "alignItems": "center",
+                      "backgroundColor": "#FFFFFF",
+                      "borderBottomColor": "#CDCDCD",
+                      "borderBottomWidth": 1,
+                      "flexDirection": "row",
+                      "height": 54,
+                      "justifyContent": "space-between",
+                      "padding": 16,
+                      "width": 100,
+                    },
+                    "testID": undefined,
+                  },
+                  "type": "View",
+                },
+                {
+                  "$$typeof": Symbol(react.test.json),
+                  "children": [
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": [
+                        "Name",
+                      ],
+                      "props": {
+                        "aria-label": "Table title: Name",
+                        "aria-role": "header",
+                        "ellipsizeMode": "tail",
+                        "numberOfLines": 3,
+                        "style": {
+                          "color": "#1C1C1C",
+                          "flexWrap": "wrap",
+                          "fontFamily": "text",
+                          "fontSize": 10,
+                          "fontWeight": "700",
+                          "lineHeight": 16,
+                          "overflow": "hidden",
+                          "textAlign": "left",
+                          "textTransform": "uppercase",
+                        },
+                      },
+                      "type": "Text",
+                    },
+                    {
+                      "$$typeof": Symbol(react.test.json),
+                      "children": null,
+                      "props": {
+                        "style": {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                        },
+                        "testID": undefined,
+                      },
+                      "type": "View",
+                    },
+                  ],
+                  "props": {
+                    "style": {
+                      "alignItems": "center",
+                      "backgroundColor": "#FFFFFF",
+                      "borderBottomColor": "#CDCDCD",
+                      "borderBottomWidth": 1,
+                      "flexDirection": "row",
+                      "height": 54,
+                      "justifyContent": "space-between",
+                      "padding": 16,
+                      "width": 100,
+                    },
+                    "testID": undefined,
+                  },
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "horizontal": true,
+                "onScroll": [Function],
+                "ref": {
+                  "current": null,
+                },
+                "scrollEventThrottle": 16,
+                "showsHorizontalScrollIndicator": false,
+                "style": {
+                  "marginLeft": 0,
+                },
+              },
+              "type": "ScrollView",
+            },
+          ],
+          "props": {
+            "style": {
+              "flexDirection": "row",
+              "position": "relative",
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+        {
+          "$$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": [
+                                    {
+                                      "$$typeof": Symbol(react.test.json),
+                                      "children": [
+                                        {
+                                          "$$typeof": Symbol(react.test.json),
+                                          "children": [
+                                            "Custom",
+                                          ],
+                                          "props": {
+                                            "numberOfLines": 0,
+                                            "selectable": undefined,
+                                            "style": {
+                                              "color": "#1C1C1C",
+                                              "fontFamily": "text-regular",
+                                              "fontSize": 14,
+                                              "textAlign": "left",
+                                            },
+                                            "testID": undefined,
+                                          },
+                                          "type": "Text",
+                                        },
+                                      ],
+                                      "props": {},
+                                      "type": "View",
+                                    },
+                                  ],
+                                  "props": {
+                                    "style": {
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderBottomColor": "#CDCDCD",
+                                      "borderBottomWidth": 1,
+                                      "height": 54,
+                                      "justifyContent": "center",
+                                      "overflow": "hidden",
+                                      "padding": 16,
+                                      "position": "relative",
+                                      "width": 100,
+                                      "zIndex": 1,
+                                    },
+                                    "testID": undefined,
+                                  },
+                                  "type": "View",
+                                },
+                                {
+                                  "$$typeof": Symbol(react.test.json),
+                                  "children": [
+                                    {
+                                      "$$typeof": Symbol(react.test.json),
+                                      "children": [
+                                        {
+                                          "$$typeof": Symbol(react.test.json),
+                                          "children": [
+                                            {
+                                              "$$typeof": Symbol(react.test.json),
+                                              "children": [
+                                                "Alice",
+                                              ],
+                                              "props": {
+                                                "numberOfLines": 0,
+                                                "selectable": undefined,
+                                                "style": {
+                                                  "color": "#1C1C1C",
+                                                  "fontFamily": "text-regular",
+                                                  "fontSize": 14,
+                                                  "textAlign": "left",
+                                                },
+                                                "testID": undefined,
+                                              },
+                                              "type": "Text",
+                                            },
+                                          ],
+                                          "props": {},
+                                          "type": "View",
+                                        },
+                                      ],
+                                      "props": {
+                                        "onPointerEnter": [Function: AsyncFunction],
+                                        "onPointerLeave": [Function: AsyncFunction],
+                                        "style": {
+                                          "display": "flex",
+                                          "flexGrow": 1,
+                                          "flexShrink": 1,
+                                          "justifyContent": "center",
+                                        },
+                                        "testID": undefined,
+                                      },
+                                      "type": "View",
+                                    },
+                                  ],
+                                  "props": {
+                                    "style": {
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderBottomColor": "#CDCDCD",
+                                      "borderBottomWidth": 1,
+                                      "height": 54,
+                                      "justifyContent": "center",
+                                      "overflow": "hidden",
+                                      "padding": 16,
+                                      "position": "relative",
+                                      "width": 100,
+                                      "zIndex": 1,
+                                    },
+                                    "testID": undefined,
+                                  },
+                                  "type": "View",
+                                },
+                              ],
+                              "props": {
+                                "style": {
+                                  "borderBottomColor": "#CDCDCD",
+                                  "borderBottomWidth": 1,
+                                  "flexDirection": "row",
+                                  "height": 54,
+                                },
+                                "testID": undefined,
+                              },
+                              "type": "View",
+                            },
+                          ],
+                          "props": {
+                            "style": undefined,
+                            "testID": undefined,
+                          },
+                          "type": "View",
+                        },
+                      ],
+                      "props": {
+                        "horizontal": true,
+                        "onScroll": [Function],
+                        "ref": {
+                          "current": null,
+                        },
+                        "scrollEventThrottle": 16,
+                        "showsHorizontalScrollIndicator": true,
+                        "style": {
+                          "flex": 1,
+                          "marginLeft": 0,
+                        },
+                      },
+                      "type": "ScrollView",
+                    },
+                  ],
+                  "props": {
+                    "style": {
+                      "flexDirection": "row",
+                      "position": "relative",
+                    },
+                    "testID": undefined,
+                  },
+                  "type": "View",
+                },
+              ],
+              "props": {
+                "style": {
+                  "flex": 1,
+                },
+              },
+              "type": "ScrollView",
+            },
+          ],
+          "props": {
+            "style": {
+              "flex": 1,
+              "minHeight": 0,
+            },
+            "testID": undefined,
+          },
+          "type": "View",
+        },
+      ],
+      "props": {
+        "style": {
+          "borderColor": "#CDCDCD",
+          "borderWidth": 1,
+          "flex": 1,
+          "height": "100%",
+          "minHeight": 0,
+        },
+        "testID": undefined,
+      },
+      "type": "View",
+    },
+  ],
+  "props": {
+    "style": {
+      "display": "flex",
+      "flexDirection": "column",
+      "height": "100%",
+    },
+    "testID": undefined,
+  },
+  "type": "View",
+}
+`;