@terreno/ui 0.13.0 → 0.13.3

package/src/Theme.tsx

@@ -172,18 +172,21 @@ const computeTheme = (
       return acc;
     }
     const value = themeConfig[key as keyof TerrenoThemeConfig] ?? {};
-    acc[key as keyof TerrenoTheme] = Object.keys(value).reduce((accKey, valueKey) => {
-      const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
-      if (key === "font") {
-        accKey[valueKey] = primitiveKey;
-      } else {
-        if (primitives[primitiveKey] === undefined) {
-          console.error(`Primitive ${primitiveKey} not found in theme.`);
+    (acc as unknown as Record<string, unknown>)[key] = Object.keys(value).reduce(
+      (accKey, valueKey) => {
+        const primitiveKey = value[valueKey as keyof typeof value] as keyof ThemePrimitives;
+        if (key === "font") {
+          accKey[valueKey] = primitiveKey;
+        } else {
+          if (primitives[primitiveKey] === undefined) {
+            console.error(`Primitive ${primitiveKey} not found in theme.`);
+          }
+          accKey[valueKey] = primitives[primitiveKey];
         }
-        accKey[valueKey as keyof typeof accKey] = primitives[primitiveKey];
-      }
-      return accKey;
-    }, {} as any);
+        return accKey;
+      },
+      {} as Record<string, string | number>
+    );
     return acc;
   }, {} as TerrenoTheme);
   return {...theme, primitives};
@@ -199,7 +202,7 @@ export const ThemeContext = createContext({
 });
 
 interface ThemeProviderProps {
-  children: any;
+  children: React.ReactNode;
 }
 
 export const ThemeProvider = ({children}: ThemeProviderProps) => {
@@ -225,12 +228,12 @@ export const ThemeProvider = ({children}: ThemeProviderProps) => {
           const prevSubTheme = prev[key as keyof TerrenoThemeConfig];
 
           if (newSubTheme && typeof newSubTheme === "object") {
-            (mergedTheme as any)[key as keyof TerrenoThemeConfig] = {
+            (mergedTheme as Record<string, unknown>)[key] = {
               ...prevSubTheme,
               ...newSubTheme,
             };
           } else {
-            mergedTheme[key as keyof TerrenoThemeConfig] = newSubTheme as any;
+            (mergedTheme as Record<string, unknown>)[key] = newSubTheme;
           }
         }
       }

package/src/Tooltip.test.tsx

@@ -6,6 +6,20 @@ import {Text} from "./Text";
 import {Tooltip} from "./Tooltip";
 import {renderWithTheme} from "./test-utils";
 
+// Minimal shape of the tree returned by toJSON() that we rely on here.
+interface TestNode {
+  type: string;
+  props: {
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+    onTouchStart?: (event?: {nativeEvent: object}) => void;
+    onLayout?: (event: {
+      nativeEvent: {layout: {height: number; width: number; x: number; y: number}};
+    }) => void;
+  };
+  children: null | Array<TestNode | string>;
+}
+
 // Mock react-native-portalize so Portal renders inline in tests
 mock.module("react-native-portalize", () => ({
   Host: ({children}: {children: React.ReactNode}) => <View testID="portal-host">{children}</View>,
@@ -13,10 +27,10 @@ mock.module("react-native-portalize", () => ({
 }));
 
 beforeAll(() => {
-  (global as any).requestAnimationFrame = (callback: FrameRequestCallback) => {
+  globalThis.requestAnimationFrame = (callback: FrameRequestCallback) => {
     return setTimeout(() => callback(Date.now()), 0) as unknown as number;
   };
-  (global as any).cancelAnimationFrame = (id: number) => {
+  globalThis.cancelAnimationFrame = (id: number) => {
     clearTimeout(id);
   };
 });
@@ -111,14 +125,14 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const wrapper = toJSON() as any;
+    const wrapper = toJSON();
     expect(wrapper).toBeTruthy();
     expect(queryByTestId("tooltip-container")).toBeNull();
 
-    const tree = toJSON();
+    const tree = toJSON() as TestNode | null;
     await act(async () => {
       // Trigger pointer enter on the wrapper
-      const root = (tree as any).children?.[0];
+      const root = tree?.children?.[0] as TestNode | undefined;
       if (root?.props?.onPointerEnter) {
         root.props.onPointerEnter();
       }
@@ -138,8 +152,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onTouchStart?.({nativeEvent: {}});
@@ -151,8 +165,10 @@ describe("Tooltip", () => {
     expect(queryByTestId("tooltip-container")).toBeTruthy();
 
     // Second touch should hide
-    const treeAfterShow = toJSON() as any;
-    const updatedRoot = treeAfterShow.children?.[treeAfterShow.children.length - 1];
+    const treeAfterShow = toJSON() as TestNode;
+    const updatedRoot = (treeAfterShow.children as Array<TestNode | string>)[
+      (treeAfterShow.children as Array<TestNode | string>).length - 1
+    ] as TestNode;
     await act(async () => {
       updatedRoot.props.onTouchStart?.({nativeEvent: {}});
     });
@@ -167,8 +183,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onPointerEnter?.();
@@ -179,8 +195,10 @@ describe("Tooltip", () => {
 
     expect(queryByTestId("tooltip-container")).toBeTruthy();
 
-    const treeAfter = toJSON() as any;
-    const wrapper = treeAfter.children?.[treeAfter.children.length - 1];
+    const treeAfter = toJSON() as TestNode;
+    const wrapper = (treeAfter.children as Array<TestNode | string>)[
+      (treeAfter.children as Array<TestNode | string>).length - 1
+    ] as TestNode;
     await act(async () => {
       wrapper.props.onPointerLeave?.();
     });
@@ -206,8 +224,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     await act(async () => {
       root.props.onPointerEnter?.();
@@ -227,8 +245,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
 
     // Show the tooltip
     await act(async () => {
@@ -241,11 +259,12 @@ describe("Tooltip", () => {
 
     // Find any views with onLayout to simulate layout event
     const {View: ViewComp} = await import("react-native");
-    const allViews = UNSAFE_getAllByType(ViewComp as any);
+    const allViews = UNSAFE_getAllByType(ViewComp);
     for (const v of allViews) {
-      if ((v.props as any).onLayout) {
+      const props = v.props as TestNode["props"];
+      if (props.onLayout) {
         await act(async () => {
-          (v.props as any).onLayout({
+          props.onLayout?.({
             nativeEvent: {
               layout: {height: 100, width: 200, x: 0, y: 0},
             },
@@ -280,8 +299,8 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    const tree = toJSON() as any;
-    const root = tree.children?.[0];
+    const tree = toJSON() as TestNode;
+    const root = tree.children?.[0] as TestNode;
     await act(async () => {
       root.props.onPointerEnter?.();
     });

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

@@ -421,7 +421,6 @@ exports[`AddressField renders correctly with default props 1`] = `
                   },
                 ],
                 "props": {
-                  "activeOpacity": 1,
                   "onPress": [Function],
                   "style": {
                     "alignItems": "center",

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

@@ -57,7 +57,6 @@ exports[`CustomSelectField renders correctly with default props 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -385,7 +384,6 @@ exports[`CustomSelectField renders with title 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -698,7 +696,6 @@ exports[`CustomSelectField renders with placeholder 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1011,7 +1008,6 @@ exports[`CustomSelectField renders with selected value 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1324,7 +1320,6 @@ exports[`CustomSelectField renders with custom value (not in options) 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -1741,7 +1736,6 @@ exports[`CustomSelectField renders disabled state 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",
@@ -2056,7 +2050,6 @@ exports[`CustomSelectField includes custom option in dropdown 1`] = `
                     },
                   ],
                   "props": {
-                    "activeOpacity": 1,
                     "onPress": [Function],
                     "style": {
                       "alignItems": "center",

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

@@ -1224,7 +1224,6 @@ exports[`Field renders time field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -1494,7 +1493,6 @@ exports[`Field renders time field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2219,7 +2217,6 @@ exports[`Field renders datetime field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2489,7 +2486,6 @@ exports[`Field renders datetime field 1`] = `
                         },
                       ],
                       "props": {
-                        "activeOpacity": 1,
                         "onPress": [Function],
                         "style": {
                           "alignItems": "center",
@@ -2860,7 +2856,6 @@ exports[`Field renders select field 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -3737,7 +3732,6 @@ exports[`Field renders address field 1`] = `
                   },
                 ],
                 "props": {
-                  "activeOpacity": 1,
                   "onPress": [Function],
                   "style": {
                     "alignItems": "center",

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

@@ -48,7 +48,6 @@ exports[`PickerSelect renders correctly with default props 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -313,7 +312,6 @@ exports[`PickerSelect renders with selected value 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -578,7 +576,6 @@ exports[`PickerSelect renders disabled state 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -845,7 +842,6 @@ exports[`PickerSelect renders without placeholder when placeholder is empty obje
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1100,7 +1096,6 @@ exports[`PickerSelect matches items by itemKey 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1355,7 +1350,6 @@ exports[`PickerSelect renders custom InputAccessoryView 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",
@@ -1541,7 +1535,6 @@ exports[`PickerSelect passes textInputProps to TextInput 1`] = `
         },
       ],
       "props": {
-        "activeOpacity": 1,
         "onPress": [Function],
         "style": {
           "alignItems": "center",

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

@@ -51,7 +51,6 @@ exports[`SelectField renders correctly with default props 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -341,7 +340,6 @@ exports[`SelectField renders with title 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -616,7 +614,6 @@ exports[`SelectField renders with selected value 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -891,7 +888,6 @@ exports[`SelectField renders with custom placeholder 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -1166,7 +1162,6 @@ exports[`SelectField renders disabled state 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -1443,7 +1438,6 @@ exports[`SelectField renders with requireValue (no clear option) 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",

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

@@ -27,15 +27,8 @@ exports[`TerrenoProvider renders correctly with default props 1`] = `
       },
     ],
     "props": {
-      "collapsable": false,
-      "pointerEvents": "box-none",
-      "style": [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ],
-      "testID": undefined,
+      "style": undefined,
+      "testID": "portal-host",
     },
     "type": "View",
   },
@@ -123,15 +116,8 @@ exports[`TerrenoProvider renders with openAPISpecUrl 1`] = `
       },
     ],
     "props": {
-      "collapsable": false,
-      "pointerEvents": "box-none",
-      "style": [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ],
-      "testID": undefined,
+      "style": undefined,
+      "testID": "portal-host",
     },
     "type": "View",
   },

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

@@ -66,7 +66,6 @@ exports[`TimezonePicker renders correctly with default props 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -381,7 +380,6 @@ exports[`TimezonePicker hides title when hideTitle is true 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -711,7 +709,6 @@ exports[`TimezonePicker renders with selected timezone 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -1041,7 +1038,6 @@ exports[`TimezonePicker renders USA timezones by default 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -1371,7 +1367,6 @@ exports[`TimezonePicker renders with short timezone labels 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",
@@ -1701,7 +1696,6 @@ exports[`TimezonePicker calls onChange when timezone is selected 1`] = `
             },
           ],
           "props": {
-            "activeOpacity": 1,
             "onPress": [Function],
             "style": {
               "alignItems": "center",

package/src/bunSetup.ts

@@ -530,6 +530,28 @@ mock.module("react-native-signature-canvas", () => ({
   Signature: mock(() => null),
 }));
 
+// Mock react-signature-canvas (web). The real module references `window` at
+// import time, which doesn't exist under bun test.
+mock.module("react-signature-canvas", () => {
+  const SignatureCanvasMock = React.forwardRef(
+    ({backgroundColor}: {backgroundColor?: string}, _ref) =>
+      React.createElement("View", {style: {backgroundColor}, testID: "signature-canvas"})
+  );
+  return {__esModule: true, default: SignatureCanvasMock};
+});
+
+// Mock react-native-portalize. The real `Host` wraps children in an extra View
+// whose presence makes snapshots brittle, and individual tests already mock
+// this to render inline; hoisting the mock to setup keeps test ordering from
+// leaking different shapes into other test files. Shape matches the per-file
+// 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),
+  Portal: ({children}: MockComponentProps) =>
+    React.createElement("View", {style: undefined, testID: "portal"}, children),
+}));
+
 // Mock IconButton component
 mock.module("./IconButton", () => ({
   IconButton: mock(() => null),

package/src/table/__snapshots__/TableBadge.test.tsx.snap

@@ -485,7 +485,6 @@ exports[`TableBadge renders select field when editing 1`] = `
                 },
               ],
               "props": {
-                "activeOpacity": 1,
                 "onPress": [Function],
                 "style": {
                   "alignItems": "center",

package/src/useConsentForms.test.ts

@@ -149,4 +149,29 @@ describe("useConsentForms", () => {
     const {result} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi));
     expect(result.current.error).toBe("error");
   });
+
+  it("injects the pending-consents endpoint only once per (api, baseUrl)", () => {
+    let injectCallCount = 0;
+    const refetch = mock(() => {});
+    const useGetPendingConsentsQuery = mock(() => ({
+      data: undefined,
+      error: undefined,
+      isLoading: false,
+      refetch,
+    }));
+    const api = {
+      enhanceEndpoints: () => ({
+        injectEndpoints: () => {
+          injectCallCount += 1;
+          return {useGetPendingConsentsQuery};
+        },
+      }),
+    };
+    const {rerender} = renderHook(() => useConsentForms(api as unknown as ConsentFormsApi));
+    rerender(undefined);
+    rerender(undefined);
+    // The hook reuses the cached enhanced api after the first render so the
+    // dev-mode RTK warning about re-injecting endpoints never fires.
+    expect(injectCallCount).toBe(1);
+  });
 });

package/src/useConsentForms.ts

@@ -41,13 +41,15 @@ interface ConsentFormsHookState {
   refetch: () => void | Promise<void>;
 }
 
+interface ConsentFormsEnhancedApi {
+  useGetPendingConsentsQuery: () => ConsentFormsHookState;
+}
+
 interface ConsentFormsApiWithTags {
   injectEndpoints: (options: {
     endpoints: (build: ConsentFormsQueryBuilder) => {getPendingConsents: unknown};
     overrideExisting: boolean;
-  }) => {
-    useGetPendingConsentsQuery: () => ConsentFormsHookState;
-  };
+  }) => ConsentFormsEnhancedApi;
 }
 
 interface ConsentFormsApi {
@@ -73,11 +75,27 @@ export const detectLocale = (): string => {
   return "en";
 };
 
-export const useConsentForms = (api: ConsentFormsApi, baseUrl?: string) => {
-  const base = baseUrl || "";
-  const apiWithConsentTags = api.enhanceEndpoints({addTagTypes: ["PendingConsents"]});
+/**
+ * Cache the enhanced api per (api, baseUrl). `injectEndpoints` logs a console
+ * error in development whenever an endpoint with the same name is re-injected
+ * (with `overrideExisting: false`), so calling it on every render of every
+ * consumer would flood the console. WeakMap-by-api lets the GC reclaim entries
+ * when the api object is unreachable.
+ */
+const enhancedApiCache = new WeakMap<ConsentFormsApi, Map<string, ConsentFormsEnhancedApi>>();
 
-  const enhancedApi = apiWithConsentTags.injectEndpoints({
+const getEnhancedApi = (api: ConsentFormsApi, base: string): ConsentFormsEnhancedApi => {
+  let byBase = enhancedApiCache.get(api);
+  if (!byBase) {
+    byBase = new Map();
+    enhancedApiCache.set(api, byBase);
+  }
+  const cached = byBase.get(base);
+  if (cached) {
+    return cached;
+  }
+  const apiWithConsentTags = api.enhanceEndpoints({addTagTypes: ["PendingConsents"]});
+  const enhanced = apiWithConsentTags.injectEndpoints({
     endpoints: (build) => ({
       getPendingConsents: build.query({
         async onQueryStarted(_arg: unknown, {queryFulfilled}) {
@@ -97,6 +115,13 @@ export const useConsentForms = (api: ConsentFormsApi, baseUrl?: string) => {
     }),
     overrideExisting: false,
   });
+  byBase.set(base, enhanced);
+  return enhanced;
+};
+
+export const useConsentForms = (api: ConsentFormsApi, baseUrl?: string) => {
+  const base = baseUrl || "";
+  const enhancedApi = getEnhancedApi(api, base);
 
   const {data, isLoading, error, refetch} = enhancedApi.useGetPendingConsentsQuery();
   const forms: ConsentFormPublic[] = Array.isArray(data) ? data : (data?.data ?? []);