@terreno/ui 0.13.3 → 0.14.1

package/src/Unifier.ts

@@ -8,6 +8,7 @@ import {requestPermissions} from "./Permissions";
 
 declare global {
   interface Window {
+    // biome-ignore lint/suspicious/noExplicitAny: Google Maps JS SDK global type is loaded dynamically and not bundled as a typed dependency
     google: any;
   }
 }
@@ -17,15 +18,20 @@ 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;
+  let luminance: number;
   switch (luminanceChange) {
     case "light":
       luminance = -0.2;
@@ -43,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;
@@ -127,7 +131,7 @@ class UnifierClass {
   };
 
   storage = {
-    getItem: async (key: string, defaultValue?: any) => {
+    getItem: async (key: string, defaultValue?: unknown) => {
       try {
         const jsonValue = await AsyncStorage.getItem(key);
         if (jsonValue) {
@@ -147,13 +151,13 @@ class UnifierClass {
         return defaultValue || null;
       }
     },
-    setItem: async (key: string, item: any) => {
+    setItem: async (key: string, item: unknown) => {
       try {
         const jsonValue = JSON.stringify(item);
         await AsyncStorage.setItem(key, jsonValue);
-      } catch (error: any) {
+      } catch (error: unknown) {
         console.error(`[storage] Error storing ${key}`, item, error);
-        throw new Error(error);
+        throw new Error(error instanceof Error ? error.message : String(error));
       }
     },
   };

package/src/Utilities.tsx

@@ -6,7 +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(inlineStyle?: any, newStyle?: any) {
+export const mergeInlineStyles = (
+  inlineStyle?: {__style?: Record<string, unknown>} | undefined,
+  newStyle?: Record<string, unknown> | undefined
+) => {
   const inline = get(inlineStyle, "__style");
   return {
     __style: {
@@ -14,14 +17,14 @@ export function mergeInlineStyles(inlineStyle?: any, newStyle?: any) {
       ...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;
@@ -104,7 +107,7 @@ export const toProps = ({
   className,
   inlineStyle,
 }: Style): {className: string; style: InlineStyle} => {
-  const props: any = {};
+  const props: {className?: string; style?: InlineStyle} = {};
 
   if (className.size > 0) {
     // Sorting here ensures that classNames are always stable, reducing diff
@@ -117,7 +120,7 @@ export const toProps = ({
     props.style = inlineStyle;
   }
 
-  return props;
+  return props as {className: string; style: InlineStyle};
 };
 
 /*
@@ -167,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;
       }
-    | any
-): (val: T) => Style {
+    | Record<string, string>
+): ((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.
@@ -291,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()
@@ -314,16 +315,16 @@ export function formattedCountyCode(state: string, countyName: string): string {
   }
 
   return `${countyData.stateFP}${countyData.countyFP}`;
-}
+};
 
-export function isAPIError(error: any): error is APIError {
-  return error?.data?.title;
-}
+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,143 @@ 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");
+    });
   });
 });

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", () => {

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

@@ -1117,7 +1117,9 @@ exports[`AddressField renders correctly with default props 1`] = `
           },
         ],
         "props": {
-          "style": undefined,
+          "style": {
+            "width": "100%",
+          },
           "testID": undefined,
         },
         "type": "View",

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

@@ -45,9 +45,12 @@ exports[`Button renders correctly with default props 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Click me",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Click me",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -64,7 +67,7 @@ exports[`Button renders correctly with default props 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -113,9 +116,12 @@ exports[`Button renders primary variant 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Primary",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Primary",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -132,7 +138,7 @@ exports[`Button renders primary variant 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -181,9 +187,12 @@ exports[`Button renders secondary variant 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Secondary",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Secondary",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -200,7 +209,7 @@ exports[`Button renders secondary variant 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -249,9 +258,12 @@ exports[`Button renders muted variant 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Muted",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Muted",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -268,7 +280,7 @@ exports[`Button renders muted variant 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -317,9 +329,12 @@ exports[`Button renders outline variant 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Outline",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Outline",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -336,7 +351,7 @@ exports[`Button renders outline variant 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -385,9 +400,12 @@ exports[`Button renders destructive variant 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Delete",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Delete",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -404,7 +422,7 @@ exports[`Button renders destructive variant 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -453,8 +471,11 @@ exports[`Button renders disabled state 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Disabled",
-    "aria-role": "button",
+    "accessibilityLabel": "Disabled",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": true,
+    },
     "disabled": true,
     "onPress": [Function: debounced],
     "style": {
@@ -521,8 +542,11 @@ exports[`Button applies disabled styles when disabled 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Disabled",
-    "aria-role": "button",
+    "accessibilityLabel": "Disabled",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": true,
+    },
     "disabled": true,
     "onPress": [Function: debounced],
     "style": {
@@ -612,8 +636,11 @@ exports[`Button renders loading state 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Loading",
-    "aria-role": "button",
+    "accessibilityLabel": "Loading",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": true,
+    },
     "disabled": true,
     "onPress": [Function: debounced],
     "style": {
@@ -680,9 +707,12 @@ exports[`Button renders fullWidth button 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Full Width",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Full Width",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -699,7 +729,7 @@ exports[`Button renders fullWidth button 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -761,9 +791,12 @@ exports[`Button renders with icon on left 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "With Icon",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "With Icon",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -780,7 +813,7 @@ exports[`Button renders with icon on left 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -842,9 +875,12 @@ exports[`Button renders with icon on right 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Next",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Next",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -861,7 +897,7 @@ exports[`Button renders with icon on right 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -910,9 +946,12 @@ exports[`Button renders with confirmation modal props 1`] = `
   ],
   "props": {
     "accessibilityHint": "Opens a confirmation dialog",
-    "aria-label": "Delete",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Delete",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -929,7 +968,7 @@ exports[`Button renders with confirmation modal props 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;
 
@@ -978,9 +1017,12 @@ exports[`Button renders with tooltip on desktop (wrapped in Tooltip) 1`] = `
   ],
   "props": {
     "accessibilityHint": "Press to perform action",
-    "aria-label": "Hover me",
-    "aria-role": "button",
-    "disabled": undefined,
+    "accessibilityLabel": "Hover me",
+    "accessibilityRole": "button",
+    "accessibilityState": {
+      "disabled": false,
+    },
+    "disabled": false,
     "onPress": [Function: debounced],
     "style": {
       "alignItems": "center",
@@ -997,6 +1039,6 @@ exports[`Button renders with tooltip on desktop (wrapped in Tooltip) 1`] = `
     },
     "testID": undefined,
   },
-  "type": "Pressable",
+  "type": "PressableScale",
 }
 `;