@assistant-ui/react-native 0.1.36 → 0.1.38

package/src/primitives/threadList/ThreadListNew.test.tsx

@@ -5,11 +5,44 @@ import { ThreadListNew } from "./ThreadListNew";
 
 const h = vi.hoisted(() => ({
   switchToNewThread: vi.fn<() => void>(),
+  state: { threads: { newThreadId: "new", mainThreadId: "other" } },
+  pressableProps: null as Record<string, unknown> | null,
 }));
 
-vi.mock("@assistant-ui/core/react", () => ({
-  useThreadListNew: () => ({ switchToNewThread: h.switchToNewThread }),
-}));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useThreadListNew: () => ({ switchToNewThread: h.switchToNewThread }),
+  };
+});
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
+  };
+});
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+
+  const PressableMock = React.forwardRef(function PressableMock(
+    props: Record<string, unknown>,
+    ref: React.Ref<unknown>,
+  ) {
+    h.pressableProps = props;
+    return React.createElement(
+      actual.Pressable as unknown as React.ElementType,
+      { ...props, ref },
+    );
+  });
+
+  return { ...actual, Pressable: PressableMock };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -24,6 +57,8 @@ describe("ThreadListNew", () => {
 
   beforeEach(() => {
     h.switchToNewThread.mockReset();
+    h.state.threads = { newThreadId: "new", mainThreadId: "other" };
+    h.pressableProps = null;
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -50,6 +85,11 @@ describe("ThreadListNew", () => {
     return container.querySelector('[data-testid="t"]') as HTMLElement;
   };
 
+  const accessibilityState = () =>
+    h.pressableProps?.["accessibilityState"] as
+      | Record<string, unknown>
+      | undefined;
+
   it("fires switchToNewThread when pressed", async () => {
     const el = await mount();
 
@@ -69,4 +109,79 @@ describe("ThreadListNew", () => {
 
     expect(h.switchToNewThread).not.toHaveBeenCalled();
   });
+
+  it("marks itself selected while the new thread is the current one", async () => {
+    h.state.threads = { newThreadId: "new", mainThreadId: "new" };
+
+    await mount();
+
+    expect(accessibilityState()).toMatchObject({ selected: true });
+  });
+
+  it("is not selected while another thread is current", async () => {
+    await mount();
+
+    expect(accessibilityState()).toMatchObject({ selected: false });
+  });
+
+  it("keeps other accessibility state the caller passes", async () => {
+    h.state.threads = { newThreadId: "new", mainThreadId: "new" };
+
+    await mount({ accessibilityState: { busy: true } });
+
+    expect(accessibilityState()).toMatchObject({ selected: true, busy: true });
+  });
+
+  it("lets the caller override the selected state", async () => {
+    h.state.threads = { newThreadId: "new", mainThreadId: "new" };
+
+    await mount({ accessibilityState: { selected: false } });
+
+    expect(accessibilityState()).toMatchObject({ selected: false });
+  });
+
+  it("lets the caller select a control the state reports inactive", async () => {
+    await mount({ accessibilityState: { selected: true } });
+
+    expect(accessibilityState()).toMatchObject({ selected: true });
+  });
+
+  it("passes isActive alongside press state to render children", async () => {
+    h.state.threads = { newThreadId: "new", mainThreadId: "new" };
+    let renderState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <ThreadListNew testID="t">
+          {(state) => {
+            renderState = state;
+            return state.isActive ? "current" : "not current";
+          }}
+        </ThreadListNew>,
+      );
+    });
+
+    const el = container.querySelector('[data-testid="t"]') as HTMLElement;
+    expect(el.textContent).toBe("current");
+    expect(renderState).toMatchObject({ pressed: false, isActive: true });
+  });
+
+  it("reports an inactive render state while another thread is current", async () => {
+    let renderState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <ThreadListNew testID="t">
+          {(state) => {
+            renderState = state;
+            return state.isActive ? "current" : "not current";
+          }}
+        </ThreadListNew>,
+      );
+    });
+
+    const el = container.querySelector('[data-testid="t"]') as HTMLElement;
+    expect(el.textContent).toBe("not current");
+    expect(renderState).toMatchObject({ pressed: false, isActive: false });
+  });
 });

package/src/primitives/threadList/ThreadListNew.tsx

@@ -1,20 +1,43 @@
 import type { ReactNode } from "react";
-import { Pressable, type PressableProps } from "react-native";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
+import { useAuiState } from "@assistant-ui/store";
 import { useThreadListNew } from "@assistant-ui/core/react";
 
-export type ThreadListNewProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadListNewProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { isActive: boolean },
+      ) => ReactNode);
 };
 
 export const ThreadListNew = ({
   children,
+  accessibilityState,
   ...pressableProps
 }: ThreadListNewProps) => {
+  const isActive = useAuiState(
+    (s) => s.threads.newThreadId === s.threads.mainThreadId,
+  );
   const { switchToNewThread } = useThreadListNew();
 
   return (
-    <Pressable onPress={switchToNewThread} {...pressableProps}>
-      {children}
+    <Pressable
+      onPress={switchToNewThread}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive, ...accessibilityState }}
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? (state) => children({ ...state, isActive })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/threadListItem/ThreadListItemArchive.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useThreadListItemArchive } from "@assistant-ui/core/react";
 
-export type ThreadListItemArchiveProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadListItemArchiveProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ThreadListItemArchive = ({
@@ -13,7 +15,7 @@ export const ThreadListItemArchive = ({
   const { archive } = useThreadListItemArchive();
 
   return (
-    <Pressable onPress={archive} {...pressableProps}>
+    <Pressable onPress={archive} accessibilityRole="button" {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem/ThreadListItemDelete.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useThreadListItemDelete } from "@assistant-ui/core/react";
 
-export type ThreadListItemDeleteProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadListItemDeleteProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ThreadListItemDelete = ({
@@ -13,7 +15,11 @@ export const ThreadListItemDelete = ({
   const { delete: deleteThread } = useThreadListItemDelete();
 
   return (
-    <Pressable onPress={deleteThread} {...pressableProps}>
+    <Pressable
+      onPress={deleteThread}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
       {children}
     </Pressable>
   );

package/src/primitives/threadListItem/ThreadListItemTrigger.test.tsx

@@ -5,12 +5,41 @@ import { ThreadListItemTrigger } from "./ThreadListItemTrigger";
 
 const h = vi.hoisted(() => ({
   switchTo: vi.fn<() => void>(),
+  state: {
+    threads: { mainThreadId: "thread-1" },
+    threadListItem: { id: "thread-1" },
+  },
+  pressableProps: null as Record<string, unknown> | null,
 }));
 
 vi.mock("@assistant-ui/core/react", () => ({
   useThreadListItemTrigger: () => ({ switchTo: h.switchTo }),
 }));
 
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAuiState: <T,>(selector: (s: typeof h.state) => T) => selector(h.state),
+  };
+});
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  const React = await import("react");
+  const PressableMock = React.forwardRef(function PressableMock(
+    props: Record<string, unknown>,
+    ref: React.Ref<unknown>,
+  ) {
+    h.pressableProps = props;
+    return React.createElement(
+      actual.Pressable as unknown as React.ElementType,
+      { ...props, ref },
+    );
+  });
+  return { ...actual, Pressable: PressableMock };
+});
+
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
 const click = (el: Element) =>
@@ -24,6 +53,9 @@ describe("ThreadListItemTrigger", () => {
 
   beforeEach(() => {
     h.switchTo.mockReset();
+    h.state.threads.mainThreadId = "thread-1";
+    h.state.threadListItem.id = "thread-1";
+    h.pressableProps = null;
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -50,6 +82,11 @@ describe("ThreadListItemTrigger", () => {
     return container.querySelector('[data-testid="t"]') as HTMLElement;
   };
 
+  const accessibilityState = () =>
+    h.pressableProps?.["accessibilityState"] as
+      | Record<string, unknown>
+      | undefined;
+
   it("fires switchTo when pressed", async () => {
     const el = await mount();
 
@@ -69,4 +106,41 @@ describe("ThreadListItemTrigger", () => {
 
     expect(h.switchTo).not.toHaveBeenCalled();
   });
+
+  it("marks the current thread selected", async () => {
+    await mount();
+
+    expect(accessibilityState()).toMatchObject({ selected: true });
+  });
+
+  it("does not mark another thread selected", async () => {
+    h.state.threads.mainThreadId = "thread-2";
+
+    await mount();
+
+    expect(accessibilityState()).toMatchObject({ selected: false });
+  });
+
+  it("keeps caller accessibility state overrides", async () => {
+    await mount({ accessibilityState: { busy: true, selected: false } });
+
+    expect(accessibilityState()).toMatchObject({ busy: true, selected: false });
+  });
+
+  it("passes active state alongside the Pressable state", async () => {
+    let renderState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <ThreadListItemTrigger testID="t">
+          {(state) => {
+            renderState = state;
+            return "item";
+          }}
+        </ThreadListItemTrigger>,
+      );
+    });
+
+    expect(renderState).toMatchObject({ pressed: false, isActive: true });
+  });
 });

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,20 +1,43 @@
 import type { ReactNode } from "react";
-import { Pressable, type PressableProps } from "react-native";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
+import { useAuiState } from "@assistant-ui/store";
 import { useThreadListItemTrigger } from "@assistant-ui/core/react";
 
-export type ThreadListItemTriggerProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadListItemTriggerProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { isActive: boolean },
+      ) => ReactNode);
 };
 
 export const ThreadListItemTrigger = ({
   children,
+  accessibilityState,
   ...pressableProps
 }: ThreadListItemTriggerProps) => {
+  const isActive = useAuiState(
+    (s) => s.threads.mainThreadId === s.threadListItem.id,
+  );
   const { switchTo } = useThreadListItemTrigger();
 
   return (
-    <Pressable onPress={switchTo} {...pressableProps}>
-      {children}
+    <Pressable
+      onPress={switchTo}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive, ...accessibilityState }}
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? (state) => children({ ...state, isActive })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/threadListItem/ThreadListItemUnarchive.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useThreadListItemUnarchive } from "@assistant-ui/core/react";
 
-export type ThreadListItemUnarchiveProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ThreadListItemUnarchiveProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ThreadListItemUnarchive = ({
@@ -13,7 +15,11 @@ export const ThreadListItemUnarchive = ({
   const { unarchive } = useThreadListItemUnarchive();
 
   return (
-    <Pressable onPress={unarchive} {...pressableProps}>
+    <Pressable
+      onPress={unarchive}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
       {children}
     </Pressable>
   );

package/dist/runtimes/RemoteThreadListHookInstanceManager.d.ts

@@ -1,2 +0,0 @@
-import { RemoteThreadListHookInstanceManager } from "@assistant-ui/core/react";
-export { RemoteThreadListHookInstanceManager };

package/dist/runtimes/RemoteThreadListHookInstanceManager.js

@@ -1,2 +0,0 @@
-import { RemoteThreadListHookInstanceManager } from "@assistant-ui/core/react";
-export { RemoteThreadListHookInstanceManager };

package/dist/runtimes/RemoteThreadListThreadListRuntimeCore.d.ts

@@ -1,2 +0,0 @@
-import { RemoteThreadListThreadListRuntimeCore } from "@assistant-ui/core/react";
-export { RemoteThreadListThreadListRuntimeCore };

package/dist/runtimes/RemoteThreadListThreadListRuntimeCore.js

@@ -1,2 +0,0 @@
-import { RemoteThreadListThreadListRuntimeCore } from "@assistant-ui/core/react";
-export { RemoteThreadListThreadListRuntimeCore };

package/src/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -1 +0,0 @@
-export { RemoteThreadListHookInstanceManager } from "@assistant-ui/core/react";

package/src/runtimes/RemoteThreadListThreadListRuntimeCore.tsx

@@ -1 +0,0 @@
-export { RemoteThreadListThreadListRuntimeCore } from "@assistant-ui/core/react";