@terreno/ui 0.14.0 → 0.14.2

package/src/Banner.test.tsx

@@ -2,7 +2,7 @@ import {describe, expect, it, mock} from "bun:test";
 import {act, fireEvent, waitFor} from "@testing-library/react-native";
 import React from "react";
 
-import {Banner} from "./Banner";
+import {Banner, hideBanner} from "./Banner";
 import {renderWithTheme} from "./test-utils";
 import {Unifier} from "./Unifier";
 
@@ -168,4 +168,110 @@ 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();
+  });
+
+  it("hideBanner persists the banner id to storage", async () => {
+    const setItemMock = Unifier.storage.setItem as ReturnType<typeof mock>;
+    setItemMock.mockClear();
+
+    await hideBanner("my-banner");
+    expect(setItemMock).toHaveBeenCalledWith("@TerrenoUI:my-banner", "true");
+  });
+
+  it("renders with button loading state", () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {toJSON} = renderWithTheme(
+      <Banner
+        buttonOnClick={handleClick}
+        buttonText="Loading"
+        id="test-banner"
+        loading
+        text="Banner loading"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders banner with dismissible=true and no id (non-persistent dismiss)", async () => {
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <Banner dismissible text="Non persistent" />
+    );
+    expect(queryByText("Non persistent")).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(getByLabelText("Dismiss"));
+    });
+    await waitFor(() => {
+      expect(queryByText("Non persistent")).toBeNull();
+    });
+  });
 });

package/src/Common.ts

@@ -395,12 +395,12 @@ export const SPACING_MAP = {
   12: 80,
 };
 
-export function getSpacing(spacing: SignedUpTo12) {
+export const getSpacing = (spacing: SignedUpTo12) => {
   if (spacing < 0) {
     return SPACING_MAP[Math.abs(spacing) as UnsignedUpTo12] * -1;
   }
   return SPACING_MAP[spacing as UnsignedUpTo12];
-}
+};
 
 export type TextFieldType =
   | "date"
@@ -753,9 +753,9 @@ const ROUNDING_MAP = {
   xl: 32,
 };
 
-export function getRounding(rounding: Rounding) {
+export const getRounding = (rounding: Rounding) => {
   return ROUNDING_MAP[rounding];
-}
+};
 
 export interface HeadingProps {
   align?: "left" | "right" | "center" | "justify"; // default "left"
@@ -1965,6 +1965,12 @@ export interface PageProps {
   rightButtonOnClick?: () => void;
   children?: ReactChildren;
   onError?: (error: Error, stack: string) => void;
+  /**
+   * When true, wraps content in SafeAreaView so it respects top/bottom device
+   * insets (camera notches, home indicator, status bar). Opt-in to avoid
+   * regressing existing screens that handle insets at the navigation level.
+   */
+  safeArea?: boolean;
 }
 
 export interface ProgressBarProps {

package/src/ConsentFormScreen.test.tsx

@@ -2,6 +2,7 @@ import {describe, expect, it, mock} from "bun:test";
 import {act, fireEvent} from "@testing-library/react-native";
 
 import {ConsentFormScreen} from "./ConsentFormScreen";
+import {SignatureField} from "./SignatureField";
 import {renderWithTheme} from "./test-utils";
 import type {ConsentFormPublic} from "./useConsentForms";
 
@@ -334,4 +335,25 @@ describe("ConsentFormScreen", () => {
     });
     expect(queryByTestId("consent-footer-checkboxes-hint")).toBeNull();
   });
+
+  it("exercises SignatureField onChange, onStart, and onEnd callbacks", () => {
+    const form: ConsentFormPublic = {
+      ...baseForm,
+      captureSignature: true,
+    };
+    const {UNSAFE_getByType} = renderWithTheme(
+      <ConsentFormScreen form={form} locale="en" onAgree={() => {}} />
+    );
+    const sig = UNSAFE_getByType(SignatureField);
+    act(() => {
+      sig.props.onChange("data:image/png;base64,abc");
+    });
+    act(() => {
+      sig.props.onStart();
+    });
+    act(() => {
+      sig.props.onEnd();
+    });
+    expect(sig).toBeTruthy();
+  });
 });

package/src/ConsentFormScreen.tsx

@@ -3,8 +3,10 @@ import {
   type LayoutChangeEvent,
   type NativeScrollEvent,
   type NativeSyntheticEvent,
+  Platform,
   Pressable,
   ScrollView,
+  View,
 } from "react-native";
 
 import {Box} from "./Box";
@@ -166,7 +168,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
   );
 
   return (
-    <Page color="base" footer={footer} maxWidth="100%" scroll={false} title={form.title}>
+    <Page color="base" footer={footer} maxWidth="100%" safeArea scroll={false} title={form.title}>
       <ScrollView
         onContentSizeChange={handleContentSizeChange}
         onLayout={handleLayout}
@@ -212,7 +214,11 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
           )}
 
           {Boolean(form.captureSignature) && (
-            <Box direction="column" gap={2} testID="consent-form-signature">
+            <View
+              onTouchEnd={Platform.OS === "ios" ? () => setScrollEnabled(true) : undefined}
+              onTouchStart={Platform.OS === "ios" ? () => setScrollEnabled(false) : undefined}
+              testID="consent-form-signature"
+            >
               <SignatureField
                 onChange={(value) => setSignatureValue(value)}
                 onEnd={() => setScrollEnabled(true)}
@@ -220,7 +226,7 @@ export const ConsentFormScreen: React.FC<ConsentFormScreenProps> = ({
                 title="Signature"
                 value={signatureValue}
               />
-            </Box>
+            </View>
           )}
 
           {Boolean(form.requireScrollToBottom && !hasScrolledToBottom) && (

package/src/DataTable.test.tsx

@@ -1,6 +1,8 @@
 // biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
+import {act} from "@testing-library/react-native";
 
+import type {DataTableCustomComponentMap, DataTableProps} from "./Common";
 import {DataTable} from "./DataTable";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
@@ -114,7 +116,7 @@ describe("DataTable", () => {
       <DataTable
         columns={sampleColumns}
         data={sampleData}
-        moreContentComponent={MoreContent as any}
+        moreContentComponent={MoreContent as unknown as DataTableProps["moreContentComponent"]}
       />
     );
     expect(toJSON()).toMatchSnapshot();
@@ -131,4 +133,394 @@ describe("DataTable", () => {
     const {toJSON} = renderWithTheme(<DataTable columns={sampleColumns} data={[]} />);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("handles sort cycling: none -> asc -> desc -> none", () => {
+    const sortableColumns = [
+      {columnType: "text", sortable: true, title: "Name", width: 150},
+      {columnType: "text", sortable: false, title: "Age", width: 100},
+    ];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}, {value: "28"}]]}
+        setSortColumn={setSortColumn}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    // Find the sort pressable (has hitSlop=16)
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+    expect(sortPressable).toBeTruthy();
+
+    const {fireEvent} = require("@testing-library/react-native");
+    // First click: none -> asc
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "asc"});
+  });
+
+  it("handles sort from asc to desc", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "asc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+
+    const {fireEvent} = require("@testing-library/react-native");
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "desc"});
+  });
+
+  it("handles sort from desc to none", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_sort?: {column: number; direction: string}) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "desc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortPressable = pressables.find(
+      (p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16
+    );
+
+    const {fireEvent} = require("@testing-library/react-native");
+    fireEvent.press(sortPressable!);
+    expect(setSortColumn).toHaveBeenCalledWith(undefined);
+  });
+
+  it("handles sort on non-sortable column (no-op)", () => {
+    const columns = [{columnType: "text", sortable: false, title: "Name", width: 150}];
+    const setSortColumn = mock(() => {});
+    renderWithTheme(
+      <DataTable columns={columns} data={[[{value: "Alice"}]]} setSortColumn={setSortColumn} />
+    );
+    // No sort pressable rendered for non-sortable columns, so no action needed
+    expect(setSortColumn).not.toHaveBeenCalled();
+  });
+
+  it("syncs scroll between header and body via refs", () => {
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sampleColumns} data={sampleData} pinnedColumns={1} />
+    );
+
+    const {ScrollView: ScrollViewComp} = require("react-native");
+    const scrollViews = UNSAFE_getAllByType(ScrollViewComp);
+    expect(scrollViews.length).toBeGreaterThan(0);
+
+    // Inject mock scrollTo on the refs so handleScroll branches execute
+    const mockScrollTo = mock((_opts: {animated: boolean; x: number}) => {});
+    for (const sv of scrollViews) {
+      if (sv.props.horizontal) {
+        const fiber = (sv as unknown as {_fiber?: {ref?: {current: unknown}}})._fiber;
+        if (fiber?.ref && typeof fiber.ref === "object") {
+          fiber.ref.current = {scrollTo: mockScrollTo};
+        }
+      }
+    }
+
+    const {fireEvent} = require("@testing-library/react-native");
+    // Find header scroll (onScroll passes isHeader=true)
+    const headerScroll = scrollViews.find(
+      (sv: {props: {horizontal?: boolean; showsHorizontalScrollIndicator?: boolean}}) =>
+        sv.props.horizontal && sv.props.showsHorizontalScrollIndicator === false
+    );
+    // Find body scroll (onScroll passes isHeader=false)
+    const bodyScroll = scrollViews.find(
+      (sv: {props: {horizontal?: boolean; showsHorizontalScrollIndicator?: boolean}}) =>
+        sv.props.horizontal && sv.props.showsHorizontalScrollIndicator === true
+    );
+
+    if (headerScroll) {
+      fireEvent.scroll(headerScroll, {
+        nativeEvent: {contentOffset: {x: 50, y: 0}},
+      });
+    }
+    if (bodyScroll) {
+      fireEvent.scroll(bodyScroll, {
+        nativeEvent: {contentOffset: {x: 75, y: 0}},
+      });
+    }
+
+    expect(mockScrollTo).toHaveBeenCalled();
+  });
+
+  it("renders with custom column component map", () => {
+    const CustomComponent = ({cellData}: {cellData: {value: unknown}}) => (
+      <Text>Custom: {String(cellData.value)}</Text>
+    );
+    const customColumns = [{columnType: "custom", title: "Custom Col", width: 150}];
+    const customData = [[{value: "test"}]];
+    const {getByText} = renderWithTheme(
+      <DataTable
+        columns={customColumns}
+        customColumnComponentMap={{custom: CustomComponent as any}}
+        data={customData}
+      />
+    );
+    expect(getByText("Custom: test")).toBeTruthy();
+  });
+
+  it("renders with infoModalText on column header", () => {
+    const columnsWithInfo = [
+      {columnType: "text", infoModalText: "**Help text**", title: "Name", width: 150},
+    ];
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={columnsWithInfo} data={[[{value: "Alice"}]]} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders with cell highlight", () => {
+    const highlightData = [[{highlight: "primary", value: "Highlighted"}]];
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={[{columnType: "text", title: "Name", width: 150}]} data={highlightData} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders with moreContentExtraData", () => {
+    const MoreContent = ({rowIndex, extraInfo}: {rowIndex: number; extraInfo?: string}) => (
+      <Text>
+        Row {rowIndex}: {extraInfo}
+      </Text>
+    );
+    const {toJSON} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as any}
+        moreContentExtraData={[{extraInfo: "info1"}, {extraInfo: "info2"}, {extraInfo: "info3"}]}
+      />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("opens and dismisses more content modal via MoreButtonCell press", async () => {
+    const MoreContent = ({rowIndex}: {rowIndex: number}) => <Text>Detail for row {rowIndex}</Text>;
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as any}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const {fireEvent} = require("@testing-library/react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+
+    // Find the info/eye icon pressable (MoreButtonCell has accessibilityHint="View details")
+    const moreBtn = pressables.find(
+      (p: {props: {accessibilityHint?: string}}) => p.props.accessibilityHint === "View details"
+    );
+    expect(moreBtn).toBeTruthy();
+
+    // Press to open modal
+    await act(async () => {
+      fireEvent.press(moreBtn!);
+    });
+
+    // Find the modal dismiss pressable and press it
+    const {Modal: ModalComp} = require("./Modal");
+    const modals = UNSAFE_getAllByType(ModalComp);
+    if (modals.length > 0 && modals[0].props.onDismiss) {
+      await act(async () => {
+        modals[0].props.onDismiss();
+      });
+    }
+  });
+
+  it("renders with customColumnComponentMap", () => {
+    const CustomCell = ({cellData}: {cellData: {value: unknown}; column: unknown}) => (
+      <Text>Custom: {String(cellData.value)}</Text>
+    );
+    const customColumns = [
+      {columnType: "custom", title: "Custom Col", width: 150},
+      {columnType: "text", title: "Name", width: 100},
+    ];
+    const customData = [[{value: "A"}, {value: "Bob"}]];
+    const {getByText} = renderWithTheme(
+      <DataTable
+        columns={customColumns}
+        customColumnComponentMap={{custom: CustomCell} as DataTableCustomComponentMap}
+        data={customData}
+      />
+    );
+    expect(getByText("Custom: A")).toBeTruthy();
+  });
+
+  it("handleSort cycles through asc, desc, and clear", () => {
+    const sortableColumns = [
+      {columnType: "text", sortable: true, title: "Name", width: 150},
+      {columnType: "text", sortable: false, title: "Age", width: 100},
+    ];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}, {value: "28"}]]}
+        setSortColumn={setSortColumn}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+    expect(sortButton).toBeTruthy();
+
+    // First press: asc
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "asc"});
+  });
+
+  it("handleSort from asc to desc", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "asc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith({column: 0, direction: "desc"});
+  });
+
+  it("handleSort from desc clears sort", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sortableColumns}
+        data={[[{value: "Alice"}]]}
+        setSortColumn={setSortColumn}
+        sortColumn={{column: 0, direction: "desc"}}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    act(() => {
+      sortButton!.props.onPress();
+    });
+    expect(setSortColumn).toHaveBeenCalledWith(undefined);
+  });
+
+  it("handleSort does nothing for non-sortable column", () => {
+    const columns = [{columnType: "text", sortable: false, title: "Name", width: 150}];
+    const setSortColumn = mock((_val: unknown) => {});
+    const {toJSON} = renderWithTheme(
+      <DataTable columns={columns} data={[[{value: "Alice"}]]} setSortColumn={setSortColumn} />
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("handleScroll syncs header and body scroll positions", () => {
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sampleColumns} data={sampleData} pinnedColumns={1} />
+    );
+
+    const {ScrollView: ScrollViewComp} = require("react-native");
+    const scrollViews = UNSAFE_getAllByType(ScrollViewComp);
+    const horizontalScrollViews = scrollViews.filter(
+      (sv: {props: {horizontal?: boolean}}) => sv.props.horizontal
+    );
+
+    if (horizontalScrollViews.length >= 2) {
+      // Trigger scroll on the body scroll view
+      act(() => {
+        horizontalScrollViews[1].props.onScroll({
+          nativeEvent: {contentOffset: {x: 50, y: 0}},
+        });
+      });
+
+      // Trigger scroll on the header scroll view
+      act(() => {
+        horizontalScrollViews[0].props.onScroll({
+          nativeEvent: {contentOffset: {x: 100, y: 0}},
+        });
+      });
+    }
+  });
+
+  it("renders with cell highlight color", () => {
+    const highlightData = [[{highlight: "primary", value: "Highlighted"}]];
+    const highlightColumns = [{columnType: "text", title: "Col", width: 150}];
+    const {toJSON} = renderWithTheme(<DataTable columns={highlightColumns} data={highlightData} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("opens and closes more content modal", () => {
+    const MoreContent = ({rowIndex}: {rowIndex: number}) => <Text>Row {rowIndex} details</Text>;
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable
+        columns={sampleColumns}
+        data={sampleData}
+        moreContentComponent={MoreContent as unknown as DataTableProps["moreContentComponent"]}
+      />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    // Find the "Open modal" button (MoreButtonCell)
+    const moreButton = pressables.find(
+      (p: {props: {accessibilityLabel?: string}}) => p.props.accessibilityLabel === "Open modal"
+    );
+
+    if (moreButton) {
+      act(() => {
+        moreButton.props.onPress();
+      });
+    }
+  });
+
+  it("handleSort with no setSortColumn is a no-op", () => {
+    const sortableColumns = [{columnType: "text", sortable: true, title: "Name", width: 150}];
+    const {UNSAFE_getAllByType} = renderWithTheme(
+      <DataTable columns={sortableColumns} data={[[{value: "Alice"}]]} />
+    );
+
+    const {Pressable: PressableComp} = require("react-native");
+    const pressables = UNSAFE_getAllByType(PressableComp);
+    const sortButton = pressables.find((p: {props: {hitSlop?: number}}) => p.props.hitSlop === 16);
+
+    if (sortButton) {
+      act(() => {
+        sortButton.props.onPress();
+      });
+    }
+  });
 });