@terreno/ui 0.13.3 → 0.14.1

package/src/ActionSheet.tsx

@@ -56,7 +56,7 @@ export const styles = StyleSheet.create({
   },
 });
 
-export function getDeviceHeight(statusBarTranslucent: boolean | undefined): number {
+export const getDeviceHeight = (statusBarTranslucent: boolean | undefined): number => {
   const height = Dimensions.get("window").height;
 
   if (Platform.OS === "android" && !statusBarTranslucent) {
@@ -64,7 +64,7 @@ export function getDeviceHeight(statusBarTranslucent: boolean | undefined): numb
   }
 
   return height;
-}
+};
 
 export const getElevation = (elevation?: number) => {
   if (!elevation) {
@@ -133,7 +133,7 @@ const defaultProps = {
 
 type Props = Partial<typeof defaultProps> & ActionSheetProps;
 
-export class ActionSheet extends Component<Props, State, any> {
+export class ActionSheet extends Component<Props, State, unknown> {
   static defaultProps = defaultProps;
 
   actionSheetHeight = 0;
@@ -144,7 +144,7 @@ export class ActionSheet extends Component<Props, State, any> {
 
   prevScroll = 0;
 
-  timeout: any | null = null;
+  timeout: ReturnType<typeof setTimeout> | null = null;
 
   offsetY = 0;
 
@@ -164,8 +164,10 @@ export class ActionSheet extends Component<Props, State, any> {
 
   deviceLayoutCalled = false;
 
+  // biome-ignore lint/suspicious/noExplicitAny: FlatList ref is accessed via internal _listRef._scrollRef which is not part of the public type
   scrollViewRef: React.RefObject<any>;
 
+  // biome-ignore lint/suspicious/noExplicitAny: SafeAreaView ref is passed to findNodeHandle and accessed via untyped React Native internals
   safeAreaViewRef: React.RefObject<any>;
 
   transformValue: Animated.Value;
@@ -669,7 +671,7 @@ export class ActionSheet extends Component<Props, State, any> {
     this.keyboardDidHideListener?.remove();
   }
 
-  _onDeviceLayout = async (_event: any) => {
+  _onDeviceLayout = async (_event: LayoutChangeEvent) => {
     const event = {..._event};
 
     if (this.timeout) {
@@ -721,7 +723,7 @@ export class ActionSheet extends Component<Props, State, any> {
     return scrollPosition;
   }
 
-  _keyExtractor = (item: any) => item;
+  _keyExtractor = (item: string) => item;
 
   render() {
     const {scrollable, modalVisible, keyboard} = this.state;

package/src/Avatar.tsx

@@ -3,7 +3,14 @@ import {launchImageLibraryAsync} from "expo-image-picker";
 import {LinearGradient} from "expo-linear-gradient";
 import type React from "react";
 import {type FC, useState} from "react";
-import {Image, Pressable, Text, View} from "react-native";
+import {
+  Image,
+  type ImageErrorEventData,
+  type NativeSyntheticEvent,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
 
 import type {AvatarProps, CustomSvgProps} from "./Common";
 import {Icon} from "./Icon";
@@ -88,7 +95,7 @@ export const Avatar: FC<AvatarProps> = ({
     console.warn("Avatars with the status of 'imagePicker' should also have an onChange property.");
   }
 
-  const handleImageError = (event: any) => {
+  const handleImageError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
     setIsImageLoaded(false);
     console.warn("Image load error: ", event);
   };

package/src/Badge.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it} from "bun:test";
 
 import {Badge} from "./Badge";

package/src/Banner.test.tsx

@@ -168,4 +168,75 @@ describe("Banner", () => {
       expect(setItemMock).not.toHaveBeenCalled();
     });
   });
+
+  it("hides banner when storage already has the dismissed flag", async () => {
+    const getItemMock = Unifier.storage.getItem as ReturnType<typeof mock>;
+    getItemMock.mockReturnValueOnce(Promise.resolve("true"));
+
+    const {queryByText} = renderWithTheme(
+      <Banner dismissible id="stored-banner" text="Previously dismissed" />
+    );
+
+    await waitFor(() => {
+      expect(queryByText("Previously dismissed")).toBeNull();
+    });
+  });
+
+  it("exercises the async .then path in useEffect", async () => {
+    const getItemMock = Unifier.storage.getItem as ReturnType<typeof mock>;
+    getItemMock.mockReturnValueOnce(Promise.resolve(null));
+
+    const {queryByText} = renderWithTheme(
+      <Banner dismissible id="flush-banner" text="Flush banner" />
+    );
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(queryByText("Flush banner")).toBeTruthy();
+  });
+
+  it("renders button without icon name (text-only button path)", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText} = renderWithTheme(
+      <Banner
+        buttonOnClick={handleClick}
+        buttonText="TextOnly"
+        id="textonly-banner"
+        text="Banner"
+      />
+    );
+    expect(getByText("TextOnly")).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.press(getByText("TextOnly"));
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    await waitFor(() => {
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  it("covers catch block when buttonOnClick rejects", async () => {
+    const handleClick = mock(() => Promise.reject(new Error("boom")));
+    const {UNSAFE_root} = renderWithTheme(
+      <Banner buttonOnClick={handleClick} buttonText="Fail" id="catch-banner" text="Banner" />
+    );
+
+    const pressable = UNSAFE_root.findAll(
+      (node) => node.props?.["aria-label"] === "Fail" && typeof node.props?.onPress === "function"
+    )[0];
+
+    try {
+      await act(async () => {
+        await pressable.props.onPress();
+      });
+    } catch (_e) {
+      // Expected: catch block in BannerButton re-throws
+    }
+
+    expect(handleClick).toHaveBeenCalled();
+  });
 });

package/src/Banner.tsx

@@ -54,7 +54,7 @@ const BannerButton = ({
         alignItems: "center",
         alignSelf: "stretch",
         backgroundColor: theme.surface.base,
-        borderRadius: theme.radius.rounded as any,
+        borderRadius: theme.radius.rounded,
         flexDirection: "column",
         justifyContent: "center",
         paddingHorizontal: 12,

package/src/Box.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock, spyOn} from "bun:test";
 import {act, fireEvent} from "@testing-library/react-native";
 import React from "react";

package/src/Box.tsx

@@ -86,7 +86,9 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
 
   const BOX_STYLE_MAP: {
     [prop: string]: (
+      // biome-ignore lint/suspicious/noExplicitAny: Box's style mapper accepts heterogeneous prop values (spacing, colors, dimensions, theme tokens, booleans) that cannot be enumerated in a single union; the mapper functions narrow at call site
       value: any,
+      // biome-ignore lint/suspicious/noExplicitAny: see above - heterogeneous prop values
       all: {[prop: string]: any}
     ) => {[style: string]: string | number} | {};
   } = {
@@ -125,8 +127,8 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     },
     bottom: (bottom) => ({bottom: bottom ? 0 : undefined}),
     color: (value: keyof SurfaceTheme) => ({backgroundColor: theme.surface[value]}),
-    direction: (value: any) => ({display: "flex", flexDirection: value}),
-    display: (value: any) => {
+    direction: (value: "row" | "column") => ({display: "flex", flexDirection: value}),
+    display: (value: "none" | "flex" | "block" | "inlineBlock" | "visuallyHidden") => {
       if (value === "none") {
         return {display: "none"};
       }
@@ -157,7 +159,7 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     },
     justifyContent: (value: JustifyContent) => ({justifyContent: ALIGN_CONTENT[value]}),
     left: (left) => ({left: left ? 0 : undefined}),
-    lgDirection: (value: any) =>
+    lgDirection: (value: "row" | "column") =>
       mediaQueryLargerThan("lg") ? {display: "flex", flexDirection: value} : {},
     margin: (value) => ({margin: getSpacing(value)}),
     marginBottom: (value) => ({marginBottom: getSpacing(value)}),
@@ -182,7 +184,7 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
       }
       return {maxWidth: value};
     },
-    mdDirection: (value: any) =>
+    mdDirection: (value: "row" | "column") =>
       mediaQueryLargerThan("md") ? {display: "flex", flexDirection: value} : {},
     minHeight: (value) => {
       if (!isValidWidthHeight(value)) {
@@ -240,7 +242,7 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
         return {elevation: 4};
       }
     },
-    smDirection: (value: any) =>
+    smDirection: (value: "row" | "column") =>
       mediaQueryLargerThan("sm") ? {display: "flex", flexDirection: value} : {},
     top: (top) => ({top: top ? 0 : undefined}),
     width: (value) => {
@@ -262,7 +264,9 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
 
   const scrollRef = props.scrollRef ?? React.createRef();
 
+  // biome-ignore lint/suspicious/noExplicitAny: the style object is assembled from heterogeneous mapper outputs and consumed by RN ViewStyle which has narrow union types per property
   const propsToStyle = (): any => {
+    // biome-ignore lint/suspicious/noExplicitAny: same as above - heterogeneous style assembly
     let style: any = {};
     for (const prop of Object.keys(props) as Array<keyof typeof props>) {
       const value = props[prop];
@@ -294,7 +298,7 @@ export const Box = React.forwardRef((props: BoxProps, ref) => {
     await props.onHoverEnd?.();
   };
 
-  let box;
+  let box: React.ReactElement;
 
   // Adding the accessibilityRole of button throws a warning in React Native since we nest buttons
   // within Box and RN does not support nested buttons

package/src/Button.test.tsx

@@ -56,6 +56,28 @@ describe("Button", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it("defaults to scale press animation", () => {
+    const tree = renderWithTheme(<Button onClick={() => {}} text="Default animation" />).toJSON();
+    expect(Array.isArray(tree)).toBe(false);
+    expect(tree?.type).toBe("PressableScale");
+  });
+
+  it("renders opacity press animation", () => {
+    const tree = renderWithTheme(
+      <Button onClick={() => {}} pressAnimation="opacity" text="Opacity" />
+    ).toJSON();
+    expect(Array.isArray(tree)).toBe(false);
+    expect(tree?.type).toBe("PressableOpacity");
+  });
+
+  it("renders no press animation", () => {
+    const tree = renderWithTheme(
+      <Button onClick={() => {}} pressAnimation="none" text="No animation" />
+    ).toJSON();
+    expect(Array.isArray(tree)).toBe(false);
+    expect(tree?.type).toBe("PressableWithoutFeedback");
+  });
+
   // Disabled state
   it("renders disabled state", () => {
     const {toJSON} = renderWithTheme(<Button disabled onClick={() => {}} text="Disabled" />);
@@ -111,6 +133,19 @@ describe("Button", () => {
     });
   });
 
+  it("does not call onClick again on the trailing debounce edge after rapid presses", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText} = renderWithTheme(<Button onClick={handleClick} text="Click" />);
+
+    await act(async () => {
+      fireEvent.press(getByText("Click"));
+      fireEvent.press(getByText("Click"));
+      await new Promise((resolve) => setTimeout(resolve, 700));
+    });
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
   // Confirmation modal tests
   it("renders with confirmation modal props", () => {
     const {toJSON} = renderWithTheme(

package/src/Button.tsx

@@ -1,10 +1,17 @@
 import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
 import debounce from "lodash/debounce";
-import {type FC, lazy, Suspense, useMemo, useState} from "react";
-import {ActivityIndicator, Pressable, Text, View} from "react-native";
+import {
+  type CustomPressableProps,
+  PressableOpacity,
+  PressableScale,
+  PressableWithoutFeedback,
+} from "pressto";
+import type React from "react";
+import {lazy, Suspense, useCallback, useMemo, useState} from "react";
+import {ActivityIndicator, Pressable, type PressableProps, Text, View} from "react-native";
 
 import {Box} from "./Box";
-import type {ButtonProps} from "./Common";
+import type {ButtonPressAnimation, ButtonProps} from "./Common";
 import {isMobileDevice} from "./MediaQuery";
 import {useTheme} from "./Theme";
 import {Tooltip} from "./Tooltip";
@@ -14,7 +21,20 @@ import {isNative} from "./Utilities";
 // Lazy load Modal to break the circular dependency: Modal -> Button -> Modal
 const LazyModal = lazy(() => import("./Modal").then((module) => ({default: module.Modal})));
 
-const ButtonComponent: FC<ButtonProps> = ({
+const DEFAULT_BUTTON_PRESS_ANIMATION: ButtonPressAnimation = "scale";
+
+const PRESSABLE_BY_ANIMATION: Record<
+  ButtonPressAnimation,
+  React.ComponentType<CustomPressableProps>
+> = {
+  none: PressableWithoutFeedback,
+  opacity: PressableOpacity,
+  scale: PressableScale,
+};
+
+type ButtonPressableProps = CustomPressableProps & PressableProps;
+
+const ButtonComponent: React.FC<ButtonProps> = ({
   confirmationText = "Are you sure you want to continue?",
   disabled = false,
   fullWidth = false,
@@ -23,6 +43,7 @@ const ButtonComponent: FC<ButtonProps> = ({
   loading: propsLoading,
   modalTitle = "Confirm",
   modalSubTitle,
+  pressAnimation = DEFAULT_BUTTON_PRESS_ANIMATION,
   testID,
   text,
   variant = "primary",
@@ -66,41 +87,51 @@ const ButtonComponent: FC<ButtonProps> = ({
     };
   }, [disabled, variant, theme]);
 
+  const handlePress = useCallback(async (): Promise<void> => {
+    await Unifier.utils.haptic();
+    setLoading(true);
+
+    try {
+      // If a confirmation is required, and the confirmation modal is not currently open,
+      // open it.
+      if (withConfirmation && !showConfirmation) {
+        setShowConfirmation(true);
+      } else if (!withConfirmation && onClick) {
+        // If a confirmation is not required, perform the action.
+        await onClick();
+      }
+    } catch (error) {
+      setLoading(false);
+      throw error;
+    }
+    setLoading(false);
+  }, [onClick, showConfirmation, withConfirmation]);
+
+  const debouncedHandlePress = useMemo(
+    () => debounce(handlePress, 500, {leading: true, trailing: false}),
+    [handlePress]
+  );
+
   if (!theme) {
     return null;
   }
 
+  const isPressDisabled = disabled || Boolean(loading);
+  const PressableComponent = (
+    isPressDisabled ? Pressable : PRESSABLE_BY_ANIMATION[pressAnimation]
+  ) as React.ComponentType<ButtonPressableProps>;
+  const pressableInteractionProps = isPressDisabled ? {disabled: true} : {enabled: true};
+
   return (
-    <Pressable
+    <PressableComponent
       accessibilityHint={
         withConfirmation ? "Opens a confirmation dialog" : "Press to perform action"
       }
-      aria-label={text}
-      aria-role="button"
-      disabled={disabled || loading}
-      onPress={debounce(
-        async () => {
-          await Unifier.utils.haptic();
-          setLoading(true);
-
-          try {
-            // If a confirmation is required, and the confirmation modal is not currently open,
-            // open it
-            if (withConfirmation && !showConfirmation) {
-              setShowConfirmation(true);
-            } else if (!withConfirmation && onClick) {
-              // If a confirmation is not required, perform the action.
-              await onClick();
-            }
-          } catch (error) {
-            setLoading(false);
-            throw error;
-          }
-          setLoading(false);
-        },
-        500,
-        {leading: true}
-      )}
+      accessibilityLabel={text}
+      accessibilityRole="button"
+      accessibilityState={{disabled: isPressDisabled}}
+      {...pressableInteractionProps}
+      onPress={debouncedHandlePress}
       style={{
         alignItems: "center",
         alignSelf: fullWidth ? "stretch" : "flex-start",
@@ -141,7 +172,7 @@ const ButtonComponent: FC<ButtonProps> = ({
         <Suspense fallback={null}>
           <LazyModal
             onDismiss={() => setShowConfirmation(false)}
-            primaryButtonOnClick={async () => {
+            primaryButtonOnClick={async (): Promise<void> => {
               await onClick();
               setShowConfirmation(false);
             }}
@@ -155,11 +186,11 @@ const ButtonComponent: FC<ButtonProps> = ({
           />
         </Suspense>
       )}
-    </Pressable>
+    </PressableComponent>
   );
 };
 
-export const Button: FC<ButtonProps> = (props) => {
+export const Button: React.FC<ButtonProps> = (props) => {
   const {tooltipText, tooltipIdealPosition, tooltipIncludeArrow = false} = props;
   const isMobileOrNative = isMobileDevice() || isNative();