@terreno/ui 0.14.0 → 0.14.2

package/src/Tooltip.tsx

@@ -39,7 +39,7 @@ interface ChildrenProps {
   onHoverOut?: () => void;
 }
 
-const getTooltipPosition = ({
+export const getTooltipPosition = ({
   children,
   tooltip,
   measured,
@@ -117,7 +117,7 @@ const getTooltipPosition = ({
   }
 };
 
-const Arrow: FC<{position: TooltipPosition; color: string}> = ({position, color}) => {
+export const Arrow: FC<{position: TooltipPosition; color: string}> = ({position, color}) => {
   const getArrowStyle = (): ViewStyle => {
     const arrowStyles = {
       bottom: {

package/src/Unifier.ts

@@ -18,13 +18,18 @@ export type PlatformOS = "ios" | "android" | "web";
 type Luminance = "light" | "lighter" | "dark" | "darker";
 
 // Changes a color luminance
-export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
-  // Validate hex string, strip "#" if present.
-  hex = String(hex).replace(/[^0-9a-f]/gi, "");
-  if (hex.length === 3) {
-    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  } else if (hex.length !== 6) {
-    throw new Error(`Invalid color hex: ${hex}`);
+export const changeColorLuminance = (hex: string, luminanceChange: Luminance) => {
+  let normalizedHex = String(hex).replace(/[^0-9a-f]/gi, "");
+  if (normalizedHex.length === 3) {
+    normalizedHex =
+      normalizedHex[0] +
+      normalizedHex[0] +
+      normalizedHex[1] +
+      normalizedHex[1] +
+      normalizedHex[2] +
+      normalizedHex[2];
+  } else if (normalizedHex.length !== 6) {
+    throw new Error(`Invalid color hex: ${normalizedHex}`);
   }
   let luminance: number;
   switch (luminanceChange) {
@@ -44,19 +49,17 @@ export function changeColorLuminance(hex: string, luminanceChange: Luminance) {
       throw new Error(`Cannot change luminance to ${luminanceChange}`);
   }
 
-  // Convert to decimal and change luminosity
   let rgb = "#";
   for (let i = 0; i < 3; i++) {
-    const decimal = parseInt(hex.substr(i * 2, 2), 16);
+    const decimal = parseInt(normalizedHex.substr(i * 2, 2), 16);
     const appliedLuminance = Math.round(
       Math.min(Math.max(0, decimal + decimal * luminance), 255)
     ).toString(16);
-    // 0 pad, if necessary.
     rgb += `00${appliedLuminance}`.substr(appliedLuminance.length);
   }
 
   return rgb;
-}
+};
 
 class UnifierClass {
   private _web = false;

package/src/Utilities.tsx

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

package/src/WebAddressAutocomplete.test.tsx

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

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